Module 5, Lesson 2: Building the Design System
How do you build a design system before you write any code? You open Claude Design, attach your research and project folders, and ask it to design a system, and to ask you questions first. You answer, compare the directions it generates, and save one as your default.
What you get is a reusable rulebook (color, type, spacing, components) that every later screen is built against. The Product Path shows the exact prompt.
What is a design system, and why build it before code?
A design system is the reusable rulebook for how an app looks and feels: its color palette, typography, spacing scale, core components, and sample screens. You build it before writing code so those decisions are settled up front, which keeps every screen consistent and stops the coding tool from improvising its own styling mid-build.
Generating it with Claude Design means attaching your research and project docs, then having Claude ask clarifying questions about tone, type, and dark mode before it designs, so the result reflects choices you actually care about rather than guesses.
Before We Start
From previous lessons:
- You confirmed all your pre-reqs are in place: Claude Desktop with the Design tab, WebStorm bootstrapped, Obsidian vault with your Module 2 docs. Module 5, Lesson 1
- Your GTM doc, market research, summary, technical doc, and UX/UI doc all live in your Obsidian vault. Module 2
- Your WebStorm project is bootstrapped and you know your project's file path. Module 3, Lesson 1
Tools / setup you'll need:
- Claude Desktop, with the Design tab
- Your Obsidian vault (all Module 2 documents)
- Your WebStorm project folder path
By the end of this lesson, you'll:
- Have used Claude Design to generate an initial design system for your app
- Understand what a design system actually covers: color, type, spacing, components, and sample screens
- Have a saved default design system you'll build against for the rest of the app