Figma MCPを攻略して最高のコード生成を実現する

claude mcp add --transport sse figma-mcp http://127.0.0.1:3845/sse

このFigmaデザインを分析して、Next.jsのコンポーネントを生成してください。
[Figmaリンクを貼り付け]

FigmaのこのデザインからNext.js（App Router）のコードを生成してください。TypeScriptとTailwind CSSを使用してください。

export default function LandingPage() {
  return (
    div className="w-[1440px] h-[3000px] bg-white"> {}
      div className="absolute top-0 left-0 w-full h-20 bg-blue-500"> {}
        span className="text-lg font-medium text-black">Headerspan> {}
      div>
      div className="absolute top-20 left-0 w-full h-600px"> {}
        h1 className="text-6xl font-bold text-red-500">Hero Titleh1> {}
      div>
      {}
    div>
  );
}

推奨構造：
Container (Auto Layout: Vertical, Fill)
├── Header (Auto Layout: Horizontal, Hug vertical, Fill horizontal)
├── Main (Auto Layout: Vertical, Fill both)
│   ├── HeroSection (Auto Layout: Vertical, Hug vertical, Fill horizontal)
│   ├── FeatureSection (Auto Layout: Horizontal, Hug vertical, Fill horizontal)
│   └── ...
└── Footer (Auto Layout: Horizontal, Hug vertical, Fill horizontal)

カラーパレット:
- primary-50: #eff6ff
- primary-500: #3b82f6
- primary-900: #1e3a8a

スペーシング:
- xs: 4px
- sm: 8px
- md: 16px
- lg: 24px
- xl: 32px

タイポグラフィ:
- heading-xl: 48px/1.2/700
- heading-lg: 32px/1.3/600
- body-md: 16px/1.5/400

✅ 良い例（AIが理解しやすい）:
- HeaderNavigation
- HeroSection  
- FeatureCard
- CTAButton

❌ 悪い例（AIが理解しにくい）:
- Frame 123
- Group 1
- Rectangle 45
- Text

主要コンポーネント:
├── Button (variants: primary, secondary, size: sm, md, lg)
├── Card (variants: default, featured)
├── Typography (variants: h1, h2, body, caption)
└── Layout (variants: header, main, footer)

FigmaのこのデザインからNext.jsのコードを生成してください。

Figmaの選択したコンポーネントから以下の仕様でNext.jsコードを生成してください：

【技術仕様】
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- コンポーネント: Client Component（'use client'使用）

【構造要件】
- レスポンシブ対応（mobile-first）
- セマンティックなHTML構造
- アクセシビリティ対応（aria-label等）
- Next.js Image/Linkコンポーネント使用

【デザイントークン】
#get_variable_defs ツールを使用してFigma変数を取得し、Tailwindクラスに変換

【コンポーネント分割】
- 各セクションを独立したコンポーネントに分割
- propsインターフェースを適切に定義
- 再利用可能な設計

'use client'

import Image from 'next/image'
import Link from 'next/link'


interface HeroSectionProps {
  title: string
  subtitle: string
  ctaText: string
  backgroundImage: string
}

export default function HeroSection({
  title,
  subtitle,
  ctaText,
  backgroundImage
}: HeroSectionProps) {
  return (
    section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {}
      div className="absolute inset-0 z-0">
        Image
          src={backgroundImage}
          alt="Hero background"
          fill
          className="object-cover"
          priority
        />
        div className="absolute inset-0 bg-slate-900/50" />
      div>
      
      {}
      div className="relative z-10 max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
        h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight">
          {title}
        h1>
        p className="text-lg sm:text-xl md:text-2xl text-slate-100 mb-8 max-w-3xl mx-auto leading-relaxed">
          {subtitle}
        p>
        Link
          href="#features"
          className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-slate-900 bg-white rounded-lg hover:bg-slate-50 transition-colors duration-200 focus:ring-4 focus:ring-white/20"
          role="button"
          aria-label={`${ctaText} - 機能セクションへ移動`}
        >
          {ctaText}
        Link>
      div>
    section>
  )
}

npm install -g @playwright/mcp


npm install pixelmatch pngjs


claude mcp add --transport stdio playwright-mcp npx @playwright/mcp

Figma MCPで生成したHeroSectionコンポーネントが、元のFigmaデザインと一致しているか確認してください。

Playwright MCPを使用して以下を実行：
1. http://localhost:3000 に移動
2. HeroSectionのスクリーンショットを撮影
3. 撮影した画像を表示して視覚的に確認
4. Figmaデザインと比較して相違点を指摘してください

AIが実行するPlaywright MCPコマンド例：

1. ページナビゲーション：
   - browser_navigate: http://localhost:3000

2. ビューポートサイズ調整：
   - browser_resize: width: 1440, height: 900

3. スクリーンショット撮影：
   - browser_take_screenshot (フルページまたは要素指定)

4. AIによる視覚分析：
   撮影されたスクリーンショットを確認して、Figmaデザインと比較分析

✅ スクリーンショット撮影完了

【視覚分析結果】
撮影した実装画像を確認しました：

❌ 発見された相違点:
1. ヒーロータイトル
   - フォントサイズが小さく見える（期待値より約10%小さい）
   - 行間が狭い

2. CTAボタン
   - 角の丸みが少ない
   - パディングが不足している

3. 背景色
   - グラデーションの終点が薄い
   - Figmaより彩度が低い

✅ 一致している要素:
- 全体レイアウト構造
- テキストの配置
- レスポンシブ表示

推奨修正:
- text-4xl → text-5xl に変更
- rounded-md → rounded-lg に変更
- px-6 py-3 → px-8 py-4 に変更

【検証結果】Figmaデザインとの比較

❌ 発見された問題:
1. ヒーロータイトルのフォントサイズ
   - Figma: 48px (heading-xl)
   - 実装: 42px
   - 修正必要: font-size クラスを text-5xl に変更

2. CTAボタンの色
   - Figma: #3B82F6 (primary-500)  
   - 実装: #60A5FA (primary-400)
   - 修正必要: bg-primary-500 クラスを適用

3. スペーシング
   - Figma: 上下マージン 64px
   - 実装: 上下マージン 48px
   - 修正必要: py-16 を適用

4. レスポンシブブレークポイント
   - モバイル表示でタイトルが2行になっていない
   - Figmaデザインでは1行表示の指定

✅ 一致している要素:
- 全体のレイアウト構造
- カラーパレットの基本適用
- コンポーネントの配置

【自動生成された修正コード】

// 修正前


// 修正後  


// CTAボタンの修正

  
// 修正後

開発者: 「HeroSectionのボタンサイズを修正しました。
        Playwright MCPでスクリーンショットを撮って、
        Figmaデザインと比較してください」

AI: ✅ スクリーンショット完了
    修正後のボタンサイズがFigmaデザインに一致しています。
    パディングとフォントサイズが正確に適用されています。

FigmaからNext.jsのコードを生成してください。

以下のFigmaリンクからNext.jsコンポーネントを生成してください：

[Figmaリンクを貼り付け]

【必須実行手順】
1. get_variable_defs でFigma変数（色・スペーシング・タイポ）を取得
2. get_code でコンポーネント構造情報を取得
3. 上記情報を基にコード生成

【技術仕様】
- Next.js 14 App Router + TypeScript
- Tailwind CSS（Figma変数をクラスに変換）
- Client Component（'use client' 使用）
- レスポンシブ対応（sm: md: lg: 使用）

【品質要件】
- セマンティックHTML構造
- Next.js Image/Linkコンポーネント使用
- Props interfaceでTypeScript強化
- data-testid属性をコンポーネントに追加

【注意事項】
- Auto Layoutの構造を正確に反映
- デザイントークンの色コードを直接記述しない
- コンポーネント名はFigmaレイヤー名に準拠

実装してください。

HeroSectionコンポーネントを実装中です。

【現在の問題】
生成されたコードでボタンの色が #60A5FA になっていますが、
Figmaでは primary-500 (#3B82F6) の指定です。

【修正要求】
1. get_variable_defs でprimary-500の正確な値を確認
2. bg-primary-400 → bg-primary-500 に修正
3. ホバー時のスタイル（hover:bg-primary-600）も追加

この修正を反映したコードを生成してください。