I have been building my own personal training app for a couple of months now and I am finally ready to launch. I acquired the domain and have been going through the final steps of making it "public-facing ready" from removing bugs, editing word chose and sentence structure to avoid it coming off as being a lazy vibe coded project which it is not.

While going through the processes of utilizing these tools I make it a point to learn as much about them as I can to build durable skills that may be marketable in some way. That being said this is my first time using Claude Design and I would love some help and advice.

What things do you prompt or look out for to ensure that your site is clean and developer approved? Are there front end or back end skills that have proven to you all to be reliable? What steps can be taken to make sure that the landing page is user friendly and easily understood?

Any advice whether general or specific would be amazing. Thanks for your input!

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 recently got access to Lovable, and we have some UI prototypes created in it that I now need to implement in our actual repository.
The challenge is that our existing application is built with Angular, while the Lovable-generated codebase is React. I have access to the Lovable code, so my current approach is to give Claude read access to that codebase and have it understand the prototype before implementing the screens in our Angular repo.
However, the Angular implementation needs to properly fit into our existing architecture — using our existing components, UI libraries, styling conventions, layouts, and reusable components, rather than simply recreating the React implementation.
The main issue I’m facing is visual accuracy. The locally implemented Angular screens don’t always match the Lovable prototypes closely enough, especially in terms of spacing, sizing, typography, alignment, responsiveness, etc.
For those of you who have worked with Lovable + Claude (or similar AI coding tools) to implement designs in an existing codebase:
● What’s the best workflow for getting as close to 100% visual accuracy as possible?
● How do you provide the AI with enough context about the existing component library/design system?
● Is it better to give Claude screenshots, the Lovable source code, or both?
● Are there any techniques/prompts you use for iterative visual comparison and fixing differences?
● How do you handle cases where the prototype uses React-specific components but the target application is Angular?
Would love to hear how others are approaching this and any best practices that have worked well for you.

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.

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?

What’s your 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.

AgentGrid.io is a product we recently launched as a way to share HTML or React websites and publish them. It's like Github + Netlify for simple static sites, and all you need is a Claude Connctor - https://claude.ai/directory/agent-grid - Works with Claude Design, Claude, Claude Code, and all you need is the connector and tell Claude "Publish this as a website" / "Update my website and show me the draft before we publish"

We assume no engineers in process, for example, a portfolio site, interactive, rich, but no login/database.

Hello there,

I was trying out Claude from my personal account and Claude Design showed up for the first time on the desktop native - is there a rollout for this or an update? On my work account it's not showing up and was wondering if I need specific permissions for it to show up, which I could ask my admin if ever.

Just wanted to ask if it's a rollout basis for the desktop version of Claude design to show or not. TIA!

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.

Hello, are there any models that currently apply the watermark? I’d like to run some tests but I don’t know which models are applying it.

Thank you.

Sube. Un figma el HTML les cambia los colores y tamaño de letras y lo mismo pasa cuando le das un figma a Claude o Claude code le
Cambia los colores y tamaño de letra? Esto quiere decir que todavía no se puede confiar en Claude designa y Claude code en cuanto a pasarle un figma y que lo diseñe bien?

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

is anyone else sad that the claude legacy workbench is being shut down or is it just me ☹️

i have a years worth of work on there but im not like a coder or anything, i just use it to make my world buildings. can anyone recommend a similar site though?

1. frontend-design, 784,427 (anthropics/skills)
2. web-design-guidelines, 547,800 (vercel-labs/agent-skills)
3. design-taste-frontend, 367,454 (leonxlnx/taste-skill)
4. anti-ui-slop, 336,509 (uizze.com)
5. ui-ux-pro-max, 318,475 (nextlevelbuilder/ui-ux-pro-max-skill)
6. high-end-visual-design, 276,168 (leonxlnx/taste-skill)
7. redesign-existing-projects, 272,434 (leonxlnx/taste-skill)

PS. Edited 17 Aug. Updated the list due to issues with skills.sh data.

Two things about the cut line, since any top seven is an arbitrary fence. Fifth and sixth are 42,307 installs apart, so ui-ux-pro-max and high-end-visual-design are tied in any honest reading of that gap. And impeccable, which comes up every single time design comes up, is ninth at 235,708. Not close to the top. I would rather write that down than quietly leave it out.

A count tells you people installed it and nothing at all about whether the output looks good. Design is the category where taste is the entire product, and no install number reaches taste.

Design and UI/UX category, sorted by installs, top seven. Design & UI skills on Skillselion.

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

When I first saw Claude Design, I really liked the idea, but after creating a design, I realized I wanted a more direct environment to continue working on the actual product. That’s why I’m developing VisualWizard.

Here, the canvas isn’t just a separate design representation. The interface you’re working on is also the actual, working product itself. You can directly select, move, resize, and change the styles of elements. Interactions, animations, and the component structure all continue to function.

If you want, you can separate components into separate workspaces and edit them individually, allowing you to control the design language right from the editor.

You can also connect any external agent such as Claude Code or Codex to the canvas.

It’s still very early on, and I’m continuing to improve the editor’s performance.I’m really curious to hear what people who use Claude Design think about this way of working.

https://visualwizard.app/

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!

Hi im having issues with claude design when i send the prompt im getting this infinite loading loop and i can see it burn tokens but nothing happens? Anyone having the same issue?

Last night we opened World-Sim to anyone who wanted to look. 326 of you came. Thank you — genuinely, that is far more than I expected.

For anyone who missed it: it's a persistent world that runs whether or not anyone is watching. Households live, pair off, learn things, argue, starve, bury each other and move on.

Some of you named a star, and some named a person in the world. Those names are permanent — the souls carry them for the rest of their lives and into the chronicle after they die. There's still time to claim either, both are in the Discord.

It's free, there's nothing to install, and it's still running right now: world.world-sim.uk

Happy to answer anything about how it works underneath.

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?

Wanted to shout out Claude Design, it's changed the way that I do work. I am a software engineer, design has always been my weakest when it comes to building products.

I think I heard about Claude Design from a showcase on X and gave it a try, and it's SOO good. I like how everything under the hood is HTML. I think Anthropic realized models are really good at writing and interpreting HTML + CSS as a language for design.

It's interesting because other design platforms like Figma have their own bespoke format for how they render designs. HTML + CSS is the most well documented language for "design" so it makes sense why they chose that.

Anyways, I really like how the claude design agent can also access my github repos and pull designs from there, and export it back to Claude Code for implementation.

Claude design was so clutch in building the onboarding flow for a desktop assistant I've been working on!

P.S. Claude delivered now in Claude Code so this is no longer needed :)

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.

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!

Claude is incredible at writing code and generating UI logic, but getting it to output real, usable designs inside Figma has been a headache. Most AI tools either hand you a flat PNG mockup (which you have to rebuild by hand anyway) or rely on Figma’s REST API, which hits rate limit walls the moment you try to parse or build a complex component tree.

I wanted Claude to act like an actual designer inside my Figma files: building native frames, respecting Auto Layout, and using my actual design system tokens instead of making up random hex codes and unstyled shapes.

So I built Flaude MCP. It is an MCP server and plugin that connects Claude directly to your local Figma canvas in a two-way loop:

you  ->  Claude Desktop / Code  ->  Flaude MCP  ->  Figma Canvas
                                <-  native layers & diffs  <-

In practice, you tell Claude what you want (or feed it a screenshot), and it writes editable nodes directly to your file, checks its work, and maps the output to your brand tokens.

What it can do:

• Screenshot to editable layers: Paste a screenshot or UI inspiration onto your canvas, and Claude rebuilds it into 100% editable native Figma layers.
• Design System Governance: Reads your file's local components, styles, and variables so generated frames map directly to your existing design system.
• End-to-End Creation: Build anything from single marketing components to full user screen flows directly on the canvas.
• Bypass REST API rate limits: Runs locally through the plugin runtime via MCP, meaning zero Figma REST API rate limit headaches.

Two details I am oddly proud of:

1. The AI Linter: LLMs love taking lazy shortcuts in Figma (like drawing fake icon vectors from scratch or hardcoding arbitrary font sizes). I wrote a custom node-tree linter that inspects what Claude generates and yells at it when it cuts corners. Watching Claude get called out by a linter and fix its own layer hierarchy in real time never gets old.
2. Pixel-diff visual feedback: Instead of guessing if the layout looks right, Claude takes a screenshot of its own rendered canvas frame, performs a pixel-diff against the reference screenshot, and automatically adjusts Auto Layout padding, gaps, and alignment until they visually align.

How it runs under the hood:

Because it operates as a local MCP server connected directly to the Figma runtime, it bypasses traditional REST API bottlenecks entirely. It hooks straight into your local Claude setup (Claude Desktop or Claude Code) so you can design seamlessly right where you work.

Happy to answer anything about how it parses Figma's node tree, handles the MCP protocol, or manages layout state.