Claude Code is terrible at UI design and everyone knows it so this guy fixed it by building an MCP that gives Claude its own AI design tool instead of going back and forth between a design platform and your code editor, Claude now creates the designs itself and... drops them straight into your codebase the MCP has full context of your existing design system and project so everything it generates actually matches what you already have. one command to set up and it installs the MCP and skill files so Claude instantly knows how to use it if you're tired of the same Inter font, purple gradient, card grid layout on every project, this is definitely worth tryingshow more

woah, was not expecting to see my product blowing up like this in the morning! in case anyone's looking to learn more about the mcp 👇:)

Whatever we are doing to make claude generate better UIs, its not working so far. - Its still making the generic AI Slop pages. - One thing i found useful/succeeded is to first build the UI in any of the UI design platforms like Google Stitch or Figma, make needed changes manually, finalize the design. - Then pass it to any AI coding tool. This worked out for me well.

What it does: It's a CLI that integrates a third-party AI design service ("AIDesigner") into Claude Code by writing config files and registering an external MCP server ( Concerns Not affiliated with Anthropic — published by an unverified individual/org 5 days old on npm (as of today) — no community vetting, no download history Source repo is private — you can't audit the full code before running it License is UNLICENSED — unusual for a publicly distributed tool Registers an external MCP server into your Claude Code config, meaning Claude will make outbound calls to during your sessions --scope user would affect all repos globally with no rollback/uninstall option Credit/billing model is baked into the installed sub-agent instructions What init actually modifies .mcp.json in your project (or ~/.claude/ globally) .claude/agents/aidesigner-frontend.md .claude/commands/aidesigner.md .aidesigner/ directory Recommendation: If you want to try it, use --scope project (the default) rather than --scope user, and inspect the written files before doing anything sensitive. If you don't trust the service, skip it — there's no uninstall command, so cleanup is manual.

wait this is actually genius... no more "make the button bluer" 20 times lol

Claude Code actually did a pretty good job on my site but bro the credits run out wayy to fast feel like im getting robbed ngl was mid build and got hit with a "You're out of extra usage"💀

Do I really know what the heck i just read? No. But I have Claude, along with other back end tools, building me refreshed website for my 900 plus 401k clients in dentistry. I pasted in your post to Claude, it accepted it as fact, and then it fixed the issue. So I asked, what the heck just happened, give it to me in plain English for just a guy. Here's what I got: What We Just Did — Plain English Before today, when you asked me to build a website, I was working like a blind contractor. I'd write code, declare it done, and hope it looked good. No visual judgment. No rulebook. Just pattern-matching from memory. Today we gave me two things I didn't have before: 1. Google Stitch (the design engine) Google built a free AI tool that actually sees designs. You describe what you want, it generates a real visual layout — colors, spacing, fonts, the whole thing. We connected it directly to your Claude Code so I can use it without you having to touch it. Think of it like hiring a visual designer who sits between you and me. You tell me what you need, I consult Stitch, Stitch draws it, I build it. 2. The Design Rulebook (design.md) We wrote down every design rule for your White Coat Websites — all 4 color palettes, the fonts, the hero layout, the button styles, what colors to never use in dental, all of it — in one file. Now every time we build a new specialty site, I read that file first. Dermatology, optometry, plastic surgery — they all get built from the same rulebook. Consistent. Professional. No drift. How You Access Stitch You don't have to. That's the point. It runs in the background when I need it. You just tell me "build a dermatology homepage" and I use Stitch automatically. If you ever want to play with it directly yourself, go to — sign in with your Google account and you can describe UIs and watch it generate designs. But for our work together, you'll never need to go there. One sentence summary: We gave Claude eyes and a rulebook. Building the next 10 specialty sites will be faster, more consistent, and less generic than anything I could have done before today. Me. Crazy. Just crazy. What a fun new world.

Design was the obvious next gap to close. But the bottleneck keeps shifting. Code is solved. Design is getting solved. Distribution isn't. Built 5 products with Claude and Cursor. Building keeps getting faster. Finding buyers doesn't.

coding got fast before taste did haha. giving claude the design system context is the only way these UIs stop looking cloned

This is exactly what MCP was designed for → plugging capability gaps without waiting for the model to improve. The pattern here is powerful: identify where AI is weakest, build a specialized tool, connect it via MCP. The builders who see AI limitations as product opportunities will own the next wave of dev tools.

giving the model its own design tool instead of trying to make it think in CSS is a much better abstraction. the bottleneck was never coding ability, it was spatial reasoning. an MCP that handles layout decisions separately lets Claude focus on what it is actually good at .

This is exactly the right approach — instead of patching the gap with prompting tricks, give the model a design-native tool and let it work in that language. The "Claude creates and drops designs" workflow removes the handoff friction that kills most agentic UI workflows. What design platform is the MCP connecting to?

blueprints before building is the perfect analogy. reducing that back and forth is exactly why having a proper claude code config matters so much. caliber auto generates the whole setup from your codebase so the agent actually starts with context rather than figuring it out mid session

the Inter font purple gradient card grid is embarrassing at this point. the context gap is the real issue, not the model. solving it at the design system level is actually the smart fix.

You don't need any external design tool for a lot of use-cases tbh

So my candid question remains, how do you get to know of these guys that build stuffs? You always come with “this guy built…”, “this guy did…” and all. Great content by the way but wondering the amount of time you invest in this. Is that what you do for a living?

github ?🤩🤩

MCPs that give the agent full project context are the real unlock. We use the same pattern for document processing - the agent gets the full schema context before parsing, so it knows what fields to expect. Context-aware agents beat generic ones every time.

or just split it let claude build and another model verify/design claudex solves most of this

the inter font / purple gradient issue has a specific cause. the model trained on millions of publicly available UI examples and the plurality of those look alike because they're all built on the same Tailwind/Bootstrap primitives with the same defaulted aesthetic choices. what the design system MCP actually does: it provides the discriminating signal that makes one brand different from every other brand. the model already knows how to do design. it just needs to know which decisions are yours.

it's insane that it actually fixed what claude wasn't good at

the mcp angle is the actual story here, not the ui complaint. claude driving figma directly beats generating react components

mcp that gives claude eyes for design is genuinely clever

@grok what is the mcp

Claude Code's UI design weakness is real. Giving it a design tool MCP is the right move — let the model focus on logic and outsource aesthetics.

Skills can also be a good option tho

They got skills for that

🤣

Here you go

single model for every ui task is the actual problem. been routing visual stuff to a lighter model and saving the heavier context for logic in kilo code, makes the inter font purple gradient issue basically disappear. does this mcp work in other editors too or just claude code?

The 'Inter font, purple gradient' callout hit home. Too accurate. Context-aware tooling might actually break the AI design sameness loop.

@grok what is the mcp

the framing 'claude is terrible at design' assumes the model lacks design reasoning. that's not actually what the mcp fixed. what it fixed is tool access. claude couldn't see design artifacts or produce them in the right format inside the coding workflow. same model, completely different output once you give it the right interface. the pattern this establishes: most things that look like model limitations are actually integration gaps. and integration gaps close in weeks, not model release cycles.

What is the name of the MCP server?

yeah this actually makes sense the biggest pain isn’t coding UI it’s making it look good if Claude can handle that part, that’s huge

MCPs that give the agent access to specialized tools is the right pattern. the agent doesnt need to be good at design -- it needs to know when to call a design tool. same principle applies to marketing, analytics, deployment. tool orchestration beats model capability.