What Is a Design Read in the Web-Design-Engineer Skill?

A Design Read is a structured, five-element specification that translates ambiguous natural-language briefs into concrete design decisions within the ConardLi/garden-skills web-design-engineer skill.

The web-design-engineer skill enforces a deterministic workflow that bridges the gap between loose creative direction and executable design systems. At its core, the Design Read serves as the single source of truth during the Design Calibration stage, ensuring that every downstream choice—from OKLCH color tokens to motion choreography—aligns with validated project constraints.

The Five Required Elements of a Design Read

According to /skills/web-design-engineer/references/design-calibration.md, every Design Read must contain five specific dimensions that capture different project vectors:

• Artifact – The output type, such as a landing page, dashboard, prototype, or slide deck.
• Audience – The specific viewers or decision-makers who will interact with the artifact.
• Visual language – The style family (e.g., restrained builder SaaS, kinetic editorial, warm humanist, institutional data-first).
• Mode – The redesign approach: greenfield, extension, redesign-preserve, or redesign-overhaul.
• Constraints – Technical and creative limits including brand guidelines, accessibility rules (WCAG AA), platform limits, viewports, content scope, deadlines, and supplied assets.

If the initial brief admits multiple plausible interpretations, the skill pauses to prompt a focused clarification question rather than guessing.

The Design Read Workflow

The workflow defined in /skills/web-design-engineer/README.md treats the read as a contract between the user and the build system.

Triggering the Design Direction Advisor

When a request is vague, the skill consults /skills/web-design-engineer/references/design-directions.md to expand the brief into a concrete read. This advisor forces specificity before the system commits to dial calibration.

Calibrating the Five Dials

Once recorded, the Design Read feeds into the Five Dials to generate numeric scores that drive the entire build:

1. Variance – Visual diversity and layout experimentation.
2. Motion intensity – Animation complexity and timing.
3. Information density – Data-to-space ratio.
4. Asset dependence – Reliance on external imagery versus generated components.
5. Brand fidelity – Strictness of adherence to existing brand systems.

These dial settings are the "control values" that the skill uses to select components from the 25 anchored style recipes in /skills/web-design-engineer/references/style-recipes/INDEX.md.

Converting Reads to Build Artifacts

The calibrated dials produce three concrete outputs:

1. Design System Declaration – A design-system.md file specifying colors (in OKLCH), fonts, spacing, and motion tokens derived from the read.
2. v0 Draft – An early mock-up reflecting the read’s constraints for user validation before full production.
3. Full Build – Component selection, motion choreography, and asset sourcing that respect the read-derived dial settings.

Implementation Example

Here is how the skill transforms a brief into dial settings using the calibration logic:

// Calibration logic from the skill source
function calibrate(read) {
  // Map visualLanguage and constraints to dial values
  const dials = {
    variance: read.visualLanguage === 'warm humanist' ? 7 : 5,
    motion: read.audience.includes('clinician') ? 4 : 6,
    density: 5,           // Balanced for data presentation
    assets: 6,            // High-fidelity imagery required
    fidelity: read.mode === 'greenfield' ? 5 : 9
  };
  return dials;
}

const designRead = {
  artifact: "landing page",
  audience: "clinicians and health-tech decision makers",
  visualLanguage: "warm humanist",
  mode: "greenfield",
  constraints: "brand colors #00695c & #ffca28, WCAG AA compliance, mobile-first"
};

const dialSettings = calibrate(designRead);

The resulting dials populate the design system specification:

# Generated design-system.md

colors:
  primary: oklch(0.55 0.1 150)
  accent: oklch(0.78 0.13 90)
fonts:
  heading: "Space Grotesk"
  body: "Inter"
motion:
  duration: "0.4s"
  easing: "cubic-bezier(0.4, 0, 0.2, 1)"

Source Code References

• /skills/web-design-engineer/references/design-calibration.md – Defines the Design Read schema and the Five Dials mapping logic.
• /skills/web-design-engineer/SKILL.md – The main orchestration file that triggers read validation and the read-to-dial process.
• /skills/web-design-engineer/references/design-directions.md – Contains the Design Direction Advisor rules for handling ambiguous briefs.
• /skills/web-design-engineer/references/style-recipes/INDEX.md – Library of 25 anchored style recipes selectable by calibrated reads.

Summary

• A Design Read is a mandatory five-element specification (Artifact, Audience, Visual language, Mode, Constraints) that eliminates ambiguity in design briefs.
• The web-design-engineer skill uses reads from design-calibration.md to drive the Five Dials (variance, motion, density, assets, fidelity).
• Dial scores generate concrete outputs: a design-system.md declaration, a v0 draft for validation, and specifications for the final build.
• The skill automatically invokes the Design Direction Advisor when briefs require clarification before committing to a read.

Frequently Asked Questions

What happens if a design brief is ambiguous?

If the brief supports multiple valid interpretations, the skill pauses execution and prompts a focused clarification question rather than guessing. This process is governed by the Design Direction Advisor defined in design-directions.md, ensuring the final Design Read reflects user intent accurately.

How does the Design Read affect the final color palette?

The Visual language and Constraints elements directly inform the variance and brand fidelity dials. These numeric scores determine whether the system selects conservative color tokens or experimental OKLCH values, as specified in the generated design-system.md file.

Can the Design Read be updated after calibration?

The workflow treats the read as the single source of truth. While the source files do not explicitly prohibit updates, changing the read after generating dial settings requires recalibrating the Five Dials and regenerating downstream artifacts like the v0 draft and design system declaration.

Where is the Design Read validated in the codebase?

Validation logic and the required five-element schema are defined in /skills/web-design-engineer/references/design-calibration.md. The main skill entry point at /skills/web-design-engineer/SKILL.md orchestrates when and how this validation triggers during the agent's execution loop.

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