以下是创建一个随着时间自我改进并帮助你生成更精致网页应用的提示文件的方法。

1. 使用Playwright MCP服务器将Claude连接到你的应用
2. 将你的组件生成规则存储在一个文件中
例如：src/lib/prompts/generation.tsx
3. 让Claude执行以下操作：
• 打开localhost
• 生成一个组件
• 审查实际的视觉输出
• 更新提示文件
• 重新生成并进行对比
示例提示：
“导航到localhost[:]3000，生成一个基础组件，审查样式，并更新src/lib/prompts/generation.tsx，以便今后生成更好的组件”
这样就可以避免反复使用类似的通用模式，比如：
• 紫蓝色渐变
• 居中的英雄区块
• 默认的Tailwind对称布局
它可以引导提示朝着：
• 更温暖的色彩体系
• 更具原创性的间距
• 非对称布局
• 更好的视觉层次
• 更少“AI风格”的组件
如果你想将AI组件生成变成一个真正的设计流程，这个模式非常实用。