Cursor×Figma MCP：短時間での画面設計〜UI実装を叶えるAI駆動フロー

はじめに

とあるWeb アプリケーション開発のプロジェクトにおいて、AI を積極的に活用することで、設計書の作成と UI 実装を大幅に効率化しました。

従来、手作業で行っていた設計書の作成や、デザインからコードへの変換作業を、AI ツールとルールベースの自動化により、開発速度を向上させながら品質も維持することに成功しています。

本記事では、実際に使用したツールとプロセスを具体的に紹介し、同じ手法を試せるように記述します。

設計フェーズでの AI 活用

設計書作成のルールを決める

設計フェーズでは、まず Cursor Rulesとして設計書自動生成のルールを作成しました。action-spec-generation.mdc というファイルに、Cursor が画面定義書を自動生成するための詳細なルールを定義しています。

ルールファイルの構造と目的

このルールファイルは、AI に対して「どのような情報を参照し、どのような手順で、どのような形式の設計書を生成するか」を明確に指示するための包括的なガイドラインです。人間のエンジニアが設計書を作成する際の思考プロセスを、AI が理解できる形式に落とし込んだものと言えます。

このルールファイルには以下の内容が含まれています：

出力構造の定義：システム情報、ページ説明、画面フロー、APIフロー、画面レイアウト、機能説明、画面項目詳細、バリデーション一覧、エラーハンドリング一覧
生成手順の定義：

Cursor が内部で実行すべき処理手順を明確に定義：

1. UI 抽出：コンポーネントツリー仕様書または Figma MCP から UI 要素を抽出

2. API 抽出：OpenAPI 仕様書から API 情報を抽出

3. 突合：UI 要素 × イベント × API を紐付け

4. テーブル生成：機能説明テーブルを生成（アンカー ID 付き）

5. 画面項目生成：コンポーネントツリー仕様書または Figma MCP から表示条件/制御情報を取得

6. バリデーション生成：OpenAPI 制約からバリデーション一覧を生成

7. エラーハンドリング生成：標準エラーハンドリング一覧を参照してエラー処理を生成

8. 整合性確認：レイアウト番号とテーブル番号の整合性を確認

チェックリスト：生成物の品質を保証するための検証項目

このルールファイルを作成することで、Cursor に対して一貫性のある設計書を生成させることが可能になりました。

情報源を特定する

また設計書を生成する際、以下の 3 つの情報源を活用しました：

1. OpenAPI 仕様書 (openapi.yaml)

API のパス、パラメータ、リクエスト/レスポンスの定義
バリデーション情報（required、minLength、maxLength、patternなど）
エラーレスポンスの定義

2. API 詳細設計書

各 API の処理詳細（ステップバイステップの処理フロー）
参照/更新テーブルの情報
エラーハンドリングの詳細
ログ出力の仕様
単体テスト項目
ファイル構成

3. Figma MCP

UI コンポーネント階層の取得
コンポーネント名の抽出
デザイン仕様の取得

Cursor は、これらの情報源を組み合わせることで、UI 要素と API を自動的に紐付け、機能説明テーブルや画面項目詳細テーブルを生成します。特に API 詳細設計書を参照することで、OpenAPI 仕様書だけでは表現しきれない処理の詳細や、エラーハンドリングの具体的な実装方法を設計書に反映することができます。

Cursor によるアクション定義書の自動生成

指示はシンプルで、ルールファイルを指定したうえで、参照ファイル・Figmaリンク・画面名/IDを入力します。

実際の生成プロセスは以下の通りです：

@action-spec-generation.mdc に従って、以下のファイルを参照してアクション定義書を生成してください。

- OpenAPI仕様書: [パス/openapi.yaml]
- API詳細設計書: [パス/api_detail/1-1_ユーザー登録.md]（該当するAPIの詳細設計書）
- Figma: Figmaの該当箇所のリンク
- ユーザーフロー（任意）: [パス/user-flows.md]

画面名: [画面名]
画面ID: [ID]