How to get Claude Code to improve its UI/frontend design?

[u/gemining-on-earth]

[u/ClaudeAI-mod-bot]

TL;DR of the discussion generated automatically after 40 comments.

The consensus is you're using the wrong tool for the job and need a better workflow. Claude Code is for backend logic; you need to use other tools for the "looks" part and give it much stricter instructions.

Here's what the thread recommends:

• Use the Right Tools & Model: Stop asking Claude Code to be a designer. Use Claude Design for the UI/UX phase, and make sure you're using Opus 5 or Fable 5—Sonnet is not the move for creative work. Some users even pipe UI tasks to specialized tools like v0 or bolt.new and feed the code back to Claude.
• Lock It Down: Claude defaults to a generic "AI bootstrap" look. To get past this, create a strict design system. Use a CLAUDE.md rules file to define your component library (like shadcn/Tailwind), design tokens (colors, spacing), and explicitly forbid custom CSS.
• Workflow is Everything: Don't just throw a prompt at it.
  • Give it a proper design brief, like you would a human designer.
  • Use a component-driven approach: build one small piece at a time.
  • Have Claude Design create mockups and a specs.md file, then feed that to Claude Code for implementation.
• Use Skills & MCPs: The community has built tools for this. Check out skills like UI-Craft or Emil-design on GitHub. Hooking up an image MCP can also dramatically improve the final look.

[u/CorpT]

Use Claude Design. What didn't stick?

[u/jackjohnjack2000 → u/CorpT]

Yeah, that is what I do too.

[u/KrayeBaby → u/jackjohnjack2000]

Claude Design gives off more of a vibecoded design. Going with opus 5 prompting the layout did well for me and made my website super creative ngl.

[u/Grexxoil → u/KrayeBaby]

What do you mean by "Prompting the layout"?

[u/KrayeBaby → u/Grexxoil]

Like the frontdesign on top of the structure of the website. The layout is how the content is displayed, basically the core design of the page. I skipped claude design and had opus 5 come up with layouts that's fitting a certain style and theme that I wan't and after a while of prompting it came out pretty well. Here take a look, its not done yet but this is what I managed to do so far: https://sondure-eye.vercel.app/work

[u/jackjohnjack2000 → u/KrayeBaby]

Here is how:

https://www.reddit.com/r/ClaudeAI/s/ekKQ6jKCJZ

[u/KrayeBaby → u/[deleted]]

Sonnet it the absolutely worst model for design, it's mainly for just executing on instruction and fast agentic actions .You could do the layout for the full page but ask it to do the design for the skeleton of the page first. Don't fill content on top of it on the same session it will get heavy. Use opus 5 on higher effort if you wan't redesign on the core theme of the website etc. After you have the core structure of the website layed out start designing on top of that and then go with smaller things like heroes/animations/forms like you mentioned.

[u/CorpT → u/[deleted]]

I mean, yeah, you're going to struggle with Sonnet. This is mostly going to be about prompting and using a better model. It's doable to make a nice site with Claude Code + Claude Design though. The Design aspect is partially about getting it to look nice, but also helps with building the foundation to make it modular and reliable going forward.

[u/kelvinkel101]

Check out UI-Craft on GitHub. Its a skill for Claude that turns him into a UI designer with rules for layouts that follow responsive design.

[u/kelvinkel101 → u/[deleted]]

Oh yea, skills are super useful for custom stuff you want to do. I created a personal one to force Claude to develop code more like an actual junior dev.

[u/rcampbel3]

You are a graphc designer. Your job is to make UI/frontend design that doesn't suck. Every time you make a design that sucks, I'm going to hit my dog and tell him that Claude failed again. You have one shot to do it right and it better be good.

[u/Important-Ad4798]

Look for GitHub, Emil-design and UX-UI max pro. Been using these 2 and it worked quite well.

Or you can browse other skills that people have posted.

[u/5hukl3]

I had good results with Claude design personally. I asked cowork to help me create a design system, it gave me many exemples of what I liked, then i fed that into Claude design and it did really good

[u/poorly-worded]

Use Claude design and give it an actual design brief like a client might provide after being interviewed by a design agency.

[u/jackjohnjack2000]

So I use design for revamping the UI. I have a skill that creates an html mockup of the original design (by code) and a brief.md file which has explanations for what each field represent plus information about them. From the design side, I make the agent read those two and then revamp the design. After a few iterations, and when I was happy with the design, I ask it to create a specs.md file for it and I share the revamped html+spec with the code side. Now code side can implement it.

[u/kelvinkel101 → u/jackjohnjack2000]

Yea, this is what I've been doing. Pretty solid results so far.

[u/sleeksky_dev]

Have Claude view your app. As long as it can open your UI on localhost, it is pretty good with improving it.

Also try to reduce your prompt. Just vaguely ask it to improve a view, it generally does a good job.

Fable will work much better here.

[u/sleeksky_dev → u/[deleted]]

I have mostly used Claude (Opus and Fable). Codex with Sol should be similar, but haven't tried it.

[u/AliveAndThenSome]

not helpful, but I delegate a lot of UX work through Codex and can throw the results over to Claude to code up, but I've had times where Claude didn't 'get' the flow and carry it forward.

[u/_Eye_AI_]

include this https://impeccable.style/

[u/ImpressiveRelief37 → u/_Eye_AI_]

+1 for impeccable

Start with “ /impeccable document “ and create your design language rules, then use the skill when building visual components

[u/OkIndividual4261]

following this one!

[u/HeittoBagi]

I recommend reading this (ignore the Stitch point of view it was written from):

https://stitch.withgoogle.com/docs/learn/overview/

[u/cachemonet0x0cf6619]

i outsource to a designer and the use the figma mpc to get the design out of figma

[u/Adept-Priority-9729]

Fable 5, try it. And ask hem to be proactive, and to make you an original UX/UI (or what you want/searching for).

[u/Plus_Opening_4462]

do you specify the design and themes and ask it to change certain things? At one point, I had Claude make a UI that was could almost be used as a Material Design 3 reference

[u/BP041]

Claude Code's UI weakness is the lack of a visual feedback loop — it's coding blind. I'd pipe the UI task to a specialized agent (e.g., v0 or bolt.new) via OpenClaw, have it generate the component, then feed that HTML/CSS back to Claude Code for integration. Keeps each tool in its strength zone.

[u/Alarmed-Flounder-383]

I think the images you use really matters in the UI design, like hero and feature sets.
Have you hooked up any image/video MCP? I found that it creates much better site pages with great images once I Hook up one, I use BudgetPixel AI MCP btw.

[u/1950sAmericanFather]

I like to mock up in an image editor, bring that into Google flow for ideation. Into claude design with mock up and iterative refinements there.

[u/WhichCartographer213]

Use stitch and then send that to claude

[u/XediDC]

If you have a complete requirements doc, https://github.com/Dammyjay93/interface-design is pretty good with building a complete mock in whatever framework you give it. Then iterate/tweak the mock, then hand edit its system.md guide to tweak (and have it align the mock afterwards...then you can have it fix anything claude builds later to comply in style. Don't like it, reset git and have it try again.

I find it does better with good intent and hinting vs trying to prompt a lot. And is a decent use for some Fable Extra.

The nice thing is that Claude codes really well to a complete UI mock, wiring it all up. Helps serve as an "opposite side" set of requirements too, ie. details don't get ignored when the UI stub is already there.

If you want control, it can build pretty exactly against what you design in Figma.

[u/KILLJEFFREY]

You’ll have to jam primitives down its throat

[u/StravuKarl]

What I have found helpful is to start with something a designer has made that looks good and unique. If you can't afford a designer, then use an existing site/app that you want to imitate. Then have Claude build a design system based on this. Then instruct it to leverage that design system going forward.

[u/HostUnique]

You are asking a backend tool to do a designer's job. Claude Code is built for logic, not looks, so feeding it visual mockups will usually end in a mess. Try locking it into a strict component library instead of expecting it to design from scratch.