4.2 From brief to prototype

Info
⏱ Duration: ~40 min · 🎯 Objective: import the “Elektra Rewards 2.0” brief, generate an interactive prototype, and refine it with fine-grained controls.

This is the session’s star exercise. With the design system already loaded, you’ll produce a prototype of the “Elektra Rewards 2.0” landing page — the redesign of the program you rescued in the basic track — starting from a brief, not a blank page.

Step 1 — Import the brief

Upload design/design-brief.docx from the zip. The brief includes the landing page’s objective, audience, key messages, and CTA. Claude Design accepts several input formats:

  • Documents: DOCX, PPTX, XLSX.
  • Images and screenshots.
  • A codebase or a web capture of an existing site.
Tip
The more specific the brief (objective, audience, tone, CTA), the fewer iterations you need afterward. design-brief.docx is already structured for that.

Step 2 — Generate the prototype

With the brief loaded, ask for the prototype. Suggested prompt (≤60 words):

Using this brief and the Elektra design system, generate an
interactive prototype of the "Elektra Rewards 2.0" landing page:
a hero with the value proposition, a program-benefits section,
social proof, and a clear sign-up CTA. Use our colors and
typography.

Claude builds an interactive prototype — not a static image — that you can navigate and share without code review or PRs.

Step 3 — Refine with fine-grained controls

This is the difference from generate-and-pray. Claude Design gives you fine control, in official terms:

  • Comment inline on any element.
  • Edit text directly in the prototype.
  • Use adjustment knobs to change spacing, color, and layout live.
Increase the CTA contrast, reduce the hero spacing by 20%, and
change the headline to "Your points, closer than ever".
Tip
Refine in short passes: one change, look at it, then the next. It’s faster than one giant prompt that rewrites everything at once.

✅ Checkpoint

  • You imported design-brief.docx and generated an interactive prototype of “Elektra Rewards 2.0”.
  • You refined at least one element with an inline comment, direct text edit, or spacing/color/layout knobs.
Check your understanding — 2 questions
  1. What input formats does Claude Design accept? → Text, images, documents (DOCX/PPTX/XLSX), a codebase, or a web capture of a site.
  2. How do you refine a prototype without redoing it? → With fine-grained controls: inline comments, direct text editing, and live spacing, color, and layout knobs.