社内デザインシステムMCPとFigma MCPを活用したゼロから作らない開発

import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';

// MCPサーバーを作成
const server = new Server(
  { name: 'design-system-mcp', version: '1.0.0' },
  { capabilities: { tools: {} } }
);

// ツール一覧を定義
server.setRequestHandler(ListToolsRequestSchema, async () => ({
  tools: [
    {
      name: 'search_components',
      description: 'デザインシステムコンポーネントを検索',
      inputSchema: { /* query, category, limit */ }
    },
    {
      name: 'get_component_usage',
      description: 'コンポーネントの詳細な使用例を取得',
      inputSchema: { /* componentName */ }
    },
    {
      name: 'get_design_tokens',
      description: 'デザイントークン（CSS変数）を取得',
      inputSchema: { /* category */ }
    }
  ]
}));

// ツール実行ハンドラー
server.setRequestHandler(CallToolRequestSchema, async (request) => {
  const { name, arguments: args } = request.params;
  const result = await executeToolByName(name, args);

  return {
    content: [{ type: 'text', text: JSON.stringify(result) }]
  };
});

const transport = new StdioServerTransport();
await server.connect(transport);

src/
├── loaders/
│   ├── storybook-loader.ts        # Storybook の情報を取得
│   ├── design-tokens-loader.ts    # global.css からデザイントークンを取得
│   └── simple-props-extractor.ts  # コンポーネント定義から props 情報を補完
├── tools/
│   ├── search-components.ts       # コンポーネント検索
│   └── get-usage.ts               # 使用例取得
└── index.ts

### 使用方法

/figma-to-design <Figma URL> [作成パス]

FigmaのURLを指定するだけで、デザインシステムコンポーネントを使用したReactコンポーネントが自動生成されます。

### 実行プロセス

このコマンドは、複数のMCPサーバーを連携させて動作します：

1. **引数の解析**: Figma URLからnode IDを抽出し、作成パスを決定
2. **Figmaデザイン情報の取得** (figma-mcp): デザインの構造、コンポーネント、スタイル情報を取得
3. **design-systemコンポーネントライブラリの調査** (design-system-mcp): 利用可能なコンポーネント一覧を取得し、Figmaデザインに必要なコンポーネントを特定
4. **コンポーネント仕様の動的取得** (design-system-mcp): 特定されたコンポーネントの実装例とPropsを取得
5. **ファイル生成**: 指定されたパスに以下のファイルを生成
   - `index.tsx`: メインコンポーネントファイル
   - `component-name.module.css`: CSS Modulesファイル
   - `component-name.stories.tsx`: Storybookストーリーファイル

### 生成ガイドライン

生成されるコードは、以下の原則に従います：

- **コンポーネント優先**: design-systemの既存コンポーネントを最大限活用
- **デザイントークン**: design-system-mcpで取得した実際のトークンのみを使用（推測での作成は禁止）
- **TypeScript**: 厳格な型定義
- **アクセシビリティ**: セマンティックHTMLとARIA属性を考慮
- **構造の最適化**: 余計なネストを避けて必要最小限の構造に

### 出力例

```typescript
// index.tsx
import { Button } from '@design-system/components/button';
import styles from './component-name.module.css';

type Props = {
  readonly title: string;
};

export function GeneratedComponent({ title }: Props) {
  return (
    <Button variant="primary" className={styles.button}>
      {title}
    </Button>
  );
}

/* component-name.module.css */
.button {
  /* 実際に存在するdesign-systemトークンのみを使用 */
  background: var(--design-bg-base);
  padding: 12px 24px; /* デザインシステムにない値はハードコーディング */
}

import {Button} from '@design-system/components/button';
import {ExternalLink} from '@design-system/components/link';
import styles from './company-profile.module.css';

type ProfileField = {
  readonly label: string;
  readonly value: string;
};

type Props = {
  readonly fields: readonly ProfileField[];
  readonly onEditClick: () => void;
  readonly publicPageUrl?: string;
};

export function CompanyPage({fields, onEditClick, publicPageUrl}: Props) {
  return (
    <div className={styles.container}>
      <header className={styles.header}>
        <div className={styles.headerLeft}>
          <h1 className={styles.title}>企業プロフィール</h1>
          {publicPageUrl !== undefined && publicPageUrl !== '' ? (
            <div className={styles.publicPageLinkWrapper}>
              <ExternalLink
                href={publicPageUrl}
                text='公開済みページ'
                size='small'
              />
            </div>
          ) : null}
        </div>
        <Button
          variant='filled'
          color='primary'
          size='large'
          onClick={onEditClick}
        >
          情報を変更
        </Button>
      </header>

      <section className={styles.profileSection}>
        {fields.map((field, index) => (
          <div
            key={field.label}
            className={
              index === fields.length - 1
                ? styles.profileRowLast
                : styles.profileRow
            }
          >
            <div className={styles.fieldLabel}>{field.label}</div>
            <div className={styles.fieldValue}>{field.value}</div>
          </div>
        ))}
      </section>
    </div>
  );
}