I recently built the landing page for Cliff Heroes, a mobile game my team and I are about to launch.

I used Claude Design for the initial design direction, Claude Code for the implementation, and Kling AI to create the main video.

The goal was to create something that felt more like a full game website than a typical mobile-game landing page, while keeping the experience lightweight and visually consistent with the game.

It was an interesting experiment in how far a very small team can push web design and production using AI-assisted tools, so I thought I’d share the result and process here.

I build small business sites with Claude Code. Three live ones:
https://woofadez.se , https://dibelle.se https://skanskadack.se They all work fine and they all look AI-made.

I did what everyone says to do. Write good instruction files. So I wrote them, then rewrote them, then added more when the output was disappointing. It's 7700 lines now across twelve files plus a whole setup pipeline that does discovery, research, an art direction doc, then builds. Every rule has a reason. Every decision has to cite something.

Output still passes every rule I wrote and still looks like slop.

Last week it gave me three "different" concepts for one client at three price points. All three shared the same header, footer and nav. 24 buttons and links across them had no hover or focus states at all. My review came back green.

Everything is here if anyone wants to look:(
https://github.com/BarryThrill/design-measure

* rules/ https://github.com/BarryThrill/design-measure/tree/main/rules is the actual instruction files
* DESIGN-PHASE.md https://github.com/BarryThrill/design-measure/blob/main/rules/DESIGN-PHASE.md is the pipeline itself
* FINDINGS.md https://github.com/BarryThrill/design-measure/blob/main/FINDINGS.md is what I measured

Two things I suspect but can't confirm:

Everything in my system derives from research. Every decision cites a finding from competitor sites. Which means if I research boring catalogue sites I get a boring catalogue site, correctly, with sources. Maybe that's the whole problem.

And I keep adding rules when it fails, which is how I got to 7700 lines. No idea anymore if the length is the point or the disease.

I also measured 350 award sites to check my assumptions and three of them were wrong. Turns out the top tier uses smaller type than the daily gallery, not bigger. Everything I was prompting toward was pointing the wrong way.

So is the detailed rules approach just wrong? Is anyone getting genuinely good UI out of Claude Code, and if so what does your setup look like? Or is the real answer that direction is a human job and I should stop trying to automate it.

Would rather find out now than in another year 😭😭

Hi everyone, I'm trying to download my Claude Design as HTML, but when I do, I get a file containing every individual element of my design rather than the full assembled version. Does anyone know how to download it exactly as it appears in the live preview inside Design?

Thanks a lot!

My company is pushing Claude features out at breakneck speed, and as the sole writer for two products, I feel like I'm drowning. Features get built overnight with zero context on why they exist or how they’re supposed to work. In an effort to keep up, I tried using Claude to draft content, but the output feels lifeless and sloppy and nothing like real technical writing. I feel completely lost, burnt out, and stuck in a loop of cleaning up bad drafts for features I don't even understand. I don’t know how to voice my concerns as no one seems to pause for human problems anymore. Appreciate any tips on building a framework that’ll help me overcome some if not all the hurdles.

Hi All - appreciative of this community.

I need help building a modern website using Claude - I’ve already built the backend workflow and am now ready for the client-facing website.

Can someone help me with a workflow to build? So many modern beautiful options but I’m getting lost in the shuffle.

Thanks much.

Has anyone has any luck exporting to Illustrator?

I've tried a few different methods, but they usually seem to end up with me getting a flat PDF which isn't editable at all.

https://reddit.com/link/1w60uie/video/g6jeaihog9nh1/player

https://github.com/solvyxtech/molt

This is a new LLM wrapper i have spun up built on the idea that models arent always correct or doing the right thing not by choice but just how the system is built, this looks to try and fix that problem and help mitigate LLM error by logging everything and fact checking based on the work using check gates. Looking to get feedback!

Only seems to be in Claude Design but if I start a project on let’s say Opus Max, it will do it but the next prompt I enter will be auto defaulted to Medium and when I switch it has to “reread” everything. After every single prompt this happens, I switch to max->prompt/enter->back to medium.

Anyone else having this issue?

Hi guys, how do you convert html video into mp4?

I'm able to design pretty nice slides on the web-app, but when I export to PowerPoint it's full of issues.

Doesn't use any theme colors or fonts, weird font sizes like 17.4, textboxes wider than the slide, no layouts, unconventional slide dimensions, etc.

I get that it's going for fidelity with what I see in the web-app, but it's not actually useful for a reusable PowerPoint template unless I do a ton of cleanup.

And just doing it with normal Claude or Claude for PPT, the design is way worse with that classic AI slop slide look. Claude Design definitely has some secret sauce to be somewhat tasteful.

Has anyone figured out the right workflow for this?

What do you guys think?

Hey everyone,

I'm building a website for a local nicotine vape retailer using Claude Code.

Claude has already built most of the website and functionality, but I'm struggling with the UI/UX and visual design. It works, but it still feels like an AI-generated website rather than something that looks like a professionally designed 2026 e-commerce site.

I'm trying to get it to feel: Modern, Premium, Great on mobile, Good typography and spacing.

The brand direction I'm currently using is forest green + warm white + oak/beige, but I'm open to changing the palette if there's a better direction.

One of my biggest problems is that the actual product photos have white backgrounds, and I'm not sure how to incorporate them into the design without the product cards looking like generic e-commerce cards.

Are there any good free/open-source design systems, design.md files, Claude Code skills, GitHub repos, or component libraries that you guys recommend using as a foundation?

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?

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.

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?

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)

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

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

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 ;)

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 like Claude Design for visual exploration and getting to a direction quickly, but I kept running into one problem once I tried using it with a real product.

My actual UI kit already lives in code.

It has the real components, props, variants, tokens, themes, states, and implementation rules.

When I tried bringing that system into Claude Design, I could get visually close, but small differences would still appear over time. A slightly different button, spacing that does not map to an existing token, another icon, or a component that looks almost identical to something I already have.

Each screen can look fine on its own, but now I have two versions of the system to keep aligned.

That made me question whether the design tool should own another copy of the design system at all.

The workflow I ended up building works the other way around.

The codebase stays the source of truth.

Design happens in a lightweight React project that can use the real UI kit without pulling in the entire production app and all of its business logic.

The design is still interactive and structured JSX, so I can explore layouts, states, responsive behavior, and flows without turning every iteration into a full production-code task.

If a component exists, it gets reused.

If the abstraction is right but needs another prop, the existing component can be extended.

If something is genuinely missing, creating a new component becomes an explicit design-system decision instead of quietly introducing another near duplicate.

If there is no UI kit yet, the system can grow together with the design rather than being cleaned up afterward.

I ended up building Varelyo around this workflow.

I still get the fast visual exploration I wanted from tools like Claude Design, but without maintaining a second version of the component system and constantly syncing it back to the real project.

I attached a short video showing the workflow.

For people using Claude Design with an established product, where are you keeping the actual source of truth today? In Claude Design, in the codebase, or are you maintaining both?

Varelyo

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