What Are the Five Dials of the Design Read System in web-design-engineer?

The Design Read system in ConardLi/garden-skills uses five calibrated dials—Variance, Motion, Density, Asset Dependence, and Brand Fidelity—to translate abstract design briefs into concrete, executable specifications.

The web-design-engineer skill in the ConardLi/garden-skills repository introduces a structured methodology called the Design Read to bridge high-level creative direction and low-level implementation. This system compresses complex design requirements into five tunable parameters that drive consistent decision-making throughout the UI development workflow.

What Is the Design Read System?

According to skills/web-design-engineer/README.md, a Design Read is a concise synthesis of a design brief expressed through five discrete "dials." Each dial maps an abstract aspect of the creative direction to a concrete, visible decision that shapes the final output. The specification is detailed in skills/web-design-engineer/references/design-calibration.md, which defines valid ranges and interaction rules for each parameter.

The Five Dials Explained

Variance

Variance controls visual composition and layout complexity. This dial determines structural variation—such as grid density, hierarchy depth, and layout patterns—to ensure the design matches audience expectations and content strategy. High variance might indicate complex, asymmetrical layouts, while low variance favors rigid, predictable structures.

Motion

Motion governs animations, transitions, and interactive feedback. It converts brand tone and user flow requirements into specific motion cues, including timing functions (e.g., ease-in-out), easing curves, and micro-interaction patterns. The duration_ms and transition keys in the configuration object define these characteristics.

Density

Density manages information density and spatial relationships. This dial maps content richness to UI spacing decisions, controlling whitespace ratios (spacing: wide vs. compact), element clustering, and cognitive load through padding strategies. It directly influences how crowded or airy the interface feels.

Asset Dependence

Asset Dependence specifies the required graphic and media assets. This dial transforms brief requirements into concrete decisions about photography styles, illustration types, icon sets (line-simple, filled, etc.), and other visual media dependencies needed for execution. It answers what visual resources must be sourced or generated.

Brand Fidelity

Brand Fidelity ensures adherence to brand guidelines. This dial guarantees that color palettes (palette: green-primary), typography systems (typeface: sans-serif), logo usage, and overall brand voice remain consistent with established identity standards. It operates as a compliance check against the brand's design system.

Implementation and Code Structure

The five dials are implemented as structured data objects consumed by the skill pipeline. In skills/web-design-engineer/references/design-calibration.md, each dial is defined with specific JSON schemas that the engine validates at runtime.

Python Configuration Example

design_read = {
    "summary": "A modern, eco-friendly brand site for Gen-Z shoppers.",
    "dials": {
        "variance":   {"layout": "grid-3-col", "theme": "minimal"},
        "motion":     {"transition": "fade-up", "duration_ms": 250},
        "density":    {"spacing": "wide", "content_blocks": 5},
        "asset":      {"images": "stock-eco", "icons": "line-simple"},
        "brand_fidelity": {"palette": "green-primary", "typeface": "sans-serif"}
    }
}

JSON Payload for Skill Invocation

When calling the skill via its API, the dials are passed as a nested JSON object:

{
  "skill": "web-design-engineer",
  "action": "produce_design",
  "input": {
    "brief": "Create a landing page for a sustainable fashion brand targeting young adults.",
    "design_read": {
      "summary": "Eco-friendly Gen-Z fashion landing page",
      "dials": {
        "variance":   {"layout": "asymmetric-grid"},
        "motion":     {"transition": "slide-in", "duration_ms": 300},
        "density":    {"spacing": "balanced"},
        "asset":      {"images": "custom-photography", "icons": "outline"},
        "brand_fidelity": {"strictness": "high", "palette": "earth-tones"}
      }
    }
  }
}

The skill pipeline parses these values in SKILL.md to generate corresponding CSS, animation keyframes, and asset manifests.

Source File Reference

The five-dial architecture is documented across the following files in the repository:

• skills/web-design-engineer/README.md – Overview of the Design Read concept and five-dial methodology.
• skills/web-design-engineer/references/design-calibration.md – Detailed specifications for dial calibration ranges and valid values.
• skills/web-design-engineer/SKILL.md – Complete skill definition, including JSON schemas for the dials input.
• skills/web-design-engineer/README.zh-CN.md – Chinese localization mirroring the five-dial explanation (labeled "五旋钮 Design Read").

Summary

• The Design Read system compresses design briefs into five actionable parameters that drive consistent execution.
• Variance controls layout composition, grid complexity, and structural hierarchy.
• Motion defines animation timing, easing functions, and transition behaviors.
• Density regulates whitespace, element clustering, and information architecture spacing.
• Asset Dependence specifies required media types, illustration styles, and iconography.
• Brand Fidelity enforces compliance with color palettes, typography, and brand guidelines.
• Configuration examples are stored in design-calibration.md and processed according to the schema defined in SKILL.md.

Frequently Asked Questions

What is the Design Read system in web-design-engineer?

The Design Read system is a synthesis framework defined in skills/web-design-engineer/README.md that translates abstract creative briefs into five concrete dials. It provides a standardized vocabulary for converting high-level design direction into executable specifications that the skill processes into CSS, layouts, and asset lists.

How do the five dials interact during execution?

Each dial operates independently but collectively determines the final output. For example, high Density settings may constrain Variance options to prevent visual clutter, while Brand Fidelity settings can override Asset Dependence choices when strict brand compliance requires specific image types. The interaction rules are defined in design-calibration.md.

Where are the five dials defined in the source code?

The canonical definitions reside in skills/web-design-engineer/references/design-calibration.md, with architectural overviews in README.md and input schemas in SKILL.md. These files specify valid values, defaults, and calibration ranges for Variance, Motion, Density, Asset Dependence, and Brand Fidelity.

Can the dials be customized for specific projects?

While the five dials represent the core framework, the JSON schema in SKILL.md allows nested configuration objects within each dial. Users can extend specific dials with custom key-value pairs (e.g., custom easing functions under Motion), provided they adhere to the structural schema expected by the web-design-engineer skill pipeline.

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