本記事では、Code Guideで生成したプロジェクト文書を使用して、lovableでUI/UXを自動生成、さらにcursorと統合して効率的な開発を進める手法をご紹介します。
はじめに
以下が今回の作業全体の流れです。
- Code Guideで生成したプロンプトの準備
- lovableを使用してUI/UXを自動生成
- GitHubリポジトリへのコード転送
- ローカルのcursorで生成されたコードを動かす
- cursorのAgentでさらに実装を進める
事前準備
Code Guideを使ったことがない方は、こちらを参考にしてください。本記事ではCode Guideで生成したドキュメントが必要になります。
Code Guideとcursorだけでもアプリは作れますが、UI/UXがいまいちなので今回はlovableを使って補完をしてみます。
手順詳細
1. Code Guideで生成したドキュメントを準備
Code Guideを使うと以下の7つのドキュメントが生成されています
- Project Requirement Document（プロジェクト要件文書）
- App Flow Document（アプリの流れ）
- Tech Stack Document（技術スタック文書）
- Frontend Guidelines Document（フロントエンドガイドライン）
- Backend Structure Document（バックエンド構造）
- Implementation Plan（実装計画）
- Project Rules（プロジェクトルール）
今回は次の3つのドキュメントを使用します。
Project Requirement Document（プロジェクト要件文書）App Flow Document（アプリの流れ）Tech Stack Document（技術スタック文書）
-
Code Guideを開いてドキュメントを取得（Code Guide →）
Recent Projects → ペンのアイコンをクリックします
-
ドキュメントをダウンロードする
画面右下の Download → All Documents をクリック
-
zipファイルを展開
Interactive_LLM_Powered_Technical_Keyword_Analyzer.zip といった名前のzipファイルがダウンロードできますので、展開をして次のファイルがある確認しておきます。
- project_requirements_document.md
- app_flow_document.md
- tech_stack_document.md
次の手順ではこれらを使ってlovableでアプリを作ります。
2. lovableでUI/UXを自動生成
手順
-
lovableウェブサイト（lovable）にアクセスします。
-
プロンプト入力欄に先ほどの3つのドキュメントを順番に開いて中身を貼り付けます
- project_requirements_document.md の全文をコピー&ペースト
- app_flow_document.md の全文をその下に追記
- tech_stack_document.md の全文をさらに追記
-
最後に以下の行を入力してプロジェクト生成の動作を指示します：
Refer to the provided docs and start creating the projects.翻訳すると「提供されたドキュメントを参照してプロジェクトの作成を開始してください。」となり、Code Guideで生成した要件定義書、アプリの流れ、技術スタックを使ってアプリを作ってほしい、と依頼していることになります。
-
最後に右下の ↑アイコン をクリックして生成開始。
結果
- 数分待つとUI/UXが自動生成されます。
- 生成されたUIでは、ログインボタンなどの基本UIが含まれ、クリックによる画面遷移も機能します。
cursorで生成したUI/UXよりも洗練されていて、ページ遷移も実装されていますね！
ちゃんと動いているように見えますが、裏側のデータベースとの連携やLLMを動かすところなどのバックエンドはモック状態です。このあたりは、cursorでの実装手順をご紹介します。
3. GitHubにコードを転送
このあと、cursorで追加の実装をするために、GitHubに転送します。lovableからGitHubへコードを転送する際、権限は最小限に設定すべきです。以下の手順で安全に転送を行います。
GitHubで権限設定リポジトリを作成
-
GitHubウェブサイトまたはGitHub CLIを使用して、新しいリポジトリを作成します。
- リポジトリ名は任意ですが、例として
lovable-ui-projectとします。これは権限設定のためだけに使うので、あとでゴミリポジトリになります。
- リポジトリ名は任意ですが、例として
lovableとGitHubを連携
- lovableに戻り、右上のGitHubアイコンをクリック。
-
"Only select repositories" を選択し、さきほど作成した
lovable-ui-projectリポジトリのみを選択。
- 次にTransfer repositoryをクリック。
- GitHubを確認すると lovable のプロジェクト名のリポジトリが作成されています。
4. cursorで動かしてみる
生成されたリポジトリをローカルにクローンし、動作確認を行います。
git clone
git clone https://github.com/your-github-username/techwave-explorer.git
cd techwave-explorer
必要なパッケージインストールして実行
npm i
npm run dev
README.mdに使い方が書いてあるので参考にしてください。
ブラウザで確認
ブラウザでhttp://localhost:8080/にアクセスし、起動したアプリを確認します。
5. cursorでバックエンドの処理を追加する
プロンプトとドキュメントの追加
- 先ほどダウンロードしたCode Guideのドキュメントを移動します
リポジトリに documents というフォルダーをつくって zip内のファイルをすべて移動する# zipファイルを展開する cd ~/Downloads mkdir documents cd documents unzip ../Interactive_LLM_Powered_Technical_Keyword_Analyzer.zip # リポジトリに移動 cd .. mv ./documents ~/github/techwave-explorer - Code GuideにはcursorのProject Rulesのファイルも生成されているので移動する
Project Rulesを .cursor/rules（配置するディレクトリ）を作って cursor_project_rules.mdc ファイルを移動しますcd ~/github/techwave-explorer mkdir -p .cursor/rules mv ./documents/cursor_project_rules.mdc ./.cursor/rules
- cursorをリロードする
念の為 shift + cmd + p → reload window でリロードしておきます。
cursorで不足機能の実装
- cursorのAgentを次のプロンプトで動かして補完します
@documents に従って足りていない部分を実装してください。 @project-requirements-document.mdc
@documents: これは先ほど保存したCode Guideのドキュメントのフォルダーを指定しています
@project-requirements-document.mdc: これも先ほど設定したcursor ruleです
-
モデルはClaude 3.7 Sonnetを選択して実行します
しばらく待つと足りていない箇所を探し出して、実装が始まります。
-
READEME.mdを確認して再起動
新たに手順が追加されているので、対応をして再起動をします。
npm i
cp .env.example .env
.env ファイルを編集して、以下の情報を入力します：
VITE_OPENAI_API_KEY=your_openai_api_key_here
VITE_SUPABASE_URL=your_supabase_url_here
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here
まとめ
今回使用したフローでは、lovableとcursorの特徴を活かし、効率的にUI/UX設計から機能実装までを進めました。
- lovable を使用して即座にプロジェクトのUI/UXを完成。
- cursor による不足機能の実装補完と技術文書の統合。
- SupabaseやOpenAIモデルとの統合をREADME.mdに基づいて実装。
これらのツールを柔軟に活用し、プロトタイプ開発をスピーディーに進めましょう。Enjoy!!