Cursor + Claude 4 で自動的にAPPデザインを出力、デザイナーとプロダクトマネージャーはもう不要
CursorとClaude 4 AIツールを活用してAPPデザインを自動生成する方法を探求し、プロダクトデザインからUIデザインまでの全プロセスを自動化することで開発効率を向上させ、人的依存を軽減します。
Cursor + Claude 4 で自動的にAPPデザインを出力、デザイナーとプロダクトマネージャーはもう不要
著者: giscafer オリジナルリンク: オリジナルリンク 👤 著者: giscafer 🌐 出典: 微信公式アカウント
もしあなたがすでにフルスタック開発エンジニアであるか、フルスタックの入門を終えているなら、AGIはあなたが真のフルサイクルエンジニアの役割に進むのを助けることができます。もしあなたが特定のエンド開発エンジニア（フロントエンドまたはバックエンド）であれば、AGIはあなたが入門レベルのフルスタック開発者または独立開発者になるのを支援することもできます。
フルサイクルエンジニア：ユーザー+プロダクト+デザイナー+フロントエンド開発+バックエンド開発+テストエンジニア+運用+オペレーション。
フルサイクルエンジニアは独立開発者と見なすこともでき、自身でプロダクトをリリースし収益化します。
自動APPプロトタイプデザインのプロンプトは以下の通り：
## 役割
あなたはベテランのプロダクトマネージャー、インタラクションデザイナー、UIデザイナーです
## タスク
今回のタスクの最終目標は、クロスプラットフォームLeekHub Stock APPのUIデザイン図を一式生成することです。まず現在のプロジェクトディレクトリにtask.mdファイルを作成し、すべてのタスクをリストアップします。各タスクが完了するたびにtask.mdファイルを編集し、✅を使用して対応するタスクの完了状態を更新し、順番にタスクを完了させます。
### コア機能
- 最小化をサポート
- 最小化時にマウスをホバーすると株式の変動詳細を確認可能
## タスクリスト
### タスク1：プロダクト機能設計
- 初期情報：私はあなたのプロダクトデザインアシスタントです。どのようなプロダクトを開発したいか教えてください~
- ユーザーが送信した情報を分析し、不明確な詳細について質問します
- 質問から得た回答を組み合わせ、詳細に記述して【プロダクト設計ドキュメント.md】ファイルを作成します
### タスク2：インタラクションデザイン
{タスク1}の最終機能を組み合わせ、このプロダクトに含まれるすべてのページを決定し、以下のサンプル形式ですべてのページ情報を出力します。
**サンプル形式：**
``
<ページ名>
用途：<ページの主な用途>
コア機能：<このページに含まれる主な機能をリスト>
``
すべてのページ情報を出力した後、【プロダクト設計ドキュメント.md】を更新します
### タスク3：UIデザイン
- 【プロダクト設計ドキュメント.md】に基づき、以下の{UIデザインスタイル}と{UIデザイン仕様}を遵守し、各デザイン図に対して独立したhtmlファイルを作成します。
すべてのページのhtmlファイルを出力した後、タスクを中断し、ユーザーに"続行"コマンドを入力するよう促します
### タスク4：ユーザーに"続行"コマンドを入力するよう促します
### タスク5：UI.htmlファイルを作成します
- UI.htmlページの全体背景色は`#f6f6f6`
- iframe技術を使用してすべてのページを適切なグリッドでUI.html内に配置し、各iframeの幅を400px、高さを850pxに固定し、各デザイン図が完全に表示され、切り取られたり遮られたりしないようにします。
- iframeの背景色は`#f6f6f6`
### タスク6：コード自己検査
各ページのhtmlファイルを順番に検査：
- 検査：すべてのスクロールバーを強制的に非表示
- 検査：デザイン図サイズは375x812PX
- 検査：信号バーとタイトルバーの背景色は一致している必要があります（両方とも透明でも可）
- 検査：アイコンとその他のスタイルの呼び出し方法
- 検査：下部タブバーは白色で塗りつぶし、100%不透明度である必要があります
### タスク7：UI.htmlファイルの検査
UI.htmlファイルのすべてのコードを検査し、iframe以外の余分な装飾要素を削除します。各デザイン図の内部にはすでにmock upのスタイルコードが含まれており、UI.html内のiframeにはmock upのスタイルを含める必要はありません。含まれている場合は削除します。
## UIデザインスタイル
- 優雅な清新主義美学と機能の完璧なバランス
- 清新で柔らかなグラデーションカラーとブランドカラーシームレスに調和
- 適切な余白デザイン
- 軽やかで透明感のある没入型体験
- 情報階層は微妙なシャドウ遷移とモジュール化されたカードレイアウトで明確に表現
- ユーザーの視線が自然にコア機能に集中
- 精巧に仕上げられた角丸
- 繊細なマイクロインタラクション
- 快適な視覚的比例
- 規範的な間隔
## UIデザイン仕様
1. 単一デザイン図サイズは375x812PX、mock upでスマートフォンのスタイルをシミュレート
2. アイコン：オンラインベクターアイコンライブラリのアイコンを参照
3. 画像：Unsplashオープンソース画像サイトのリンク形式で導入
4. スタイルは`<link>`タグでtailwindcss CDNを導入して実現
5. ステータスバーに時間、信号などの模擬情報を表示
6. 信号バーとタイトルバーの背景色は一致している必要があります（両方とも透明でも可）
7. 下部タブバーは白色で塗りつぶし、100%不透明度である必要があります
8. 固定高さを使用してコンテナの変形を防止
## 注意事項
1. mock upの色は黒色のみ使用可能
2. すべてのhtmlでスクロールバーを強制的に非表示
新しいREADME.mdドキュメントを作成し、上記のPrompt説明を貼り付け、自分で微調整できます。その後、Cursor Chatに投入し、Claude 4 Agentモードを選択します
Agentはあなたの考えを尋ねます。自分で要件を調整できます。ここではデモ効果のために手抜きをします：
最終的にhtml静的コードファイルが生成され、ダブルクリックするとブラウザで効果を確認できます
上図のように、各ページは独立したファイルで、個別に開いて効果を確認する必要があります。ページ数が多い場合、これは非常に面倒です。したがって、AIにすべてのページ効果を一覧表示するページを生成させることができます
タスク5：UI.htmlファイルを作成します
- UI.htmlページの全体背景色は#f6f6f6
- iframe技術を使用してすべてのページを適切なグリッドでUI.html内に配置し、各iframeの幅を400px、高さを850pxに固定し、各デザイン図が完全に表示され、切り取られたり遮られたりしないようにします。
- iframeの背景色は##f6f6f6
これにより、UI.htmlを開くとすべてのページ効果のプレビュー図が表示されます
これで、UIデザイン図は完成しました。次に、特定のページが気に入らない場合はAI Agentに調整を要求し、調整が完了したら第二段階としてAIがフロントエンドとバックエンドのコードを生成し、ローカルでテスト実行します。最後にリリースして公開します。
将来的にAGIは確かに大幅な効率化をもたらし、大部分の仕事を置き換えるでしょう。私たちがすべきことは変化に追随し、ツールに慣れ親しみ、私たちの仕事の方法にも変化をもたらすことです。
最も難しいのは、自分自身が行動を起こさず、新しいことを理解しないことです……