Pair Claude Design with Claude Code to avoid a generic AI-made site
Idea + starter prompt, not run by us yet
For: Founders and freelancers whose AI-built sites all look alike
The author saw that AI-built sites for six industries kept the same badges, gradient text and rows of three cards. For his own site he gave Claude Design his code, answered its questions, picked a direction and steered spacing and color. Claude Code then built from the specs and design tokens.
Steps
- Let the AI build a few sites freely first, so you can see which tired patterns keep coming back.
- Give Claude Design your existing code or GitHub repo and answer its questions about the look you want.
- Compare the options it offers, then adjust spacing and color. Screenshots from a design site can show what you mean.
- Send the result to Claude Code as specs and design tokens and ask it to build from them.
- Supply photos and detailed illustrations yourself. Claude Design can't make them.
- Check your plan before you start. Claude Design needs a paid plan and shares its usage with chat and Claude Code, so using both drains it faster.
Starter prompt
I have a design handoff from Claude Design in [folder], with specs and design tokens. Read all of it first. Then show me a plan: which pages you will change, which tokens you will use and what you will leave alone. Work on a new branch or a copy of [project folder], never the live site. Build [page name] first and let me look before you do the rest. List anything the design needs that you can't make, like photos or detailed illustrations, so I can supply them. Never ask me for hosting passwords or keys.
Original post: vocus.cc · found via agentusecases.ai. Written up in our own words. We haven't run it, so test it on made-up data first.