Figma MCPを活かすためのデータ作りとプロンプト 20パターンの検証で分かったこと

Please generate a React TypeScript component with Tailwind CSS from the Figma page [PAGE_NAME] in [FIGMA_URL].

IMPORTANT Requirements:

1. Variables Mapping:
   - Map Figma Variables to standard Tailwind classes
   - Use `bg-slate-50` instead of `bg-[var(--slate-50)]`
   - Use `text-sm` instead of `text-[length:var(--size-sm)]`
2. Semantic HTML:
   - Use semantic elements (`header`, `nav`, `main`, `aside`, `footer`)
   - Use <button> for interactive elements
   - Use <a> for links
3. Interactive Elements:
   - Add hover states (hover:text-blue-600)
   - Add transitions (transition-colors)
   - Add focus states where appropriate
4. Code Quality:
   - Use TypeScript interfaces for props and data
   - Use data-driven approach with .map() for repeated elements
   - Next.js Image/Link components where applicable
   - Clean, production-ready code

Use @figma-mcp-server to access the design.

Please generate a React TypeScript component with Tailwind CSS from the Figma page [PAGE_NAME] in [FIGMA_URL].

Use @figma-mcp-server to access the design.

Generate clean, production-ready code following React best practices.

// v0000: 全要素無効
<div className="bg-slate-50 relative size-full">
  <div className="absolute h-[304px] left-[24px] top-[24px] w-[256px]">
    <div className="absolute h-[232px] left-0 top-0 w-[256px]">
      <div className="absolute bg-blue-100 h-[40px] left-0 rounded-[8px] top-0 w-[256px]">
        {/* コンテンツ */}
      </div>
    </div>
  </div>
</div>

// v0000: ベースライン(Variables無し)
className="text-[length:var(--size-sm,14px)]"
className="rounded-[var(--radius-lg,8px)]"

// v1000: Variables有効
className="text-[length:var(--size-sm,14px)]"  // 変わらず
className="rounded-[var(--radius-lg,8px)]"     // 変わらず

// v0000: ベースライン（絶対配置）
<div className="absolute h-[304px] left-[24px] top-[24px] w-[256px]">
  <div className="absolute h-[232px] left-0 top-0 w-[256px]">
    <div className="absolute bg-blue-100 h-[40px] left-0 rounded-[8px] top-0 w-[256px]">
      {/* コンテンツ */}
    </div>
  </div>
</div>

// v0100: Auto Layout有効（flex）
<div className="flex flex-col gap-[var(--size-8,32px)]">
  <div className="flex flex-col gap-[var(--size-2,8px)]">
    <div className="bg-blue-100 rounded-[var(--radius-lg,8px)]">
      {/* コンテンツ */}
    </div>
  </div>
</div>

// v0000: 3層の絶対配置ラッパー（必要性が低い）
<div className="absolute ...">
  <div className="absolute ...">
    <div className="absolute ...">
      <button>New Project</button>
    </div>
  </div>
</div>

// v0100: 必要最小限の構造
<button className="bg-blue-600 h-[40px] rounded-[var(--radius-lg,8px)]">
  New Project
</button>

// v0000: 絶対配置のセル
<div className="absolute h-[46px] left-0 top-0 w-[243px]">
  <p>Project</p>
</div>
<div className="absolute h-[46px] left-[243px] top-0 w-[200px]">
  <p>Team</p>
</div>

// v0100: セマンティックなテーブル構造
<table className="w-full">
  <thead>
    <tr className="border-b border-slate-300">
      <th className="text-left px-4 py-3">Project</th>
      <th className="text-left px-4 py-3">Team</th>
    </tr>
  </thead>
</table>

// v0000: 意味のないネスト構造
<div className="absolute h-[304px] left-[24px] top-[24px] w-[256px]">
  <div className="absolute h-[232px] left-0 top-[256px]">
    {/* ... */}
  </div>
</div>

// v0010: セマンティックな属性付き
<div data-name="Aside" className="absolute h-[304px] left-[24px] top-[24px] w-[256px]">
  <div data-name="Menu" className="absolute h-[232px] left-0 top-[256px]">
    <div data-name="Current page" className="absolute bg-blue-100 h-[40px]">
      {/* ... */}
    </div>
    <div data-name="Link" className="absolute h-[40px]">
      {/* ... */}
    </div>
  </div>
</div>

// v1100: Variables + Auto Layout
<div className="bg-[var(--slate-50,#f8fafc)] flex flex-col">
  <div className="bg-[var(--blue-100,#dbeafe)] rounded-[var(--radius-lg,8px)]">
    <p className="text-[color:var(--blue-600,#2563eb)] text-[length:var(--size-sm,14px)]">
      Dashboard
    </p>
  </div>
</div>

// 期待していた出力
<div className="bg-slate-50 flex flex-col">
  <div className="bg-blue-100 rounded-lg">
    <p className="text-blue-600 text-sm">Dashboard</p>
  </div>
</div>

// v1001: Variables + Annotations
interface NavItem {
  icon: string;
  label: string;
  active?: boolean;
}

interface FeaturedProject {
  image: string;
  title: string;
  description: string;
}

interface Project {
  name: string;
  team: string;
  status: "Active" | "Completed" | "Planning";
  progress: number;
}

export default function V1001Page() {
  const navItems: NavItem[] = [
    { icon: imgFrame37, label: "Dashboard", active: true },
    { icon: imgFrame39, label: "Projects" },
  ];

  const featuredProjects: FeaturedProject[] = [
    {
      image: imgFrame74,
      title: "Project Phoenix",
      description: "Develop a new marketing strategy",
    },
  ];
}

// v0110: Auto Layout + Layer Names
<div className="bg-slate-50 flex flex-col">
  <div className="bg-slate-50 border-b border-slate-300 sticky top-0" data-name="Header">
    <div className="flex items-center justify-between px-6 py-3">
      <div className="flex gap-10 items-center" data-name="Container">
        <div className="h-6 w-[135px]" data-name="Logo">
          {/* ... */}
        </div>
        <div className="flex gap-6" data-name="Links">
          <p>Dashboard</p>
          <p>Projects</p>
        </div>
      </div>
    </div>
  </div>
</div>

// v0111: Auto Layout + Layer Names + Annotations
<div className="bg-slate-50 min-h-screen">
  <header className="bg-slate-50 border-b border-slate-300 sticky top-0 z-10">
    <div className="flex items-center justify-between px-6 py-3">
      <nav className="flex gap-10 items-center">
        <a href="#" className="hover:text-blue-600">Dashboard</a>
        <a href="#" className="hover:text-blue-600">Projects</a>
      </nav>
    </div>
  </header>

  <aside className="bg-white border-r border-slate-200">
    <nav className="flex flex-col gap-2 p-4">
      <a href="#" className="bg-blue-100 text-blue-600 px-4 py-2 rounded-lg">
        Dashboard
      </a>
      <a href="#" className="hover:bg-slate-100 px-4 py-2 rounded-lg">
        Projects
      </a>
    </nav>
  </aside>
</div>

// v1110: Variables + Auto Layout + Layer Names
<div className="bg-[var(--slate-50,#f8fafc)] flex flex-col">
  <div className="bg-[var(--slate-50,#f8fafc)] border-[var(--slate-300,#cbd5e1)]">
    <p className="text-[color:var(--slate-950,#020617)]">Dashboard</p>
  </div>
</div>

// v0111: Auto Layout + Layer Names + Annotations（= Variables無し）
<header className="bg-slate-50 border-b border-slate-300">
  <a href="#" className="text-slate-950">Dashboard</a>
</header>

// v1111: 全要素有効
<div className="bg-[var(--slate-50,#f8fafc)] flex flex-col">
  <div className="bg-[var(--slate-50,#f8fafc)] border-b border-[var(--slate-300,#cbd5e1)]">
    <div className="flex items-center justify-between px-6 py-3">
      <p className="text-[color:var(--slate-950,#020617)]">Dashboard</p>
    </div>
  </div>
</div>

// v0111: Variables無し(比較)
<header className="bg-slate-50 border-b border-slate-300">
  <div className="flex items-center justify-between px-6 py-3">
    <a href="#" className="text-slate-950">Dashboard</a>
  </div>
</header>

Please generate a React TypeScript component with Tailwind CSS from
the Figma page [PAGE_NAME] in [FIGMA_URL].

IMPORTANT: This Figma design uses Variables (design tokens) for colors,
spacing, and typography. Please map these Variables to standard Tailwind
classes whenever possible:

- Color variables (e.g., slate-50, blue-600) → Tailwind color classes (bg-slate-50, text-blue-600)
- Spacing variables → Tailwind spacing scale (p-4, gap-6, etc.)
- Typography variables → Tailwind text utilities (text-sm, font-medium)

Avoid using CSS custom properties like `var(--slate-50)` or arbitrary
values like `bg-[var(--slate-50)]`. Use standard Tailwind classes directly.

Use @figma-mcp-server to access the design.

Generate clean, production-ready code following React best practices.

// v1111: シンプルなプロンプト(セッション4)
<div className="bg-[var(--slate-50,#f8fafc)] flex flex-col">
  <div className="bg-[var(--slate-50,#f8fafc)] border-[var(--slate-300,#cbd5e1)]">
    <p className="text-[color:var(--slate-950,#020617)] text-[length:var(--size-sm,14px)]">
      Dashboard
    </p>
  </div>
</div>

// v1111-2: 詳細プロンプト(セッション5)
<div className="bg-slate-50 flex flex-col">
  <div className="bg-slate-50 border-b border-slate-300">
    <p className="font-medium text-sm text-slate-950">
      Dashboard
    </p>
  </div>
</div>

I've converted the Figma-generated code to use standard Tailwind classes instead of CSS variables:

### Color Conversions
- bg-[var(--slate-50,#f8fafc)] → bg-slate-50
- text-[color:var(--slate-950,#020617)] → text-slate-950

### Spacing Conversions
- gap-[var(--size-10,40px)] → gap-10
- px-[var(--size-4,16px)] → px-4

### Typography Conversions
- text-[length:var(--size-sm,14px)] → text-sm

Please generate a React TypeScript component with Tailwind CSS from
the Figma page [PAGE_NAME] in [FIGMA_URL].

IMPORTANT Requirements:

1. Variables Mapping:
   - Map Figma Variables to standard Tailwind classes
   - Color variables → bg-slate-50, text-blue-600
   - Spacing variables → p-4, gap-6
   - Typography variables → text-sm, font-medium
   - Avoid CSS variables like var(--slate-50)
2. Semantic HTML:
   - Use semantic elements: <header>, <nav>, <aside>, <main>, <section>
   - Use <a> for links, <button> for actions
   - Avoid generic <div> and <p> where semantic alternatives exist
3. Interactive Elements:
   - Add hover states with transitions (hover:text-blue-600 transition-colors)
   - Use proper interactive elements
   - Include accessible attributes (aria-label, alt)
4. Code Quality:
   - Define TypeScript interfaces for data structures
   - Use data-driven approach with .map() for repeated elements
   - Next.js Image/Link components where applicable
   - Clean, production-ready code

Use @figma-mcp-server to access the design.

// v0111-3: Variables無し + 包括的プロンプト
<header className="bg-slate-50 border-b border-slate-300 sticky top-0">
  <nav className="flex gap-10 items-center">
    <Link href="#" className="hover:text-blue-600 transition-colors">
      Dashboard
    </Link>
  </nav>
</header>

// v1111-3: 全要素 + 包括的プロンプト
<header className="bg-slate-50 border-b border-slate-300 sticky top-0">
  <nav className="flex gap-10 items-center">
    <a href="#" className="hover:text-blue-600 transition-colors">
      Dashboard
    </a>
  </nav>
</header>

Please generate a React TypeScript component with Tailwind CSS from
the Figma page [PAGE_NAME] in [FIGMA_URL].

IMPORTANT Requirements:

1. Variables Mapping:
   - Map Figma Variables to standard Tailwind classes
   - Color variables → bg-slate-50, text-blue-600
   - Spacing variables → p-4, gap-6
   - Typography variables → text-sm, font-medium
   - Avoid CSS variables like var(--slate-50)
2. Semantic HTML:
   - Use semantic elements: <header>, <nav>, <aside>, <main>, <section>
   - Use <a> for links, <button> for actions
   - Avoid generic <div> and <p> where semantic alternatives exist
3. Interactive Elements:
   - Add hover states with transitions (hover:text-blue-600 transition-colors)
   - Use proper interactive elements
   - Include accessible attributes (aria-label, alt)
4. Code Quality:
   - Define TypeScript interfaces for data structures
   - Use data-driven approach with .map() for repeated elements
   - Next.js Image/Link components where applicable
   - Clean, production-ready code

Use @figma-mcp-server to access the design.