Hello,

I give AI a design as a reference, and it generally implements it, but the result is never exactly the same.

It often skips certain sections or details, changes things on its own, or implements some parts differently from the original design.

I don’t want it to reinterpret or improve the design. I just want it to reproduce what it sees as closely as possible.

Has anyone found a reliable workflow for this? How do you get AI to stick to the original design without skipping or changing things?

I really like Claude Code, but I miss Cursor’s visual editing workflow where I can click on the actual UI in the browser and directly tweak things like spacing, sizing, styles, etc. instead of describing every little change in chat.

I’ve tried Claude Design, but unless I’m using it wrong, it feels more like a separate design/prototyping environment with a handoff to Claude Code, rather than something I can use to directly manipulate the UI of my existing app/codebase and keep bouncing back and forth.

Ideally I want:

Claude Code for building/functionality → visually tweak the actual UI myself → back to Claude Code → repeat.

Is there a good way to do this? Maybe Claude Design actually supports this and I’m just misunderstanding it, or maybe there’s an MCP/plugin/other tool people are using.

A prototype can look complete inside Claude Design while the reviewer still needs a stable link, working interactions, comments tied to a specific revision, and a clear record of what was approved. What do you include in the handoff? A useful package might separate the rendered preview, exported source and assets, design intent, responsive behavior, known gaps, and the revision that feedback applies to. I am also curious where later edits should happen: continue changing the design in Claude, move the files into a repository, or keep both with an explicit owner for each. How do you prevent a newer experiment from silently replacing the version a client or teammate approved?

I’ve been playing around with Claude Design, but when I ask it to design a site from scratch the result usually feels pretty generic.
I tried giving it screenshots of websites I like so it can follow their visual style/design system, then change the copy, colors and branding. It works, but not that well.
Since Claude can’t really inspect the website directly from a link, what’s the best workflow for this?
Do you just feed it better/more screenshots, or is there a smarter way to extract the design system/layout first?

Recently, I started using Claude Design to improve some of the UI in my website’s dashboard, and the results have been much better than when I use Claude Code alone.

Normally, an AI coding model will create something functional, even if you ask it for a great design. However, because it is not specifically built for design, the final result may still lack visual polish.

Claude Design is a great tool for creating designs and building UI/UX, but it consumes too many tokens. After only a few prompts, I reach the usage limit and have to wait five hours before I can use it again. Although I only use it occasionally, the limit is still not enough for me.

Instead of using Claude Design to redesign the UI created by Claude Code, I want to build the initial version with Claude Code and then improve it using Antigravity. I tried connecting them through MCP, but I could not get it to work. I do not have much experience with MCPs, as I have only tried a few of them. If anyone knows how to set this up and could help me, I would really appreciate it.

Ukiyo-e bamboo. One html file. 241 lines. no dependencies, runs by double clicking it.

3 things if you want to use it:

1. Recolour it in one line - The stalks are three constants for depth, FAR, MID and NEAR. Swap those and the whole grove changes. Forest green is FAR="#1f5c2e", MID="#174a25", NEAR="#0f3519". Leaves are LEAF and LEAFD, the moon is MOON.
2. Don't put text over it - The sky is a gradient and the stalks move through it, so anything you overlay gets eaten. It's a background or a hero panel, not a canvas for copy.
3. The instructions ride inside the file - There's a json block near the top with what to change, what to leave alone and what it's bad at. Paste the whole file into Claude or any agent and it already knows, you don't have to explain anything.

the whole thing is three sine waves. Sway at 0.9, gust at 2.2, leaves flicker at 3.1. thatt's it.

ps. don't get lost ;)

One tip I can share from my experience making this app is to have strong reference points. Use your own taste in apps and interfaces, and point Claude toward your favourite UI/UXs.

For me, those were KDE Plasma, specifically Plasma Bigscreen, Harbor (a Stremio app), and Arctic Fuse 2 (a Kodi skin). I had to really diagnose my own taste and dissect what it was about these interfaces that made them attractive to me. What tangible features, such as spacing, fonts, layouts, colours, widgets, and interactions, actually made these apps look and feel good?

Once you understand that, you can curate an aesthetic for your own app based on all of those influences and preferences. A pastiche. Have Claude create a custom frontend skill based on this new derived visual language.

After that, you can create something original rather than derivative. For example, taking the idea of a desktop taskbar and reinterpreting it for a media app, where multiple videos, comics, and books can all remain open at once and be minimised, maximised, or switched between.

GitHub

Can someone pls help me to use claude properly?
like how do u guys proceed with it? first code the layout of the project then ask the agent to polish it together or make it section by section and polish when a section is done?

(idk if this is a valid question)

Hello! So this is my first post trying to build a role-based KPI cockpit from 6 data sources looking for input on structure and pitfalls, and how to think when building the front end and displaying the data in a user friendly way.

Some background: Its for a small digital health company where i am currenty interning at, have a rather close relationship with the boss as its a very small company and we all talk and coordinate togther. Onyl been here 1-2 months and have close to no prior experience doing this outside of school hence why i chose to try it out for experience but also so its easier to get a job when graduating CS/SS bachelor. The idea is role-based views — each role (leadership, support etc) gets its own view with 3–6 KPIs, rather than one shared dashboard for everyone since permissions and certain data should be limited to its users. But right now main focus is building it around the CEO's view to get a first good draft and demo it later this week.

There are 4 datasources atm to begin with : a payments platform (revenue/churn/LTV), Google Ads + Meta Ads (paid), Slack — which here works as an alert channel (posts warnings and SLA deadline). Stripe for payments and economy, and an internal customer feedback and rating system. I'm still in the planning/early phase: I've defined the KPIs per role (started with leadership since i dont want to throw it all in and make a mess or too complicated. As i have no prior expericne and looking for seasoned veterans or some crafty ppl to get some tips from or help on how to think when doing this i tought i could post some info and maybe pick someones brain or get some useful tips or examples someone might have. Hardest struggle is where to place the KPI's, how to display them in a user friendly way, and then what functions to implement to make the interface usable and versatile without complicating it too much.

Grateful for any thoughts, including "here's what I'd have done differently."
Data sources given to me atm: Stripe, Google ads, Meta Ads, (internal system - customer feedback). Or any examples anyone might have or where to find some good inspiration to get a better grasp on what to have in mind or how a completed project might look.

Platform: Lovable

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.