課題・対象者
フロントエンドx生成AIでの都合がわからず、スクリーンショットなどをもとにClaudeCodeに指示を出してみたものの、出力の再現度が40％以下と感じるほどに人間の手直しが多い方（自分がそうだった）
どうなるのか
導入することで、体感で90％以上の再現度で、ClaudeCodeが既存コードの都合に合わせてコーディングしてくれる。
実行内容
※注意：FigmaのDevシートを購入していないとMCP連携してもシートを読み込むことができない。
こちらに記載されている内容をそのまま実行するだけで、フロントエンドでの生成AI体験が向上する。
https://help.figma.com/hc/ja/articles/32132100833559-Dev-Mode-MCPサーバー利用ガイド
STEP1.Figma側でMCPサーバーを有効にする
STEP2.MCPクライアントをセットアップする
Claudeがインストールされているターミナルで以下のコマンドを実行
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sseSTEP3.作成したいページのFigmaデザインのリンクをコピーする
右クリックで Copy link to selectionを選択する。
STEP4.ClaudeCodeで指示を出す
例
https://www.figma.com/design/dakhodiaiofdyaohes33323/sandbox?node-id=204-4 のページを @src/main.tsx に作成して
などと指示をすれば、ほぼデザイン通りの出力が返ってくる
感想
フロントエンドを日常的に操作している方はすでにご存知かもしれませんが、知らない方に向けて作成しました。
ロジックだけを先に作っておいた状態であれば、デザイン自体は1、2箇所の修正で他は修正せずに動作するページが返ってきました。
ただ、もちろん現場のコーディング指針から微妙に外れているところがあるので、そこは少しリファクタリングが必要にはなります。
ただし使ったことがない方であれば結構衝撃を受けると思いますので、ご参考まで。