Three ways I use Claude Design that most people have no idea it can do, each with a copy-paste prompt you can use today.
Everyone uses Claude for writing and code, but Claude Design might be the most slept-on thing Anthropic has made. It’s on every plan now, Free included, and it lives inside regular Claude.
Open it. In any chat, ask for a design, or pick Output, then Design in the message box. In Claude Code, type /design.
Heads up. The old standalone site at claude.ai/design closes on December 14, 2026, so use it inside Claude from here on.
You don’t need a motion designer. Grab a free template from React Video Editor’s Remotion templates, where the code is right on the page, and have Claude restyle it to your brand.
To render it as an actual video file, hand the code to Claude Code, which can run Remotion on your computer. Remotion is free for individuals and small companies; bigger companies need a paid license.
Customize A Template
Here's a motion-graphics template I want made unmistakably mine (code or link at the bottom). Keep the animation, change the brand.
My brand:
- Colors: primary [hex], accent [hex], background [hex]
- Fonts: display [font], body [font]. Never use Inter, Roboto, or default system fonts.
- Energy: [e.g. bold and high-contrast, or calm and premium]
- The feel I'm going for: [1-2 brands or styles I love]
Do this:
1. Keep the animation logic, timing, and transitions exactly. Do not simplify or slow the motion.
2. Restyle everything visual, the colors, type, backgrounds, and text, so it reads as my brand, and swap my copy in wherever there's placeholder text.
3. Avoid the generic AI look: no default easing, no muddy gradients, no stock-template feel. Make deliberate choices that match my energy.
4. Give me the full, ready-to-run code, not a snippet.
5. Then list exactly what you changed, and flag anything in the original that fought my brand so I can decide what to keep.
Template:
[paste the code or link here]
02
Build in a famous brand’s style
The free GitHub collection awesome-claude-design links to DESIGN.md files modeled on brands like Apple and Stripe. They’re community-made from what those sites look like publicly, not the companies’ official systems. Attach one to a Design chat and Claude builds in that style.
Use them for inspiration and internal mockups. For anything public, make it your own so it doesn’t pass as their brand.
Use A Design System
Use the DESIGN.md below as the single source of truth for this build. Do not substitute your own defaults for anything it specifies.
Build me: [a landing page / slide deck / pricing section / dashboard]
Rules:
1. Follow the DESIGN.md exactly: its colors, type scale, spacing rhythm, corner radius, shadows, and motion. Use the real tokens, do not approximate them.
2. Where the system is silent, choose the option most consistent with its personality, and tell me what you decided and why.
3. Kill the generic AI defaults: no Inter or Roboto, no purple-to-indigo gradients, no centered hero with three cards unless the system actually calls for it.
4. Make it fully responsive and clean enough to ship, not a rough draft.
5. When it's done, show me the build, then give me two more directions for the hero, one more minimal and one more expressive, so I can compare instead of guess.
DESIGN.md:
[paste the DESIGN.md here]
03
Rebuild a website’s look
Found a site you love? Paste its URL and attach a couple of full-page screenshots so Claude can see the real layout. It pulls out the colors, fonts and spacing, then rebuilds the design as a clean page you can edit.
I pair it with Higgsfield to generate the images and short videos that go on the page.
Rebuild From A URL
Here's a website whose design I love: [URL]. I've also attached full-page screenshots of it. Reverse-engineer the design and rebuild it as something I can make mine.
Do it in this order:
1. First, study the page and pull out its full design system: the exact colors (hex), the fonts and type scale, the spacing rhythm, corner radius, shadow style, and how it handles motion. List it all back to me as clean, labeled design tokens.
2. Then rebuild the page as a clean, responsive layout using that exact system. Match the real spacing, hierarchy, and rhythm, not a watered-down generic version. Use placeholder text and images where you need them.
3. Do not fall back on default fonts or a generic template. If something is ambiguous, match the screenshots as closely as you can.
4. Borrow the style only. Do not copy their logo, their wording, or their images.
5. Finally, tell me which sections I should swap for my own content, and save those design tokens as a reusable block so I can apply this same style to my other pages.
Site to rebuild: [URL]