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

> Master the style recipe system in the Web-Design-Engineer skill to generate brand consistent web pages. Leverage design recipes for palette typography spacing and motion tokens.

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

---

**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`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md).**

The Web‑Design‑Engineer skill in the [ConardLi/garden-skills](https://github.com/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`](https://github.com/ConardLi/garden-skills/blob/main/linear.md), [`aesop.md`](https://github.com/ConardLi/garden-skills/blob/main/aesop.md), or [`pentagram.md`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/linear.md).

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

```

The agent loads [`references/style-recipes/linear.md`](https://github.com/ConardLi/garden-skills/blob/main/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:

```yaml

# 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`](https://github.com/ConardLi/garden-skills/blob/main/linear.md) and inserts the following design tokens into the system prompt:

```markdown

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

```javascript
// 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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/linear.md)) containing concrete design tokens.
- **[`skills/web-design-engineer/agents/openai.yaml`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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.