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

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

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

// 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 – Human-readable overview containing the full gallery of 25 recipes with preview images
• 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, linear.md)
• skills/web-design-engineer/SKILL.md – Core skill definition containing system prompts and workflow logic
• 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 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) 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. 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 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.

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