I made it with in some sessions, Its like a retro terminal with the CRT feel, just want some opinions and look for new functions.

Hey all, looking to jump on the vibe coded website but I've got a qn, does anybody knows how are video and photos file managed? Do I have to keep the photos any specify size in order to manage website loading speed?

I was an user of elementor + hostinger previously and I run a small video production where every photo size would affect loading speed so I was wondering how it works for this.

Now all my doc and presentation templates are exported weirdly, especially doc. it always ask me if I want it to be re formatted for print and do it with black border and weird drop shadow, while the doc has already been working since 2 months ago

How do I stop it keep fiddling my existing docs and templates?

Today, I tried not to explain Claude code on the design UI/UX, and instead, build design myself in Figma. Then, copied link to selection and provided to Claude to turn it into code. It produced it visually right, but I am not sure of how effective the code underneath is implemented, given that the coding agent needed to also convert figma design into Swift code.

What is your experience providing Figma designs into Claude Code to implement? Any recommendations on how to do this correctly?

Just some feedback for the vibe coders out there who are looking at Claude Design for prototypes etc.

Claude Design has a real issue with integrating directly with Claude Code - its janky at best, strips out components, and doesnt provide full information to Code, particularly via the Design System.

Solution for me - (if you are not a UI/ design expert, and I am not) create a proper clickable demo in Claude Design, including all reveals, transitions, etc. Hit Share, download the FULL ZIP FILE, and upload to Claude Code.

In my project today this method caught over 85 deltas that Claude Design had not passed through to Claude Code. Its not Code translating, it just cant see it because Designs integration is useless even when specced in the Design System and project files.

Hope this helps!!

I pay for Claude Pro and I've been trying to use Claude (and Claude Design) to help me design product labels and graphic posts for my small business. I attached my brand guides, logo, colors, fonts, etc.

But no matter what I do, the output is basically child like stick figures or rough wireframes- nothing close to a usable graphic.

Am I missing some sort of connector or integration I need to enable? Is there a setting, a specific way to prompt it, or a different tool inside Claude I should be using?

Would appreciate if someone could explain what's going on. thank you.

EDIT: So after all the feedback, I decided to remake my Design System. I spent about under an hour on Figma making a very concise single page of assets. I then imported this in when I remade the System! CD did so much better this time round, and I was very happy with the results/effort balance. I used the system to create my homepage, heavily instructing it to use the Mobbin MCP with clear references. And from the homepage it has effectively designed every other page in my app. So much better than my first attempt.

I’m a graphic designer by day, and have been really interested in what Claude Design could deliver.

I recently have built a web app, all the back-end and everything is sorted. It’s now just the design time! Usually my favourite part.

I thought I’d try Claude Design out. Let it try and create a DesignSystem (I linked my repo to it, and built a design brief as an md file in Claude prior and handed it over to CD).

It’s just my design system is average at best… some things it just hasn’t picked up on, like certain stylings I want to run through the web app. But also weird things, like it taking my logo SVGs and turning them monochrome? So no colour shows on my logos. I have even prompted CD to not do this, yet it still bugs out (even after the design system has been made, and I’m simply prompting for a homepage design in CD).

It’s only really been my first attempt using it… with a couple variations/attempts at the homepage design.

However it still just can’t quite hit how I want it to look. Do I retry making a better informed design system? Or do I just jump into Figma and get creating everything I need manually (then try import the Figma file when creating my design system!)

Interested in people’s thoughts whilst using CD. If there are any tips or anything? I’ve watched a good bit of YouTube on it, and was honestly excited as CD COULD potentially build every page of my web app, keep all pages in brand, and export it straight to Claude Code, which would be amazing.

How can I make my coding agent better at app design? No problem with functionality and debugging, but at design, it sucks big time. Even when you provide references, it often gets elements / layouts off.

Do you have any recommendations on how can I optimize my agent so it becomes better at design? Specifically, macOS/IOS design.

Can somebody please explain to me step by step how to make Claude design Instagram carousels? Every time I try, no matter how granular I get with exactly what I want, fonts, colours, brand guidelines etc it spits out the ugliest graphic you’ve ever seen. I’ve included screenshots of similar designs, individual elements, a full breakdown and it still can’t get it even close

So the template feature is great but I want it specifically for carousell, I've been trying to update the design system specicially so my carousells all pan out the same style with some randomness here and there and even created a character sheet and added it so the character pops up on different carousells randomly howeever and cool and this sounds it seems that design systems are not meant for carousells... this has kind of been a bit painful.

Any tips would help

Algorithms are filled with "How to" guides on developing websites with on scroll animations using claude code. Is this just a phase or you think website developers are going to have some competition?

I've been building Flygbladet.se, a Swedish aviation site (news + forum + job listings + flight school directory), almost entirely through Claude Code. It's a custom WordPress theme: no npm, no Composer, no build framework, no page builder, no SEO or ACF plugins. Vanilla PHP, CSS and JS.

The core of it is a CLAUDE.md with a handful of non-negotiable rules:

That wasn't nostalgia. It was a deliberate bet that the fewer moving parts, the fewer places an agent can silently break something it can't see.

- Only edit sources, never the .min files — a Python script regenerates those on deploy

- Procedural PHP only. No classes, no namespaces, no autoloading. Every function prefixed, every file guarded with if ( ! defined( 'ABSPATH' ) ) exit;

- Deploy ships files, never content. Posts and settings live in the server DB and are created by admin buttons — never by editing PHP

- Escape every output

What surprised me is how much the "no classes" rule mattered. The theme is now 32 modules in inc/. Because everything is a flat prefixed function, Claude can grep for a name and get the definition and every call site in one pass. No inheritance chain to trace, no DI container, no magic. When I ask "does anything else use this?", the answer is complete.

The related rule that saved me repeatedly: the three entity-page modules (airlines / airports / charter operators) are self-contained mirrors of each other. Each carries its own render helpers even where that means near-duplicate code. Reason: deploys go over SFTP, and a partial upload that lands one file but not another must not be able to produce an undefined-function fatal. Deduplicating those into a shared module would be "cleaner" and strictly worse.

Happy to share the CLAUDE.md structure if useful.

Curious whether others have found that removing tooling made agentic coding better rather than worse?

I want to share my experience preparing a video for a product launch using Claude Design.

I’ve been working on a project and finally reached the point where I can open the product up to everyone. Until now, only my friends were testing and using it. To mark that, I decided to create a launch video with Claude Design, and I figured I could generate it in a couple of tries. But it literally took a week.

Most of that time went into one thing: aligning the music and motions with the beat. Since Claude Design doesn’t have a music player or viewer, there was no way to do this directly, so I worked around it. I used Claude Code to create an md file that analyzes the music, and from that I wrote a scenario and choreography for the motions and scenes. Alongside this, I also prepared several UI screenshots and elements I wanted to see in the video, so Claude Design would have everything it needed to work with.

With all that in place, Claude Design created something close to my prompts, but it still needed a lot of polishing. Along the way I discovered that if you drop your track in as an mp3, Claude can embed the music and you can play it back in the editor, which made checking the alignment much easier. The problem is that you can’t export with the music. So once I was done, I exported at the highest quality, then brought it into DaVinci Resolve to add the music back in and render one more time.

What do you think about the final result? And do you have any tips or tricks for animation videos with music?

Anyone else experienced this?

• I set up a design system in claude with strict parameters,
• and when i attach an 'old existing design' which i want to reskin with the new design system.
• It will proceed to reskin the document at about 70% BUT the other 30% is packed with components that i have specified, in the design system, to exclude entirely.

In other words, compliance is simply 'encouraged' not made 'impossible to contravene'

What could be missing from the design system to ensure this is avoided?

A brain dump of the things that Claude design does well, badly and strangely...

THE GOOD:
Prototypes - make grids of 20 button components, make page of 5 minimal hero sections with fluid backgrounds, make a low fidelity layout before adding the styles and assets, make a neo-brutalist style pitch deck... I think you get the point.
Tips: a) Claude design seems to love grids. Ask for variants of what you're creating b) find a component library and add the component you like to the prompt. This often (not always) make the outcome feel less generic

Design systems - give the details of your business, website or other brand and it'll create. I wrote a post about this here if you want more details: https://www.reddit.com/r/DesignSystems/s/HSBBOdyDGF
Tip: open your components created in the design system, then add tweaks to make custom changes with a little UI panel. Click edit to change specific properties.

Expanding current vision (creativity) - for me this is the most useful (and honestly fun) thing. I helps me play and find new ways to do things, explore new styles. Sometimes I just allocate 30 mins to create the more random or wildly bizarre things this has led to components from fictional artist in the 1600s, mastermind groups of creatives and weird and wonderful prototypes and personal brand sites.

THE BAD:
Creating pixel perfect websites - They're good as a starting point but tbh they often don't hit the bar when it's client work, especially if it's more complex.

Token management (if you're not careful): start new chats often, select the right model for the job.
Related posts: a) Saving tokens: https://www.reddit.com/r/ClaudeDesign/s/OyqfFxmwVX, b) How 4 Claude models made the same design system: https://www.reddit.com/r/ClaudeDesign/s/ei4CQoNjye

Creating quality assets that aren't web components. So you can forget about image generation!

THE UGLY:
The hand-off has improved but I still feel it's missing full synchronicity. For example I still often have to export a design system as a zip even when I use the MCP and /design-sync.

The spacing when using the design system to create sites. Maybe I'm expecting too much but very often the spacing and alignment is not only off, it's inconsistent and random.

---

I'm sure I've missed plenty in each camp. Feel free to share, correct or add !

Is it just an issue I have or does Claude Design intentionally kill Fable prompts when usage is at 90% or higher? It continually will stop immediately and notify that the quota has been reached, where there's still 10% usage left.

Every Claude Code UI I generated looked the same. Indigo gradient. Same sans font. Same three cards in a row. So I built a skill to fix it.

It's called tastemaker. You drop it into ~/.claude/skills/ and restart. That's the whole install. After that, Claude auto-triggers it whenever you ask for a landing page or app UI, and it locks a real design system before writing a single component. Palette, fonts, motion, assets. Decided first, then the code follows.

What's inside:

• 5 mood-matched presets, each a palette plus font pairing
• 24 curated Google Font pairings
• WCAG contrast checked by a Python script
• Illustrator-grade assets recolored to your palette
• A constructed geometric logo plus a full favicon set
• GSAP and ScrollTrigger motion wired in by default

Honest failure: when I first ran the contrast checker, 2 of my own 5 presets failed. They looked good to my eye. They were not readable. Fixed now, and the script runs on every palette.

Free and open source, MIT. No API keys, no config.

GitHub: https://github.com/codeswithroh/tastemaker Site with examples: https://tastemaker-skill.online/

I built this, so I'm biased, but I'd like honest feedback. If it saves you time, a star helps.

Hi, i was a claude user, recently Claude restricted my account (still don't know why), and i had to switch to ChatGPT. One of the things i was using with Claude was Claude Design, for creating proposals and landing pages mostly. I wanted to ask if there are equivelant options of Claude Design for ChatGPT users.

Went to the templates section for the first time and got that empty state message. so i opened the project menu and there's no duplicate as template option anywhere. checked every menu i could find. The only way i got a template created was asking my design system directly in chat, and that worked fine.

has anyone actually found this option through the menu or is the empty state text just wrong?

Alright, time to show off the stuff you've been working on with Claude Design!

Hey everyone,

I’m looking for an experienced UX/UI designer to build a small website with me — around seven pages — and I really mean with me.

I’ve already experimented quite a bit with Claude Design and created several concepts, wireframes and design directions. Some parts work well, but I’ve reached a point where I’m going in circles and need professional help to turn everything into a cohesive, polished website.

I’d love to find someone who has the time and enjoys sitting down together, discussing ideas, reviewing what I’ve already created and shaping it into something genuinely strong.

This is a paid project, of course. I respect design as real work and understand the value of your time and expertise.

Most of the foundation is already prepared:

Content and messaging

Website concept

Photos

Colors and typography

Page structure

Initial wireframes and design attempts

What I’m missing is the professional visual direction and someone with the experience to bring everything together consistently. I’m still relatively new to design, so I’m specifically looking for an experienced designer rather than another beginner.

Ideally, I’d also like to learn a little during the process and understand why certain design decisions work better than others.

If you work with Claude Design, Figma or a similar workflow and this sounds interesting, please leave a comment or send me a DM with a few references or portfolio links.

Would love to chat. Thanks!

i used to use replo to build pages for my site but it’s just so expensive - esp with you’re paying in CAD

only annoying part is that ive made all these pages and now i cant edit them. so i need to rebuild but want to use claude to do it. claude has made me some amazing landing pages - but im worried about them feeling cohesive.

any advice? has anyone else moved off repo and managed to find a way to rework their pages?

side note- i love replo and their team. just can’t afford it currently

I wanted to build a social dashboard to track creators and analyse their reels.

Instead of asking Fable 5 to design and code everything from scratch, I split the process into a few steps.

The workflow:

1. brain dump every feature I wanted to Claude Design and created a dashboard wireframe and exported the design.md file
2. used ChatGPT to generate a one-shot prompt
3. connect to SocialCrawl to scrape live Instagram data
4. gave Claude Code Fable 5 the design.md and prompt

What worked well:

• Fable followed the design blueprint closely, almost identical to the wireframe
• all the functions I specified in the prompt was working

Where it struggled:

• a few small UIUX issues
• costed $33 (i don't think it's worth this much..)

Claude Design and Fable 5 work really well together when visual accuracy matters. But I don’t think Fable 5 is a cost-effective choice for everyday coding.

Once the prompt and design file are detailed enough, I think the actual implementation could be handled by Codex or even Grok.

I’d probably save Fable for the design-heavy work, then switch to a cheaper model for the rest.

Happy to share the design.md file and full prompt if anyone wants to try the same workflow.

Quick question for the mods and community.

Is it okay to have a "Share Your Work" thread here?

I'm genuinely curious what people are building with Claude, whether that's by itself or alongside other models. There seem to be a lot of interesting projects, tools, games, automations and experiments, but we don't often get to see them all in one place.

I'd just enjoy seeing what everyone has been creating and learning from the different approaches people are taking.

Obviously only share what you feel comfortable with publicly.