![[Community Showcase] I stopped letting Claude design my UI. Now I start from a Framer template and build features on top. Here's the workflow.](https://external-preview.redd.it/_me-5MhEQUFGjud--a8rvIzAKvD2J1aR6LToWN67ROs.jpeg?width=1080&crop=smart&auto=webp&s=d5317b5b204a3bd18a5b6cd85aced3cb661fd042)
[Community Showcase] I stopped letting Claude design my UI. Now I start from a Framer template and build features on top. Here's the workflow.
I stopped letting Claude design my UI. Now I start from a Framer template and build features on top. Here's the workflow.
Every side project I shipped last year had the same tell: the "vibe-coded app" look. Rounded cards, gradient buttons, Inter font, a hero with a centered H1. You know the one. Claude Code ships features fast — but left to its own taste, every app it builds looks like every other app it builds.
The fix wasn't a better prompt. It was a better starting point.
What I do now:
- Browse framer.com/templates or any public Framer site whose design I actually like. Designers ship ridiculous work there — real typography, real layout thinking, real motion.
- Export the site into a clean HTML/CSS/JS folder (I built a tool for this — link at the bottom, not the point of the post).
- Drop the folder into a fresh repo. Open Claude Code.
- Prompt: "This is the design system and page structure. Keep all styles, typography, and layout. Wire up auth, a Postgres schema for X, a /dashboard route, and replace the pricing section with Stripe checkout."
- Claude now builds features on top of a designed system instead of inventing one from scratch. It respects the spacing, the type scale, the component patterns that are already there.
Why it works with AI coding specifically:
- Claude is great at modifying existing structure, bad at inventing taste. You're playing to its strength.
- The HTML/CSS becomes ambient context. It stops suggesting bg-blue-500 rounded-lg and starts matching what's already there.
- You skip the 3-hour "make it not look generic" loop that never fully works anyway.
What it's not:
- Not for ripping off someone's live production site. Use your own Framer drafts, the free community templates, or buy a template. Framer's template marketplace is cheap and the licensing is clear.
- Not a replacement for a real designer if you're shipping a serious product. But for MVPs, internal tools, landing pages, side projects? It collapses the design-to-code gap to about 5 minutes.
The tool: letaiworkforme.com - paste a public Framer URL, get a clean offline folder. Free preview. I built it because I was doing this workflow manually and it was tedious.
Happy to share my CLAUDE.md starter and the exact prompt I use for the "wire features onto this design" step if anyone wants it.