Claude Design — Setup & Workflow Guide

· What Claude Design actually is

Claude Design is Anthropic's design tool, powered by Opus (the most capable model — it makes the best graphics but burns tokens fast). Most people think it's only for mocking up websites. It's not. For us it's a custom-asset machine: animated lower thirds, motion graphics, kinetic typography, brand books, and full landing pages — all customizable down to the pixel.

Web app only. At time of writing it's not in the desktop app — open it in the Claude web app (claude.ai). Look for the Design / Artifacts area on the left.

Two ways it pays off for you:

For video / content (Studio): generate your own branded lower thirds and motion graphics instead of paying for Envato, Artlist, Motion Array template packs.
For Solev client sites: spin up a high-fidelity page or hero concept in one shot, then import the HTML.

1 One-time setup: build your Design System first

This is the single most important step in the video — do it before anything else.

A Design System locks your fonts, colors, logo, and style so everything you generate stays on-brand and consistent. It's what separates your output from generic AI slop. Set it up once and reuse it across every motion graphic, lower third, and slide deck.

Open Claude Design → create a new Design System (the "match" / brand setup flow).
Feed it your brand: name, your site/GitHub link (it can pull a logo), and a short style note. In the video he typed modern gold + black themes — do the same for each brand you work in (e.g. a Steady Craft system, plus one per client).
Generate — it takes about 5 minutes. When it's done you have a reusable system you can attach to any future generation.

Make more than one. A "Steady Craft" system for your own content, and a separate system per client brand (their colors/fonts/logo). Then every asset you make for that client is automatically on their brand.

2 The four build modes

When you start a project, you pick one of these:

Mode	What it makes	Use it for
Prototype — Wireframe	Rough, clickable layout	Planning a page before you commit
Prototype — High-fidelity	Finished, polished site/app	A real portfolio page or client hero concept
Slide deck	A presentation	Pitch decks, sales one-pagers
From template — Animation	Motion graphics & animated assets	Your bread & butter: lower thirds, kinetic type, visualizers
Other	Anything else	Calculators, message mockups, effects

Every mode opens the same layout: chat on the left, live preview on the right.

3 Make a motion graphic (the core loop)

From template → Animation. Attach your Design System (or "none" while experimenting).
Prompt it in plain language — e.g. "create an interactive visualization of a simple neural network" or "an animated lower third that slides in with the business name and a gold accent bar."
Wait for the preview. It writes self-contained animated HTML and renders it live on the right (usually 30–90s).
Refine it using the granular controls (next section) instead of re-prompting from scratch.

Quick capture, no editor needed: on Mac, Shift + Cmd + 5 → record a selected region of the preview → drop that clip straight into your edit. Great for one-off backgrounds. (For reusable, transparent overlays, use the render step in §8 instead.)

4 The granular control — the whole point of Claude Design

Regular Claude (and most AI design tools) force you to re-prompt and regenerate for every tweak. Claude Design gives you four ways to change things, from surgical to broad:

Edit

Click Edit, then click any element. A panel shows font, size, color, opacity, padding — change it and it updates instantly. Use for: one logo, one headline, one color.

Re-prompt

For a big change across many elements, just tell the chat: "change the color theme of all the neurons to red." Faster than editing 19 circles by hand.

Tweak

Need a control that doesn't exist yet? Click Tweak → "give me the ability to customize the amount of glow on each element." It builds a new slider into the settings.

Markup

Click Markup, draw on the preview, and add a note — e.g. circle a stray dot and write "remove this." Gives Claude exact visual context.

Rule of thumb: Edit for one thing → Tweak to add a missing control → Re-prompt for a sweeping change → Markup when words alone can't point at what you mean.

5 Power move: have AI write your Claude Design prompt

The best results in the video came from long, detailed prompts (100+ lines) — and he didn't write them by hand. He had regular Claude/ChatGPT generate them.

Gather context — for a client: their business name, services, location, reviews, and a logo. For a portfolio: who you've worked with, results, links.
Ask an AI to write the prompt: "Here's all the context [paste]. I'm building this in Claude Design. Your job is to write me a detailed prompt to send into Claude Design to build [a portfolio / a branded lower third / a hero section]."
Paste that prompt into Claude Design + attach the logo. One shot often gets you 90% there.

This is your Solev edge: you already have all that client context in the builder. Feed it to Claude → get a tailored Claude Design prompt → generate a bespoke hero or page concept in minutes.

6 The under-used trick: import pre-made animations

The big + button (bottom of the chat) takes more than screenshots and logos — you can attach pre-made animations and then customize them with Claude Design's controls.

Grab a Lottie file, a 3D object, or an animation from a site like jitter.video or lottiefiles.com.
Export it (e.g. 720p MP4), then + → Attach file → select it.
Prompt: "import this subscribe animation at the very top." If it doesn't appear, hit the refresh button.

Now you have a polished base animation that you can recolor, retime, and rebrand to match — instead of building from zero.

7 Brand book → five lower thirds in one go

Two stacked moves that are gold for repeatable client work:

A · Generate a brand book

Paste a few screenshots of the brand + a prompt asking for a brand asset library. You get: the exact colors with hex codes, do/don't examples (e.g. "don't stretch the logo"), and selectable themes/presets — all editable if it gets a color or font wrong.

B · Make all your lower thirds at once

Then prompt it to create five assets from those brand assets in a single generation, all as HTML:

Lower third Title card Key-point callout Step indicator End screen

Each one is customizable — position, duration, speed, colors, fonts.

Studio already automates this set. Your Studio Brand Kit generates these same seven branded templates for a brand in one click (lower third, title card, callout, step indicator, CTA, intro, end screen). So you can do this either in Claude Design (for one-offs you'll hand-tune) or in Studio (for fast, on-brand reuse).

8 Rendering to transparent video — the key step

Claude Design can't export transparent video. It only gives you screenshots or the raw HTML. To get a real overlay with a transparent background, the HTML has to be rendered.

The video's way (manual)

Hand it off to Claude Code: copy the command Claude Design gives you, open Claude Code (local or web), paste it, and say "convert this into a .mov file with a transparent background." ~7 minutes later you get a high-quality transparent .mov at the exact duration. Reusable in every video; if you want changes, edit in Claude Design and re-render.

Your way (automated — this is what we built)

Steady Craft Studio does the Claude Code step for you. In Studio's video editor, open Add design → import, paste the Claude Design HTML export, and Studio renders it to a transparent overlay and composites it over your footage automatically — no Claude Code, no manual .mov handoff. Same deterministic renderer handles plain CSS animations and GSAP exports.

9 Your end-to-end workflow (Steady Craft)

Set up your Design System(s) once — a Steady Craft one + one per client brand (§1).
Generate the asset in Claude Design — From template → Animation, attach the system, prompt it (use §5 to have AI write the prompt from client context).
Refine with Edit / Tweak / Re-prompt / Markup until it's exactly right (§4). Import a base animation if it saves time (§6).
Export the HTML from Claude Design.
Paste it into Studio → Add design → import. Studio renders the transparent overlay and drops it onto your clip (§8). Done — no Claude Code.
Reuse: save it to the brand's kit so it's one click next time.

When to use Studio's built-in Brand Kit instead: if you just need clean, on-brand lower thirds fast, skip Claude Design and hit Generate Brand Kit in Studio — it authors all seven templates on-brand in one click, already editable and renderable. Use Claude Design when you want something bespoke or more elaborate than the kit templates.

· Token & cost tips

Opus burns tokens. Claude Design runs on Opus (best quality). Anthropic recently doubled the Design token limits, but you can still hit them on a heavy session — pace big generations.
Reuse beats regenerate. A locked Design System + the Edit/Tweak controls mean you tweak existing assets instead of re-prompting full regenerations (the expensive part).
Generate the prompt elsewhere. Drafting your long prompt in regular Claude/ChatGPT (§5) keeps your Design token budget for actual generations.