# Design Calibration System and Style Recipes in Web-Design-Engineer: A Complete Technical Guide

> Master the design calibration system and style recipes in web-design-engineer. Transform briefs into auditable UI specs with this technical guide.

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: deep-dive
- Published: 2026-08-31

---

**The web-design-engineer skill in the ConardLi/garden-skills repository uses a quantitative six-step design calibration system and 25 modular style recipes to transform abstract design briefs into concrete, auditable UI specifications.**

The ConardLi/garden-skills project provides a systematic framework for LLM-driven interface design through its web-design-engineer skill. By combining the **design calibration system** with pre-built **style recipes**, engineers can convert vague requirements into traceable design decisions backed by specific quantitative parameters. This article examines both mechanisms using the actual source files from the repository.

## The Design Calibration System

The design calibration system, defined in [`skills/web-design-engineer/references/design-calibration.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/design-calibration.md), provides a rigorous workflow for analyzing design briefs before writing any code. It converts qualitative requirements into quantitative "dial" values that govern every subsequent visual decision.

### Six Core Components

The calibration process follows a strict six-part sequence:

1. **Design Read** – Summarize the artifact type, target audience, visual language, development mode, and constraints
2. **Five Dials** – Assign integer values (1-10) across five quantitative dimensions
3. **Presets** – Apply common default combinations (e.g., "Mainstream SaaS landing")
4. **Resolve Conflicts** – Handle contradictory high scores (e.g., high variance + high density)
5. **Optional Image-First Branch** – Trigger visual reference generation when imagery materially reduces design risk
6. **Completion Test** – Verify every dial maps to a concrete, observable design consequence

### The Five Dials Explained

Each dial quantifies a specific design ambition on a scale of 1 to 10:

- **Visual Variance**: Permissible deviation from familiar layout patterns (1 = conservative, 10 = experimental)
- **Motion Intensity**: Amount of meaningful animation required (1 = static, 10 = cinematic)
- **Information Density**: Content volume per viewport (1 = generous whitespace, 10 = data-dense)
- **Asset Dependence**: Reliance on real images versus generated or vector graphics (1 = typography-only, 10 = photography-critical)
- **Brand Fidelity**: Strictness of adherence to existing brand systems (1 = generic, 10 = locked to guidelines)

For example, a "Mainstream SaaS landing" preset typically sets Visual Variance to 6, Motion Intensity to 4, and Brand Fidelity to 7.

## Understanding Style Recipes

Style recipes reside in `skills/web-design-engineer/references/style-recipes/` and provide complete visual vocabularies that align with specific dial configurations. The repository contains **25** distinct recipes, catalogued in [`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).

### Anatomy of a Style Recipe File

Each recipe file (e.g., [`apple-hig.md`](https://github.com/ConardLi/garden-skills/blob/main/apple-hig.md), [`mid-century-modern.md`](https://github.com/ConardLi/garden-skills/blob/main/mid-century-modern.md)) contains standardized sections that define a cohesive aesthetic:

| Section | Purpose |
|---------|---------|
| **Palette** | Primary, secondary, background, and accent colors (hex values) |
| **Typography** | Font families, weights, sizes, and line-heights |
| **Spacing** | Scale system (4/8/16/24/40/64/96/160px) and section break sizes |
| **Radius** | Corner rounding values for components (e.g., 12/18/22px) |
| **Shadow** | Elevation definitions for depth and layering |
| **Motion** | Easing curves, transition durations (350-650ms), and interaction patterns |
| **Signature moves** | Unique layout patterns specific to the aesthetic |
| **Avoid** | Anti-patterns that break the visual language |
| **AI prompt seed** | One-sentence prompt for generating hero assets |
| **Don't use when** | Conflict warnings for brand or audience mismatches |

### Example: Apple HIG Recipe

The [`skills/web-design-engineer/references/style-recipes/apple-hig.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/style-recipes/apple-hig.md) file implements Apple's Human Interface Guidelines:

```markdown

# apple-hig — Apple Human Interface

- School: Editorial / Minimalist
- Vibe: Generous space, hero product on white, one thought per screen
- Palette: #FFFFFF, #1D1D1F, #F5F5F7, #86868B, #0071E3
- Typography: SF Pro Display (600/400), SF Pro Text 17px
- Spacing: 4/8/16/24/40/64/96/160
- Radius: 12 / 18 / 22
- Motion: cubic-bezier expo-out, 350-650ms layout moves
- Signature moves: centered product photo, big headline, muted body, blue CTA link
- Avoid: gradients, multiple hero CTAs, emoji, card grids
- AI prompt seed: "Studio-lit product photograph, single object centered on pure-white #FFFFFF..."

```

## Practical Implementation Workflow

Combining calibration with recipes creates a traceable pipeline from brief to artifact. Below is a complete example prompt that an engineer would feed to the LLM agent:

```markdown
**Design Read**  
- Artifact: SaaS landing page  
- Audience: Product-decision makers in B2B tech  
- Visual language: restrained builder SaaS  
- Mode: greenfield  
- Constraints: brand colors #0052CC / #00A3E0, WCAG AA contrast, mobile-first, 2-week deadline  

**Dial settings** (use preset "Mainstream SaaS landing" → adjust as needed)  
- Visual Variance: 6  
- Motion Intensity: 4  
- Information Density: 5  
- Asset Dependence: 4 (use icons + few screenshots)  
- Brand Fidelity: 7 (preserve existing brand tokens)

**Style recipe**: `mid-century-modern` (found in `style-recipes/mid-century-modern.md`)

**Optional image-first**: No (assets already exist, focus on behavior)

**Completion test**:  
- Visual variance influences the asymmetric hero layout.  
- Motion intensity maps to hover-only micro-interactions.  
- Information density determines the three-column feature grid.

```

The LLM processes these constraints against [`skills/web-design-engineer/SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/SKILL.md) and [`manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/manifest.json) to emit a design plan, component hierarchy, and CSS/TSX skeleton.

## Key Repository Files

Understanding the file structure helps navigate the implementation:

- **[`skills/web-design-engineer/SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/SKILL.md)** – High-level skill description and system architecture
- **[`skills/web-design-engineer/references/design-calibration.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/design-calibration.md)** – Complete calibration specification and dial definitions
- **`skills/web-design-engineer/references/style-recipes/`** – Directory containing 25 recipe markdown files
- **[`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)** – Auto-generated catalogue of all available recipes
- **[`skills/web-design-engineer/manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/manifest.json)** – Machine-readable metadata including agent configurations and preset IDs

## Summary

- The **design calibration system** quantifies design briefs into five integer dials (Visual Variance, Motion Intensity, Information Density, Asset Dependence, Brand Fidelity) with a mandatory completion test ensuring every decision is traceable to a concrete consequence.
- **Style recipes** in `references/style-recipes/` provide complete visual languages including palette, typography, spacing, and signature moves, with 25 pre-built options available.
- The workflow requires mapping calibrated dial values to compatible recipes, then validating that every dial score produces a specific UI outcome.
- All specifications are stored in the ConardLi/garden-skills repository, with machine-readable metadata in [`manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/manifest.json) and human-readable guides in [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md).

## Frequently Asked Questions

### What are the five dials in the web-design-engineer calibration system?

The five dials are **Visual Variance**, **Motion Intensity**, **Information Density**, **Asset Dependence**, and **Brand Fidelity**. Each accepts an integer value from 1 to 10, quantifying how much the design may deviate from standard patterns, how much animation to include, how dense the content should be, how heavily to rely on real imagery, and how strictly to follow existing brand guidelines.

### How do style recipes handle brand conflicts?

Each style recipe includes a **"Don't use when"** section that explicitly lists situations where the recipe would clash with brand requirements or audience expectations. For example, the Apple HIG recipe warns against using it when the brand requires heavy use of gradients or emoji, which violate Apple's minimalist principles defined in [`references/style-recipes/apple-hig.md`](https://github.com/ConardLi/garden-skills/blob/main/references/style-recipes/apple-hig.md).

### Where are the calibration rules and style recipes stored in the repository?

The calibration specification lives in [`skills/web-design-engineer/references/design-calibration.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/design-calibration.md), while individual style recipes are stored as separate markdown files under `skills/web-design-engineer/references/style-recipes/`. The complete list of 25 recipes is indexed in [`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), and system metadata resides in [`skills/web-design-engineer/manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/manifest.json).

### What is the completion test in design calibration?

The **completion test** is the final step of the calibration workflow that validates the entire process. It requires explicitly mapping every dial setting to a concrete design consequence—for example, stating that a Visual Variance score of 6 results in an asymmetric hero layout, or that Motion Intensity of 4 limits animations to hover-only micro-interactions. Without this mapping, the calibration is considered incomplete according to the rules in [`design-calibration.md`](https://github.com/ConardLi/garden-skills/blob/main/design-calibration.md).