Design System

This skill provides a complete design system: the philosophy (how to think about design) and the documentation (a living style guide template). Every interface should look designed by a team that obsesses over 1-pixel differences.

Workflow

1. Start with Design Direction — Read Part 1 and commit to a direction before writing code
2. Apply Craft Principles — Follow the core rules in Part 2 as you build
3. Document in Style Guide — Add every component to the style guide (Part 3)

Part 1: Design Direction

Before writing any code, commit to a design direction. Don't default. Think about what this specific product needs to feel like.

Think About Context

• What does this product do? A finance tool needs different energy than a creative tool.