【AI 自走型】画像をもとにデザインコーディングを行うプロンプト
こんにちは。株式会社キカガクの石橋です。
弊社ではデザインツールに Figma を利用しており、社内のデザイナーがデザインした画面をもとにコーディングをしています。
Figma の情報をもとにコーディングを自動化するツールは代表的なものだと v0 の Import From Figma 、また Figma のプラグインにも多く存在します。ただ、既存のプロジェクトのルールに沿ったものが作れなかったりコピペしてくる作業が大変だったりします。
そこで今回は Cursor Composer などの AI Agent を活用したデザインのコーディング作業を効率化させるプロンプトを作ったので紹介します。
プロンプトの紹介
さっそくですが、以下のようなプロンプトを作成しました。各工程でのポイントについてはこのあと紹介していきます。
## 1. 実行計画の作成
この画像をコーディングしたいです。
順序立ててコーディングしたいので要素(UI)別の実装計画を立ててください
なお、実行計画は /documents に md ファイルで出力してください
### 要件
- CSS パッケージの選定は package.json を参照しバージョンを記載すること
- モックデータやコンポーネントの型情報などは不要なため出力しないこと
- 実装する UI 要素とその実装順序を出力すること
- 実行計画にはコンポーネント名(キャメルケース)を含むこと
- ディレクトリ構成をツリー形式で出力すること
- ディレクトリ構成については src/components を参照すること
- サイドバーは実装は不要なため省略すること
## 2. 共通コンポーネントの利用
### 要件
src/components/common ディレクトリを参照し、各 UI 要素で利用する共通コンポーネントを [コンポーネント名](Storybook の URL) 形式で追記してください
なお、src/components/common に存在するコンポーネントのみ使ってください
- Storybook の URL の参考例(コンポーネント名は小文字に変換される)
- 例)http://localhost:6006/?path=/story/components-dashboard-view-dashboardlayout--default
## 3. 実装
それでは手順に従って実装を進めてください。
なお、次の手順には勝手に進まず、それまでの進捗の共有と次の手順の説明をしてください。
また、ファイルの生成や編集を行った際はコミットするか細かく訪ねてください。
### 要件
- .eslintrc.json を参照すること
- textStyle, color は src/libs/chakra-config.ts を参照すること
- コンポーネントを新規に作成する手順
- `yarn generate` を実行
- 生成されたファイルをコミット
- 上記コマンドで作成されたファイル以外は生成禁止
- 共通コンポーネントの記載があれば、必ずそれを使うこと
- 都度 Storybook のリンクを提供してください。注意点としてはコンポーネント名は小文字に変換されるみたいです
- 例)http://localhost:6006/?path=/story/components-dashboard-view-dashboardlayout--default
## 4. AI セルフレビュー
以下の要件に従い生成したファイルを確認してください
### 要件
- textStyle, color は src/libs/chakra-config.ts に記載のない値を使っていない
- 要素の配置などが参考画像と一致している
- 指示書に記載の通りの共通コンポーネントを利用している
こちらのプロンプトを利用し実装した画面が以下です。
-
Figma 上にあるお手本のデザイン(実際に弊社のプロダクトで利用している画面)
-
プロンプトを使い実装されたデザイン画像
「お手本のデザインと実装されたデザインが完璧一致していないじゃないか」という意見も聞こえますが、現在の LLM の性能では 「この程度が限度」 かなと思っています。
※ 特に文字の大きさや太さ、要素の装飾(border, backgroud-color など)、要素の位置関係が苦手なようです。
現在の LLM の強みを活かせるケースは、お手本画像がないケース(0 → 1)であり、今回のようなお手本画像ありのケースでは上記の通り 80 点くらいの完成度のアウトプットが出せれば上々かなと思っています。
80 点までは AI に頑張って実装してもらい、80 点 → 100 点にする作業を我々人間が担当する分業制のようなイメージです。
それではプロンプトの細かい紹介に入っていきます。
各工程の解説
事前準備
How To で進める場合は、上記で紹介したプロンプトを作業を行うリポジトリにあらかじめ入れておくと、プロンプトを AI に参照させる際に便利です。
この記事では design-prompt-doc.md
というファイル名でリポジトリに保存しています。
※ プロンプト内で参照させているディレクトリなども自分のプロジェクトの実態にあったものに変更すると良いでしょう。
1. 実行計画の作成
この工程ではお手本画像(Figma からエクスポート、もしくはスクリーンショットしたもの)から実行計画を作成します。
1. 実行計画の作成プロンプト
## 1. 実行計画の作成
この画像をコーディングしたいです。
順序立ててコーディングしたいので要素(UI)別の実装計画を立ててください
なお、実行計画は /documents に md ファイルで出力してください
### 要件
- CSS パッケージの選定は package.json を参照しバージョンを記載すること
- モックデータやコンポーネントの型情報などは不要なため出力しないこと
- 実装する UI 要素とその実装順序を出力すること
- 実行計画にはコンポーネント名(キャメルケース)を含むこと
- ディレクトリ構成をツリー形式で出力すること
- ディレクトリ構成については src/components を参照すること
- サイドバーは実装は不要なため省略すること
Cursor Composer に画像を添付し以下の通り指示を出しましょう。
プロンプトを実行することで、以下のように出力されました。
# テスト受検画面 実装計画
## 使用するCSSパッケージ
- @chakra-ui/react: ^2.8.1
- @emotion/react: ^11.11.1
- @emotion/styled: ^11.11.0
## 実装順序と UI コンポーネント
1. TestExamLayout (レイアウトコンポーネント)
- ヘッダー部分(タイトル、残り時間、中断ボタン)
- プログレスバー
- メインコンテンツエリア
2. TestExamHeader (ヘッダーコンポーネント)
- タイトル表示
- 残り時間カウンター
- 中断ボタン
3. TestExamProgress (プログレスコンポーネント)
- プログレスバー
- 進捗テキスト (7% 完了 (2/36問中))
4. TestExamQuestion (問題コンポーネント)
- 問題番号 (Q.02)
- 問題文
- 選択肢リスト
- 回答ボタン
## ディレクトリ構成
src/
└── component/
└── exam/
├── part/
│ ├── TestExamHeader
│ ├── TestExamProgress
│ └── TestExamQuestion
└── view/
└── TestExamLayout
ディレクトリ構成やコンポーネント名など、修正したい箇所があればこの時点で直接 md ファイルを編集すると良いでしょう。
今回は生成された実行計画をそのまま使っていきます。
2. 共通コンポーネントの選定
多くのプロジェクトではボタンやフォームなど、プロジェクトで共通で利用するコンポーネントがあるかと思います。
この工程では、どの要素にどの共通コンポーネントを利用するか決めていきます。
2のプロンプトを実行しましょう。
2. 共通コンポーネントの選定のプロンプト
## 2. 共通コンポーネントの利用
### 要件
src/components/common ディレクトリを参照し、各 UI 要素で利用する共通コンポーネントを [コンポーネント名](Storybook の URL) 形式で追記してください
なお、src/components/common に存在するコンポーネントのみ使ってください
- Storybook の URL の参考例(コンポーネント名は小文字に変換される)
- 例)http://localhost:6006/?path=/story/components-dashboard-view-dashboardlayout--default
実行計画に以下が追記されました。
## 使用する共通コンポーネント
- 中断ボタン:[MyButton](http://localhost:6006/?path=/story/components-common-part-mybutton--default)
- プログレスバー:[MyProgress](http://localhost:6006/?path=/story/components-common-part-myprogress--default)
- 回答ボタン:[MyButton](http://localhost:6006/?path=/story/components-common-part-mybutton--default)
- 選択肢:[FormRadioGroup](http://localhost:6006/?path=/story/components-common-part-formradiogroup--default)
3. 実装を開始
それでは完成した実行計画をもとに AI にコーディングしてもらいましょう。
3. 実装を開始のプロンプト
## 3. 実装
それでは手順に従って実装を進めてください。
なお、次の手順には勝手に進まず、それまでの進捗の共有と次の手順の説明をしてください。
また、ファイルの生成や編集を行った際はコミットするか細かく訪ねてください。
### 要件
- .eslintrc.json を参照すること
- textStyle, color は src/libs/chakra-config.ts を参照すること
- コンポーネントを新規に作成する手順
- `yarn generate` を実行
- 生成されたファイルをコミット
- 上記コマンドで作成されたファイル以外は生成禁止
- 共通コンポーネントの記載があれば、必ずそれを使うこと
- 都度 Storybook のリンクを提供してください。注意点としてはコンポーネント名は小文字に変換されるみたいです
- 例)http://localhost:6006/?path=/story/components-dashboard-view-dashboardlayout--default
弊社のプロジェクトでは plop を利用してコンポーネントの雛形を最初に作成するようにしていますので AI にも同じように作業を進めてもらいます。
Cursor Composer では Yolo Mode を ON にしておくと CLI でコマンドが自動実行されるため非常に便利です。
※ 現在の Yolo モードの仕様では plop のような対話型のコマンドの場合、対話部分に関しては人間が入力する必要があります。
しばらくすると実装が完了しました。
Storybook の URL にアクセスし生成されたデザインを確認しましょう。
4. AI セルフレビュー
次に、コミットを行う前に AI にセルフレビューをお願いしましょう。
4. AI セルフレビューのプロンプト
## 4. AI セルフレビュー
以下の要件に従い生成したファイルを確認してください
### 要件
- textStyle, color は src/libs/chakra-config.ts に記載のない値を使っていない
- 要素の配置などが参考画像と一致している
- 指示書に記載の通りの共通コンポーネントを利用している
3の工程のプロンプトで指示を出していても、必ずしもルール通りの実装になっていないケースがあります。
ただ不思議なもので、セルフレビューを1度挟むことで AI 自身がミスに気が付き直してもらえることも多いです。
今回はセルフレビューを実行しても以下の通り修正された事項はありませんでしたが、セルフレビューを挟むとより精度が上がりますのでステップ毎に行いましょう。
ここまで完了したらコミットを行います。
コミットに関しても、Yolo Mode により「コミットして」と指示するだけで コミットメッセージの生成含め全て CLI 上で全て自動で行われます。
次のコンポーネントの実装へ
あとは Cursor Composer の指示に従い、3 - 4 を繰り返しすべてのコンポーネントを実装します。
実装するコンポーネントが多いと 3 の指示とは違った実装を行うケースもあるので、以下の通り常にプロンプトを参照させて次のステップに進むとアウトプットが安定する気がします。
AI の能力を最大に引き出すプロンプトの設計ポイント
今回こちらのプロンプトを作成するうえで気づいたポイントを紹介します。
欲張りすぎずシンプルな指示を心がける
何か実装する際はディレクトリの設計方針など様々なルールが存在するかと思います。
最初はそのあたりを全てプロンプトに落とし込んでいたのですが、全てのルールが採用されるわけではなく無視されてしまうルールも多くありました。( 無視された指示の重要度が実は高かったり…)
そのため、最低限 AI に守ってほしい指示のみをシンプルに記載することでアウトプットの質が安定するでしょう。
今回の例だと、実行計画を md に出力しているおかげでコンポーネントのディレクトリ設計や共通コンポーネントの使用ルールなど人間の介入が可能となっていますのでそのような仕組みでカバーすることも重要です。
必要な情報を適切に AI に渡す
Cursor Composer などの AI Agent 機能は一見、我々人間と同じように既存のコードベースを参照して実装を行ってくれるように見えますが実はそうではありません。
適切な情報を適切なタイミングで渡してあげることで大切で、その工程を踏んだうえでやっと期待するアウトプットに近づけさせることができます。
そのため各工程で参照してほしいディレクトリや資料があれば、都度参照させるように指示を出しています。
工程はなるべく細分化し一度に大量の作業を任せない
現代の LLM の性能的には画像からコーディングするくらいであればノンストップで AI に任せることも可能です。
例えば「この画像をもとにコーディングして」くらいのプロンプトでもコーディングは可能です。
ただ、 AI も人間と同じく大量に生成された内容を後から修正するのが非常に苦手です。また、一度の作業範囲が広がりすぎるとアウトプットの質も下がる傾向があります。
そのため適切な粒度にタスクを分割し、なおかつ AI のアウトプットに対して人間もレビューしやすい粒度でコーディングがされるように調整しています。
まとめ
今回は画像をもとにデザインをコーディングするプロンプトを紹介しました。
プロンプトにこんな指示を付け加えたらよりアウトプットの質が向上した!などあればぜひコメントで教えていただけるとうれしいです。
宣伝
株式会社キカガクではエンジニアを募集しています。
少しでも興味がある方がいれば、まずはカジュアル面談でお話ししましょう。
Discussion