A free guide by New Money School
Claude Design
Three ways I use Claude Design that most people have no idea it can do: customize free motion graphics, build in real brand styles, and rebuild any website's design from its URL.
Everyone uses Claude for writing and code, but Claude Design might be the most slept-on thing Anthropic has made. Here are the three ways I actually use it, with the setup for each.
Way 1Free Motion Graphics, Customized
If you make content or run a website and want really cool motion graphics, you do not need a motion designer. Grab a free template from a site like React Video Editor (free Remotion templates, the code is right there), then have Claude customize it to your brand.
Prompt — Customize A TemplateCopy
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]
Way 2Build In Any Brand's Style
There are free GitHub collections like awesome-claude-design that hold the actual design systems behind brands like Apple and Stripe as simple DESIGN.md files. Drop one in and Claude builds anything in that exact style in about two minutes.
Prompt — Use A Design SystemCopy
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]
Way 3Rebuild Any Website's Design
Drop in the URL of any website you love and Claude will rebuild that whole design for you as a clean, editable page. I like to pair it with Higgsfield to generate the images and videos that go on the site.
Prompt — Rebuild From A URLCopy
Here's a website whose design I love: [URL]. Reverse-engineer it 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 source as closely as you can. 4. 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]
Pro Move
Use Higgsfield to generate on-brand images and short videos, then drop them into the page Claude built for a finished, custom look.