Jonathon's AI Wiki

How to Build Websites with Claude Design (Nate Herk / AIS+ Resource Guide)

16 min read

Source: raw/How_to_Build_Websites_with_Claude_Design.pdf — 9-page AIS+ Resource Guide titled “Claude Design = Instant $10k Websites” (AI Automation Society, by Nate Herk, May 2026). Companion to How to Build Websites with Claude Design YouTube video.

Nate Herk’s end-to-end production playbook for using Claude Design (Anthropic’s AI design product launched April 17 2026) to build polished, interactive websites from brand brief to live URL — without being a designer or developer. Goes beyond the marketing-tour level to ship-it operator detail: which model to use at each stage, the four in-canvas editing tools that beat re-prompting, the two-meter usage system (Claude Design has its own weekly quota separate from Claude Code), the ZIP-export-to-Claude-Code escape hatch when you burn through Design quota, and the GitHub + Vercel deployment pipeline. Sister AIS+ guide to Hermes 1-Hour / Codex 1-Hour / Paperclip / Claude Code AIOS / 5 AI Automations.

Key Takeaways

  • What Claude Design is. Anthropic Labs’ AI-powered design product (launched April 17, 2026 at claude.ai/design) for generating polished visual work — websites, prototypes, slide decks, landing pages, one-pagers, marketing collateral — through conversational prompts and fine-grained editing controls.

    • Built on Claude Opus 4.7, Anthropic’s most capable vision model, with roughly 3× the image resolution of prior versions and stronger taste/creative judgment.
    • Research preview, so expect bugs, evolving UI, and occasional quirks.
    • Paid plans only (Pro, Max, Team, Enterprise). Not on Free. Enterprise/Team admins must manually enable it (off by default).
    • Two ways to start: transform an existing codebase (drop in a GitHub repo or folder) OR build from scratch with a prompt + sketch.
    • Positioned against Figma and Canva, but designed to complement Canva specifically (direct export integration available).

  • The Full Website-Build Workflow (the operator playbook).

    Step 1: Brand & Idea Generation in Claude Chat (BEFORE Claude Design).

    • Use regular Claude chat to develop the concept first.
    • Ask Claude to invent the product/service, positioning, voice, visual identity, site spec.
    • Example from the video: a wind-down drink brand called “LOL” (magnesium glycinate / sleepy-time vibe).
    • Follow up asking for: an image prompt for the hero background + a matching video prompt to animate that image.

    Step 2: Generate the hero background video in Kie.ai (or your preferred image/video generator).

    • Nano Banana 2 generates the hero image at 16:9 ratio (e.g., dark ceramic mug with steaming liquid, left side empty for text).
    • Kling 2.0 (Cance 2.0) takes the image as both first and last frame, then you paste Claude’s video prompt.
    • Key tip: keep the camera stationary. You want a looping, subtle animation (steam rising), not a panning shot.

    Step 3: Open Claude Design.

    • Click New Prototype and pick High-Fidelity (or wireframe first to save tokens — see Section IX/X).
    • Skip the design system for now if you’re creating a brand-new brand.
    • Name the project (e.g., “LOL Website”) and hit Create.

    Step 4: Sketch + upload assets. Claude Design spins up a Lovable-style canvas. On the left:

    • Draw a rough sketch of the hero section with boxes labeled “hero background video,” “hero text,” “hero subtext,” “navbar,” “logo,” “shop.”
    • Drag in the MP4 of your background video (≤ 30 MB cap, roughly ≤ 20 seconds).
    • Paste the brand spec from Claude Chat (auto-converts to an artifact).

    Step 5: Write the kickoff prompt. Tell Claude Design: what the sketch represents (hero section only); the MP4 should loop as the hero background; where the hero text lives (left side); the 20+ lines of brand identity you just pasted; to write all the copy for every section now (“we can tweak later”).

    • Claude Design (using Opus 4.7) builds a to-do list, creates a design system, picks a color palette, starts generating. You can watch its thinking live.
    • Pro tip: if it goes down the wrong path, stop it immediately. Letting it finish wastes session limit.

  • Iterating on the canvas (the token-saving gold). Once the first version renders, Claude Design offers four in-canvas editing tools that burn far fewer tokens than re-prompting. “This is where Claude Design beats Claude Code and Lovable for visual work.”

    ToolWhat It DoesWhen to Use
    CommentClick any element, type a note, send to Claude. Claude knows exactly which element you meant.Targeted changes (“make this button gold”)
    Inline EditDouble-click text to edit directly in the canvas, including resizing on the fly.Quick copy fixes, removing AI-ish punctuation, font-size tweaks
    DrawCircle or scribble directly over an area, then leave a comment (“don’t like how this ends abruptly”).Describing issues in a specific region
    Tweaks Panel (Sliders)Claude generates custom sliders and toggles so you can change palette, accent hue, font, headline size, hero layout, video dim, section rhythm, and card style — all without sending a prompt.Exploration + creative discovery
    • Magic unlock prompt: “This is a really great iteration. I want to see what else is possible. Add a bunch of things that I can tweak, different colors, sliders, panels, and give me a bunch of things to play with.” → Claude Design adds a tweaks panel filled with controls. Experimenting there is essentially free; actual prompts are what burn your limit.

  • Getting design inspiration: motions.ai.

    • One-time $99 paid plan for lifetime access, most content is free.
    • Browse scroll journeys, 3D card sites, and animated backgrounds.
    • Hit Copy on any concept, paste it into Claude Design, and tell Claude to swap in your own brand video, copy, and colors.
    • This is exactly how Nate transformed his AI Automation Society site into its current scroll-journey layout in about 20 minutes.
    • You can also download standalone animated backgrounds from motions.ai and drop them into any section.

  • Thinking about your site in sections (don’t try to design the whole thing at once):

    1. Hero section (built first)
    2. Section 1: dynamic background (e.g., shooting stars)
    3. Section 2: feature or problem/solution
    4. Section 3: product video (e.g., someone stirring coffee)
    5. … and so on
    • For each new section: ask Claude Chat what type of element/video/image would fit → have it generate the image and video prompts → build assets in Kie → bring them back into Claude Design → iterate on that section only, then move to the next.

  • Deployment Pipeline: Claude Design → Claude Code → GitHub → Vercel. Once the site is ready inside Claude Design:

    1. Export from Claude Design. Click Share, Download as ZIP (most reliable). Alternative: “Hand off to Claude Code” gives a paste-in command but was returning 404s at filming time.
    2. Move into Claude Code. Extract the ZIP into a named desktop folder (e.g., LOL-website). Open the folder in VS Code with Claude Code. Project will contain: background video, sketch (scraps folder), uploads, and the HTML file.
    3. Push to GitHub. Tell Claude Code: “Push this to a private GitHub repository and call it whatever you want.” First time? Create a free github.com account and authorize Claude Code when it prompts.
    4. Test on localhost. Always test before deploying: “Make sure the website works as expected and open it up in a local host for me to view.” A localhost:3000 URL is only viewable on your machine, so don’t share it.
    5. Deploy to Vercel. Sign up for Vercel with the same GitHub account. Click Add New, Project, Import your repo, then Deploy. About 60 seconds later you get a live yoursite.vercel.app URL.
    6. Fix 404 errors. If Vercel shows 404 Not Found, the repo likely doesn’t have an index.html at the root. Tell Claude Code: “I just pushed to GitHub, synced to Vercel, and got a 404. What does this mean? How do I fix it?” Claude Code typically renames your main HTML file to index.html and pushes the fix. Vercel auto-redeploys in ~30 seconds.
    7. The “Practice vs Real” Environment. Local (Claude Code) is your practice environment — only you see changes. GitHub push promotes changes to production. Vercel auto-deploys every time GitHub updates. Clean separation between drafts and the live site.

  • Don’t forget mobile optimization. Claude Design and Claude Code do NOT auto-optimize for mobile. Before going live:

    1. Open the site in your local host.
    2. Press F12 and click the mobile view toggle in DevTools.
    3. If broken (hero text too big, video misplaced, content squished), tell Claude Code: “Optimize this for mobile without affecting the desktop view. Move the video below the text, reduce font size, etc.”

  • The Two-Meter Usage System (the load-bearing operational fact). Claude Design has its own weekly quota, separate from regular Claude chat and Claude Code. Regular Claude keeps working after Design maxes out. Track both in Settings > Usage.

    PlanRough Capacity
    Pro ($20/mo)~1 big website + design system and you’re basically done for the week
    Max 5x ($100/mo)~4 to 5 serious prompt sessions before hitting the limit
    Max 20x ($200/mo)A few video projects plus a few websites before getting close to the limit
    Team / EnterpriseAdmin-controlled, custom pricing

    Nate burned through his own 20x quota and spent $200+ in extra usage just exploring.

  • What drains your limit fastest (and how to fix it).

    • Defaulting to Opus 4.7 on every prompt. Switch to Sonnet 4.6 for drafts, exploration, and small changes. Use Opus for planning/design systems and major structural work only.
    • Skipping wireframes. Do a wireframe first, confirm direction, then convert to high-fidelity (less iteration = fewer tokens).
    • Design systems without a URL. Paste your live site URL so Claude scrapes brand automatically instead of ingesting 10-15 minutes of setup prompts.
    • Rewriting whole prompts for small edits. Use Comment / Draw / Inline Edit / Tweaks instead.
    • Super long threads. Context gets polluted, tokens get un-cached and reprocessed. Export the project, start a fresh session, and keep iterating on the already-built foundation. (/clear is also available but unconfirmed whether it fully clears context.)

  • Best Practices to Stretch Limits.

    • The ZIP Export Hack. Export your design system as a ZIP (contains a SKILL.md and README.md). Drop it into Claude Code and tell Claude Code to use SKILL.md as its skill. Keep generating on-brand designs using your Claude Code allowance instead of Design allowance.
    • Model by Stage. Opus 4.7 for design system generation and final high-fidelity polish. Sonnet 4.6 for wireframes, exploration, slide iteration, and copy edits (still excellent if prompts are specific).
    • Prompting Rules That Save Tokens.
      • One visual dimension per prompt. Don’t combine typography, color, and layout in a single mega-prompt. Claude only executes 1-2 well and ignores the rest.
      • Use negatives. Tell it what you don’t want (“no Inter, no Roboto, no YC gradients, no weird punctuation”) so you don’t have to correct later.
      • Reference real products. “Linear 2023 with higher density” beats “make it clean.”
      • Point-and-comment instead of full prompt rewrites.
      • Ask for prototypes, flows, and 10-second demos for better value per token than static screens.
      • Give maximum context upfront: sketches, brand specs, URLs, brand assets. Context on the first try equals fewer iterations.

  • File Uploads & Integrations.

    • What Claude Design Accepts: codebase (website URL, public GitHub repo, or local folder); design files (Figma .fig exports, custom fonts .woff/.ttf, logos PNG/SVG); documents (DOCX, PPTX, XLSX); media (images and videos up to ~30 MB / ~20 seconds); web capture tool (grab elements directly from live websites).
    • Export Options: internal organization URL (shareable link); Canva (direct integration, designs become fully editable); PDF; PPTX (PowerPoint); standalone HTML; handoff bundle for Claude Code (packages design and intent together).

  • Known Limitations (Research Preview).

    • No drag-and-drop repositioning. Edit through the inspector and comments only.
    • Browser only. No desktop app or terminal integration at launch.
    • Comment persistence is buggy. Inline comments sometimes disappear before Claude reads them. Workaround: paste the comment text into chat.
    • Compact view save errors. Switch to full view and retry if saves fail.
    • Large repos cause lag. Link specific subdirectories, not entire monorepos.
    • Multi-screen consistency drops after about 4 screens unless you re-anchor the design system.
    • Collaboration is basic. Not yet fully multiplayer like Figma.
    • “Container soup” default look. Pills, cards, serif font, and a blinking status dot appear repeatedly unless you aggressively override with your own references and tokens.
    • Best with clean codebases. Messy source code produces messy output.

  • When Claude Design runs out, keep building in Claude Code. If you burn through your weekly quota mid-project:

    1. Export your Claude Design project as a ZIP.
    2. Open it in Claude Code (which has its own separate usage pool).
    3. Keep iterating on the same project with new sections, mobile optimization, and bug fixes.
    4. Wait for the Design quota to reset, then bring the updated project back into Claude Design for more visual and canvas work.

  • The Minimum Viable Workflow (PDF’s recap).

    1. Claude Chat to invent brand, positioning, copy spec, and image and video prompts.
    2. Kie.ai (Nano Banana 2 + Kling) to generate the hero image and looping background video.
    3. Claude Design to sketch the hero, upload assets, paste the brand spec, and let Claude build.
    4. Iterate with Comments, Inline Edits, Draw, and the Tweaks Panel instead of fresh prompts.
    5. Motions.ai to grab scroll-journey and animated-background inspiration when stuck.
    6. Build section by section: hero, then section 1, then section 2, and so on.
    7. Export as ZIP, open in Claude Code, push to GitHub, deploy to Vercel.
    8. Test on localhost and mobile view before pointing anyone at the live URL.
    9. Preserve your quota: model by stage, one dimension per prompt, negatives, and references to real products.

Where it fits in the wiki

  • Operator-grade extension to Claude Design (Anthropic Labs) and Paul Couvert’s First-Time Walkthrough. Those articles cover what Claude Design is and the surface tour. This article is the production playbook — model-by-stage, in-canvas editing economics, ZIP-export-to-Claude-Code escape hatch, two-meter usage system, mobile-optimization gotcha. The bridge from “I can use it” to “I can ship a $10k website with it.”
  • Sister to Design for Prototypes and UX / Design for Presentations / 10 Use Cases / Prompt Examples / Six Agentic Patterns — six-article Claude-Design cluster covers each surface of the product; this article is the “build a marketing website end-to-end” playbook that ties them together.
  • The Two-Meter Usage System is load-bearing for any operator using Claude Design at scale. Paul Couvert’s walkthrough mentions a separate weekly limit; this article quantifies it per plan (Pro = ~1 big website/week; Max 20x = a few projects). Operators planning multiple client websites should price accordingly.
  • The ZIP-export-to-Claude-Code escape hatch is the operator-side parallel to the Codex course’s mix-and-match composition pattern. Run Claude Code in the same project directory when Design quota maxes. Same files-and-folders philosophy.
  • Sister AIS+ resource guide to the four other Nate Herk articles in this vault — all five (this + Hermes + Codex + Paperclip + 5 Automations) form a coherent operator-track curriculum: harnesses + offers + design surface.
  • Mobile-optimization gotcha is wiki-worthy — Claude Design and Claude Code do not auto-optimize for mobile. Add to any operator playbook touching website delivery.

Implementation

  • Tool/Service: Claude Design (Anthropic Labs) at claude.ai/design.
  • Required: Paid Claude plan (Pro 100/mo, Max 20x $200/mo, Team/Enterprise). Not on Free. Enterprise/Team admins manually enable.
  • Companion stack: Claude Chat (brand brief + copy/prompt spec) + Kie.ai with Nano Banana 2 + Kling 2.0 (image/video generation) + Claude Code (for ZIP-export iteration + mobile optimization + GitHub push) + GitHub + Vercel (deploy) + motions.ai ($99 lifetime) for scroll-journey inspiration.
  • Cost: Claude plan + ~$99 motions.ai (one-time) + Vercel free tier + GitHub free tier. Kie.ai is its own separate cost.
  • Defaults: Sonnet 4.6 for drafts, Opus 4.7 only for design system + final high-fidelity polish. Wireframe first, then convert. One visual dimension per prompt. Use negatives. Reference real products. Test mobile before deploy.
  • Integration notes: ZIP export contains SKILL.md + README.md — drop into Claude Code and have it read SKILL.md as the skill so Claude Code can keep generating on-brand designs against your Claude Code quota when Design maxes out. Vercel 404 default when no index.html at repo root — ask Claude Code to rename main HTML file to index.html.

Open Questions

  • /clear behavior in Claude Design. PDF flags it as available but unconfirmed whether it fully clears context. Compare with Claude Code’s /compact semantics?
  • Multi-screen consistency drop at ~4 screens. PDF says re-anchor the design system after 4. Is there an explicit re-anchor command, or is it just “paste your design system again”?
  • The “Hand off to Claude Code” command 404. Was returning 404s at filming time (early May 2026). Is this fixed in current Claude Design? If so, should be the preferred path over ZIP export.
  • Canva direct integration depth. PDF says designs become “fully editable” in Canva. What translates 1:1 vs gets approximated (animated backgrounds? scroll journeys?)
  • Web Capture tool quality. PDF mentions grabbing elements from live websites but doesn’t quantify fidelity. Useful for compliance-sensitive clones, or just inspiration?
  • Quota reset timing. Weekly limit resets — fixed Sunday midnight UTC, or rolling 7-day window? Operator pricing depends on this.

Try It

  1. Start in Claude Chat first. Invent a brand, positioning, voice, copy spec, image prompt, and video prompt before opening Claude Design.
  2. Generate the hero video in Kie.ai with Nano Banana 2 + Kling 2.0. Keep camera stationary. Loop subtly.
  3. Open Claude Design, New Prototype, High-Fidelity (or wireframe first to save tokens). Sketch the hero, drop the MP4, paste the brand spec.
  4. Watch its thinking live. If it goes the wrong direction, stop immediately — letting it finish wastes session limit.
  5. Use the four in-canvas tools (Comment / Inline Edit / Draw / Tweaks Panel) instead of re-prompting. Run the magic-unlock prompt to populate the Tweaks Panel.
  6. Pull inspiration from motions.ai when stuck. Copy → paste → swap in your assets/colors/copy.
  7. Build section by section — hero, then section 1, then 2, etc. Don’t design the whole site at once.
  8. Export as ZIP → Claude Code → GitHub → Vercel. Test localhost first. Ask Claude Code to fix the Vercel 404 (rename main HTML to index.html).
  9. Mobile optimize in Claude Code (F12 DevTools mobile toggle → tell Claude Code to optimize without affecting desktop).
  10. When Design quota maxes: ZIP-export-then-Claude-Code escape hatch. The SKILL.md in the ZIP keeps designs on-brand under your Claude Code quota.

Graph View

Backlinks