スクショとプロンプトだけで公開済みアプリを継続的に改善できるようになる

公開済みアプリを改善するための基本サイクルです。このフローを繰り返すことで継続的な改善が実現できます。このサイクルはエンジニアが「CI/CD」と呼ぶ仕組みに近いです。

【Windows 版】

▲ Cursor にスクショを Ctrl+V で貼り付けて修正依頼。右パネルで AI が提案した変更を確認できる

git add .
git commit -m "fix: ○○を修正"
git push origin main

【Mac 版】

• スクリーンショット: Cmd + Shift + 4 で範囲選択してクリップボードにコピー
• その他の手順は Windows 版と同一

Cursor と Antigravity はどちらも AI 修正に使えますが、得意な場面が異なります。迷ったらまず Cursor を使いましょう。

Antigravity での修正フロー

AI に毎回「このアプリは何をするもので、どんな技術スタックを使っているか」を説明するのは非効率です。プロジェクトのルートにコンテキストファイルを作成することで、AI が常にプロジェクトの文脈を理解した状態で作業できます。このファイルは AI への「引き継ぎ書」です。

【Windows 版 / Mac 版 共通】

プロジェクトのルートに CLAUDE.md（Cursor では instructions.md も利用可）を作成する：

# プロジェクト概要

## アプリの目的
○○を行うWebアプリケーション。

## 技術スタック
- フロントエンド: React + Vite
- スタイリング: Tailwind CSS
- デプロイ: Vercel
- バージョン管理: GitHub

## ディレクトリ構成
- `src/components/` - Reactコンポーネント
- `src/pages/` - ページコンポーネント
- `src/utils/` - ユーティリティ関数
- `public/` - 静的ファイル

## 重要なルール
- コンポーネントはTypeScriptで書く
- スタイルはすべてTailwind CSSを使う（インラインスタイルは使わない）
- APIキーは環境変数から読み込む（コードにハードコードしない）

## 環境変数
- `VITE_API_KEY`: APIアクセスに使用

## 既知の制約・注意事項
- ○○の機能は現在開発中のため変更しない

「真っ白」になる原因のほとんどは JavaScript のエラーです。F12 を押して Console タブに赤いメッセージが出ていれば、それを AI に見せるだけで修正できます。

【Windows 版】

添付のスクリーンショットはブラウザのコンソールエラーです。
エラーを修正してください。

発生状況: ○○のページを開くと真っ白になる

【Mac 版】

• Cmd + Option + J で開発者ツールの Console を開く
• その他の手順は Windows 版と同一

ターミナルのエラーはコピペが一番確実です。スクリーンショットでも AI は読み取れますが、テキストで貼り付けると解析精度が上がります。

【Windows 版】

以下のターミナルエラーが発生しました。修正してください。

[エラーメッセージをここに貼り付け]

実行していたコマンド: npm run dev

【Mac 版】

• Cmd + C でコピー、その他は同一手順

【Windows 版 / Mac 版 共通】

Vercelのビルドログにエラーがありデプロイできません。修正してください。

[ビルドログをここに貼り付け]

「ローカルでは動くのに本番で動かない」問題の9割は環境変数の設定ミスです。まず Vercel ダッシュボードの環境変数を確認してみましょう。

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

機能追加など影響範囲が広い修正は、Plan モードを使って先に設計を確認してから実施します。大きな変更を一気に依頼すると予期しない部分まで変わってしまうことがあります。まず「何を変えるか」を確認してから実装に移る習慣をつけましょう。

【Windows 版 / Mac 版 共通】

まず実装計画を作ってください（コードは変更しないで）。

追加したい機能: ○○機能
現在の状態: ○○コンポーネントに△△を追加したい

影響を受けるファイルの一覧と、各ファイルへの変更内容を教えてください。

提案された計画を確認し、問題なければ「この計画で実装してください」と送信します。

Cursor のチャット欄で @ を入力するとファイル/フォルダの補完が表示されます。@ でファイルを指定すると、AI がそのファイルの内容を直接読んで作業します。

【Windows 版 / Mac 版 共通】

# 特定ファイルを参考にして新規作成
@src/components/Header.tsx を参考に、同じスタイルでFooterコンポーネントを作成してください。

# フォルダ全体でコード整理
@src/components/ フォルダ全体を確認して、コンポーネント間で重複しているコードをまとめてください。

# CLAUDE.md と組み合わせた指示
@CLAUDE.md @src/pages/ を参考に、新しいAboutページを追加してください。

効果的な CLAUDE.md の書き方のテンプレートです。プロジェクトのルートに作成してください。

# プロジェクト: [アプリ名]

## 概要
[1〜3行でアプリの目的を説明]

## 技術スタック
- フロントエンド: React + TypeScript + Vite
- スタイリング: Tailwind CSS
- 状態管理: [使用している場合のみ記載]
- バックエンド/API: [使用している場合のみ記載]
- デプロイ: Vercel

## ディレクトリ構成
```
src/
├── components/    # 再利用可能なUIコンポーネント
├── pages/         # ページレベルのコンポーネント
├── hooks/         # カスタムフック
├── utils/         # ユーティリティ関数
└── types/         # TypeScriptの型定義
```

## コーディングルール
- TypeScriptの型は必ず定義する
- コンポーネントは1ファイル1コンポーネント
- スタイルはTailwind CSSのみ使用（styled-componentsやinlineスタイル不可）
- APIキーはimport.meta.env経由で読み込む

## 環境変数（実際の値は書かない）
- `VITE_API_KEY`: ○○APIのキー

## 現在の開発状況
- 完成している機能: [一覧]
- 開発中の機能: [一覧]
- 既知のバグ: [一覧]

## 変更してはいけない部分
- [理由とともに記載]

「これとこれとこれを同時に変えて」という依頼は Antigravity の Agent Manager が得意です。依頼した変更の全体を見渡せるので、変更内容の確認もしやすくなっています。

【Windows 版 / Mac 版 共通】

以下の修正を行ってください：
1. src/components/Header.tsx のナビゲーションにAboutページへのリンクを追加
2. src/pages/About.tsx を新規作成（デザインはHome.tsxと揃える）
3. src/App.tsx にAboutページのルートを追加

CLAUDE.mdのルールに従ってください。

修正後の動作確認を Antigravity のブラウザ操作機能で自動化できます。npm run dev でローカルサーバーを起動した状態でこのプロンプトを使います。

【Windows 版 / Mac 版 共通】

以下の手順でアプリをテストしてください：
1. http://localhost:5173 を開く
2. ヘッダーのナビゲーションリンクを1つずつクリックして遷移を確認する
3. ログインフォームに test@example.com と入力してログインボタンをクリック
4. エラーや想定外の動作があればスクリーンショットを撮って報告する

Antigravity のエージェントが守るべきルールを rules.md に定義できます。

【Windows 版 / Mac 版 共通】

# エージェントの動作ルール

## 必ず守ること
- コードを変更する前に、変更計画を提示して確認を求める
- テストファイルは変更しない（依頼がある場合のみ）
- package.json の依存関係を追加・変更する前に確認する
- 環境変数ファイル（.env）は絶対に変更しない

## 禁止事項
- git push は自分では行わない（確認してから手動で行う）
- ファイルの削除は確認なしに行わない
- 本番URL（vercel.appのURL）に直接アクセスしない

## 推奨する作業手順
1. 変更するファイルと変更内容を先に説明する
2. 変更を実施する
3. ローカルで動作確認する（npm run dev が起動していれば確認する）
4. 変更内容のサマリーを出力する

週1回など定期的にコードレビューを依頼することで、技術的負債の蓄積を防げます。

@src/ フォルダ全体のコードをレビューしてください。

以下の観点で問題点と改善提案を教えてください：
1. バグや潜在的なエラーが起きやすい箇所
2. 重複しているコードや整理できる箇所
3. パフォーマンスに影響しそうな実装
4. 読みにくいコードや命名の問題

優先度（高/中/低）と修正の難易度もあわせて教えてください。

アプリを公開する前や、新機能を追加した後に実施することをおすすめします。

@src/ のコードについて、セキュリティの観点からチェックしてください。

特に以下を確認してください：
1. APIキーやシークレットがコード内にハードコードされていないか
2. ユーザー入力をそのままDOMに挿入していないか（XSS）
3. 外部URLへの直接リダイレクトが含まれていないか
4. 不要な権限やスコープを要求していないか

問題があれば修正方法も教えてください。

修正依頼プロンプト

添付のスクリーンショットのUIを修正してください。

問題: [問題を1行で説明]
期待する動作: [こうなってほしい]

[コンポーネント名]の[要素名]を変更してください。

現在: [現在の状態]
変更後: [変更したい状態]

CLAUDE.mdのルールに従ってください。

エラー対処プロンプト

以下のブラウザコンソールエラーを修正してください。

エラー内容:
[エラーメッセージを貼り付け]

このエラーは[何をしたときに]発生します。

以下のVercelビルドエラーを修正してください。
ローカルでのビルドも確認してください。

ビルドログ:
[ビルドログを貼り付け]

機能追加プロンプト

以下の機能を追加してください。

機能名: [機能名]
概要: [機能の説明]
配置場所: [どのページ・コンポーネントに追加するか]

既存のデザインシステムやコーディングルール（@CLAUDE.md）に従ってください。
実装前に変更するファイルの一覧を教えてください。

コードレビュー用プロンプト

@src/ を確認して、本番デプロイ前にチェックすべき問題がないか教えてください。

特に確認してほしいこと：
- console.log が残っていないか
- TODO/FIXMEコメントが残っていないか
- テスト用のデータやAPIキーがコードに含まれていないか