11_NateHerk_Claude_Design_Course

12 min read

Overview

Nate Herk delivers a ~2-hour masterclass on Claude Design, Anthropic Labs’ separate design product (launched April 17, 2026, powered by the Opus 4.7 vision model). He walks the viewer through building an entire brand from scratch — brainstorming the “Tally” fintech concept in regular Claude, creating a logo and brand concept doc, building a reusable design system, then shipping a pitch deck, product landing page, mobile app prototype, and an animated launch video — all via natural language inside Claude Design. The course’s running theme is value for money: Claude Design runs on its own weekly quota, separate from normal Claude / Claude Code usage, so the video is packed with tactics for not blowing the limit (brainstorm in regular Claude first, drop the design system + concept doc in instead of a raw idea, use Opus 4.7 only for planning and switch to Sonnet/Haiku for tweaks, use the tweaks panel instead of repeated prompts, export to Claude Code when the design quota runs out). The second half is a second live build (the “Lull” sleep-drink brand) that ends by handing the design off to Claude Code, pushing to GitHub, and deploying live on Vercel, plus a deep dive on usage math and best practices.

Key Insights

  1. Claude Design is a separate Anthropic Labs product with its own usage limit — distinct from your normal Claude chat, Co-work, or Claude Code. You have a “current session,” “all models,” “Sonnet only,” and a dedicated Claude Design weekly quota; if you hit the cap you wait for the weekly reset or buy extra usage. (1:01)
  2. It’s powered by Opus 4.7, which uses vision to verify its own work — the model “uses its eyes” to look at what it built and run a verify agent that catches and fixes mistakes on each slide/section automatically. (3:26)
  3. The design system is the single highest-leverage move — build ONE (not five) brand design system first; it encodes your logo, colors, typography, buttons, cards, spacing, and components so everything you later make (websites, videos, slide decks, landing pages) is automatically on-brand and consistent, and it’s shareable across a team. (5:44)
  4. A design system is effectively your design.md spec for every future build — it’s the single source of truth that everything is exported from, and it can be downloaded as ZIP/PDF/HTML and handed to Claude Code, Canva, or ChatGPT’s image model. (7:18)
  5. Don’t brainstorm inside Claude Design — you get way more usage from regular Claude, so ideate there and only bring a refined plan/concept into Claude Design when you’re ready to build. This is the core money-saving mindset. (8:24)
  6. A good brand concept doc makes a one-shot build possible — brainstorming with Claude produces a concept with the product, audience avatars, mission, positioning, brand pillars, voice/tone, color palette, typography, and hero hierarchy; feeding that into a design system lets Claude Design build a great website in one shot. (9:14)
  7. Claude Design has historically been bad with logos — it tends to subtly change an uploaded logo; give clear feedback (“keep the PNG exactly as-is”) and it can usually fix it, though it costs tokens to correct. (14:48)
  8. Wireframing is overkill for a landing page but useful for funnels/apps — for the landing page demo the wireframe step was “a waste of ~7% of session”; a wireframe pays off when planning a full multi-page funnel or a desktop/mobile app, not a single page. (39:42)
  9. The tweaks panel is the killer feature — when stuck creatively, ask Claude to “give me a bunch of tweaks to play with,” then switch covers, textures, accents, layouts, fonts, etc. live without sending repeated prompts (saving tokens and time); you can just not apply ones you don’t like. (31:41, 33:45)
  10. Draw/comment/edit beats natural-language prompting for precision — clicking an element, editing text/size inline, drawing a circle around an area, or commenting targets changes precisely and saves session tokens versus prompting blind; draw is best for things without an actual element (e.g., a gradient area). (28:49, 29:24)
  11. Model choice is a major usage lever — use Opus 4.7 for planning/first build, then drop to Sonnet or Haiku for small tweaks and iterations; once you’re comfortable you can run mostly on Sonnet to stretch the limit much farther. (24:32, 1:54:38)
  12. Claude Design can search the web and fetch pages/GitHub — it can pull components, animations, and prompts from catalogs (like the Hyperframes catalog or 21st.dev) by URL and fold them into your project. (1:16:03)
  13. Long threads pollute the context window and burn your limit — a banner warns “start a new chat to save 110,000 tokens of context”; export the project and open a fresh session (or use /clear) rather than firing endless messages in one thread, which is why many people burn 80-95% of quota so fast. (1:14:42)
  14. Claude Design and Claude Code complement each other — when your design quota runs out, export the design as ZIP/HTML and hand it to Claude Code to keep iterating on a different budget, then bring it back to design after the reset. (1:20:42, 1:57:04)
  15. Deploying needs explicit handoff + fixes — export the project ZIP, open it in Claude Code, push to a GitHub repo, then import that repo to Vercel for a live domain; Claude Design doesn’t auto-optimize for mobile or always produce a deployable root path (rename to index.html), so test on localhost and check mobile view first. (1:41:46, 1:46:52)

Actionable Techniques

  1. Brainstorm the brand in regular Claude first — ask for a brand concept (product, audience avatars, mission, positioning, pillars, voice/tone, visual identity incl. colors + typography) and download it as a markdown file; only then move into Claude Design. (8:10)
  2. Create your one design system with minimal inputs — company name, blurb, logo asset, and a markdown concept doc; add a note for guidance (e.g., “buttons modern, slight glow, polished”). No GitHub repo needed if you don’t have a codebase. (10:42)
  3. Review and correct the design system carefully — Claude Design will render logo variations, colors, buttons, inputs, and mocked-up landing/mobile previews; approve what’s right and explicitly tell it to keep your PNG logo unchanged. (15:49)
  4. Give feedback on logos explicitly — because Claude Design tends to alter logos, state clearly: “I dropped in a PNG of a logo; keep it exactly as is.” (14:57)
  5. Build a pitch deck from a structured outline, not a raw idea — in regular Claude, ask it to research the market and output a markdown slide outline (not the deck itself); paste that outline + the brand concept into Claude Design so it doesn’t have to brainstorm from nothing. (21:41)
  6. Keep specialized AI sessions — use one Claude chat for research/strategy/outlines and Claude Design purely for the visual build; treat each session as a specialized tool for better, cheaper outputs. (22:32)
  7. Use the verify agent’s auto-fixes — watch Claude Design’s verify agent as it visually checks each slide and self-corrects (“fix slide 6, fix slide 10”); it screenshots and inspects before finalizing. (25:42)
  8. Make precise edits directly on the canvas — click an element to edit text/size/color in place instead of prompting; use draw to circle non-element areas (like a gradient) and type a note, e.g., “make this section lighter.” (28:49)
  9. Ask for tweaks when you lack inspiration — prompt “give me a couple of tweaks I can play around with” and then toggle cover style, background texture, accent color, slide chrome, etc., choosing what you like. (31:41)
  10. Add animated elements to a hero via an image-to-video tool — create a logo/start-frame → end-frame animation in Kling (or SeeDance), download as MP4, attach it to the project, and reference it in the sketch so the design has a looping background element. (41:08)
  11. Sketch the layout before building — use the sketch tool to drop rough boxes for the hero text, subtext, navbar, logo, and video/animation position so Claude aligns on the structure before generating, improving one-shot accuracy. (42:07)
  12. Generate brand guidelines as text, then have an image model render them — ask Claude Design for a full text breakdown of the guidelines, paste it into ChatGPT’s image model (image-2) with the logo, and get a one-page brand-guidelines doc; fix font glitches in Canva if needed. (53:31)
  13. For a mobile app, paste the full requirements spec — generate an 804-line app requirement doc in regular Claude, paste it into a high-fidelity Claude Design project with the design system, and let it ask clarifying questions (all screens, interactivity, light/dark, fake-data realism) before building. (58:01)
  14. Build an animated launch video with the Hyperframes skill — download the Claude Design Hyperframes markdown skill, add it as a file, and it teaches Claude Design how to create/render HTML motion graphics; prompt for a ~25-30s landscape, fast-paced announcement with a CTA. (1:09:07)
  15. Iterate video pacing with plain-language direction — after a bland first cut, say “make it more fast-paced, keep attention, tell a story, more motion graphics,” and Claude Design translates the vague intent into code and re-renders. (1:11:41)
  16. Pull catalog components by URL — grab the URL of a Hyperframes (or 21st.dev) catalog page and let Claude Design fetch it and add that animation/scene (e.g., an app-showcase phone animation) into your video. (1:16:15)
  17. Reference real things, don’t describe — say “Linear 2023 with higher density” rather than “make it clean/minimalistic”; give real screenshots, specific advice, highlighted elements, negatives (“don’t use these fonts”), and one visual dimension per prompt. (1:18:05, 1:55:07)
  18. Iterate one feature at a time — multi-change mega prompts only execute one or two changes well and disregard the rest; make one main big change per prompt. (1:19:03)
  19. Hand off the design for deployment — click share → download project as ZIP, extract into a folder, open it in Claude Code, and have Claude Code “push this to a GitHub repo”; then add that repo as a new project in Vercel and deploy. (1:41:46)
  20. Verify before deploy: localhost, mobile, and index.html — have Claude Code open the site on localhost first; check mobile view via F12 (Claude doesn’t auto-optimize mobile); fix the common Vercel 404 caused by the file not being at repo root (rename to index.html). (1:44:40, 1:46:52)
  21. Export rather than keep polling the same thread — if a project thread gets very long, export/zip it and open a fresh session to iterate with clean context instead of burning quota on a polluted window. (1:53:42)

Tools & Skills Mentioned

  • Claude Design (Anthropic Labs, research preview) — the design tool for websites, slide decks, prototypes, animations, and videos, powered by Opus 4.7’s vision. (1:10)
  • Claude Opus 4.7 — most capable vision model, default in Claude Design; expensive; use for planning, drop to Sonnet/Haiku for tweaks. (2:53)
  • Claude Opus 4.6 / Opus 3 / Sonnet / Haiku — switchable models inside Claude Design for cheaper iteration. (24:32)
  • Design systems — reusable brand template (logo, colors, typography, components) shared across team; exportable as ZIP/PDF/HTML/design.md. (5:44)
  • Claude Code — receiving end for exporting Claude Design projects to push to GitHub/Vercel and keep iterating after the design quota is gone. (1:20:42)
  • Canva — fallback for fixing fonts/logos and final tweaks on exported designs. (1:21:09)
  • ChatGPT image-2 (image model) — used to render one-page brand-guideline docs from text + logo. (12:36, 55:15)
  • Kling — image-to-video animation for the Tally logo hand-draw effect. (41:11)
  • SeeDance 2.0 (on key.ai) — animating a still frame (first/last frame) into a background video with no camera movement. (1:26:13)
  • Nano Banana 2 (on key.ai) — image generation for the Lull hero background (16:9). (1:25:55)
  • Hyperframes (by HeyGen) — markdown skill/framework for Claude Design to create and render HTML motion-graphics videos; has a catalog of elements/transitions (app showcase, notifications, chromatic split, glitch, cross-warp). (1:09:07)
  • MotionSites.ai — inspiration site with animated backgrounds/sites; copy a prompt and Claude Design recreates it with your brand; ~$99/lifetime paid plan. (51:52, 1:30:50)
  • godly.website — endless scroll of website design inspiration. (52:25)
  • awards (awwwards) — design award inspiration site. (52:30)
  • 21st.dev — component library (announcements, borders, buttons, animated backgrounds) — copy a prompt to pull an individual element into your site. (52:37)
  • Glydo — voice-to-text tool the presenter uses for dictation (faster/more private than Whisper). (24:05)
  • GitHub — repo hosting; Claude Code pushes design exports there. (1:43:40)
  • Vercel — hosting/deploy platform that auto-syncs a GitHub repo to a live domain. (1:44:00)
  • Lovable — referenced for its per-prompt revert button (which Claude Design lacks). (1:40:01)
  • Figma — alternative export target; Claude Design can export to it. (1:21:35)
  • AI Automation Society — the presenter’s free community where the resource guide and website ZIP live. (19:41)

Quotes Worth Keeping

  • “Claude Design is one of the most powerful design tools that I’ve ever used because it makes everything insanely consistent, branded, and professional. And all you have to do is use your natural language.” (0:00)
  • “Don’t ever brainstorm in Claude Design. There’s just no point. You get way more usage over here.” (8:38)
  • “Building a design system is token intensive, but it is in the long run going to save you because then everything you build will have this branding, the logos, the typography, the colors.” (5:47)
  • “This is going to be your design.md, your spec for everything that you build in the future. Videos, promos, landing pages, everything.” (16:01)
  • “Think about AI as a specialized tool… how can you make each session as specialized and specific as possible to give you better outputs?” (22:32)
  • “As humans, we’re very good at knowing what we want, and we’re knowing when we don’t like something, but we don’t always know the vehicle to get there.” (1:12:18)
  • “Reference, don’t describe. Give real screenshots of things. Give real, specific advice. Highlight the elements you want to change.” (1:18:05)
  • “Don’t use defaults. That’s where you get the AI slop.” (1:18:29)
  • “If you try to make Claude make like five changes in one prompt, it kind of loses track of those, and it doesn’t do a great job. So, iterate one feature at a time.” (1:19:03)
  • “Claude Design is separate usage. So, only use Claude Design if you specifically need Claude Design.” (1:20:23)
  • “Sometimes it’s just easier and quicker to just go do it manually.” (1:21:30)
  • “Making tweaks and then saving those changes is going to save you more time and also more of your session limit than if you’re just having a conversation back and forth with Claude.” (1:39:19)

Graph View

Backlinks