以下是建立一個提示檔的方法：讓它能隨著時間自我改進，並幫助你產生更精緻的網頁應用程式。

1. 使用 Playwright MCP 伺服器將 Claude 連接到你的應用程式
2. 將你的元件生成規則儲存在一個檔案中
例如：src/lib/prompts/generation.tsx
3. 請 Claude 執行以下操作：
• 打開 localhost
• 生成一個元件
• 審查實際的視覺輸出
• 更新提示檔
• 重新生成並進行比較
範例提示：
「導航到 localhost[:]3000，生成一個基本元件，檢查樣式，並更新 src/lib/prompts/generation.tsx，以便之後產生更好的元件」
因此，與其重複那些像下面這種通用模式：
• 紫藍漸層
• 置中的英雄區塊
• 預設的 Tailwind 對稱性
它可以把提示引導到：
• 更溫暖的配色系統
• 更有原創性的間距
• 非對稱的版面
• 更清晰的視覺層次
• 更少看起來「很 AI」的元件
如果你想把 AI 元件生成變成一個真正的設計工作流程，這個模式非常實用。