Figma MCPで静的サイトを効率よく作るためのAI Skill設計

Figma MCPを使えば、デザインを読み取ってコードを書くところまでAIに任せられるようになった。TamaTの増田氏は、GitHubのIssueにセクションごとのFigmaリンクを貼ってAIに参照させているが、0から組み立てる段階ではディレクトリ設計や画像配置のルールが守られず、レビューでの手戻りが積み上がると指摘する。そこで、手戻りにつながる判断を実装前に守るルールに変換し、作業手順書であるSkillに書き込んだ。記事が紹介しているのは、そのSkillの中身である。 面白いのは、ルールの多さではなく、ルールの種類だ。記事が最初に固定するのは「何を見て作るか」ではなく、資料が矛盾したときに何を正とするかという優先順位である。現在の指示、現在のFigmaフレーム、要件定義書、ワイヤーフレーム、過去のレビュー指摘という順番を決め、過去の指摘は再発防止に使うが現在のFigmaより優先させない。さらに、Figmaを取得できなければ推測で進めず、理由を報告して止まる。AIは空白を埋めるのが得意で、それは文章生成では長所でも、デザイン再現では事故の種になる。AIを「何でも埋めてくれる人」から「止まる基準を持った担当者」に変えているという点が、この記事の本音だと私は読む。ブレークポイントも375、424、425、768、769、1440のように境界の前後まで検証対象に入れており、基準フレームの点を合わせるだけでは完了としないところが実務的である。 中小企業の実務に置き換えるなら、AIに仕事を頼む前に決めておくべきは二つだけでいい。どの資料が正本かという順位と、迷ったら止まるという条件である。古いスクリーンショットや前回の指摘を、今の仕様と同じ重さで扱わせないことが、手戻りを減らす一番手軽な対策になる。明日からは、依頼文の末尾に「資料が矛盾したら報告して止まれ」と一行足すところから始めればいい。