karvey-design-graphiclisted

# Karvey Design Graphic ## Purpose With the approved mockup as the structural wireframe, define the complete visual design specification: color, typography, layout, motion, and micro-interactions. Update the mockup HTML with the defined visual system. ## Execution steps ### Step 1 — Load context Read: - `docs/spec/changes/{change-id}/spec.json` - `docs/spec/changes/{change-id}/mockup.html` - `docs/spec/changes/{change-id}/prd.md` Check the precondition: `python3 "${CLAUDE_PLUGIN_ROOT}/scripts/karvey-state.py" next "{change-id}" --json` (mockup approved; relay the blockers and stop if not), then `python3 "${CLAUDE_PLUGIN_ROOT}/scripts/karvey-state.py" advance "{change-id}" design_graphic`. Check whether a `PRODUCT.md` or `DESIGN.md` exists in the project to understand the existing brand. **Design produced by another agent or repo** (see `../karvey/rules/multi-agent.md` §3): if `spec.json:inputs.design` or `inputs.design_system` is set, read them **at the pinned commit** (`git -C {repo} show {commit}:{path}`). The design system is a hard input: tokens, type and components come from it and are not re-invented here — this phase maps them onto the change and scores the result. If a designer agent delivers a new version, update the pin (`inputs.design = "{repo} {path} @{new-commit}"`) and record the re-pin in `revision_history`; `karvey-iterate` decides the ripple. When **this** phase is the one producing the design for other repos, finish by giving the consumers the refere