here’s how to create a prompt file that self-improves over time and helps you generate much more polished web apps.

1. connect Claude to your app with the Playwright MCP server
2. store your component generation rules in one file
ex: src/lib/prompts/generation.tsx
3. ask Claude to:
• open localhost
• generate a component
• review the actual visual output
• update the prompt file
• regenerate and compare
example prompt:
"navigate to localhost[:]3000, generate a basic component, review the styling, and update src/lib/prompts/generation.tsx to produce better components going forward"
so instead of repeating generic patterns like:
• purple-blue gradients
• centered hero blocks
• default Tailwind symmetry
it can push the prompt toward:
• warmer color systems
• more original spacing
• asymmetric layouts
• better visual hierarchy
• less “AI-looking” components
super useful pattern if you want to turn AI component generation into an actual design workflow.