こちらは、時間とともに自己改善し、より洗練されたWebアプリを生成するためのプロンプトファイルの作成方法です。


1. Playwright MCPサーバーを使ってClaudeをあなたのアプリに接続します
2. コンポーネント生成ルールを1つのファイルに保存します
例:src/lib/prompts/generation.tsx
3. Claudeに次のことを依頼します:
• localhostを開く
• コンポーネントを生成する
• 実際のビジュアル出力を確認する
• プロンプトファイルを更新する
• 再生成して比較する
例のプロンプト:
「localhost[:]3000にアクセスし、基本的なコンポーネントを生成、スタイリングを確認し、今後より良いコンポーネントを作るためにsrc/lib/prompts/generation.tsxを更新してください」
これにより、以下のような一般的なパターンの繰り返しを避けることができます:
•紫と青のグラデーション
•中央配置のヒーローブロック
•デフォルトのTailwindの対称性
代わりに、プロンプトを次の方向に推進できます:
•温かみのあるカラースキーム
•より独創的な間隔
•非対称レイアウト
•より良いビジュアル階層
•「AIっぽさ」の少ないコンポーネント
AIコンポーネント生成を実際のデザインワークフローに変えたい場合に非常に役立つパターンです。
原文表示
post-image
このページには第三者のコンテンツが含まれている場合があり、情報提供のみを目的としております(表明・保証をするものではありません)。Gateによる見解の支持や、金融・専門的な助言とみなされるべきものではありません。詳細については免責事項をご覧ください。
  • 報酬
  • コメント
  • リポスト
  • 共有
コメント
コメントを追加
コメントを追加
コメントなし
  • ピン