How the Five-Dial Design Read System Works in Web Design Engineer

The Five-Dial Design Read system transforms vague design briefs into concrete specifications by synthesizing requirements into a one-paragraph Design Read and quantifying visual decisions across five 1-10 scales: Visual Variance, Motion Intensity, Information Density, Asset Dependence, and Brand Fidelity.

The Web Design Engineer skill in the ConardLi/garden-skills repository converts natural language briefs into calibrated design outputs through a two-step methodology documented 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). Understanding how the Five Dials interact with the Design Read allows teams to eliminate ambiguity and trace every design decision to observable consequences.

Creating the Design Read

Before adjusting quantitative parameters, the system requires a qualitative synthesis called a Design Read. According to design-calibration.md (lines 14-23), this one-paragraph summary captures five essential elements:

• Artifact – The output type, such as landing page, dashboard, or prototype.
• Audience – The specific users who must understand, trust, or act on the interface.
• Visual Language – The stylistic family (e.g., "restrained builder SaaS" or "kinetic editorial") avoiding vague descriptors like "modern".
• Mode – The project context: greenfield, extension, redesign-preserve, or redesign-overhaul.
• Constraints – Hard limits including brand guidelines, accessibility requirements, platform restrictions, viewports, content limits, deadlines, and supplied assets.

If a brief could generate two materially different reads, the system mandates asking clarifying questions before proceeding. Once the read is established, it serves as the foundation for dial calibration.

The Five Dials: Quantitative Design Control

The core mechanism maps the Design Read to five integer scales (1-10) defined in design-calibration.md (lines 30-87). Each dial controls a specific dimension of visual output.

Visual Variance

Controls layout deviation from familiar patterns.

• 1-3: Stable, conventional grids.
• 4-6: Controlled novelty within expected frameworks.
• 7-8: Strong art direction with deliberate asymmetry.
• 9-10: Experimental compositions reserved for brands that explicitly permit radical deviation.

Motion Intensity

Governs the amount and complexity of motion used to convey meaning.

• 1-2: Static layouts with no animation.
• 3-4: Micro-interactions limited to hover and focus states.
• 5-7: Sequenced reveals and choreographed entrances.
• 8-10: Cinematic transitions and continuous ambient motion.

Information Density

Determines the quantity of information presented per viewport.

• 1-3: Gallery-style layouts with generous whitespace.
• 4-6: Balanced marketing or product density.
• 7-8: Analytical or comparative interfaces.
• 9-10: Cockpit-like dashboards maximizing data visibility.

Asset Dependence

Quantifies reliance on real images, screenshots, illustrations, or brand assets.

• 1-3: Typography and data-driven visuals; minimal imagery.
• 4-6: Selective use of key visuals.
• 7-10: High-fidelity assets required for core functionality.

Brand Fidelity

Specifies how strictly existing brand identity must be preserved.

• 1-3: Exploratory identity phases with loose constraints.
• 4-6: Adaptable brand cues allowing interpretation.
• 7-8: Core assets preserved with minimal deviation.
• 9-10: Extension-level fidelity requiring strict adherence to existing systems.

Calibration Presets and Conflict Resolution

Using Presets

To accelerate workflow, design-calibration.md (lines 88-102) defines presets—quick-start value combinations for common briefs. For example, a "Mainstream SaaS landing" preset might initialize Variance at 6, Motion at 5, Density at 4, Assets at 6, and Fidelity at 5. These presets serve as suggestions rather than mandates; teams should adjust values to fit specific context.

Resolving Dial Conflicts

When dial values create tension (e.g., high variance combined with high density), the system applies heuristics defined in lines 104-111:

• High variance + high density: Maintain stable navigation while concentrating experimental layouts in a single content layer.
• High motion + high density: Animate only key interactions rather than every element to prevent cognitive overload.
• High assets + low fidelity: Create a visual bible (palette, typography, radius) before sourcing assets to maintain coherence.
• High assets + high fidelity: Source official brand assets first; AI generation can augment but never replace canonical materials.
• High fidelity + overhaul mode: Explicitly list which brand invariants survive the redesign process.

Accessibility constraints always override aesthetic scores, regardless of dial values.

The Image-First Branch

For projects with high visual uncertainty—such as brand launches or art-directed portfolios—design-calibration.md (lines 113-123) provides an optional image-first workflow. Teams use this branch only when visual exploration materially reduces delivery risk; it should be skipped for extensions, dashboards, forms, or when supplied assets already exist.

The branch requires three steps:

1. Defining a visual bible (palette, typography, radius, image treatment).
2. Generating only critical reference images.
3. Extracting implementation decisions from those approved images.

The workflow completes when each dial can be traced to concrete design consequences (line 136).

TypeScript Implementation

Below is a minimal TypeScript representation of how a tool might capture a Design Read and compute the five dials. This mirrors the logical flow in design-calibration.md and integrates with the skill's prompt generation pipeline.

/** Simple data model for a Design Read */
interface DesignRead {
  artifact: string;          // e.g. "landing page"
  audience: string;          // e.g. "startup founders"
  visualLanguage: string;    // e.g. "restrained builder SaaS"
  mode: 'greenfield' | 'extension' | 'redesign-preserve' | 'redesign-overhaul';
  constraints: string[];     // e.g. ["brand", "accessibility", "mobile"]
}

/** Five-Dial scores (1-10) */
interface DesignDials {
  variance: number;          // Visual Variance
  motion: number;            // Motion Intensity
  density: number;           // Information Density
  assets: number;            // Asset Dependence
  fidelity: number;          // Brand Fidelity
}

/** Example: turning a brief into a read + dials */
function calibrateBrief(brief: string): { read: DesignRead; dials: DesignDials } {
  // 1️⃣ Parse brief – in practice this is done by the LLM, here we hard-code.
  const read: DesignRead = {
    artifact: 'landing page',
    audience: 'prospective investors',
    visualLanguage: 'kinetic editorial',
    mode: 'greenfield',
    constraints: ['brand', 'accessibility', 'mobile'],
  };

  // 2️⃣ Choose a preset (see design-calibration.md table) and tweak if needed.
  const preset: DesignDials = { 
    variance: 8, 
    motion: 7, 
    density: 3, 
    assets: 8, 
    fidelity: 4 
  };

  // 3️⃣ Resolve any conflicts using the rules in section 4.
  //    (e.g., high variance + high density → lower density)
  const dials = { ...preset, density: Math.min(preset.density, 5) };

  return { read, dials };
}

/* --------------------------------------------------------------
   Example usage:
-------------------------------------------------------------- */
const brief = `Create a green-field landing page for a new AI-driven startup,
targeting investors, with a bold visual style but must stay on-brand.`;
const { read, dials } = calibrateBrief(brief);
console.log('Design Read →', read);
console.log('Five Dials →', dials);

The calibrateBrief function illustrates the logical steps: create a read, select a preset, then apply conflict-resolution rules before generating final output.

Summary

• The Five-Dial Design Read system converts ambiguous briefs into quantitative specifications through design-calibration.md.
• A Design Read synthesizes the brief into five elements: Artifact, Audience, Visual Language, Mode, and Constraints.
• Five Dials (Variance, Motion, Density, Assets, Fidelity) rated 1-10 control specific visual dimensions.
• Presets offer quick-start configurations for common project types (lines 88-102).
• Conflict resolution heuristics resolve tensions between competing dial values, with accessibility constraints always taking precedence (lines 104-111).
• The optional image-first branch manages high-uncertainty visual exploration through reference images rather than text (lines 113-123).

Frequently Asked Questions

What is a Design Read in the five-dial system?

A Design Read is a one-paragraph summary that captures the essential design parameters of a brief. According to design-calibration.md (lines 14-23), it must specify the artifact type, target audience, visual language, project mode, and constraints before any quantitative calibration occurs.

How do the Five Dials control visual output?

The Five Dials map qualitative requirements to integer scales. Visual Variance (1-10) controls layout experimentation, Motion Intensity governs animation complexity, Information Density manages viewport content load, Asset Dependence quantifies image requirements, and Brand Fidelity constraints identity adherence. Each dial directly impacts implementation choices in the generated design.

What happens when dial values conflict?

When values create tension—such as high variance paired with high density—the system applies specific heuristics from lines 104-111 of design-calibration.md. For example, high variance with high density requires keeping navigation stable while isolating experimentation to content layers. Accessibility requirements always override aesthetic dial settings.

When should I use the image-first branch?

Use the image-first branch only when visual uncertainty materially increases project risk, such as during brand launches or art-directed portfolio work. Skip this branch for extensions, dashboards, forms, or when supplied assets already exist, as specified in lines 113-123 of the calibration reference.

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