morphy-design-ui

MORPHY DESIGN のコンポーネントライブラリ。React + Tailwind v4 向け。

前提条件

• Node.js 18+
• React 18 または 19（peer dependency）
• Tailwind CSS v4 — コンポーネントが Tailwind class を使用

ヒント: デザイン品質ゲート（Claude Code hook・MCP・スキル）も一緒に導入したい場合は npx morphy-design install を使うと自動で揃います。

インストール

npm install morphy-design-ui
node node_modules/morphy-design-ui/scripts/install.mjs

2コマンドに分かれている理由: セキュリティのため、npm install では Claude Code ファイルへの書き込みを行いません。install.mjs をユーザーが明示的に実行することで、何が起きるかを把握した上でセットアップできます。

install.mjs で配置されるもの:

| 何が届くか | どこに | |---|---| | デザインガイド（1 枚） | DESIGN.md | | デザインスキル（/design-review など 17 個） | .claude/skills/ | | 設計ナレッジベース | foundations/ | | コンポーネントソース（140+） | node_modules/.../src/components/ | | デザイントークン | node_modules/.../src/tokens/ |

CSS トークンの読み込み

/* globals.css */
@import "morphy-design-ui/tokens";

コンポーネントの使い方

import { Button, Card, TextInput } from "morphy-design-ui";

export function Example() {
  return (
    <Card>
      <TextInput label="名前" placeholder="山田 太郎" />
      <Button variant="primary" size="md">保存</Button>
    </Card>
  );
}

Claude Code MCP サーバー

Claude Code からコンポーネント一覧の参照・ソースの取得・プロジェクトへの追加をリアルタイムで行えます。

セットアップ

プロジェクトルートに .mcp.json を作成:

{
  "mcpServers": {
    "morphy": {
      "command": "node",
      "args": ["node_modules/morphy-design-ui/scripts/mcp.mjs"]
    }
  }
}

Claude Code を再起動すると morphy ツールが利用可能になります。

利用可能なツール

| ツール | 説明 | |---|---| | list_components | 利用可能な全コンポーネントを一覧表示 | | get_component | props・do/dont・TSX ソースを取得 | | add_component | TSX ソースをプロジェクトにコピー | | get_design_tokens | デザイントークン値をカテゴリで絞り込み取得 |

使用例

Claude Code 上で自然言語で操作できます:

• 「使えるコンポーネントを一覧で見せて」
• 「DataTable の props を教えて」
• 「Button を components/morphy/ に追加して」
• 「color トークンの値を確認したい」

スキル

インストール後に以下のスキルが .claude/skills/ に配置されます:

• /design-review — MORPHY DESIGN 準拠チェック