lovableとCodeGuideを使い、Supabaseとcursorでアプリを作る

本記事では、Code Guideで生成したプロジェクト文書を使用して、lovableでUI/UXを自動生成、さらにcursorと統合して効率的な開発を進める手法をご紹介します。

## はじめに

以下が今回の作業全体の流れです。

1. **Code Guideで生成したプロンプトの準備**
2. **lovableを使用してUI/UXを自動生成**
3. **GitHubリポジトリへのコード転送**
4. **ローカルのcursorで生成されたコードを動かす**
5. **cursorのAgentでさらに実装を進める**

---

## 事前準備

Code Guideを使ったことがない方は、こちらを参考にしてください。本記事ではCode Guideで生成したドキュメントが必要になります。

https://qiita.com/flyingv/items/aea63bde2a32e4721461

**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（技術スタック文書）`

1. **Code Guideを開いて**ドキュメントを取得（[Code Guide →](https://app.codeguide.dev/dashboard)）
**Recent Projects → ペンのアイコン**をクリックします

![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995659/7b550a23-2743-42bf-8ea4-58c4fd5dce7b.png)

2. **ドキュメントをダウンロードする**
画面右下の **Download → All Documents** をクリック
![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995659/3af4c494-4fb4-471e-9e93-b219255eaa8e.png)

3. **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を自動生成

#### 手順
1. **lovableウェブサイト（[lovable](https://lovable.dev/)）にアクセス**します。
2. プロンプト入力欄に先ほどの3つのドキュメントを順番に開いて中身を貼り付けます
    - **project_requirements_document.md** の全文をコピー&ペースト
    - **app_flow_document.md** の全文をその下に追記
    - **tech_stack_document.md** の全文をさらに追記
3. **最後に以下の行を入力してプロジェクト生成の動作を指示します：**
   ```plaintext
   Refer to the provided docs and start creating the projects.
   ```
   翻訳すると「提供されたドキュメントを参照してプロジェクトの作成を開始してください。」となり、**Code Guideで生成した要件定義書、アプリの流れ、技術スタックを使ってアプリを作ってほしい**、と依頼していることになります。

4. 最後に右下の **↑アイコン** をクリックして生成開始。
![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995659/684a54be-03e7-43d6-a532-7720adfd65b0.png)

#### 結果
- 数分待つとUI/UXが自動生成されます。
- 生成されたUIでは、ログインボタンなどの基本UIが含まれ、クリックによる画面遷移も機能します。

cursorで生成したUI/UXよりも洗練されていて、ページ遷移も実装されていますね！
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995659/87b9e1d7-360f-4f84-96c9-cfd894d1fdbe.png)

ちゃんと動いているように見えますが、裏側の**データベースとの連携やLLMを動かすところなどのバックエンドはモック**状態です。このあたりは、cursorでの実装手順をご紹介します。

### 3. GitHubにコードを転送

このあと、cursorで追加の実装をするために、GitHubに転送します。lovableからGitHubへコードを転送する際、権限は最小限に設定すべきです。以下の手順で安全に転送を行います。

#### GitHubで権限設定リポジトリを作成
1. **GitHubウェブサイト**または**GitHub CLI**を使用して、新しいリポジトリを作成します。
   - リポジトリ名は任意ですが、例として`lovable-ui-project`とします。これは権限設定のためだけに使うので、あとでゴミリポジトリになります。

#### lovableとGitHubを連携
2. lovableに戻り、右上の**GitHubアイコン**をクリック。
![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995659/1e0610d1-f76a-4fa6-8b99-485a1dca65b2.png)
3. **"Only select repositories"** を選択し、さきほど作成した`lovable-ui-project`リポジトリのみを選択。
![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995659/91fa37b0-9167-4933-ac0c-1be0c2d50e1f.png)
4. 次に**Transfer repository**をクリック。
![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995659/b0cebfcb-f9c9-41a0-9f7b-934828db153f.png)
5. GitHubを確認すると lovable のプロジェクト名のリポジトリが作成されています。
![008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995659/fa949e04-01e2-40dc-ac05-b695fc6db0f4.png)

---

### 4. cursorで動かしてみる

生成されたリポジトリをローカルにクローンし、動作確認を行います。

#### git clone
```sh
git clone https://github.com/your-github-username/techwave-explorer.git
cd techwave-explorer
```

#### 必要なパッケージインストールして実行
```sh
npm i
npm run dev
```

**README.md**に使い方が書いてあるので参考にしてください。


#### ブラウザで確認
ブラウザで[http://localhost:8080/](http://localhost:8080/)にアクセスし、起動したアプリを確認します。

---

### 5. cursorでバックエンドの処理を追加する

#### プロンプトとドキュメントの追加
1. 先ほどダウンロードした**Code Guide**のドキュメントを移動します
   リポジトリに **documents というフォルダーをつくって** zip内のファイルをすべて移動する
   ```sh
   # zipファイルを展開する
   cd ~/Downloads
   mkdir documents
   cd documents
   unzip ../Interactive_LLM_Powered_Technical_Keyword_Analyzer.zip

   # リポジトリに移動
   cd ..
   mv ./documents ~/github/techwave-explorer
   ```
2. Code Guideには**cursorのProject Rulesのファイルも生成されている**ので移動する
   Project Rulesを **.cursor/rules**（配置するディレクトリ）を作って cursor_project_rules.mdc ファイルを移動します
   ```sh
   cd ~/github/techwave-explorer
   mkdir -p .cursor/rules
   mv ./documents/cursor_project_rules.mdc ./.cursor/rules
   ```
   ![009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995659/53325282-46a0-490b-9de8-0294722beda0.png)
3. cursorをリロードする
   念の為 **shift + cmd + p → reload window** でリロードしておきます。
   ![010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995659/e25d965d-97a4-4eac-9325-73027e8634f2.png)

#### cursorで不足機能の実装
1. cursorの**Agent**を次のプロンプトで動かして補完します
```plaintext
@documents に従って足りていない部分を実装してください。  @project-requirements-document.mdc 
```
![011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995659/46fcc72a-0c22-46e8-a0f5-cf2f99d2d43d.png)

**@documents**: これは先ほど保存したCode Guideのドキュメントのフォルダーを指定しています
![013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995659/f3761d20-901b-41e4-85b5-dfe7b3c18bf1.png)
**@project-requirements-document.mdc**: これも先ほど設定したcursor ruleです
![014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995659/452e551d-839d-4f26-92e1-3b1ad8516b82.png)

2. モデルは**Claude 3.7 Sonnet**を選択して実行します
しばらく待つと足りていない箇所を探し出して、実装が始まります。
![012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995659/070d1c9b-3ec7-4acf-83bb-af261010edb2.png)

3. READEME.mdを確認して再起動
新たに手順が追加されているので、対応をして再起動をします。
```sh
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設計から機能実装までを進めました。

1. **lovable** を使用して即座にプロジェクトのUI/UXを完成。
2. **cursor** による不足機能の実装補完と技術文書の統合。
3. **SupabaseやOpenAIモデルとの統合をREADME.mdに基づいて実装。**

これらのツールを柔軟に活用し、プロトタイプ開発をスピーディーに進めましょう。Enjoy!!