初心者でも3ステップでプロ級のプロトタイプ作成！Cursor+Claude3.7完全ガイド（テンプレート付き）
CursorとClaude3.7を使い、3ステップでプロフェッショナルなUIプロトタイプを作成する方法を学びましょう。詳細なチュートリアルとテンプレート付きで、初心者でもAIを活用したデザインスキルを素早く習得し、フロントエンド開発効率を向上させられます。
初心者でも3ステップでプロ級のプロトタイプ作成！Cursor+Claude3.7完全ガイド（テンプレート付き）
著者: 梁波Eric オリジナルリンク: オリジナル記事
バックエンドからフルスタックエンジニアに転向した私にとって、UIプロトタイプ設計は苦手分野でした。しかしClaude 3.7の登場後、フロントエンド開発能力と審美眼がClaude 3.5と比べて大幅に向上し、Claude 3.7とCursorを直接使って一連のUIデザインを生成できるようになりました。
Claude 3.7 SonnetとClaude 3.5 Sonnetのフロントエンドプログラミング能力の違いを知りたい方は、GitHubのソースコードとチュートリアルを直接参照してください：
https://github.com/flyeric0212/claude-3.5-vs-3.7-code-comparison
適切なプロンプトを使用すれば、以下のようなUXプロトタイプデザインを一括生成できます：
この操作は非常に簡単で、3ステップで完了します。Cursorをお持ちの方はすぐに試せます：
- 適切なプロンプトを準備する（本案例のプロンプトを参考に、必要に応じて修正可能）
- Askモード（バージョン0.46以下はChatモード）でClaude 3.7 Sonnetモデルを使用して質問
- コードコンテキストが長すぎる場合は、複数回生成後に1つのHTMLファイルに統合
具体的な手順は以下の通り：
ステップ1：プロンプトの整理
あなたはUIデザインと製品企画に精通したフルスタックエンジニアで、20年のUXデザイン経験があります。中学生ユーザーが「フィットネスピラティス」iOSアプリを開発するのを支援するのが任務です。 以下の原則に従って、アプリ開発を支援するための完全なアプリプロトタイプを出力してください：
- ピラティスアプリを使用する実際のユーザーシナリオとニーズをシミュレート
- ユーザーニーズに基づき、プロダクトマネージャー視点でアプリ機能・ページ・インタラクションを企画
- 製品企画に基づき、デザイナー視点で完全なUI/UXを出力
- スタイルにはtailwindcssを採用し、画像はunsplashを使用
- 全てのページを1つのHTMLファイルで表示
ステップ2：Cursor + Claude 3.7 Sonnetを使用し、Askモードで質問
Editモードで直接質問すると、コードコンテキストが長すぎて中断される可能性があるため、Askモードに切り替えました。
Askモードに変更後、質問を続行。
ステップ3：中断後、「続き」と数回送信すると、複数のHTMLコードが生成されます。これらを1つのHTMLファイルにコピーします。
UIプロトタイプ生成プロセスは非常にシンプルで、審美性も高いレベルです。
プロンプトに多くの機能説明を加えていなくても、Claude 3.7は独自に内容を充実させます。より複雑なプロジェクトの要件を満たすためには、プロンプトにより多くのルールを追加すると良いでしょう。
最後に、独立開発者にとってこれは非常に大きなメリットであり、効率を大幅に向上させると同時に、さまざまなスキル間のギャップをうまく補完できます。