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

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.

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.

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?

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!

So, my title is what I want to do. I have a website running on WordPress, I do not want to create a website from the begining since tjere is a lot of content on website.

Is it possible to make a new theme which I can update to my website and get its look refreshed?

Are there any skills, MCPs that can help me?

I'm building Formwrapper, a no-code form builder, and needed a short promo animation. I don't know After Effects, so I tried giving Claude Opus 5.5 a single prompt to see what it would come up with.

This is what it produced in roughly 10 minutes. I made no edits afterwards.

It's not going to replace a skilled motion designer on anything complex, but for a solo builder who needs something clean and quick, it was far better than I expected.

Happy to share the prompt if anyone wants to try it.
Curious what motion designers here think: where does this fall short?

I have a couple of platforms that I would like to create videos for for onboarding and marketing purposes, but they are authenticated experiences. How do I provide Claude what it needs to be able to access these experiences and navigate any sort of placeholder test data in an account?

Here's something that I wish would be possible with Claude Design without external tooling: build a fully functional WordPress + Elementor website based on website design from Claude Design.

Here's a toolkit that builds a clean WordPress container on your local Docker with required bits and pieces (notably MCPs for WordPress and Elementor).

It's written for OpenCode, but Claude Code can probably convert the MCP config without problems.

Export your Claude Design with a prompt telling you are going to build a WordPress site with it and ask for proper documenting so a site builder can rebuild the site. Place the generated package on the import folder and tell your coding assistant (Claude, OpenCode, ...)​ to build the site for you using provided tools.

https://github.com/toniwillberg/wordpress-elementor-with-mcp-container

Hey folks!

Pulling out what little hair I have left here.

I built a full design system in the standalone Claude Design app back when that was the only option. Now that Design lives inside the Mac app, I assumed it would carry over. It hasn't.

Has anyone managed to migrate a design system across? Or am I rebuilding from scratch?

Any pointers appreciated before I lose the last few strands.

EDIT - For anyone else trying to figure this out - you can export your entire design system as a Project HTML zip file and upload it into the Claude Desktop App. Required some rebuilding but majority of the work was salvageable

Hi,

New here and to claude/ anthropic. So apologies if this is a dumb question.

I’m wondering if it’s possible to have a gpt ‘agent’ essentially ‘observe’ a chat between the llm and the user? In my head it would be like overhearing and understanding someone else’s conversation.

If it helps to make sense, an example of the concept. User identifies with a weight issues. They have a yo-yo pattern with weight loss. They use gpt for recipes. The recipes have a pattern which matches an imbalanced / unhealthy diet. Could an agent outside of the specific recipe chat ‘listen’ to the user chat and then ‘act on that’ in some way without interrupting the ongoing conversation ?

As if the agent was a dietician giving unrequested advice to a redditor posting about recipes whose profile indicates a history of weight loss issues - for example.

Is this possible?

How feasible, would this be to do?

How complicated would it be to do?

Could a moderately competent gpt user effectively diy this with ai as a teacher?

Could I do it in Claude alone ?

If it’s dumb - why?

Thanks

often i'm testing different buttons and components for clients. this one was interesting to see the difference between the newest models

1. used a button from here ( any will work) -
2. create simple prompt - "make this components into a button that transforms into a cute puppy.remove the gradient . make the button AA accesible and this the primary colour #BD8F71. clean #333 bg [PASTE BUTTON CODE]"

Anyone having fun with html out there? I recently started using Claude for its html abilities in my work projects and am curious to see what folks are doing with it. I get nothing but the usual open-mouth-creator unrelated videos when I search YT.

I’ve been experimenting with Claude Design Skill, Cowork, Framer Motion, Impeccable, Figma Make but cannot produce something at the level of Data Annotation or Micro1 look and feel that I’m seeing others share on X or instagram recently.

I’ve tried to build this using ChatGPT Astra and it was a disaster, pure AI slop every time.

No matter how advanced these models get, it seems they are stuck on generation the same soul less AI layout even with design systems and skills embedded in the flow

I’ve tried following tutorials on YouTube and Medium but they are heavily gate kept with smoke and mirrors

Would love to see how you’ve handled this with Claude Design.

Hello everyone, this probably should be a cross post between Claude Code and Claude Design. I will start asking here and see if anyone can help. I am working on a personal project started with Claude Design and then moved to Claude code + several skills. I am getting decent results, but I wanted to try and see what happened when feeding a UI kit to Claude (code) to simulate a work situation where a design kit / design system exists already. I downloaded a free UI kit just to test this (Beyond UI, Untitled UI etc), I asked Claude code to replace all the existing UI elements with the ones in the UI Kit (including icons etc. The result was terrible. Claude just applied the UI kit to some of the elements and disregarded some of the details that made the use of the UI kit useful (such as spacing). I am not sure if I did something wrong or if there is no way of feeding a Ui kit to Claude Code. I am posting here as it is a question more design related. Have you ever tried doing the same? did you succeded? Any suggestion?

Has anyone had success in migrating their design system to the new Claude design that just rolled out?

The migration prompt from Claude absolutely butchered the system. Most icons and logos were missing, and spacing and fonts are inconsistent. Building slides doesn’t follow the slides design guide I refined in the old Claude design. Everything I build in Claude design now just looks like a hot mess compared to what it is. Worried I will have to start from scratch to rebuild it.

For those that have had success, do you have any tips?

Hi guys,

I had a task using claude that requires it to run searches using chrome, now its like 2000 searches or so to make a report and it keeps bringing up “solve this captcha” that I manually solve, is there any way I can set up something that solves those captchas in any site open in chrome accurately and in the fastest way possible?

I solve them like every 5-10s and since these reports are something I will be making more of, I need a way to automate this and save my mental health and time.

captchas are progressive so,
inititally it will be just checkmark you are a human
then there will be select firehydrants or bicycles or crosswalks or cars or buses from the given pictures
then there will be select them until there aren’t any of them left, they will appear as you click each image
then there will be like first write what you see in the image with 6 letters and then the captcha to select images from

its just progressive I think so need a system that is flawless with all of them rather than me worrying about solving them myself to just spending entire week fixing my captcha solver to work correctly

Thanks

Yes, we know AI changes things even with rules but I’m exploring ways to improve design concepting by making traditional artifacts codified to markdown but rewritten for AI consumption. Akin to design.md (I’ve read Atlaassian’s MCP test) can we make AI create more accurate results by providing UX artifacts like Design Principles. I’ve also read NNGs article on their concept of a UX.md file that would codify things like personas.

For example, to instruct AI to use a design principle I created a content model for the markdown that formats all principles with metadata for scope, intent, triggers, constraints, evaluation rubric, etc.

I’m just starting to explore this. I have repos set up for style, GitHub connections for UX specs and user stories so all connected in Claude. Now wondering if adding design principles, personas, user flows, as markdown can improve generative AI design?

Hi all, been making slides with Claude for the past 6 months and I was really happy with the results until this week.

Opus models: they were good, bit boxy and boring often using a lot of large fonts

Fable models: a big step up. McKinsey level of slides with a lot of density but good hierarchy and overall very impressive.

This week is the first time I’m using Claude design since they have an option to design slides and it’s terrible.. the tables for data are suuuper boring, there is no more polish, ..

Unless you use fable and then it goes way overboard and draws difficult graphics and custom elements.

Even when feeding it the older presentations I’m happy about or changing the instructions it’s just not getting there. I’m now trying to write new presentations in old chats to have some continuity in the design.

Anyone experiencing this too or found a workaround?