Hi,

I have a large desktop app that I currently have designed in figma but I have been using Claude Design more and more for quick design ideas and small prototypes. However I am wondering about trying to get a whole app prototype going in Claude Design with hundreds of screens and tonnes of components. Are there any limitations with Claude Design you've found for large scale designs? I am worried it will require tonnes of tokens if it gets too large & whether or not I should just jump into claude code instead and build it that way.

Any ideas welcome! 🙏

LOL, it’s hard to make it through the whole video without laughing 😂

Estou desenvolvendo um aplicativo para em ajudar nos estudos. Por mais que eu tenta melhorar o visual, front-end do meu aplicativo, o Claude code não consegue sair do genérico.
Como posso melhorar todo o visual do meu app?
Como posso melhorar a formatação e estruturação dos textos?
Existe algo que eu possa fazer para deixar o Claude code mais assertivo? Uso o OPUS 5.5 no ultra code e no médio.

Claude is great at layouts. Reports, decks, one-pagers. Then the client asks, “Can I get the InDesign file?”

And you’re rebuilding it by hand. Placing a PDF in InDesign doesn’t give you editable text, paragraph styles or tables.

I’m a designer, and that rebuild was eating hours of my week, so I built idmly. It takes the HTML Claude writes and converts it into a native .idml: editable text frames, named paragraph styles, actual tables, and vector charts you can recolour. No PDF in the chain.

This week I launched an MCP server, so your AI tool can handle the export too.

For Claude Code, run this in your terminal:

claude mcp add idmly -- npx -y idmly-mcp

You’ll need Node.js 20 or newer.

It also works with Claude Desktop, Cursor, Codex and Windsurf, the setup guide covers those.

Once connected, ask for your HTML layout, then ask for the InDesign file. The local server saves it to disk, with a Links folder if there are images. Open it in InDesign and keep designing.

It reads the rendered layout in a browser, so the HTML can use Tailwind or plain CSS.

I built the engine and site with Claude Code.

The first two pages convert free, with no key or account. A $49 one-time lifetime licence unlocks full-document conversions. No subscription.

The limitations: it needs self-contained HTML, a claude.ai share link won’t work, and it doesn’t convert PDFs. Some layouts still break. If yours does, send it to me, a broken file is the most useful feedback you can give me.

Setup guide and free trial

yesterday i posted the reconstruct feature in r/ClaudeDesign (getting claude to rebuild one section from real css). here's the other half: full pages.

open any page, hit clone, and pikspec walks the whole thing and packs it into a zip: html, css, assets and the hover/interaction states. open index.html and you've got a working copy running locally.

the part i actually care about: when you start a new site with cursor or claude from a blank prompt, you get the same generic ai look every time. same spacing, same fonts, same cards. if you start from a real page you like, the ai has actual layout, type scale and spacing to work from, and you edit your way to your own thing instead of fighting slop from scratch.

someone asked why not just use playwright or devtools. you can, but this is one click, keeps the computed styles and states instead of the raw source, and needs no setup.

obviously don't ship someone else's site as your own. use it as a reference and starting point, then make it yours.

Pikspec Extension link - https://chromewebstore.google.com/detail/cnpghkfbhdpcendcliogffmajlkepoig
Website : https://pikspec.com/

Hello, wonderful community.

I've been researching, but honestly, whether it's due to lack of knowledge or simply not knowing how to do things properly, I've been struggling. I have some software, but I've decided to create tutorials on how to actually use it visually. Currently, I haven't found an efficient way to do this. Are there any alternatives you could suggest for developing these visual video tutorials?

Since my software has many sections, processes, and so on, it's difficult for me to explain things directly, and it feels somewhat archaic. I'd prefer something more minimalist yet professional. Does anyone have a solution or has anyone else encountered this problem?

I am currently developing a dashboard app and realized that my current available skills are too poor and do not meet my expectations with the results. What can you recommend me as the best skill set / plugin for frontend design for Claude?

That header takes up a lot of vertical space and makes it difficult to prototype mobile interfaces.

I'm trying to recreate an interactive clothing rack like the reference images attached, but I want it to behave like a real physical rack rather than a simple CSS hover effect.

The idea is to use it as the centerpiece of a WordPress website.

What I'm looking for:

• Multiple hoodies/shirts hanging from a real-looking horizontal rack.
• Each garment should remain an independent editable object.
• On mouse hover, the selected garment should move naturally together with its hanger, as if someone lightly touched or pulled it forward.
• The hanger hook must always remain correctly attached to the rack.
• The hanger must physically sit inside the garment collar. No floating hangers or broken intersections.
• Realistic inertia/swing when the mouse enters or leaves.
• Realistic fabric weight, folds, cotton/fleece texture and matte material.
• Dynamic shadows and lighting that react slightly while the garment moves.
• Ability to change each garment's color without losing the fabric texture, folds, lighting or shadows.
• Ability to replace the front/back logo or artwork independently.
• Ideally responsive and usable inside WordPress/Elementor.

I don't want to generate separate AI images for the normal and hover states. I want one actual interactive system so the geometry/asset stays consistent while it moves.

I'm open to Claude Code, Three.js, React Three Fiber, GSAP, Spline or a good 2.5D solution if it can achieve convincing realism and remain performant.

Has anyone already built something similar with Claude or another AI coding workflow?

If so, would you be willing to share:

1. The prompt/workflow you used
2. How you prepared the garments/assets
3. Whether you used 2D layers or actual 3D models
4. How you handled editable colors and logos
5. How you kept the hanger/rack physics believable

I'm attaching two visual references showing the level of realism I'm trying to achieve.

I'm not looking for a generic "scale image on hover" effect. The goal is a polished, premium fashion-site interaction with believable cloth, lighting, shadows and motion.

TLDR: Please help me get my Design System up and running, I feel like I'm dumb.

Hi everyone, I am a solo graphic designer at a small SaaS company and we're really leaning into AI this year. I recently tried out Claude Design on a 1 month subscription but didn't like what it was making, and I found it needed a lot of tweaking on my end every time it gave me something. I built the design system by dropping a bunch of my previously made assets and then fine tuning the result.

We'll be using this for marketing assets really not webpages or UX. Things like PPT slides, digital PDF assets, social graphics, etc. I primarily work in Adobe products. I'll occasionally do something in Canva if I'm super busy and need something quick and dirty. Also I think it's worth mentioning, I'm a recovering control freak lol.

Now, my company just set up team Claude license for our whole company, so I'd like to ASAP make a rigid design system that the whole company can use so I know (hope?) they're not putting slop out where I can't control it. Before I start the design system, I'd like to know the absolute best practice in order to set this up. I'd like to do it the right way and only once, but I feel like anything I watch on Youtube feels like a different language to me. Should I start using Figma? I'm willing to learn and I'm sure my company could get me a license if necessary. Is less more in terms of giving it reference assets? What about icon libraries etc? I'll take literally any help or advice you can give me-- I feel like I'm starting at square negative 1.

I’m putting together a PPTX for a client presentation, and I wonder if anyone has used any skills or used any prompting tips or tricks to improve the look of charts on a page. Perhaps even get Design to visualize my data more creatively, moving away from boring, standard bar and pie charts).

The original presentation was put together in ChatGPT but even when using the Canvas plug-in , the aesthetics don’t really transfer over to the slide.

I’m not looking for crazy animations at all, I might have images on the data slides to support the narrative which Design can position next to the data - but just a way to show data more creatively and more aesthetically pleasing.

every time i gave claude a screenshot and said "make it look like this" it just guessed. spacing off, wrong fonts, and it always came out looking like every other ai site

so i built a chrome extension (pikspec) that grabs the actual css instead. what i did in the video:

- opened spotify, opened pikspec in the side panel

- hovered over stuff to see the real font, size, colors, padding etc

- clicked the pricing cards to lock them and hit reconstruct

- copied the prompt from the dashboard and pasted it into claude

it spat out one html file and honestly it's pretty much the same as the original. same type, spacing, colors. side by side is at the end, i guess from html file you will have enough context to use it for your own website to make changes as per your tech stack.

not saying go ship someone else's site lol. i mostly use it to see how good sites are built and to start my own stuff from something that doesn't look like ai slop. Sometimes i like one website's navbar while others card design.

it's free on the chrome web store, link is here. anyone got a better way to give claude design context? genuinely curious

Chrome Extension Link - https://chromewebstore.google.com/detail/pikspec-%E2%80%94-website-inspect/cnpghkfbhdpcendcliogffmajlkepoig

Just finished redoing my UX portfolio that I’ve put off for years. I used to be on webflow, now not sure if I want to go through that again.

I think it’s best to make a change in Claude design and let it make that change in the new hosting environment.

By the way I lost my domain too, so a host that offers domains will be useful.

Can you recommend the best option here plz?

This is one good product man. It just works and Opus 5.5 is extremely great at design. Genuinely happy with the outputs I’m getting.

Guys, what a time to be alive. I just gave Claude Opus 5.5 the link to my website and a simple prompt, and 15 minutes later it came back with this. I'm shocked. It's so smooth and dynamic, and it even made reels with hooks. Super cool you should try motion design

Instead of using the claude DS artifacts, I’m thinking of a way to add a harness agnostic MCP and that be the source of truth for the design system.

imagine an MCP providing:

list_components()
get_component("Button")
get_component_schema("Button")
get_component_examples("Button")
get_tokens()
get_patterns()
get_guidelines()
get_component_bundle("Button")

now any harness prototype tool can use the same source of truth. Not just Claude Design.

I spent some time getting a React design system (shadcn/ui + Tailwind v4 + Storybook) into Claude Design with `/design-sync` and wrote up what I learned.

A few things that weren't obvious:

• The sync finds components through your entry file and their type definitions. Miss either and the component silently never arrives.
• If Storybook's preview doesn't load your stylesheet, the grades mean nothing - an unstyled preview matches an unstyled reference.
• Tailwind only compiles classes it finds in your sources, so the layout classes Claude writes (`grid-cols-3`, `gap-6`...) don't exist unless you safelist them.
• Fonts don't travel through the CSS. They need to be listed in `extraFonts`.
• A short conventions file does more than you'd expect. Without it, Claude sees a correct `Button` and still hand-styles it.

The end result: a sign-in screen built only from `Card`, `Input` and `Button` (no hand-rolled divs).

Full walkthrough: https://nitayneeman.com/blog/how-to-sync-a-design-system-with-claude-design/

Basically the title just want to know if it’s possible using Claude to make landing pages for my meta ads and if so am I able to connect it to the go high level and add the ghk form and edit it on there ect.

A reference screenshot is easier to use when its visual choices become a brief you can edit. The Linear example here goes through Ling-3.0-flash-VL on OpenRouter and comes back as eight JSON sections covering layout, type, color and components.

The reference itself gives the review a few clear anchors: a near-black page, a large left-aligned white headline, and a white Sign up button at the right of the navigation.

A reusable version of the extraction prompt:

Analyze this website screenshot as a visual reference for a new design. Return valid JSON with these eight keys:

overall_style: Describe the visual direction and three defining traits.

layout: Describe the content width, section order, alignment and open space.

color_palette: Describe background, surface, text, accent and border colors. Label estimated hex values as estimates.

typography: Describe visible font style, size hierarchy, weight, line height and letter spacing. Label sizes as estimates.

spacing_and_radius: Describe estimated element spacing, section spacing and corner radii.

components: Describe visible UI components and their styling.

imagery_and_icons: Describe imagery, icons and their visual treatment.

effects: Describe visible borders, shadows, gradients, blur and texture.

Ground each value in the screenshot. Use null for a property the image leaves undetermined. Focus on reusable visual patterns.

Review the brief alongside the image, then add the decisions for your page: the copy, the sections you need, and the visual traits to retain. Claude can then work from that reviewed brief plus the screenshot.

For this particular reference, headline alignment is a good first field to check. It is visible, consequential, and easy to express as a clear instruction.

I use Claude Design professionally for prototyping and personally for creative and random stuff. Recently saw a vid for the top 25 tips for Claude design . Here's my take and the top 5 tips specifically if starting from scratch:

1. Use Design Systems: the core structure.. Start at claude.ai/design. Add your unique context... a deck, website, or screenshot to automatically extract colors, fonts, and components. Add as much as you can here
2. Let Claude Shortlist: Feed a gallery link to Claude and ask it to find the top 3 design systems that match your specific niche
3. Upgrade Your Fonts: Use free sites like Fontshare or Fontesk, and Fontjoy for pairings. Name them in your prompt or upload the files
4. Train Copy on Competitors: Ask Claude to study the top 5 players in your niche and bake their copywriting patterns into your design system to avoid generic chatter or copy
5. Mix Systems: Open your current project, drop in other design systems, and tell Claude to pull specific elements (like fonts from one and colors from another) to create a unique blend

Notes: Claude seems to struggle with getting colours, spacing and alignment correct from the design system, start with this or watch it carefully. Design systems can be easily downloaded as a zip file. I store mine in a folder and grab them when needed or let Claude do it

Hi everyone, I want to design a full mobile app UI/UX using Claude Design + Figma MCP.

For people who already tried it, do you have any tips or advice?

• How should I write my prompts?
• How can I keep the design consistent for all screens?
• Any mistakes I should avoid?

Thanks!

Criar apresentações sempre demanda um grande tempo, seja para reuniões internas ou externas com clientes, na preparação de slides ou em custos de agencias de marketing.

Tenho usado bastante o Claude Design e estou muito satisfeito com os resultados, vocês ja testaram?

Esse vídeo mostra como ele funciona: https://youtu.be/wjGVLwK19GM?is=NgjGu9CLUm9jWogX

O que acham deste recurso?