こちらは、時間とともに自己改善し、より洗練された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コンポーネント生成を実際のデザインワークフローに変えたい場合に非常に役立つパターンです。