20acf3ae9b
Validated against the plugin-dev:skill-development checklist and applied conformance fixes: Description style — all five skill descriptions now use the canonical "This skill should be used when..." third-person form, with expanded trigger-phrase coverage. Previously used imperative "Use when..." which the spec calls out as wrong. Writing voice — body prose changed from "You are the dispatcher / You walk a user through..." to imperative "Act as the dispatcher / Walk the user through...". Remaining "you" usage is confined to quoted output text the agent prints to the user, which is correct usage. Progressive disclosure — composer/skills/ui-system/SKILL.md was 2513 words (over the 2000-word ideal). Refactored to 1063 words by moving detailed phase content into: - references/design-interview.md (D1–D11 phase specifications) - references/interaction-interview.md (I1–I11 phase specifications) - references/inspiration-presets.md (Linear/Notion/Stripe/etc. table) The SKILL.md now points at each reference as needed; agents load only what's relevant for the current phase. Other four skills already within the 1000–2000 word range, no refactor needed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
130 lines
4.5 KiB
Markdown
130 lines
4.5 KiB
Markdown
# Design system interview — full phase reference
|
||
|
||
Detailed phases for Part 1 of the ui-system interview. Read this when running
|
||
the design-system interview; it expands the phase summaries in SKILL.md.
|
||
|
||
Each phase: state what's being decided, show the default if there is one, ask
|
||
the question(s), confirm the answer back, move on. The user can reply
|
||
`default` (accept) or `skip` (mark `<TBD: ...>`) at any phase.
|
||
|
||
## D1 — Visual posture (one paragraph)
|
||
|
||
The north star sentence for visual decisions. Don't ask for paragraphs;
|
||
ask for adjectives and assemble.
|
||
|
||
```
|
||
Three or four words that describe how this should feel.
|
||
Examples: "quiet, dense, monochrome, one accent" / "playful,
|
||
generous, expressive type" / "clinical, neutral, accessibility-forward".
|
||
```
|
||
|
||
Compose into a single sentence; show; accept.
|
||
|
||
## D2 — Color
|
||
|
||
Batch as a single phase with sub-questions; tight loop.
|
||
|
||
**D2.1 Brand primary.** If material gave a color, propose it. Else:
|
||
```
|
||
Pick a brand primary. Either name a hex, name a color
|
||
("warm orange", "deep teal"), or name a reference ("Linear's purple",
|
||
"Stripe's indigo"). I'll generate the variants from there.
|
||
```
|
||
|
||
**D2.2 Brand secondary.** Optional. `default` = none.
|
||
|
||
**D2.3 Neutral tone.** Warm / cool / true. One question.
|
||
```
|
||
For grays, do they feel slightly tan (warm), slightly blue (cool),
|
||
or truly neutral (true)? Default: cool.
|
||
```
|
||
|
||
**D2.4 Generate the neutral scale.** Compute 50–950 from the chosen tone
|
||
and brand contrast targets. Show the user; offer `default` or "redo with
|
||
warmer/cooler/more contrast".
|
||
|
||
**D2.5 Semantic colors.** Success / warning / error / info. Show defaults
|
||
that contrast against both light and dark backgrounds; user accepts or
|
||
overrides one at a time.
|
||
|
||
**D2.6 Dark mode.** yes / no / system-following. Default: system. If yes,
|
||
generate the dark token mapping (invert + adjust saturation per token
|
||
class) and show.
|
||
|
||
**D2.7 Accessibility check.** Compute contrast ratios between primary +
|
||
neutral pairs. Flag anything below 4.5:1 for body text or 3:1 for UI.
|
||
Don't silently accept failures — surface and confirm or adjust.
|
||
|
||
## D3 — Typography
|
||
|
||
**D3.1 One family or two?** Default: one.
|
||
|
||
**D3.2 Family choice.** If user has no preference, offer presets:
|
||
- *Modern sans*: Inter (free, broad weights)
|
||
- *Humanist*: Source Sans 3 / IBM Plex Sans
|
||
- *System stack*: native to OS (free, no load)
|
||
- *Editorial*: Inter + Fraunces (display)
|
||
- *Technical*: IBM Plex Sans + IBM Plex Mono
|
||
|
||
**D3.3 Scale base.** 14, 15, 16. Default: 16 (web), 17 (iOS native), 14 (compact dashboards).
|
||
|
||
**D3.4 Scale ratio.** 1.125 (subtle), 1.2, 1.25 (default), 1.333 (dramatic), 1.5 (display-heavy).
|
||
|
||
**D3.5 Line-height policy.**
|
||
- Display: 1.1–1.2 (tight)
|
||
- Body: 1.5 (normal)
|
||
- Long-form prose: 1.7 (relaxed)
|
||
|
||
Defaults usually fine; user can override one of three.
|
||
|
||
## D4 — Spacing
|
||
|
||
**D4.1 Base unit.** 4 (default — finer control) or 8 (rougher cadence; iOS native often).
|
||
|
||
**D4.2 Scale.** Use the standard 12-step (0, 0.5, 1, 1.5, 2, 3, 4, 6, 8, 12, 16, 24) — almost always accepted as `default`.
|
||
|
||
## D5 — Radii
|
||
|
||
**D5.1 Posture.** sharp (0–4) / tight (4–8) / medium (8–16) / pillowy (16+) / mixed.
|
||
|
||
**D5.2 Generate sm/md/lg/pill/full.** Show; accept or tweak one.
|
||
|
||
## D6 — Shadows & elevation
|
||
|
||
**D6.1 Posture.** flat (none) / subtle / generous.
|
||
|
||
**D6.2 Scale.** xs/sm/md/lg/xl. Generated from posture; show; accept.
|
||
|
||
## D7 — Density
|
||
|
||
**D7.1 Default density.** comfortable (default; web app) / cozy / compact (data-heavy dashboard).
|
||
|
||
This drives component padding tokens — important enough to ask, easy to forget otherwise.
|
||
|
||
## D8 — Visual motion
|
||
|
||
**D8.1 Default duration.** fast (150ms), default (250ms), slow (400ms). Default: default.
|
||
|
||
**D8.2 Default easing.** standard / accel / decel / custom. Default: standard.
|
||
|
||
Behavioral motion (when things animate) lives in the interaction interview, not here.
|
||
|
||
## D9 — Components
|
||
|
||
Read the entity vocabulary from `ia.md`. Confirm the standard set
|
||
(Button, Input, Card, Surface) and ask for project-specific additions found in IA.
|
||
|
||
For each project-specific component, ask: variants? states? anatomy?
|
||
Default to "standard variants only" if user is unsure — better to add
|
||
later than over-spec now.
|
||
|
||
## D10 — Theme variants (skip by default)
|
||
|
||
Multi-brand / tenant theming usually no for v1. Default: skip.
|
||
|
||
## D11 — Accessibility tokens
|
||
|
||
**D11.1 Focus ring.** Style (solid / double / inner-outer) and color (brand / accent / outline-default). Default: solid 2px brand at 60% opacity.
|
||
|
||
**D11.2 Contrast targets.** Confirm WCAG AA (4.5:1 text, 3:1 UI). AAA optional. Default: AA.
|