r/ClaudeDesign

Hi, I made this one. I've played Wordle-likes for years and always wanted to build my own, but I never had an idea that felt like mine.

The push came from a strange place. Half of what I read these days is written by AI, and it's never short. Every email, every doc, twelve words where five would do. At some point I said the phrase out loud, long story short, and realised it was a game.

So: you get a twelve-word sentence. You rephrase it in exactly five of its own words. Real English, same meaning, your job is to work out which words carry the sentence and which are just dressed up to look important. Scoring is Wordle style, blue for right word in the right spot, orange for in the answer but elsewhere, grey for out. Five tries, one sentence a day.

My wife and my brother were the playtesters. An early version let "the" beat proper words in the answer, which felt awful to lose to, so the answers now always favour the concrete word. That one change ate a whole weekend.

I am a graphic and website designer, and when I first started seeing websites and designs with Claude design look and feel, I was immediately drawn to it. At the time I didn’t realise these websites or designs had this Claude aesthetic, but after doing research I realised they were more than likely build with Claude Design or Claude Code. I recently rebuilt my entire online portfolio with Claude Design and being my own biggest critic as a designer, I can honestly say this is the first time I actually love how it looks so far. It’s clean, responsive and well-structured.

Recently I have come across posts on Instagram of people bashing the Claude design aesthetic, commenting on how it’s instantly recognisable through its eyebrow text, heading and paragraph structure, the fonts that are used, color schemes etc. While I realise that more and more websites and designs are being designed with Claude, it’s up to the designer to ensure the final product does not look generic.

I am interested to hear everyone’s thoughts on the Claude design aesthetic and whether you love it or you try to steer away from it completely.

It’s my understanding that Claude is terrible with image generation. Like truly, truly horrible. I’ve seen firsthand the little stick-figure outputs it produces. ChatGPT, given the same prompt, will output something far better and possibly even usable.

Enter Claude Design: a fantastic branch of Claude that people absolutely rave about. I love the look of the new desktop module, its easy templates, design system setup and the ability to manually change things yourself.

Here’s the issue though: let’s say you’re building a slide deck using Claude Design. It only works well if you give it a prompt *and* all the resources (design system, logos, fonts, etc., as well as all the raw images/assets to pull from and use) — but since Claude’s image generation is so damn terrible, you can’t simply “prompt in a picture of X” or “a hypothetical logo for your hypothetical company.” In my mind, this should be an essential part of Claude Design as a tool.

How are people getting around this? What do you do if you’re building something with Claude Design but also need an element of image generation as part of the build/project?

Am I simply naive and missing something? Are there workarounds? Are there specific workflows that have been documented and shared to address this specific problem?

I’d love the community’s input, and I apologize if this has come up before.

Thanks in advance for the advice.

I’ve been searching for weeks for an answer, and I’ve also come across posts about people saying to tell design to create a handoff file which I can hand off to Claude code along with instructions, not just use the link design provides.

Even after getting the handoff file and handing it to Claude code it still can’t create the 1:1 app I’m trying to make, the way the project looks in design it doesn’t look the same when it gets recreated, broken animation, stuff completely out of place. I’m aware that it cannot be exactly 1:1 when I hand it to Claude code.

I’ve been telling Claude code to fix the differences that were caused while importing the design but ofcourse Claude code either completely breaks it or doesn’t fix it at all even after showing it comparison images side by side it still wouldn’t get the gist.

I’m building an IOS app with Claude code and trying to design the interface in Claude design, so far I’ve been insanely stuck and I don’t know what to do, I’m willing to take any advice you can give me, really need help understanding what’s going on.

What’s the right way to go from Claude Design to a public website?

There’s a built-in way to publish artifacts, but it’s hard to control and no custom domain.

Claude code can take it but is that a smooth flow? Assume no engineers in process and it’s a portfolio site, interactive, rich, but no login/database.

I'm working on relying solely on Claude Design for prototyping, pass it to my React app and have Claude build the design using our component library.

The challenge is twofold:

1. If any changes are made to the Claude Design system (like adding a new button type), those changes should be reflected in our global components.
2. Claude should know which component to use based on the prototype instead of adding generic HTML. For example, if there's a tab in the prototype, it should use our globalTab component instead of a generic HTML element.

Has anyone figured out a workflow for this?

The recent updates have made it worse to export any design. The PDF always have A4 size, and I generate PDF for linkedin carousel which are of 4:5 dimension, so I end up getting extra black strip at top and bottom of the pdf to make it A4 size.

And for PNG, I have download individual pages one by one.

It used to be lot simpler a few months back, but now I have starting going back Canva and Figma for designs.

Claude designs takes a lot time, tokens, and give a design that is not even export-able.

90% of Claude advice is technical. These are about everything else:

1. Use Haiku more. Surprised? Haiku is rapid, aligns and sanity checks fast with lower cost
2. Expand experimentation. I use images, components or scribble rough ideas and then send them to Claude Design (or use Canvas mode inbuilt) to create lots of prototypes and variations. I find it often works better than a prompt: "A picture saves a thousand words"
3. Focus on the quality. It's easy to slip into a perfectionist mindset with non-deterministic models. Imo this leads to lower productivity. Take the one or two best outputs and iterate on those.
4. Create a final set. When you get something you like 90-95% make one more grid of assets but ask: "Create a grid of 9 variants made in the style of a different artist. Add a toggle for light and dark mode. [on brand]"

#5 is yours to add

Does anyone have a referral link for claude 7 day trial?

Hello there,

I was wondering if anyone is having the same problem - in the company, we have our design system defined in Claude Design. But for some reason, even with guardrails and instructions not to hallucinate whenever I try to create a prototype (that's even coming from a more defined screenshot e.g. from Figma) it still messes up tokens - colors are close but not the exact colors from the design system, border radiuses etc.

Was wondering if there's a way to explicitly just prompt or use a skill to map only from what's in the DS? TIA!

Claude Design makes far better UI than I get out of Claude Code alone. The problem is that they are separate products: own projects, own chats, own files, and no API. So the two never met, and everything I designed there I copied into my repo by hand. There is an official MCP server but it only fetches stuff you already made in Claude Design. Now Claude Code can drive Claude Design.

I managed to solve that. It is an MCP server, free and open source, and it makes Claude Code talk to Claude Design directly (not 1 way but both ways).

you  ->  Claude Code  ->  claude.ai/design  ->  a design
                      <-  its reply, its files  <-

In practice you say what you want, and Claude Code briefs the designer, waits for the answer, reads what it said back, screenshots the rendered page so it can actually judge the result, and pulls the files into your working tree.

What it can do:

• start work: the home screen templates, create a project or a design system, link design systems to a project, attach a local folder or a GitHub repo as its codebase, upload a Figma .fig
• talk to it: list projects and chats, switch the active thread, send a prompt with local attachments and get the reply plus what changed, tail a transcript
• see what it built: screenshot the page, put the window on your display at a given project and page, grep the project files with line numbers, read a file or a line range
• move work around: pull files down, push files up, for example components into a design system
• delete, permanently: projects, files, chats

The part that makes it more than a novelty is attaching your actual codebase to the design project, so it designs against your real components instead of inventing new ones.

Two details I am oddly proud of. delete_project refuses a UUID and demands the project's exact current name, the way GitHub guards repo deletion, because an agent will happily carry a UUID over from the wrong step. And "link local code" browses with window.showDirectoryPicker(), a native OS dialog no automation can drive, so the picker gets replaced: the folder is read in Node and handed to the page.

There is no API, so it drives a real browser. The seed step copies only claude.ai cookies out of a Chrome profile you already use, nothing else, and there is a login command for when the session expires. It ships a skill too, so you can just say what you want designed instead of naming tools.

Free, MIT, link in the first comment.

bought cursor ultra + claud-max from a russian site a few weeks ago for way less than the normal price.
swapped the login details and just started using it. so far it’s been working perfectly, and the usage is honestly better than what i had before.
keeps making me wonder how these sellers are able to offer it so cheap. anyone else in the same boat?

so like most of us we are all building tools, im about to hit up a network meeting and i found it difficult to show a demo video of my software as it was loud.

i decided on a page that uses scroll animations with gsap and three.js, but needs to have text at the same time and no audio. i also wanted to show it passing data to the mobile app then continue on there. all using just two 1-2 min screen recorded videos.

First, I asked Claude to create a kind of script / or just what features I should show. Then I used OBS to record myself with me narrating along as i go.

After that it was a case of using the claude-video git repo + whisper + fable 5 to make a nice skill to /watch the video with my voice and transcript then use remotion skill to cut it up a little.

then it was a bit of a challenge getting it to place nice but got there in the end!

How would you have done it?

or would you just use demo videos with audio?

i feel like during a launch id rather share something cool like this ....but maybe its just cool to me and clients dont care! ill let you know after the meeting today!

Does anyone know about this?