# What Are the Style Recipes in Web-Design-Engineer? A Complete Guide to the 25-Recipe Catalog

> Explore 25 style recipes in Web-Design-Engineer. Discover design tokens for popular brands like Apple HIG and Linear in this comprehensive guide.

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: how-to-guide
- Published: 2026-09-02

---

**The Web-Design-Engineer skill in ConardLi/garden-skills contains 25 style recipes—self-contained markdown files like [`apple-hig.md`](https://github.com/ConardLi/garden-skills/blob/main/apple-hig.md) and [`linear.md`](https://github.com/ConardLi/garden-skills/blob/main/linear.md) that capture concrete design tokens for specific brands, located in `skills/web-design-engineer/references/style-recipes/`.**

The **Web-Design-Engineer** skill is an open-source design system agent that uses *style recipes* to translate vague aesthetic requests into concrete CSS and JSX tokens. These recipes serve as anchored design references, allowing the agent to inject specific visual languages—such as "Apple-style" or "Linear-feeling"—directly into a project's design system without loading unnecessary data.

## What Are Style Recipes in Web-Design-Engineer?

Style recipes are **self-contained markdown specifications** that document real-world visual languages. Each file represents a specific brand, studio, or designer's aesthetic, containing granular design decisions including palette, typography, spacing, motion, and signature moves.

Located in `skills/web-design-engineer/references/style-recipes/`, these files follow a consistent anatomy:
- **Title and School** – Classification within a design taxonomy (e.g., Editorial/Minimalist, Modern Tool/SaaS)
- **Vibe and Palette** – Ground colors, ink, accent specifications
- **Typography** – Font families, weights, and hierarchies
- **Spacing and Radius** – Padding scales, border radius values
- **Motion** – Animation curves and duration standards
- **Signature Moves** – Distinctive patterns that define the aesthetic
- **Avoid List** – Anti-patterns to exclude

Each recipe averages approximately 50 lines, making them lightweight enough to load individually while maintaining comprehensive design token coverage.

## The Recipe Catalog and Taxonomy System

The 25 recipes are organized through a two-tier indexing system that prevents information overload.

### INDEX.md: The Master Catalog

The [`INDEX.md`](https://github.com/ConardLi/garden-skills/blob/main/INDEX.md) file at [`skills/web-design-engineer/references/style-recipes/INDEX.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/style-recipes/INDEX.md) groups recipes by:
- **School** – Architectural design philosophy (Editorial/Minimalist, Brutalist/Raw, Motion/Experimental)
- **Best-for Scenario** – Use cases like landing pages, dashboards, or portfolios
- **Light/Dark Mode** – Color scheme availability

This taxonomy enables the Direction-Advisor component to filter the catalog intelligently, selecting only the 2–3 most relevant recipes for a given query rather than the full set.

### Design-Directions.md: School Classification

The [`skills/web-design-engineer/references/design-directions.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/design-directions.md) file defines six high-level schools and maps them to the index. When a user provides a vague request—such as "make it feel premium"—the advisor consults this file to suggest a specific school, then loads concrete recipes from that classification.

## Representative Style Recipe Examples

The catalog includes 25 specific recipes representing diverse aesthetic traditions. Here are representative examples demonstrating the format's range:

| Recipe File | School | Visual Characteristics |
|-------------|--------|------------------------|
| [`apple-hig.md`](https://github.com/ConardLi/garden-skills/blob/main/apple-hig.md) | Editorial/Minimalist | Generous whitespace, SF Pro typography, muted palette with system-blue accent, product-centric hero layouts |
| [`linear.md`](https://github.com/ConardLi/garden-skills/blob/main/linear.md) | Modern Tool/Builder SaaS | Hairline borders, warm-dark ground, selective purple accent, monospace chips, builder-interface optimized |
| [`field-io.md`](https://github.com/ConardLi/garden-skills/blob/main/field-io.md) | Motion/Experimental | Generative type and form, data-driven motion, self-building page transitions |
| [`muji-kenya-hara.md`](https://github.com/ConardLi/garden-skills/blob/main/muji-kenya-hara.md) | Editorial/Minimalist | Pure white ground, quiet typography, "ex-formation" emptiness principles |
| [`aesop.md`](https://github.com/ConardLi/garden-skills/blob/main/aesop.md) | Editorial/Minimalist | Cream/sage palette, serif copy, product-as-protagonist imagery |
| [`balenciaga-post-2017.md`](https://github.com/ConardLi/garden-skills/blob/main/balenciaga-post-2017.md) | Brutalist/Raw | Default browser styling, massive Helvetica headlines, zero border radius |
| [`mailchimp-freddie.md`](https://github.com/ConardLi/garden-skills/blob/main/mailchimp-freddie.md) | Warm Humanist | Hand-drawn marks, warm illustrations, friendly microcopy tone |

Each file is a complete design-token specification that the skill runner parses to generate framework-specific code (Vite + React/TS in demo implementations).

## Architecture: The Single-Recipe Loading Rule

A critical architectural constraint governs the style recipe system: **never load the entire catalog**.

- **Individual recipe size**: ~50 lines of markdown
- **Full catalog size**: ~1,400 lines (25 recipes × 50 lines)

Loading all 25 recipes would defeat the skill's **progressive-disclosure design**, increasing token consumption and latency unnecessarily. Instead, the system enforces single-recipe loading—when a user mentions a specific anchor ("Apple-style," "Aesop-feeling," "Linear-style"), the agent reads *only* that corresponding markdown file and injects its tokens into Step 3 of the design pipeline.

This rule is documented in the "Cross-Cutting Anti-Patterns" section of [`INDEX.md`](https://github.com/ConardLi/garden-skills/blob/main/INDEX.md) and enforced throughout the skill runner logic declared in [`manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/manifest.json).

## How to Load and Apply Style Recipes Programmatically

Downstream components consume recipes through a parsing layer that converts markdown specifications into design tokens. Below is a TypeScript implementation demonstrating the loading pattern:

```typescript
// utils/loadRecipe.ts
import fs from 'fs';
import path from 'path';

export function loadRecipe(recipeId: string) {
  const file = path.resolve(
    __dirname,
    '../../skills/web-design-engineer/references/style-recipes',
    `${recipeId}.md`
  );
  const raw = fs.readFileSync(file, 'utf-8');

  // Parse key-value pairs from markdown list items
  const tokens: Record<string, any> = {};
  raw.split('\n').forEach(line => {
    const match = line.match(/^-\s*(\w+):\s*(.+)$/);
    if (match) tokens[match[1].toLowerCase()] = match[2].trim();
  });
  return tokens;
}

```

Applying the tokens to a CSS-in-JS theme object:

```typescript
// demo.ts
import { loadRecipe } from './utils/loadRecipe';

const recipe = loadRecipe('apple-hig');
const theme = {
  colors: {
    ground: recipe['ground'],
    ink: recipe['ink'],
    accent: recipe['accent (sparingly)'],
  },
  fontFamily: 'SF Pro Display, Inter Tight, sans-serif',
  borderRadius: { small: '12px', large: '22px' },
  // Additional token mappings...
};

console.log('Generated theme:', theme);

```

**Conceptual output:**

```javascript
{
  colors: { ground: '#FFFFFF', ink: '#1D1D1F', accent: '#0071E3' },
  fontFamily: 'SF Pro Display, Inter Tight, sans-serif',
  borderRadius: { small: '12px', large: '22px' }
}

```

The skill runner in [`demo/web-design-demo/demo1.html`](https://github.com/ConardLi/garden-skills/blob/main/demo/web-design-demo/demo1.html) demonstrates this flow in action, reading recipe files and generating corresponding design systems in real-time.

## Key Files in the Style Recipe Subsystem

| File Path | Purpose |
|-----------|---------|
| [`skills/web-design-engineer/references/style-recipes/INDEX.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/style-recipes/INDEX.md) | Master catalog with taxonomy by school, scenario, and mode |
| [`skills/web-design-engineer/references/design-directions.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/design-directions.md) | High-level school definitions mapping vague requests to concrete recipes |
| [`skills/web-design-engineer/references/style-recipes/apple-hig.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/style-recipes/apple-hig.md) | Example Editorial/Minimalist recipe (Apple Human Interface Guidelines) |
| [`skills/web-design-engineer/references/style-recipes/linear.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/style-recipes/linear.md) | Example Modern Tool/SaaS recipe |
| [`skills/web-design-engineer/manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/manifest.json) | Skill metadata declaring entry points and configuration |
| [`demo/web-design-demo/demo1.html`](https://github.com/ConardLi/garden-skills/blob/main/demo/web-design-demo/demo1.html) | Live demonstration consuming generated design tokens |

## Summary

- The Web-Design-Engineer skill maintains **25 style recipes** in `skills/web-design-engineer/references/style-recipes/` that serve as concrete design-token specifications for real-world brands.
- Recipes are organized via [`INDEX.md`](https://github.com/ConardLi/garden-skills/blob/main/INDEX.md) (taxonomy) and [`design-directions.md`](https://github.com/ConardLi/garden-skills/blob/main/design-directions.md) (school classification) to enable progressive disclosure.
- **Single-recipe loading is mandatory**: The system loads only the specific recipe referenced (~50 lines) rather than the full catalog (~1,400 lines) to optimize performance.
- Representative recipes include [`apple-hig.md`](https://github.com/ConardLi/garden-skills/blob/main/apple-hig.md) (Editorial/Minimalist), [`linear.md`](https://github.com/ConardLi/garden-skills/blob/main/linear.md) (Modern Tool/SaaS), and [`balenciaga-post-2017.md`](https://github.com/ConardLi/garden-skills/blob/main/balenciaga-post-2017.md) (Brutalist/Raw).
- The skill runner parses these markdown files to generate CSS/JSX tokens for Vite + React/TS implementations.

## Frequently Asked Questions

### How many style recipes are available in the Web-Design-Engineer skill?

The skill contains **25 style recipes** as of the current implementation. These are stored as individual markdown files in `skills/web-design-engineer/references/style-recipes/` and cover diverse aesthetic schools from Editorial Minimalism to Brutalist Raw design.

### What is the file format of a style recipe?

Each recipe is a **self-contained markdown file** with a standardized anatomy including title, school classification, vibe description, color palette, typography specifications, spacing scales, motion parameters, and an "avoid list" of anti-patterns. Files like [`apple-hig.md`](https://github.com/ConardLi/garden-skills/blob/main/apple-hig.md) and [`linear.md`](https://github.com/ConardLi/garden-skills/blob/main/linear.md) follow this consistent structure.

### Why does the skill load only one recipe at a time?

Loading the **entire catalog would require ~1,400 lines** of markdown (25 recipes × ~50 lines each), which violates the progressive-disclosure architecture and increases token consumption unnecessarily. The system enforces single-recipe loading—when a user mentions "Apple-style," only [`apple-hig.md`](https://github.com/ConardLi/garden-skills/blob/main/apple-hig.md) is parsed—to maintain efficient performance and focused design constraints.

### How are style recipes indexed and categorized?

Recipes are organized through [`INDEX.md`](https://github.com/ConardLi/garden-skills/blob/main/INDEX.md), which groups them by **school** (e.g., Editorial/Minimalist, Motion/Experimental), **best-for scenario** (landing pages, dashboards), and **light/dark mode** availability. The [`design-directions.md`](https://github.com/ConardLi/garden-skills/blob/main/design-directions.md) file provides the high-level taxonomy of six schools that bridges vague user requests to concrete recipe selections.