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

The Web-Design-Engineer skill in ConardLi/garden-skills contains 25 style recipes—self-contained markdown files like apple-hig.md and 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 file at 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 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	Editorial/Minimalist	Generous whitespace, SF Pro typography, muted palette with system-blue accent, product-centric hero layouts
linear.md	Modern Tool/Builder SaaS	Hairline borders, warm-dark ground, selective purple accent, monospace chips, builder-interface optimized
field-io.md	Motion/Experimental	Generative type and form, data-driven motion, self-building page transitions
muji-kenya-hara.md	Editorial/Minimalist	Pure white ground, quiet typography, "ex-formation" emptiness principles
aesop.md	Editorial/Minimalist	Cream/sage palette, serif copy, product-as-protagonist imagery
balenciaga-post-2017.md	Brutalist/Raw	Default browser styling, massive Helvetica headlines, zero border radius
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 and enforced throughout the skill runner logic declared in 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:

// 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:

// 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:

{
  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 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	Master catalog with taxonomy by school, scenario, and mode
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	Example Editorial/Minimalist recipe (Apple Human Interface Guidelines)
skills/web-design-engineer/references/style-recipes/linear.md	Example Modern Tool/SaaS recipe
skills/web-design-engineer/manifest.json	Skill metadata declaring entry points and configuration
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 (taxonomy) and 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 (Editorial/Minimalist), linear.md (Modern Tool/SaaS), and 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 and 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 is parsed—to maintain efficient performance and focused design constraints.

How are style recipes indexed and categorized?

Recipes are organized through 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 file provides the high-level taxonomy of six schools that bridges vague user requests to concrete recipe selections.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}