# Style Recipes in the web-design-engineer Skill: 8 Real-World Examples from Garden-Skills

> Explore 8 real-world style recipe examples from the web-design-engineer skill for instant brand-specific visual language application. Learn how to use aesop and linear styles.

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

---

**The web-design-engineer skill provides 25 anchored style recipes stored in `skills/web-design-engineer/references/style-recipes/` that agents lazy-load by name to instantly apply brand-specific visual languages—such as `aesop` for apothecary aesthetics or `linear` for developer-focused dark themes—to generated web artifacts.**

The ConardLi/garden-skills repository hosts a specialized **web-design-engineer** skill that enables AI agents to generate production-ready web interfaces. At the heart of this system lies a collection of **style recipes**—structured markdown specifications that encode the visual DNA of iconic brands and design movements, allowing developers to invoke complex design systems with a single anchor word.

## How the Style Recipe System Works

The recipe architecture relies on **lazy-loading** to maintain performance. When a prompt references an anchor like `aesop` or `linear`, the skill reads only the matching `*.md` file from `skills/web-design-engineer/references/style-recipes/`, keeping the agent lightweight and responsive.

Each recipe file contains approximately 50 lines of structured specifications defining:

- **Color palette** – Primary, secondary, and accent values
- **Typography** – Font families, weights, and scale hierarchies
- **Spacing** – Grid systems and layout rhythms
- **Imagery** – Photography style and illustration guidelines
- **Signature moves** – Distinctive interactions or visual treatments unique to the brand

The master index 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) catalogs all 25 available recipes and cross-references common anti-patterns to avoid.

## 8 Representative Style Recipes Examples

The following examples demonstrate the breadth of the style recipe library, ranging from minimalist Japanese aesthetics to high-density financial interfaces.

### aesop – Apothecary Pages

**Core characteristics:** Warm chamois and amber tones, serif-heavy copy, literary-magazine feel.

This recipe captures the sensory, textural quality of boutique skincare and wellness brands. Use this for beauty product pages or independent retail sites requiring an editorial, trustworthy atmosphere.

### muji-kenya-hara – Object Catalogues

**Core characteristics:** Minimalist ash and paper palette, empty canvas treatment, objects photographed in floating space.

Based on Kenya Hara’s design philosophy for Muji, this recipe excels for houseware brands and slow-living catalogues that emphasize negative space and material honesty.

### apple-hig – Premium Tech

**Core characteristics:** SF Pro Display typography, generous whitespace, soft elevation shadows.

Mirroring Apple’s Human Interface Guidelines, this specification produces hardware product pages and device launch sites with immediate premium recognition.

### linear – Developer Landing

**Core characteristics:** Warm-dark theme, hairline borders, purple accent chips.

Optimized for SaaS and developer-tool marketing sites, this recipe combines technical credibility with approachable warmth through its signature dark-mode aesthetic.

### bloomberg-terminal – Trading Dashboards

**Core characteristics:** Amber text on navy-black background, monospace fonts, density-over-comfort information architecture.

This recipe sacrifices white space for data density, creating high-throughput financial consoles where screen real estate prioritizes information velocity.

### tufte-dataink – Data Narratives

**Core characteristics:** Sparklines embedded in body copy, small multiples, strict prohibition of chart-junk.

Edward Tufte’s principles drive this recipe, ideal for research publications and academic essays where data visualization must integrate seamlessly with text.

### y2k-retrofuturism – Y2K Portals

**Core characteristics:** Chrome bevels, frosted glass effects, MSN-blue accents, neon-style blobs.

Targeting nostalgic Gen-Z brand stunts, this recipe revives early-2000s internet aesthetics with modern CSS implementations.

### mid-century-modern – Poster Homages

**Core characteristics:** Mustard, brick, and cyan palette; cut-paper geometry; 1957 optimism.

This recipe channels Eames-era graphic design for cultural events and vintage-print branding that requires optimistic, geometric visual language.

## Implementing Style Recipes in Your Workflow

You can invoke recipes through two primary mechanisms: implicit anchor reference or explicit file loading.

### Implicit Invocation by Anchor Name

The standard approach requires only naming the recipe in your prompt. The agent automatically resolves the anchor to the corresponding markdown file:

```tsx
// Example: Using the aesop style recipe in a prompt
const prompt = `
Design a product page for a boutique skincare line.
Use the web-design-engineer skill and apply the "aesop" style recipe.
`;

await agent.run(prompt);

```

### Explicit Loading for Custom Tooling

For advanced integrations, import the specification directly and pass it to the design-system configuration step:

```tsx
// Example: Directly loading a recipe file (for custom tooling)
import aesopSpec from './skills/web-design-engineer/references/style-recipes/aesop.md';

// Pass the spec to the skill's design-system step
agent.configureDesignSystem(aesopSpec);

```

## Key Files Controlling the Recipe System

Understanding the file structure helps when extending or debugging the style recipe subsystem:

- [`skills/web-design-engineer/README.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/README.md) – Human-readable overview containing the full gallery of 25 recipes with preview images
- [`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) – Machine-readable index of all anchored recipes with cross-reference tables
- `skills/web-design-engineer/references/style-recipes/<recipe>.md` – Individual specification files (e.g., [`aesop.md`](https://github.com/ConardLi/garden-skills/blob/main/aesop.md), [`linear.md`](https://github.com/ConardLi/garden-skills/blob/main/linear.md))
- [`skills/web-design-engineer/SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/SKILL.md) – Core skill definition containing system prompts and workflow logic
- [`skills/web-design-engineer/agents/openai.yaml`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/agents/openai.yaml) – Host agent metadata for Claude Code, Cursor, and similar environments

## Summary

- The **web-design-engineer** skill contains **25 anchored style recipes** stored as markdown files in `skills/web-design-engineer/references/style-recipes/`.
- Recipes are **lazy-loaded** by anchor name (e.g., `aesop`, `linear`) to minimize agent overhead.
- Each **~50-line specification** defines color, typography, spacing, imagery, and signature moves for a specific visual language.
- The **[`INDEX.md`](https://github.com/ConardLi/garden-skills/blob/main/INDEX.md)** file provides a complete catalog and anti-pattern cross-references.
- Developers can invoke recipes via **implicit prompt references** or **explicit file imports** for custom tooling.

## Frequently Asked Questions

### How does lazy-loading improve performance in the web-design-engineer skill?

The skill only reads the specific `*.md` file referenced by the anchor name (e.g., [`aesop.md`](https://github.com/ConardLi/garden-skills/blob/main/aesop.md)) rather than loading all 25 recipes into context. This keeps the agent's working memory lightweight and reduces token consumption during initialization.

### Can I create custom style recipes for the web-design-engineer skill?

Yes. Create a new markdown file in `skills/web-design-engineer/references/style-recipes/` following the established ~50-line format, then register the anchor name in [`INDEX.md`](https://github.com/ConardLi/garden-skills/blob/main/INDEX.md). Your custom recipe must define color palettes, typography stacks, spacing rules, imagery guidelines, and signature moves to match the specification schema.

### What file format do style recipes use?

Style recipes are standard markdown files (`.md`) with structured content describing visual design systems. The agent parses these as plain text specifications rather than executable code, making them portable and human-editable.

### Which AI agents support the web-design-engineer skill style recipes?

According to the [`agents/openai.yaml`](https://github.com/ConardLi/garden-skills/blob/main/agents/openai.yaml) configuration file, the skill supports hosts including Claude Code, Cursor, and other OpenAI-compatible agent environments that can parse the SKILL.md workflow definitions and lazy-load markdown references.