Claude×FigmaのLP制作フロー：DESIGN.mdを軸に「AIに任せる所」と「人が作る所」を分ける

ワイヤー→DESIGN.md付きでHTML化→癖を禁止リストへ→Figmaに取り込んで仕上げ→MCPでコード化、の6工程。コード化ではFigmaの値ではなくDESIGN.mdの値を正にする。

実務のLP制作で、AIの生成とFigmaでの作り込みを行き来する流れ。投稿者の実績では、LP1本あたりのデザイン工数が2〜3割、コーディングまで含めると全体でおよそ半分に減った。

ワイヤーフレームを作る（人）：セクションの並びと実際のコピー・数値だけを用意する。色やボタンの形など見た目はここでは描かない。
ワイヤーをHTML化（AI）：DESIGN.mdを読み込ませたClaudeにワイヤーを渡し、LPを生成。ファーストビューや複雑なセクションも、いったん全部生成させる。
DESIGN.mdへフィードバック（人）：生成物にブランド外の癖（AIっぽい装飾、DESIGN.mdにない色や形、過剰な影など）があれば、その場の手直しで終わらせず、DESIGN.mdの禁止リストに追記する。使うほどリストが育ち、次回の精度が上がる。
HTMLをFigmaにコピー：生成したページをブラウザで開き、FigmaのChrome拡張の「Capture page」でFigmaのアートボードに貼る。スマホ版は検証ツールでスマホ表示にしてから同じ操作をする。
Figmaで作り込む（人）：DESIGN.mdだけでは表しきれない箇所（ファーストビュー、そのLP独自のレイアウト）や細かい余白・装飾を仕上げる。
FigmaをHTML化（AI）：Figma MCPを使ってClaudeやCodexでコード化する。このときFigmaの読み取り値ではなくDESIGN.mdの値を正とする。

人がやること：ワイヤー・コピー・数値の用意、DESIGN.mdへのフィードバック、ファーストビューや複雑なセクションのデザイン、AI生成物の微調整、実装後の最終調整と目視確認。