Claude Design in Ten Minutes

Follow this page once and you'll end up with your first interactive design draft built on the swift-web design system. The whole run takes about ten minutes and requires no coding knowledge.

Step 0: account and onboarding path

Prerequisite: a paid Claude account (Pro / Max / Team / Enterprise all work), with claude.ai/design open in your browser.

There are two paths to connect the swift-web design resources — pick by your account situation:

Path A: organization sharing (recommended)Path B: personal import
ForMembers of the company's Team / Enterprise organizationPersonal Pro / Max accounts
StepsNothing to do — the swift-web design system is already published in the organization; just pick it in the selector when creating a projectDownload the resource package → upload it to Claude to extract into your own design system (see below)
CollaborationProjects can be shared within the organization, with multi-person reviewSolo use; share finished drafts via export
Who to askContact the framework maintainers for organization onboardingSelf-serve

Import steps for Path B:

  1. Download the swift-web design resource package: swift-web-design-cards.zip (20 cards: palette / typography / shape + 17 component forms, all derived from framework source).
  2. In Claude Design, create or enter your organization (bottom-left of the project selector) and open the design system settings.
  3. Upload the unzipped HTML files as brand assets — Claude analyzes them and extracts a reusable design system (palette, fonts, component patterns).
  4. Create a test project to verify the extraction quality; once satisfied, flip the design system's Published switch — every project you create afterwards will use it automatically.

The cards in the package are self-describing (each is annotated with token names and component notes), so extraction quality is usually good; small deviations can be corrected with the design system's Remix feature.

Step 1: create a project

Create a project from the Claude Design home page. Confirm the project uses the swift-web design system (Path A: pick it in the Design system selector at creation; Path B: it applies automatically once published). From here on, everything the AI generates in this project will follow our colors, fonts, and component forms.

Step 2: describe what you want with the "four elements"

A good first draft comes from a well-structured description. The officially recommended four prompt elements — goal, layout, content, audience — are all you need to organize your words around:

Goal: a homepage for a streaming/media site. Layout: fixed top nav (logo + categories + search); a full-width carousel banner above the fold; three shelves below — a "Trending" horizontal card rail, a "New Releases" poster grid, and a numbered "Top Charts" list. Content: cards carry a cover, title, and rating badge; nav categories are "Movies / Series / Variety / Anime." Audience: mostly mobile, general viewers, dark mood, with the look and feel of a mainstream streaming site.

Send it and the AI generates a complete first version. Don't try to say everything at once — if the structure is right, it's a good starting point; leave the details to iteration.

Two practical tips:

  • Component names in your description can stay as plain intent in your own words ("horizontal card rail," "full-screen carousel") — with the design system connected, the AI maps them to the corresponding swift-web component forms automatically.
  • Ask the AI to give the draft an English file name (e.g. home.dc.html) — links stay more reliable when shared across systems.

Step 3: iterate three ways

Pick the tool by the granularity of the change (see the comparison table in Meet Claude Design):

  • Global changes → keep chatting: "One shade darker overall," "Swap the order of the shelves."
  • Local changes → inline annotations: pin the specific element and say what you want; the AI touches only that spot. If an annotation responds slowly, just paste the same request into the chat.
  • Fine-tuning → direct canvas editing: drag to align, change font sizes — what you see is what you get.

One more trick that works well: drag reference images straight into the conversation. Competitor screenshots, hand sketches, old designs — the AI adjusts the draft against them: "Match the card density of this image in the second shelf."

Step 4: colors (when designing a new brand)

If you're setting the tone for a brand-new site, remember one rule: have the AI adjust colors at the semantic token layer; never recolor element by element.

✅ "Switch the brand primary (--primary) to a #C8A96A gold family, push the background to near-black, luxurious dark mood overall" ❌ "Make this button gold" "That heading gold too"… (scattered recoloring: inconsistent within the draft, and impossible to hand off for implementation)

Once the draft is final, include the finalized token value list (primary / background / text / semantic colors — a dozen-odd entries) as one of the deliverables — it is the sole input for the code-side implementation and for generating the brand's own design system. Full explanation in the color workflow.

Step 5: export and handoff

The export menu is in the top right; pick by destination:

  • Showing colleagues / stakeholders: within an organization, just share the project link (Team / Enterprise); on a personal account, export standalone HTML or PDF and send it.
  • Into Canva / presentations: export PPTX or send it straight to Canva.
  • Handing to development: use handoff to package it for Claude Code — this is the official bridge into the swift-web engineering side. Handoff details (together with the Figma track's handoff) live in Designer–frontend collaboration.

FAQ

  • The generated draft isn't using our colors? Check that the project is actually connected to the swift-web design system (visible in project settings); on Path B, confirm the design system has been Published.
  • Want to change the design system itself (add components, change token defaults)? The design system cards are auto-derived from framework source — do not edit the cards directly in Claude Design. File the request with the framework maintainers; once the code side updates, the resources follow automatically. Rationale in Standards and governance.
  • Ran out of quota? Claude Design shares the subscription quota with chat and Claude Code — wait for the quota window to reset, or contact your admin.