morphy-design

MORPHY DESIGN セットアップ CLI（public npm 配布）。

前提条件

必須

• Node.js 18+
• React 18 または 19（package.json に含まれていること）
• Tailwind CSS v4
• Claude Code — hook・MCP・スキルの実行に必要
• Next.js App Router — /implement-screen /screen-spec /task-decompose /iterate 等の AI ワークフローは app/{route}/page.tsx 前提でコード生成・パススキャンする

推奨

• TypeScript — コンポーネントは TSX で提供

はじめ方

1. morphy-design-ui を入れる

npm install morphy-design-ui

これで import { Button } from "morphy-design-ui" と、morphy-design-ui/tokens のトークン CSS が使える。

CLI で MCP / hooks / DESIGN.md をセットアップ

morphy-design を追加すると、Claude Code 連携（DESIGN.md・design-review スキル・.mcp.json・.claude/hooks/）が薄く配れる：

npm install -D morphy-design
npx morphy-design install

これは npm install を勝手に実行しない。Claude Code 設定ファイルの配置のみ行う。

更新

npx morphy-design update

DESIGN.md と foundations を最新化する。

旧 fork-copy 方式（任意）

.morphy-design/ ディレクトリ全体をプロジェクトに配布する旧方式は --legacy-fork の裏に退避：

npx morphy-design install --legacy-fork

新規採用では使わない。

インストールされるもの（新 install）

• DESIGN.md — デザイン品質ゲートのハブファイル
• .mcp.json — MCP サーバー設定（既存にマージ）
• .claude/hooks/ — TSX 編集時の自動チェック
• .claude/skills/design-review/ — デザインレビュースキル
• .claude/settings.json — hooks・MCP の設定（既存設定にマージ）

既存プロジェクトへの導入

morphy-design-ui のみ入れたい場合は CLI なしで OK：

npm install morphy-design-ui

CLI（morphy-design）を別途入れると MCP / hooks / DESIGN.md もセットアップできる。