teamai-test/.teamai/skills/common/web-design-engineer/references/design-calibration.md

# Design Calibration

Use this reference after gathering context and before declaring the design system. Its purpose is to turn a brief into visible decisions, not to decorate the response with scores.

## Contents

1. Design Read
2. Five Dials
3. Presets
4. Resolve Conflicts
5. Optional Image-First Branch
6. Completion Test

## 1. Design Read

Write a compact read containing:

- **Artifact**: landing page, dashboard, prototype, slide deck, visualization, campaign page, and so on.
- **Audience**: who must understand, trust, or act.
- **Visual language**: a specific family such as restrained builder SaaS, kinetic editorial, warm humanist, or institutional data-first. Avoid empty labels such as “modern” or “clean.”
- **Mode**: greenfield, extension, redesign-preserve, or redesign-overhaul.
- **Constraints**: brand, accessibility, platform, viewport, content, deadline, and supplied assets.

If two plausible readings would produce materially different work, ask one focused question. Otherwise state the read and proceed.

## 2. Five Dials

Use whole numbers from 1 to 10.

### Visual Variance

Controls compositional departure from familiar patterns.

| Band | Behavior |
|---|---|
| 1–3 | Stable grids, symmetry, familiar navigation, low surprise |
| 4–6 | One or two asymmetric moves, varied section rhythm, controlled novelty |
| 7–8 | Strong art direction, off-grid moments, multiple layout families |
| 9–10 | Experimental composition; use only when comprehension and brand permit |

### Motion Intensity

Controls how much meaning is carried through time.

| Band | Behavior |
|---|---|
| 1–2 | Static; state feedback only |
| 3–4 | Hover, focus, short entry transitions |
| 5–7 | Sequenced reveals, state choreography, restrained scroll response |
| 8–10 | Cinematic transitions, pinning, scrubbing, spatial storytelling |

Every animation must communicate hierarchy, feedback, causality, or narrative. Honor reduced motion whenever motion exceeds simple state feedback.

### Information Density

Controls useful information per viewport, not visual clutter.

| Band | Behavior |
|---|---|
| 1–3 | Gallery-like, one dominant idea, generous pauses |
| 4–6 | Balanced marketing/product density |
| 7–8 | Analytical, operational, comparison-heavy |
| 9–10 | Cockpit-like; requires strong grouping, scanning, and progressive disclosure |

### Asset Dependence

Controls how much the result relies on real imagery, screenshots, illustration, identity assets, or generated visual references.

| Band | Behavior |
|---|---|
| 1–3 | Typography, data, or interface structure can carry the artifact |
| 4–6 | A few key visuals materially improve recognition or explanation |
| 7–10 | The product, brand, campaign, or story fails without high-fidelity assets |

At 7+, inventory assets before layout. Do not hide missing assets with decorative CSS.

### Brand Fidelity

Controls how strictly existing identity and interaction language must be preserved.

| Band | Behavior |
|---|---|
| 1–3 | New or intentionally exploratory identity |
| 4–6 | Adapt recognizable cues while allowing meaningful evolution |
| 7–8 | Preserve core assets, tokens, voice, and signature patterns |
| 9–10 | Extension-level fidelity; new work should appear native to the existing system |

## 3. Presets

Treat these as starting points, not mandatory values.

| Brief | Variance | Motion | Density | Assets | Fidelity |
|---|---:|---:|---:|---:|---:|
| Mainstream SaaS landing | 6 | 5 | 4 | 6 | 5 |
| Creative studio / campaign | 8 | 7 | 3 | 8 | 4 |
| Developer tool landing | 6 | 5 | 5 | 6 | 6 |
| Data dashboard | 4 | 3 | 8 | 3 | 7 |
| Public-sector service | 3 | 2 | 6 | 3 | 9 |
| Editorial presentation | 7 | 5 | 4 | 7 | 5 |
| Existing-product extension | match | match | match | match | 10 |
| Redesign · Preserve | current + 1 max | current + 1 max | match | match | 9 |
| Redesign · Overhaul | 6–8 | 4–7 | match content | 6–9 | 5–7 |

## 4. Resolve Conflicts

- **High variance + high density**: preserve a stable navigation and grid spine; concentrate experimentation in one layer.
- **High motion + high density**: animate transitions or focus, not every element.
- **High assets + low fidelity**: establish a new visual bible before generating or sourcing a set.
- **High assets + high fidelity**: source official assets first; generation may extend the world but must not replace identity-critical material.
- **High fidelity + overhaul request**: explicitly identify which brand invariants survive before changing the visual language.
- **Accessibility constraints** override aesthetic scores. Reduce motion, clarify hierarchy, and preserve contrast without asking permission.

## 5. Optional Image-First Branch

Use image-first exploration only when it materially improves a visually important greenfield or overhaul task, such as a campaign landing page, brand launch, product hero, or highly art-directed portfolio.

Skip it when:

- the user supplied Figma, screenshots, or a mature design system;
- the task is an extension, repair, dashboard, form, or data table;
- the main uncertainty is behavior rather than visual direction;
- image generation would add cost without reducing design risk.

When used:

1. Define a visual bible: palette, typography character, radius, material, image treatment, and forbidden drift.
2. Generate only the critical references needed to resolve uncertainty; one image per section is not a requirement.
3. Prefer fresh, readable section references over cropping tiny details from a compressed full-page board.
4. Extract implementation decisions from the references.
5. Treat code and supplied brand assets as higher-authority sources when they conflict with generated pixels.

Use `gpt-image-2` when available for structured generation; otherwise follow the host's image workflow or leave honest asset requirements.

## 6. Completion Test

The calibration is successful only if someone can point from each dial to concrete consequences in the artifact. If changing a score would not change the plan, remove the score or make the mapping explicit.