design-recipe

To formalize design patterns from research, you classify color patterns, variant axes, and base templates, then document the chosen compound-variant strategy into an approved design blueprint. This translates raw research notes into structured design specifications.

A compound-variant strategy in component design defines how multiple variant axes interact to create specific component states. It selects a base-style template and sets defaults to ensure predictable styling across multi-part sub-recipes.

You document color and variant patterns for CSS-in-TypeScript components by classifying them into Full, Container, or Minimal color patterns and Interactive, Display, or Container styles, writing the output to a design.md file.

No, you cannot generate the final design documentation without user approval. The workflow explicitly requires user approval before writing the formalized design artifact to the .context/recipe directory, preventing unexpected changes.

The best way to structure multi-part component recipes is to enumerate sub-recipes for each component part, select a compound-variant strategy, and define variant axes with defaults, ensuring modularity.