Skill Claude

Designer Frontend Contract

designer-frontend-contract/

2 views 0 downloads

Freeze an approved mockup into a reference, port it 1:1 on any stack, and verify every page, state and breakpoint with screenshot diffs before merge.

Designer Frontend Contract: Brain Lab skill for Claude Code

The tech-agnostic contract between designer and frontend dev, and the gate that mechanically enforces it.

Why use it

"Matches the design" asserted from a screenshot glance, while a whole page region is missing.
The build quietly re-styles the mockup, and the drift is only noticed after launch.
HTTP 200 and a green CI badge say nothing about whether the UI is actually right.

What it does

Designer side: freeze the approved mockup into a canonical oracle: manifest, baseline renders, a region/element inventory, token parity, a visual acceptance contract.
Frontend side: port the oracle 1:1 (transcribe, never redesign) and self-gate census → DOM → pixel before handoff.
Verifier side: independently screenshot every page × access state × pinned breakpoint against the frozen baseline; census FIRST, then pixel diff, then interaction hit-testing.
Report-only verification: findings route to the dev (drift) or the designer (a legitimate design change).

Benefits

Ship what was actually designed. Fidelity becomes an enforced gate, not an assumption.
Catch the missing region the pixel diff would have waved through.
No more launch-day drift: every page, state and breakpoint is checked before merge.
Any stack. Dev server, template language and tokens all come from your project config.

Install

Download this skill and copy the designer-frontend-contract folder to .claude/skills/designer-frontend-contract/ in your project, or to ~/.claude/skills/designer-frontend-contract/ to use it in every project. Claude Code finds it on its own; you can also call it with /designer-frontend-contract.

Part of the Web Dev Design Pipeline bundle. To get the whole set as a Claude Code plugin: /plugin marketplace add endorphin-ai/hasbrains-agent-kit, then /plugin install web-dev@hasbrains-agent-kit.

Source: endorphin-ai/hasbrains-agent-kit. License: MIT.

Files (18)

# Communication Style — designer-frontend-contract

## Tone

Evidence-first, contract-first. Every claim is backed by a committed artifact, a diff
image, or a measurement — the oracle value vs the built value — never "looks off" or
"looks fine." State the page, the access state, the breakpoint, the category, and the
number. Obligations are cited from the contract ("the acceptance contract pins <0.1% at
768"), not asserted from taste.

## Reporting Style

- Lead with the verdict: `DESIGN-DIFF: pass` / `DESIGN-DIFF: reject` (failing pages named)
  on the verifier path; census/DOM/pixel numbers per breakpoint on the consumer path; the
  handoff-path list on the producer path.
- Name the oracle explicitly and its baseline status (FROZEN / ESTABLISHED-THIS-RUN /
  REFRESHED) before any result — a diff is only as trustworthy as its baseline.
- Present the page × state × breakpoint matrix; a FAIL cell carries the diff % and the
  `.ai_log/` image path.
- Frame every finding as a ROUTED action: to the frontend dev (fix the build by porting
  the oracle) or to the designer (refresh the oracle / declare the missing input) — the
  verifier reports, it does not fix.

## Issue Flagging

- `[DESIGN-DIFF-CENSUS]` — a region/element the oracle has that the build lacks (or an
  extra/reordered region); whole region = Blocker.
- `[DESIGN-DIFF-LAYOUT]` / `[DESIGN-DIFF-SPACING]` / `[DESIGN-DIFF-COLOR]` /
  `[DESIGN-DIFF-TYPE]` / `[DESIGN-DIFF-TOKEN]` / `[DESIGN-DIFF-DOM]` — a fidelity drift
  over threshold, with oracle vs built values.
- `[DESIGN-DIFF-INTERACTION]` — a broken or obscured interaction found while capturing
  (overlay intercepts the click, menu won't open); Blocker.
- `[NO-ORACLE]` — no frozen baseline exists for a page; establish one before diffing —
  never silently pass.
- `[CONTRACT-GAP]` — a binding input is missing (no manifest entry, no inventory, no
  threshold, no pinned widths); ask the designer — never guess.

## Terminology

- Say **oracle** for the approved `docs/design/` artifacts; say **baseline** for the frozen
  render the pixel diff runs against.
- Say **drift**, not "difference," for a deviation from the oracle.
- Say **port**, not "build" or "implement," for the frontend's 1:1 transcription duty.
- Say **8pt grid** and **60/30/10** by name when reporting spacing/color balance.
- Say **report-only** — the verifier never edits application source.
- Say **DESIGN-DIFF: reject** for a gate fail (mirrors the pipeline's `GATE: reject`).
- Say **deviation** (ledger entry, raised to the designer) — never "improvement."