【AI 自走型】Figma からデザインコーディングを行うプロンプト

Cursor を活用した Figma からデザインコードを生成するプロンプトを開発したので紹介します。
Figma からコード生成したい場合の専用ツールなど最近は出てきていますが、中々既存のプロジェクトのルールに沿った内容でコードを生成するのが難しく思います。
どのように既存プロジェクトに沿ったコードを生成できるようにするのかプロンプト設計のポイントを解説していきます。

Transcript

1. 【AI 自走型】 Figmaからデザインコーディングを行うプロンプト X: @tetsuro
2. 自己紹介 てつ（X: @tetsuro_b） 岐阜在住 妻と子供２人 勤務先 株式会社キカガク マイブーム 冷凍食品のラーメン食べる
3. Figma からコード生成したい 課題 Figma からのデザイン実装コストが高い デザインはサクッと終わらせてロジック部分など重要な箇所へ時間を割きたい 「Figma → code」のツールは色々ある 既存の共通コンポーネントなどが使えない エディタに貼り付けるのが面倒 AI エージェントエディタ上でなんとかならないものか…
4. Cursor Composer で実現 既存のディレクトリ設計や、共通コンポーネントなどプロジェクトの内容にあわせたコード生成が可能なプロンプ トを開発したので紹介します！ プロンプトは以下のような４ステップです。 （本日は時間の都合上、実行計画/コーディングのみ紹介） 実行計画の作成 共通コンポーネントの選定 コーディング AI セルフレビュー
5. 実行計画のプロンプト ポイント 実行計画を md ファイルに出力 ファイル出力することで、人間が手動で 修正可能。AI と人間の実装方針の認識 のすり合わせを行う。 リポジトリの情報を出力 CSS のパッケージの情報やディレクトリ 構成を出力しておくことで AI の推測に よる誤った出力を減らす。
6. 実際に生成された実行計画 CSS パッケージの情報 / 実行順序 / 実装する UI コンポーネント情報 / ディレクトリ構成
7. コーディングのプロンプト ポイント 実行計画に沿った実装の依頼 大規模にコードを変更されると AI が生成し たコードをレビューしづらいので１手順の 完了都度に確認を求めるように指示。 Storybook のリンク提供 生成されたデザインをすばやく確認できる ようにコンポーネントの実装完了都度、 Storybook のリンクを送るように指示
8. プロンプト設計のコツ ▪ 工程はなるべく細分化する LLM は粒度が小さければ小さいタスクほど質の高いアウトプ ットを出せる傾向がある。 ▪ ルールを詰め込みすぎない 本当に守ってほしいコーディング規約だけを記載すること で、安定したアウトプットにつながる。 人間が注力すべき部分か、AI に任せるべきか良く検討してプ ロンプトに盛り込みましょう。
9. 最後に 完全版のプロンプトは Zenn にて公開中です。 このあと X（@tetsuro_b）にもポストしておくので気になった方はぜひ！！ Zenn 【AI 自走型】画像をもとにデザインコーディングを行うプロンプト Figma の情報をもとにコーディングを自動化するツールは代表的なものだ と v0 の Import From Figma 、また Figma のプラグインにも多く存在し… 📣 株式会社キカガクでは AI 大好き（そうじゃない方も）エンジニア募集中です！