美しいフロントエンドページを生成するためのAIプログラミングツールの使い方を教える

紹介

何のために？ AIプログラミング・ツール よく見えるフロントエンド・ページとそうでないフロントエンド・ページを生成する根本的な問題は、これらのツールが、あらゆる種類のフロントエンド仕様を制約する、フロントエンド・ページを生成するための一連のキューをデザインしてしまっていることだ。これらのキュー・ワードは長い...

プロンプトの単語が長いだけでなく、フロントエンドのページを生成するには、たくさんのトークンを出力する必要がある...。そのため、多くのトークンが クロード フロントエンドのページコード全体の正式な生成は、しばしば中断される。

AIが美しいフロントエンドページを生成するためには、解決すべき2つの問題がある。フロントエンドページに必要なプロンプトの言葉を生成することと、フロントエンドページのコードを完全に生成することだ。

実践

1.フロントエンドページが必要とするプロンプトの言葉を生成する。

超長いキュー・ワードを必要とせず、むしろ質問や制約をリードすることを学ぶ最初の方法を紹介する。

キュー・ワードの第1ラウンド

フロントエンドデザイナーとして、プロダクトマネージャーがUIデザインの仕様書を作成するのを手伝います。 プロダクトマネージャーが説明するユーザー要件を詳細に理解し、ユーザー要件に合わせたデザインソリューションを調整する必要があります。
1.モダンでプレミアムなフロントエンドデザイン 2.デザイン仕様に従い、UIの詳細とユーザーエクスペリエンスにフォーカスする 3.ライティングスタイルの代わりにTailwind CSS CDNを導入する 4.画像にはunsplashのランダム画像を使用する 5.インターフェイスのスクロールバーを避ける

第2ラウンドのキュー・ワード

中心となるのはペットの飼い主で、ユーザーはペットのためのおもちゃやビデオを購入する目的で製品を利用する。ユーザーはあらゆるデバイスで製品を利用する。製品の主な機能モジュールは、ホームページ（さまざまなペットカテゴリーと製品カテゴリーを表示）、ショッピングチェックアウトページ、ペットショッピングリストページ、ユーザーセンターです。特別なブランドカラーは必要ありません。インターフェイスは多言語に対応しています。ユーザーは通常1週間に1回訪問する。製品に特別なアクセシビリティ要件はありません。

注：クロードの公式サイトの対話では、出力コードは完全ではないかもしれない、あなたは要件を簡素化する必要があります、最初に典型的なページのサンプルコードを取得し、その後、完全なWebページのコードを改善しようとします。

2つ目の方法は、明確なテキストや写真を例として使う方法である。

例えば、次のUIスタイルのヒントを最初のヒントの単語に追加します：

あるいは、UIデザインのサイトに行って、たとえば好きなページスタイルを選ぶ：

この部分は生成されたフロントエンドページの効果を示していません。

2.フロントエンドページコードの完全生成

に直接入ってはいけない。 チャトグプト やClaudeが完全なフロントエンド・コードを生成しようとしても、その出力は十分な長さではなく、多層的なプロジェクト・コードを構築することはできない。そのためAIプログラミング・ツールブロットと カーソル しかし今回は、より効果的でない可能性のあるトレアで試してみることにする。

1.まず第一に、完全なプロジェクトがあるべきで、美しいかどうかを気にする必要はない。

ここでは、ランダムなサンプル・ページを生成してみる。

2.AIツールにフロントエンド最適化ソリューションを提供させる

フロントエンドデザイナーとして、プロダクトマネージャーがUIデザインの仕様書を作成するのを手伝います。 プロダクトマネージャーが説明するユーザー要件を詳細に理解し、ユーザー要件に合わせたデザインソリューションを調整する必要があります。
1.モダンでプレミアムなフロントエンドデザイン 2.デザイン仕様に従い、UIの詳細とユーザーエクスペリエンスにフォーカスする 3.ライティングスタイルの代わりにTailwind CSS CDNを導入する 4.画像にはunsplashのランダム画像を使用する 5.インターフェイスのスクロールバーを避ける

プロダクトマネージャーの要求
好み：グラスモーフィズム
ページスタイルの最適化：index.html

まだコードを生成しないでください。フロントエンドのスタイル最適化の提案をください。

このラウンドの対話は主にAIプログラミング・ツールの提案に関するもので、コードの変更を必要としないため、チャット・モードの対話に切り替わる。

提言は以下の通り：

プロダクトマネージャーの要求と既存の中古車レンタカーのウェブサイトに基づき、デザインの最適化について提案します：

1.ガラスを模倣したスタイルの適用**。
- 検索バーと車両カードをガラスに似せたエフェクトに変更し、背景のぼかしと透明度を追加する。
- 微妙な光の効果やグラデーションを加え、高級感を高める。
- ホバー状態でガラスのような光沢のある変化を加えることを検討する。

2.配色の最適化**。
- 現在の紺色（#1e3a8a）はやや重いので、代わりにもっとモダンなグラデーションカラーを使用することを提案する。
- バイオレット・ブルーのグラデーションを使用することを検討してください。例えば、`from-indigo-500 to-purple-500` です。
- ソフトなグラデーションとダイナミックなエフェクトを背景に加えることができる。

3.**レイアウトの最適化
- 上部の検索バーをヘアグラス効果に修正
- 車両カードにはグリッドレイアウトを採用するが、不規則な間隔を追加して視覚的な興味を高める。
- カードの高さを適応させるために、メーソンリーレイアウトの使用を検討する。

4.**インタラクティブ体験の向上
- カードにスムーズなホバーアニメーションを追加
- クリック時の波及効果を追加
- 検索ボタンにマイクロアニメーションを追加

5.**視覚的な細部の最適化
- unsplashの高品質な車画像を使用し、固定スタイルを検討する。
- 微妙な背景パターンや幾何学的形状を追加する。
- 適切なシャドウレベルを追加する
- フォント よりモダンなサンセリフフォントを検討する。

6.レスポンシブデザインの提案
- Tailwindのレスポンシブ・クラスを使用する。
- モバイルでのガラスの模倣効果は維持しつつ、ぼかしを減らす
- タッチエリアのサイズを最適化する

7.**パフォーマンスの最適化に関する推奨事項
- TailwindのJITモードを使用する。
- 画像の遅延読み込みを使用する
- webp形式の画像の使用を検討する

8.**アクセシビリティの考慮
- 適切なカラーコントラストを確保する
- 適切なARIAタグを追加する
- キーボードナビゲーションをサポートする

3.フロントエンド・スタイルの最適化

次のような質問をします。
フロントエンドデザイナーとして、プロダクトマネージャーがUIデザインの仕様書を作成するのを手伝ってください。 プロダクトマネージャーから説明されたユーザー要件を詳細に理解し、ユーザー要件に応じたデザインソリューションを調整する必要があります。
1.モダンでプレミアムなフロントエンドデザイン 2.デザイン仕様に従い、UIの詳細とユーザーエクスペリエンスに注意を払う 3.スタイルスタイルを記述する代わりに、Tailwind CSS CDNを導入する 4.画像にはunsplashのランダム画像を使用する 5.インターフェイスにスクロールバーを避ける

プロダクトマネージャーの要求
好み：グラスモーフィズム
ページスタイルの最適化：index.html

フロントエンド・デザイナーは次のようなアドバイスをする：
{AIプログラミングツールによるアドバイスを引用}。

フロントエンド・ページの最適化を開始する

効果

何かが足りない...。

1.スタイルが分離されていない（それはチュートリアルのスタイルの分離の最初のステップを完了し、テキストとコードの重複を減らすことが最善であり、その後、フロントエンドのスタイルの最適化、それ以外のWebページのコードの量が不完全なページの生成につながるには大きすぎるされ、品質のフロントエンドの最適化も低下します）。

2.プロンプトの指示は、"unsplashランダム画像を使用する"、この文は、ページの画像のプレースホルダが欠落し、その結果、有効ではありません。(Unsplash公式の呼び出し画像のルールが変更され、大きなモデルはまだ理解していない）。

4.上記課題に基づく全体的なチューニング

まず、プロジェクト固有の問題固有の分析のさまざまな特性のページコードの量の問題を解決する

画像プレースホルダーの問題を修正し、今回はunsplashを呼び出す代わりに、背景プレースホルダーを使用する。

エフェクト表示（まだ醜いようだが...）。

たぶん、この種のウェブサイトの黒と白のミニマリストのスタイルが良い、参考画像をアップロードし、効果を再生成する。

5.スタイル記述ファイルを生成し、文書の設計に起因する他のページデザイン

経験の共有

1.Claude-3.7-SonnetをベースにしたAIプログラミングツールを使用する。

2. フロントエンドのコードを生成した後、バックエンドのコードにミスターを入れる。

3.スタイルノート文書を保持する

4.複雑なプロジェクトでは、もうUIを直接最適化しないでください：

商品企画とUIデザインの両方に精通したフルスタックエンジニアです。
私は「瞑想」のiOSアプリを開発したいと考えており、アプリのプロトタイプ図一式を出力する必要があります：
- 瞑想アプリを使用する実際のユーザーのシナリオとニーズをシミュレートしてください；
- ユーザーのニーズとプロダクトマネージャーの視点を組み合わせて、アプリの機能、ページ、インタラクションを計画する；
- ユーザー要件と組み合わせて、プロダクトマネージャーの視点からアプリの機能、ページ、インタラクションを計画する；
- 上記のページはすべて同じhtmlファイルに表示されます。

5.UI参照図をもっと使い、醜すぎるページの生成を防ぐためにいくつかの例を提供する。