概要
https://zenn.dev/reality_tech/articles/1d6df6811715fb
詳細内容
## Figma→実装の再現度を上げるAIワークフロー設計（Claude Code × Playwright）
https://zenn.dev/reality_tech/articles/1d6df6811715fb
巨大なデザインコンテキストによるAIの破綻を防ぐため、タスク分割とブラウザ検証を組み合わせた高度な自動実装パイプラインを構築する。
**Content Type**: 🛠️ Technical Reference
**Language**: ja
**Scores**: Signal:5/5 | Depth:5/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 87/100 | **Annex Potential**: 91/100 | **Overall**: 92/100
**Topics**: [[Claude Code, Figma MCP, Playwright, Vue.js, AIエージェント]]
FigmaのデザインをAIでコード化する際、複雑なデザインほどコンテキストサイズが増大し、AIが実装を省略したり精度を欠いたりするという課題がある。本記事は、REALITYのエンジニアがこの「AIの限界」を突破するために設計した、Claude CodeとPlaywrightを核とする堅牢なワークフローを解説している。
著者は、単一のプロンプトで実装を完結させるのではなく、工程を「素材準備」「実装・組み立て」の2フェーズ、全10ステップのパイプラインに分解することを提唱している。最大の特徴は、Figma MCPが返す膨大なデザインデータを直接AIに食わせず、独自のフック（PostToolUse）を用いてローカルにキャッシュ・整形して保存する手法だ。これにより、AIが不必要なトークンを消費して「忘却」することを防ぎ、必要なコンポーネント単位で最小限の情報をサブエージェントに渡す運用を可能にしている。
技術的な深みとして特筆すべきは、Playwrightの活用方法である。単なるE2Eテストに留まらず、AIが生成した中間成果物（React）をブラウザで実際に描画し、そこから「Computed Style（計算済みCSS）」を抽出してJSON化するプロセスを組み込んでいる。これにより、AIがTailwindクラスの解釈を誤るリスクを排除し、ブラウザ上の「確定値」をベースにVue実装を行うことで、デザイン再現度を飛躍的に高めている。
さらに、依存グラフに基づいた「末端コンポーネント（Leaf）から親コンポーネント（Container）」へのボトムアップな自動実装や、Claude Skillsを用いたワークフローのパッケージ化など、AIコーディングを「運任せ」にしないための実戦的な知見が凝縮されている。生成AIを開発フローに組み込む際の「指示の出し方」ではなく「仕組みの作り方」を提示しており、大規模なWebフロントエンド開発に従事するエンジニアにとって、実装の自動化を一段上のフェーズへ引き上げる極めて価値の高いリファレンスとなっている。