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

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, 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.

Anatomy of a Style Recipe File

Each recipe file (e.g., apple-hig.md, 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 file implements Apple's Human Interface Guidelines:

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

**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 and 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 – High-level skill description and system architecture
• 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 – Auto-generated catalogue of all available recipes
• 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 and human-readable guides in 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.

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, 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, and system metadata resides in 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.

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