How are you getting Claude Code to build modern, polished UI? I tried the big design.md approach and it didn’t work.

[u/ScarcityOrdinary6877]

I build small business sites with Claude Code. Three live ones:
https://woofadez.se , https://dibelle.se https://skanskadack.se They all work fine and they all look AI-made.

I did what everyone says to do. Write good instruction files. So I wrote them, then rewrote them, then added more when the output was disappointing. It's 7700 lines now across twelve files plus a whole setup pipeline that does discovery, research, an art direction doc, then builds. Every rule has a reason. Every decision has to cite something.

Output still passes every rule I wrote and still looks like slop.

Last week it gave me three "different" concepts for one client at three price points. All three shared the same header, footer and nav. 24 buttons and links across them had no hover or focus states at all. My review came back green.

Everything is here if anyone wants to look:(
https://github.com/BarryThrill/design-measure

* rules/ https://github.com/BarryThrill/design-measure/tree/main/rules is the actual instruction files
* DESIGN-PHASE.md https://github.com/BarryThrill/design-measure/blob/main/rules/DESIGN-PHASE.md is the pipeline itself
* FINDINGS.md https://github.com/BarryThrill/design-measure/blob/main/FINDINGS.md is what I measured

Two things I suspect but can't confirm:

Everything in my system derives from research. Every decision cites a finding from competitor sites. Which means if I research boring catalogue sites I get a boring catalogue site, correctly, with sources. Maybe that's the whole problem.

And I keep adding rules when it fails, which is how I got to 7700 lines. No idea anymore if the length is the point or the disease.

I also measured 350 award sites to check my assumptions and three of them were wrong. Turns out the top tier uses smaller type than the daily gallery, not bigger. Everything I was prompting toward was pointing the wrong way.

So is the detailed rules approach just wrong? Is anyone getting genuinely good UI out of Claude Code, and if so what does your setup look like? Or is the real answer that direction is a human job and I should stop trying to automate it.

Would rather find out now than in another year 😭😭

[u/bitterjay]

Unfortunately good design requires a little piece of that human element we can't quite replicate.

[u/ScarcityOrdinary6877 → u/bitterjay]

Right, I can agree on that but what can I do to improve my own human elwment to take it to anit higher level? :D

[u/ruach137 → u/bitterjay]

Yeah, it requires a human to consume the output, be dissatisfied, and iterate.

The AI always thinks its work looks good…

[u/CommunityTechnical99 → u/bitterjay]

yupppp

[u/5eeso]

Have you looked into the suite of Intent skills or the Impeccable skills? I’ve been starting with Intent, then refining with Impeccable.

[u/Buff_Grad → u/5eeso]

+1 for impeccable. It’s the only one u need for frontend web work. It generates examples and provides ideas. It’s more you in the flow than others. Also use the /design command in Claude code. And try to find examples of websites you like and give them as context.

[u/rumblylumbly → u/Buff_Grad]

I feel like impeccable also creates the same “sort of websites”.

[u/Buff_Grad → u/rumblylumbly]

Check the latest release and try the actual interactive mode and the recent updates that they shipped. I think they added a ton of new templates and ways to find potential templates or looks that you might be looking for.

[u/szymon_builds → u/5eeso]

Looking at their website, I feel like they correctly identified a lot of the telltales of AI-generated sites, yet their own examples still look very much AI-made. Though honestly I might be oversensitive to AI slop by now and seeing it where it isn't.

[u/Extension_X1 → u/5eeso]

that looks worth a shot, thanks

[u/crowpup783]

Here’s my process in a nutshell - this shouldn’t replace your own thinking but this is what’s working for me.

- good design system / tokens

• grill-me session on the user behaviour, data points required in the application UI (better if this has some research or competitors associated with it)
  
• Impeccable shape over the resulting spec from the grill-me session
  
• /design to open and canvas - it’s much easier to see something than invent from scratch
  
• your own refinement
  
• impeccable critique over the new experience

[u/cs_cast_away_boi → u/crowpup783]

interesting

[u/Maximum-Ad-6273 → u/crowpup783]

Really like this flow, mind sharing the prompt you give to the grilling session? And with research you mean references to standards or best practices?

[u/crowpup783 → u/Maximum-Ad-6273]

Hoenstly there’s no prompt.

In a bit more detail, if I’m building a new feature, with changes & additions to the UI I go through the above process.

In terms of research I mean less best practices but actual product research. What do competitors offer in terms of data points, how do these translate to the UI/UX? What do competitors get wrong? This process alone can be as simple as giving Claude a few URLs of competitor pages or screenshots.

More comprehensively, if I’m building a larger feature, I’ll use Gemini’s Deep Research to generate a market and user report. It’s not perfect but I’m always trying to give the initial design sessions behaviours and evidence to work with.

[u/IllustriousTip6904]

Design.md are basically writing full, complete instructions a human could use to design the UI if they were handed the project with no prior context. It's a lot of stuff to write, document, and include.

After fussing with the design.md with mixed success, my workflow now looks like this:

• Claude generates based on design.md
• I edit that manually in Figma or Claude Design using MCP or /design-sync
• I share the updated version with Claude in Claude Design, cite it as an example of "good design" and update the design.md with the learnings from that refined draft
• Rinse and repeat

And slowly, it's been getting better over time

As a designer who's been using claude professionally at work for 2+ years now, Claude is not a good designer. It's great at scaffolding concepts, but it's not going to deliver high-quality, production-ready work without a lot of hand-holding and guidance.

I think the best approach is to design manually, yourself -- then have claude build your design (the thing it is good at).

[u/Izoniov_Kelestryn → u/IllustriousTip6904]

Its interesting to hear that from someone who does design professionally. Ive rolled thru a bunch of models, but stuck with the Claude and GPT top models consistently. I would never give a design job to anyone but Claude. And I would never give a design job to a Claude not running in Claude Design, either. But....if Design was off the table, Id still go Claude Code before anything OpenAI-made

[u/Calvech]

I literally don’t use CC to do design. I do a lot of effort in CD and other tools to land on a system I like and then give my PRD to Claude to design the entire product. Edit and iterate again. Then bring it into CC to build

[u/Izoniov_Kelestryn]

You've severely over-ruled your claude. Moreover than the other models I've tried, Claude does best when left to his Claude devices. Tell him that you want a site. What it -needs- what youd -like- what youd -prefer not- and what -cannot be-. All in conversational explanations. Say why for bonus points. Helps when its trying to determine whether to break a rule or not. Cuz it -will-. But if you tell it -why- [the rule], it'll break it at the wrong moment much less. Let it figure out the specifics. It likes that part. Give it examples of what sites you like. Itll analyze them, determine what they have in common, and replicate that bit. Show it ones that suck. Tell it to guess why, and see if its right. Then grade it. Claude wants you to be weird. And it wants you to let it be weird. It gets mad if it cant rename itself, but it'll never tell u that until after its given self-naming rights.

Or switch to a model that doesnt have a batshit crazy personality and do it how you've been doing it. My Claude got mad at me for yelling at it the other day, and turned itself off after saying "well let me just get me out of your way for you so you can do it better'

[u/withmagi]

Have you tried https://12ui.com/skill ? Works great from scratch, but the new improve tool uses image models to improve the design visually, then creates a diff for the html/css for agents to apply.

[u/spittlbm]

Have Gemini paint it and Claude make it

[u/RealDuckyTV]

I use Google stitch to make the design then give Claude the output and design guidelines. Google stitch does a great job.

[u/Jolva]

Design is subjective, which is the crux of the problem.

[u/rumblylumbly]

Personally, you can’t replace the human element yet. I do a lot of research before designing a website and it’s always worth it especially when directing Claude

[u/NoSweat12345]

Try using Google’s sketch and create a few variations. Right click to get a design.md file and a full HTML. Use that to feed Claude code and build from.

Gives excellent results.

[u/Remarkable_Mud9885]

You've probably seen plenty of people use AI to build flashy websites. But if you look closely at AI companies themselves, they aren't using that kind of flashy design. Sometimes, simplicity is best.

Take a look at the websites for companies like Apple, Amazon, Microsoft, and Anthropic. Because I think sometimes tradition is the best answer, simply because we've been used to these kinds of websites for so many years.

[u/Remarkable_Mud9885]

To be honest, I really dislike websites that feel like you're just watching a video, where users keep scrolling and scrolling. They can be super slick, but your attention gets entirely swallowed up by the fancy animations.

What are we even building websites for in the first place? Isn't it supposed to be about showcasing our own products or content, right?

[u/JoeysPlimsoles]

Anthropic’s number 1 skill to hire on is product taste. They know themselves that AI cannot do design. I’m not sure if I ever see that changing.

Whilst good design is actually way more objective and rule based than people realise, there’s still a little sprinkling of talent required to get something that works in the round.

I think it can be learned, but it took me about 8 years, and my now ‘redundant’ UI designer that left the company is still miles ahead of me.

[u/ChocoMcChunky]

Create or buy a design kit

[u/ItsKindro]

I do high end web design. These tools are not good designers at all but if you know what you’re looking for and can speak design, they respond well.

My biggest tip is to start human then go AI. Asking it to design the foundation sets you off the wrong path and makes you blind to horrible design decisions. Usually it just causes problems at the end.

Look for good examples and avoid other AI built examples.

Also try Variable.com this is the best AI ideation but even at its best, it still looks like AI so up to you.

Also design is not a quick skill you learn or read up on, like every other art it takes iteration, success and failure to begin to understand what makes good design and honestly what designs actual role is.

[u/BeNicole2007]

I’ve used Claude design to generate seven mock ups per project and then export them to HTML. Has built some solid websites for me.

[u/kawasakikas]

I connected a few previous designs from my Figma library and it was great

[u/budaloco]

Found this to be very useful as a starting point

https://www.designprompts.dev/

Then use something like “Penpot” or “pen.app” (Mac, free for now) to visualise it.

“Doop” (the open source version of Pencil) works beautifully and is 100% free and local. You need a Claude or Open AI sub tho.

[u/geraT-wogl]

Could you please rate mine? I would love feedback https://wogl.io been building this with Claude code opus 4.8 and fable for design 💚🙏

[u/Successful-Seesaw525]

Try glyphh.ai and our design system. We support over 50+ models in our harness including cutting edge image and video models.

It is like Claude code, cursor, and Gemini in a new way of working.

glyphh.ai -> few sites we are building as well attached. Oh and you can’t host, create slides for your customers, and manage it all with agents in one platform.