概要
https://zenn.dev/shinya/articles/d6b0a6ee2df607
詳細内容
## Figma MCPを使った静的Webサイト作成の自動化を検証する
https://zenn.dev/shinya/articles/d6b0a6ee2df607
Figma Dev Mode MCPと高性能LLMを組み合わせることで、静的Webサイトのコーディング自動化が大幅に進展し、特に簡易なデザインはほぼ自動生成できることを実証した。
**Content Type**: Research & Analysis
**Language**: ja
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 83/100 | **Annex Potential**: 82/100 | **Overall**: 84/100
**Topics**: [[Figma Dev Mode, LLMによるコード生成, エージェント開発ワークフロー, 静的サイトジェネレータ, ローコード/ノーコード]]
この記事は、Figma Dev Mode MCPと高性能LLM（GPT-5のCodexおよびClaude CodeのSonnet-4.5）を組み合わせた静的Webサイトのコーディング自動化に関する詳細な検証結果を報告している。筆者は、簡易なデザインであれば適切なFigmaファイルがあればほぼ完全に自動化でき、複雑なデザインもCode Connectやデザインファイルへのアノテーション活用で実現可能だと結論付けている。
検証を通して、Figma側ではコンポーネント化、デザイントークンの徹底、セマンティックなレイヤー命名、オートレイアウトによるレスポンシブ対応がコーディング精度を向上させる上で極めて重要であると指摘。実装側では、プロンプトでアーキテクチャや命名規則を指定し、コンテキストウィンドウの制約を考慮したタスク分割ワークフローを設計することが鍵となる。デザイン情報の取得や実装コードの視覚レビューにはFigma Dev Mode MCPが不可欠であり、特にClaude Code（Sonnet-4.5）とChrome DevTools MCPの組み合わせが安定したと報告されている。
筆者はまず、`AGENTS.md`でAstro+TypeScript+Tailwind CSSをベースとした開発方針（完全静的、最小依存、コーディング規約など）を定義。LLMに対し、Figma MCPを介してサイト概要、構成要素、コンポーネント化すべき要素、レスポンシブの注意点などをデザインから抽出し、`guideline.md`にまとめるタスクを指示した結果、その質の高さを評価した。
その後、LLMにコーディングタスクの分割（`coding_tasks.md`）と実際のコーディングを指示。初期実装は70点程度の出来で、文字色や大枠のレイアウトは良好だったが、画像読み込み・配置、テキストの誤り、デザインにない要素の生成といった課題が残った。特にCodexではコンテキストウィンドウの限界に直面したため、よりコンテキスト管理とツール呼び出しの精度が高いSonnet-4.5に切り替えて修正作業を続行した。
この検証から、求めるUI/UXの複雑度が増すほど、Figma側またはLLMへのコンテキスト伝達が重要であり、チームのスキルに合わせて最適化すべきだと筆者は強調している。GitHubリポジトリで検証に使われたAGENTS.mdやプロンプトが公開されており、実際の作業ログは、webアプリケーションエンジニアがジェネレーティブAIをコーディングに活用する際の具体的な課題と解決策を深く理解する上で非常に有益な情報源となっている。