Style Systems

You'll discover your design style, turn inspiration into components, and create a design system that keeps your app looking consistent. This isn't about becoming a designer–it's about building a system that helps you (and Claude) create beautiful, cohesive interfaces.

1. Find Your Design Style

Before building components, you need to know what style fits your product. We'll explore design resources and create a mood board that guides all your future design decisions.

Design Inspiration Resources

For Web Apps & SaaS:

• Mobbin – Mobile and web app UI patterns, organized by flow and component type
• Page Flows – User flow examples from real products
• SaaS Landing Page – Curated collection of SaaS marketing pages

For General Inspiration:

• Dribbble – Creative designs and concepts (filter by "Web Design")
• Land Book – Landing page gallery with clean, modern examples

For Component Libraries:

• UI Guideline – Component examples from top design systems
• Component Gallery – Real component examples organized by type

Create Your Design Mood Board

Now browse the recommended resources and collect examples:

1. Screenshot 3-5 designs that feel right for your product
2. Focus on individual components (buttons, cards, forms) rather than full pages
3. Look for consistency in spacing, colors, typography, and overall feel
4. Consider your users – will this style help or distract from their goals?

Save the screenshots in your project – ask Claude to create a design-inspiration/ folder wherever your project keeps docs, and drop them there. Name them descriptively: button-style.png, card-layout.png, color-palette.png

Outcome: You have 3-5 design screenshots that represent your desired style direction.

2. Turn Screenshots into Components

Transform your visual inspiration into working React components. We'll start with shadcn/ui components as our foundation, then style them to match your design.

Preparing Screenshots for AI Analysis

Best practices for component screenshots:

• Individual components: Capture buttons, cards, forms separately
• Multiple states: Include normal, hover, and active states when visible
• Actual size: Screenshot at 100% zoom for accurate proportions
• Clean backgrounds: Crop out distracting elements around the component

Component Creation Strategy

Always start with shadcn/ui first:

1. Check if shadcn/ui has the component (button, card, input, etc.)
2. Install and customize the shadcn/ui version to match your design
3. Only create from scratch if no suitable shadcn/ui component exists

Start simple – buttons and cards before complex layouts – and note what you customized as you go.

Using Claude to Style Existing Components

Upload your first screenshot and let Claude analyze it. Then:

1. Test the component in your app to see how it looks
2. Iterate on details – adjust spacing, colors, or typography to match exactly
3. Create variations – different sizes, colors, or states as needed
4. Repeat for 2-3 key components from your inspiration

Outcome: You have 2-3 custom components that perfectly match your chosen design style.

3. Point CLAUDE.md at Your Design System

Your real design system already lives in your code – the theme tokens in your CSS/Tailwind config and the styled UI components wherever your app keeps them. That's the source of truth, and Claude can read it. So you don't copy it into CLAUDE.md; you just add a short pointer so Claude knows where to look and the one or two rules that matter.

Keep this lean. Remember from the Skills & Project Rules lesson: CLAUDE.md should hold only the minimum needed to keep your build consistent – not a second copy of your styles.

A good pointer is just a handful of lines:

## Design System
- Source of truth: theme tokens in globals.css + the project's UI components – match those.
- shadcn/ui first; only build custom when no suitable component exists.
- Primary: <your color>. Default radius: <your value>.

After Claude updates CLAUDE.md: review it, commit it, then test by asking Claude to build a new component – it should match your style by reading your tokens and components, not a long spec.

Outcome: CLAUDE.md has a short pointer to your design system; your code stays the source of truth.

4. Practice with Your Style System

Apply your design system to build more components and refine the system based on real usage.

Build Components with Your Design System

Now use your design system to create additional components, always starting with shadcn/ui:

Refine Your Design System

As you build more components, you'll discover gaps or inconsistencies:

1. Test components together – Do they feel cohesive?
2. Identify missing patterns – Do you need new colors or spacing rules?
3. Update your Design System section in CLAUDE.md with new guidelines
4. Document edge cases – How to handle complex layouts or special states

Document Your System

Create a simple showcase of your design system:

1. Component showcase page: Display all your components with examples
2. Usage guidelines: Document when to use each component
3. Design tokens: List your colors, spacing, and typography scales
4. Team sharing: Commit your design system rule to version control

Outcome: You have a scalable design system that ensures all future components match your style.