How to Use the Style Recipe System in the Web‑Design‑Engineer Skill

The style recipe system in the Web‑Design‑Engineer skill lets you generate brand‑consistent web pages by referencing one of 25 anchored design recipes—such as linear, aesop, or pentagram—which inject specific palette, typography, spacing, and motion tokens into the generation workflow defined in SKILL.md.

The Web‑Design‑Engineer skill in the ConardLi/garden-skills repository transforms functional HTML/CSS/JS prototypes into polished, brand‑aware pages. Instead of relying on generic defaults like Inter font and #3b82f6 blue, the style recipe system allows you to anchor your request to a concrete design language. This article explains how to invoke these recipes and how the underlying mechanism loads design tokens from the references/style-recipes/ directory.

What Is the Style Recipe System?

The style recipe system consists of 25 anchored "recipes" stored as individual markdown files in skills/web-design-engineer/references/style-recipes/. Each recipe—such as linear.md, aesop.md, or pentagram.md—contains concrete specifications for:

• Palette: Ground, surface, and accent colors
• Typography: Font families, weights, and scales
• Spacing: Token scales (e.g., 4/8/12/16/24/40/64/96)
• Radius: Border radius values
• Shadow: Elevation definitions
• Motion: Transition curves and durations

The complete catalog is indexed in references/style-recipes/INDEX.md, which groups recipes by design school (e.g., "Modern Tool / Builder SaaS", "Editorial / Minimalist"). When you reference a recipe in your prompt, the skill loads only that specific file (approximately 50 lines), keeping the context window lightweight while ensuring high‑fidelity output.

How the Recipe Loading Workflow Works

According to the source code in skills/web-design-engineer/SKILL.md, the agent follows a four‑step workflow when it detects a style anchor:

1. Detect the anchor – The prompt is parsed for a known recipe name (e.g., "Linear‑style" or "Aesop feeling").
2. Load the recipe file – The agent reads only the matching file from references/style-recipes/<anchor>.md.
3. Paste the concrete values – The palette, typographic scale, spacing tokens, radius, shadow, and motion curves are inserted into Step 4 of the calibrated workflow (the "Design System Declaration").
4. Proceed with generation – The agent builds the UI using the supplied design tokens, guaranteeing the output matches the chosen aesthetic.

This mechanism overrides the default "Inter + #3b82f6" pattern with a coherent visual language defined by real‑world brands.

Invoking Style Recipes

You can trigger the style recipe system through natural language prompts or programmatic configuration.

Via Natural Language Prompts

When using Claude Code, Cursor, or similar agents, explicitly mention the recipe anchor in your request. The skill automatically maps phrases like "Linear‑style" to linear.md.

Build a SaaS product landing page for "LaunchPad".  
Please use the **Linear‑style** recipe.

The agent loads references/style-recipes/linear.md and injects its tokens—such as the near‑black ground (#08090A), hair‑line borders, Linear purple accent (#5E6AD2), Inter Tight typography, and specific motion curves—into the design system declaration before generating any HTML or CSS.

Via Programmatic Configuration

If you embed the skill in a custom AI agent, set the anchor explicitly via the STYLE_ANCHOR parameter or the $web-design-engineer variable. For example, in an OpenAI‑compatible YAML configuration:

# agents/openai.yaml (excerpt)

interface:
  display_name: "Web Design Engineer"
  short_description: "Polish visual web artifacts"
  default_prompt: |
    Use $web-design-engineer to design a page.
    STYLE_ANCHOR=linear   # <-- forces the Linear recipe

policy:
  allow_implicit_invocation: true

When the agent initializes, it reads linear.md and inserts the following design tokens into the system prompt:

# Design System (Linear‑style)

## Palette

Ground: #08090A
Surface 1: #16171C
Accent: #5E6AD2

## Typography

Display: Inter Tight, weight 600
Body: Inter, 14‑15 px, line‑height 1.55
Mono: GeistMono

## Spacing

4/8/12/16/24/40/64/96

## Radius

6/12/16

## Motion

Hover: ease‑out 150 ms
Layout: cubic‑bezier(0.22, 1, 0.36, 1) 350‑450 ms

Browsing Available Recipes Programmatically

To build a user interface that lets clients select a style, fetch the index file directly from the repository:

// Example: fetch the INDEX file to list available recipes
const fetch = require('node-fetch');
async function listRecipes() {
  const resp = await fetch('https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/web-design-engineer/references/style-recipes/INDEX.md');
  const index = await resp.text();
  console.log(index);
  // Parse the markdown to extract recipe names and schools
}
listRecipes();

After parsing the index, feed the selected recipe name back to the skill as a STYLE_ANCHOR parameter.

Anatomy of a Recipe File

Each recipe file in references/style-recipes/ follows a consistent structure. For example, linear.md contains:

• Palette definitions: Specific hex codes for ground, surface, and accent colors
• Typography specifications: Font families (Inter Tight, GeistMono), weights, and sizes
• Spacing scale: Numeric tokens for margin and padding
• Radius values: Corner rounding specifications
• Motion curves: CSS cubic‑bezier values for interactions

Because only the selected recipe is loaded into the context, the skill remains efficient while offering rich design starters. The tokens replace the default design system declaration in Step 4 of the workflow defined in SKILL.md.

Key Files in the Style Recipe System

Understanding the architecture requires familiarity with these specific files in the ConardLi/garden-skills repository:

• skills/web-design-engineer/SKILL.md – Core skill definition containing the four‑step workflow and anchor detection logic.
• skills/web-design-engineer/references/style-recipes/INDEX.md – Catalog index grouping all 25 recipes by design school.
• skills/web-design-engineer/references/style-recipes/<anchor>.md – Individual recipe files (e.g., linear.md) containing concrete design tokens.
• skills/web-design-engineer/agents/openai.yaml – Agent metadata and default prompt configuration that can trigger the skill.
• skills/web-design-engineer/demo/web-design-engineer-demo/README.md – Instructions for running the interactive gallery showcasing each recipe.

Summary

• The style recipe system provides 25 anchored design recipes (e.g., linear, aesop, pentagram) stored in references/style-recipes/.
• Each recipe file contains concrete tokens for palette, typography, spacing, radius, shadow, and motion.
• The workflow in SKILL.md detects anchors, loads the specific recipe file, and injects its values into the Design System Declaration step.
• Invoke recipes via natural language ("Use Linear‑style") or programmatically via the STYLE_ANCHOR parameter.
• The INDEX.md file catalogs all available styles for browsing and selection.

Frequently Asked Questions

What file format does the style recipe system use?

The style recipe system stores recipes as Markdown files (.md) in the references/style-recipes/ directory. Each file is approximately 50 lines and contains structured design tokens under headings like "Palette", "Typography", and "Motion".

How does the skill know which recipe to load?

The agent parses the user prompt for known anchor names defined in SKILL.md. When it detects a match—such as "Linear‑style" or "Aesop feeling"—it constructs the filepath references/style-recipes/<anchor>.md and reads only that file into the context.

Can I use multiple style recipes in a single request?

No, the system is designed to load a single recipe per generation to ensure design consistency. The workflow explicitly loads one matching file from references/style-recipes/ and uses its tokens to override the default design system. Mixing recipes would require manual token editing after generation.

Where can I see a demo of all available recipes?

The demo/web-design-engineer-demo/README.md file contains instructions for running an interactive gallery that showcases each of the 25 recipes in action. This demo allows you to preview the visual output of anchors like linear, aesop, and pentagram before selecting one for your project.

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