Design craft

DevFlow’s design skills already enforce correctness: brand tokens, dark mode, contrast, semantic markup, performance budgets. Correctness does not buy taste. A page can pass every one of those checks and still look like it was generated, because the model reached for a default instead of making a decision.

design-craft.md is the shared reference that closes that gap. It ships in the DevFlow runtime, so every design skill loads the same judgement:

~/.claude/devflow/references/design-craft.md

Which skills use it

These live in the companion plugins shipped from the same marketplace. The reference lives in the devflow plugin runtime because that is the one every install has, and because @~/.claude/devflow/references/... resolves at runtime where a repo-relative path does not.

The four moves

1. State a design read

Before any markup, one line naming the surface kind, the audience, the visual language and the foundation:

Reading this as: a pricing page for procurement-minded B2B buyers, restrained editorial language, on the project’s existing brand tokens with low motion.

The read forces decisions that otherwise get made by accident — most importantly that the audience picks the register, not the agent’s preference. If the read is genuinely ambiguous, the skill asks exactly one question. Not a questionnaire; a questionnaire is a way of avoiding the decision.

2. Set three dials

Derived from the surface kind, then bounded by two DevFlow-specific rules:

• The brand outranks the dials. A deliberately restrained brand caps EXPRESSION even on a landing page. brand-builder now records a design posture — including an explicit “deliberately not” line — so the boundary is settled once per brand rather than re-derived per page.
• Work type caps the budget. An objective whose work is prototype or spike holds EXPRESSION and MOTION at or below 4 and spends the effort on whether the thing functions. See the intent model.

Dial values get recorded in the job’s SUMMARY.md, so a reviewer can tell whether restraint was a decision or an omission.

3. Sweep the tells

A catalogue of what generated interfaces look like, organised as a review checklist: structure, typography, colour, motion, decoration, placeholder content, and interface copy.

Most of these were good ideas before they became defaults. They are tells because a model reaches for them when it has not made a decision — so their presence is evidence, not a crime. Representative entries:

• Three equal feature cards in a row; every section the same centred shape
• Section-number eyebrows (001 · Features), decorative status dots, scroll cues
• Pure #000, full-saturation accents, gradient display text
• div-built fake product screenshots in a hero
• Placeholder tells: “John Doe”, “Acme”, 99.99%, repeated generic avatars
• Copy tells: “elevate”, “seamless”, “Step 1 / Step 2”, version stamps on marketing pages, em-dashes in interface strings

4. Clear the floors, then pre-flight

Floors are not dials and do not move for aesthetics: AA contrast in both themes, visible focus, 44×44 targets, a real prefers-reduced-motion path, semantic landmarks, deliberate alt text, no horizontal scroll at 320px.

The pre-flight check is a gate, not a checklist to note. A failure means fix and re-check. Three of its items need actual rendering — both themes, the 320/768/1280 breakpoints, and evidence capture — because reasoning about markup is not checking.

For Flutter, /devflow:ui-eval is the stronger evidence path: it scores every declared state offline and writes output the verifier consumes, which catches the usual gap of a widget test that exercises the happy path and ignores loading, empty and error.

Attribution

The framing here — leading with a design read, tuning explicit dials, and treating a catalogue of tells as a pre-flight gate — is inspired by taste-skill by Leonxlnx, released under the MIT License.

No code, prose or files from that project are copied or bundled into DevFlow. design-craft.md was written for DevFlow and adapted to the brand-per-project model, the (kind, work) intent model and the eden-ui component libraries; its thresholds and recommendations are our own and differ from taste-skill’s in places.

taste-skill is worth reading directly for a much larger pattern catalogue and a set of style-variant skills. Full attribution and the upstream license text live in NOTICE.md.