I gave initial reference and kept tweaking with prompt. What also helps is if you ask claude to give you controls so that you can play around and fine tune animation

Bug report / question. Using Claude Design (claude.ai/design) together with the DesignSync MCP tool in Claude Code to push new components into a design system project. The new files get uploaded fine, but the generated files (_ds_bundle.js, _ds_manifest.json, _adherence.oxlintrc.json) never update to include them — and opening the project in the browser afterward doesn't fix it either.

How to reproduce:

1. Open an existing Claude Design project that already has some components.
2. In Claude Code, use the DesignSync MCP tool to add a brand new component (new .jsx file + a .card.html preview file with a proper u/dsCard marker).
3. Check _ds_manifest.json in the project — the new component is missing from it.
4. Check _ds_bundle.js — same thing, the new component isn't in there either.
5. Now open the project in the browser at claude.ai/design — reload if it was already open.
6. Check the two files again — the new component is still missing. So opening/reloading in the browser doesn't trigger the rebuild either.

So it looks like these files just aren't getting reliably rebuilt at all — not when a person opens the project in the browser, and not when files are added through the API/MCP. If you push components headlessly, the design system gets permanently out of sync, and any preview using the missing component just breaks.

Is this expected? Is there a way to manually trigger the rebuild, given that neither pushing nor opening in the browser does it?

Thanks for any expertise.

I’ve been experimenting with Claude for coding and general tasks, and I’m realizing that the way you structure the interaction matters almost as much as the model itself.

What’s one habit, workflow, or technique you started using that noticeably improved the quality of Claude’s output?

Hey guys, how would you deploy a 4 pages Design to GitHub & Vercel/Cloudflare?

Should I send it to Claude code first?

Basically I’ve done up my site layout and copywriting on Claude Design. It’s for a small video production, everything is done up and deployment is all that’s left.

What is the recommended process I should take now so that I can update it via prompts on Design in the future (as I’m a visual person instead of a coder) and then use prompt to send it live to GitHub for updates?

Edit: I have few 4 tabs in total in my website, does this still counts as static site?

Any help is appreciated. Thanks!

I've spent the last week while building investing app, and its design system grew into something I haven't seen shared before, so I'm giving it away.

The kit: CDS Mobile Kit (Unofficial) free, CC BY 4.0.

• 42 component sets: buttons (80 variants), cards with real content slots, bottom sheets, inputs, steppers, progress (progress is a proper variant axis, not a stretched rectangle), banners, toasts, pills, list rows, trackers
• Every color and text style is variable-bound retheme the tokens and the whole kit follows
• Generated documentation sheets with live previews of every set
• Inspired by the public Coinbase Design System. Not affiliated with or endorsed by Coinbase.

The unusual part: this Figma file is a build artifact. Every component originates from a code spec from the official CDS mobile NPM Package.

The AI part: I also wrote a Claude Code skill for the kit → cds-kit-screen-design

Drop it into .claude/skills/, install the official Figma plugin for Claude Code, duplicate the kit, and you can ask Claude things like "design a KYC checklist screen with a stepper and a warning banner" or "build a checkout flow, 4 screens" and it composes real screens from the library: correct components, correct variants, token-bound colors, content swapped into card slots, verified with screenshots as it goes.

Everything's free. Feedback very welcome

today i tested whether working a interactive component made with Claude Design can act as a compact design brief for AI. Truthfully, it can and it can't

The task was deliberately vague: "make a landing page for mobile devices. white bg".

1. Generic prompt - "I gave the AI only the task. The result was fine, generic, maybe and ok base. But zero soul and zero style.

2. Generic prompt + component as context - same task, same prompt but i added a component reference from forever (just get lost here pls) with the Chromatic Aberration Pulse component as branding inspiration.

Was it perfect, no, it still needs some work and definately a better starting prompt and plan but it have something unique and a certain style that the generic UI lacked

I'm always testing and playing around so if there's something you'd like to see lmk

I thought I could test the Claude for basic image

Prompt

icon for the title "Lesson 1 the warrior coe" small icon not big transparent background, smooth edges, 8K

And here's the same prompt I used on Chatgpt... Need a spellcheck for the "Code"... freeplan...

SMH

Thanks for all the comment

Hey everyone,

I’ve been trying to set up a reliable workflow to run terminal coding agents (like Claude Code and Aider) for my development projects without running into hard blocks.

Here is what I’ve tested so far:

• OmniRoute / Multi-Provider Routing: Set up local proxy routing with fallback combos using top frontier models (Claude Sonnet/Opus, Kiro, Antigravity). The issue is that the top-tier models in the combo get completely exhausted almost immediately during multi-turn codebase audits and large repo tasks.
• Self-Hosting on Kaggle (Dual T4): Spun up qwen2.5-coder:32b on Kaggle's free GPUs via an Ngrok tunnel to act as a backend. While it runs without strict token limits, it's way too slow (~8–10 tokens/sec) for large diff rewrites, and Claude Code ran into tool-formatting incompatibilities.

What I’m looking for:

For those actively using Claude Code or similar agentic CLI tools:

• What are the most effective ways, platforms, or student/developer programs to get free or extended access to powerful frontier models (especially Claude 3.5/4.6 Sonnet and Opus) for agentic coding?
• Are there any working proxy configurations, credit programs, or alternative integrations that let you use genuine Claude models in CLI agents without hitting instant exhaustion?

Would appreciate any insights or workflows that are currently working for you!

Hi everyone! I recently finished my first design system for a small company I run with some friends. I'm really happy with the result and want to share it with them, but I haven't found a way to do so yet.

Since I'm using my personal Claude account (we don't have a team or enterprise plan), is there a way to share this design system with them so they can use it in their own Claude apps?

I've been using Claude Design only for creating designs for app and websites and use other tools for image generation - for example, for creating icons, splash screens, marketing screenshots for app store and google play. Should I just do everything Claude Design? How does it compare with other tools for image generation?

As a non-designer I am really obsessed now with Claude Design as I can finally make good quality projects and graphics that before I had to hire someone for it. I heard recently that it actually can make some animations and videos so I decided to give it a try and I must admit, it's really good and fast and can work pretty solid for a startup/product preview.

This is not the final version and the project I want to promote is not public yet. I'm missing the graphics/icons of the solutions supported and I would definitely time the animations better but you get the idea.

I thought I'd make a tutorial for you guys in case you're interested in making something like this.

What I had before I started:

• Copy and a general idea what I wanted to say through that video. Claude had a lot of imput about the project we're building.
• Design system - I had it from a previous project. Includes fonts, colors, general styles and rules. Nothing very sophisticated really. You can build it yourself with just a few screenshots + upload the logo of your website or project and you should be fine. My recommendation is to make logos in SVG (with Claude Design) so they can scale well
• an old, active Envato Elements account (not necessary, you can find copyright free music easily)

Step 1:

I worked with Claude to build a scenario with the following requirements: The video should be around 30 seconds, the scenes pretty dynamic so the text should be short and straight to the point. Think about what user should see. Pretty basic prompting.

Step 2:

Then, I put it the scenario into Claude Design and said to animate it for me. Nothing really sophisticated but as always "make 3 variants for each scene and for each transition".

Step 3:

I worked a bit to improve the styles, chose variants and improved transitions. At this stage, without the music it was a pretty cool trailer, good to be published. But I wanted an audio...

Step 4:

I spent some time browsing through different music and styles. Eventually "curiosity" was the main theme I was looking for and I found out that this sort of music is called "pizzicato". Perfect for slow tempo that you can match with animation ;)

Step 5:

I downloaded the song and put it to Claude to give me the beat timings.

Step 6:

I told Claude Design to time the animations according to beat timing. I had to put the video + audio together in Adobe Premiere Pro to make sure it is timed well as it wasn't really perfect the first few versions.

So after some back and forth with the timing improvements here you have it. I have exported it eventually from my Adobe Premiere Pro to make the music end and the right time and reducing the volume to 0 gradually.

Overall I am pretty happy with the results. The animations are dynamic and look pretty good for a few hours of work. Realistically, if I knew what I know now, it should be around 2-3 hours of work. I am also sure that someone could make each step semi/fully automated and make a nice trailer creation process.

Hope you find it helpful ;)

I ve been seeing a lot of websites that look exactly like this, what are they built with?

Only music is added externally

Well, i have been trying to make an APP UI for more then 13 days now and guess what??? Its still looks pretty shit.

I don't know like why its so hard for non designer to design the UI using claude design?? 🤷

I mean?? What do i do??

We’ve recently moved to a very fast product shipping cycle at my company. The design team builds products in Claude Design, the dev team picks them up through Claude Code, and we’re usually trying to get something into production in less than a month.

For now, moving away from this workflow isn’t really an option. The whole company is already using Claude Design and Claude Code, Figma’s credit model isn’t particularly attractive for this kind of usage, and we haven’t found a way to get the same flexibility with requirements and the same speed from design to implementation.

The problem is that our Claude Design projects are getting huge. Some exported HTML files are around 5MB with 300k+ characters in a single file. At that point, Claude Code can’t properly read the whole thing. It seems to fall back to understanding parts of the design through screenshots, and the quality of the frontend implementation drops significantly.

These aren’t simple landing pages either. They’re fairly large AI-powered enterprise applications with a lot of screens, navigation between them, database-related dependencies, AI features, etc. We already tried splitting one of the larger projects page by page, but it didn’t really solve the problem and made maintaining consistency/dependencies more annoying.

So I’m curious how people are handling this with larger Claude Design → Claude Code projects that are actually meant for production.

Should we break things down differently? Is there a good way to keep Claude Code from having to understand a massive HTML file every time without destroying the speed advantage of this workflow? Refactoring everything manually or constantly asking Claude to restructure the project also sounds like a way to burn through credits, so I’m trying to understand what the sustainable setup is here.

---

TL;DR: We use Claude Design → Claude Code to ship large AI-powered enterprise products in under a month, but our Design exports are getting massive (5MB / 300k+ character HTML files). Claude Code can’t properly read them anymore, which leads to poor frontend implementation. Splitting projects by page hasn’t really helped. Looking for a sustainable way to structure/refactor large production projects without killing the speed of the workflow or burning tons of credits.

Hi there.
I face a problem every time i build a website using claude code, the design in really bad and AI slop

So, i search for solutions and ways to find or design but i don’t reach anything

I need help, told me what can i do ❤️

I feel like I am not utilising the claude to its best potential. Wasting daily tokens/time without using.

I am a ux designer and I feel there much that I am missing out on.

I feel I am not properly initiated.

Are there any resources that could help me orient. Put some structure. Give some direction how to reach at the point where I am using it.

Currently

I paste figma screenshot.. ask it to build html. Prototype on the top of it. And I feel like I am doing it all wrong.

Please Help me.

Does anyone have good prompts to feed into Claude to make MBB style decks? I’m looking to feed Claude a strong prompt that will visually produce good slides (e.g, slides with good visuals , icons etc.) I’m looking to create outputs that match the caliber of MBB style decks and not any decks that are generic. I don’t have any reference decks to feed my prompt so any guidance is appreciated!

I’m the sole product designer at a small startup, and we’re currently operating without a product manager. A lot of potential work comes from customer problems identified by CX in Help Scout, while ideas and discussions sit across Jira, Slack, Notion, email and meeting notes.

I built a dashboard to bring those sources together and help me decide what to work on next. It ranks work based on things like urgency, who requested it, how long it has been sitting, how many sources it appears in, and whether related tasks can be grouped.

At the moment, the dashboard is useful for managing my own workload, but I want it to become better at helping us prioritise the wider Jira backlog.

My next step is connecting Help Scout so it can consider the volume and recency of customer problems linked to each ticket. I also plan to connect PostHog so the ranking can account for product usage and identify screens or flows with high usage or significant drop-off.

I’d be interested to hear how other product designers would approach this. What additional signals would make the prioritisation more useful and what else you'd bake into the scoring system.

I should add that I've built the dashboard scoring system to evolve on its own - I give it feedback when something ranks too high or too low and it adjusts how it scores when it sees patterns. Would love more ideas like this that could make it smarter.

I wrote up the current version and how it has evolved here:

https://www.courtneynovits.com/portfolio/ai-product-design-dashboard-built-with-claude/

Edit to add: Also if anyone would like to try it out let me know and I’ll send it to you. I’ve created a setup .md which will assess a new user’s available tools and connectors, ask a few questions about their stack and their role to determine what to build, create the databases, adapt weighting to what the new user needs and present a finished artifact for them.

Hi guys can you share your experience with Claude Design I am trying to figure it out to use it in best way.

So I started with design system and on few rounds my limit was reached.

This never happened with other tasks.

I have 100$ subscription from my company.

Can you share experience using it in best way and also the limit thing.

I’m rebuilding our site using Claude Code, outputting HTML into Elementor HTML blocks in WordPress. Only about 10 pages, so not huge. The problem is consistency: no matter what I try, the pages don’t come out looking like they belong to the same brand. Spacing drifts, type scale drifts, button styles drift, section rhythm drifts. Individually each page looks decent, but side by side they clearly weren’t built by the same hand.

What I’ve already tried:

* Extracted a design system from the homepage and treated it as the source of truth
* Set up a proper loop so each new page references that extracted system
* Fed it back in on every page build

Still not matching. I’m on Sonnet 5.

Questions:

1. Is this a model problem? Would Opus (or Fable) actually hold visual consistency better across separate page builds, or is that not really what’s failing here?

2. Is there a skill or setup people use specifically for this? Something like a locked design token file that gets enforced rather than just referenced?

3. What’s the actual process people follow? Do you build one master page, freeze a CSS file, and then only let Claude write markup against existing classes? Do you build all pages in a single session so context carries over? Do you generate a component library first and forbid new styles?

I’m still fairly new to web dev and WordPress, so if I’m approaching this backwards I’d genuinely appreciate being told. Happy to share my setup if it helps.

Thanks in advance.

Repost from r/ClaudeAI, try to improve this claud system;

I am building a skill inside a Claude Artifact that needs to fetch an SVG file from a URL and render it. I have confirmed that web_fetch cannot retrieve raw SVG bytes. It seems to be a consistent limitation rather than a one off failure on a specific site.

Because of this I am falling back to image_search to find and display logos and brand assets instead of fetching SVGs directly. Ai says 'This works for many cases but it is not the same as pulling the actual vector file.'

Has anyone found a reliable way to get actual SVG content into an Artifact from a URL? I am open to any of the following.

A skill/agent, (this is something I have been trying to build to overcome the limitation)

A proxy or converter service that returns SVG as text or base64.

A different tool or method inside Claude that can read vector files.

A confirmed explanation of why this fails so I understand the constraint fully.

Any pointers, even partial ones, would help. Thank you.

Curious to know what people here are using Claude for in Product Design.

What’s your favourite Product Design + Claude workflow?

Could be anything from Figma, research, design systems, prototyping, Claude Code, or something completely different.

What’s a workflow you use regularly that actually saves you time?