ken/claudecode-boilerplate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix /define-design missing screens: exhaustive screen inventory before design

Browse Source 
/define-design now builds docs/design/screen-inventory.md first — derived
from every PRD user story walked end-to-end, CRUD coverage per entity
(list/detail/create/edit/delete, modals included), and supporting screens —
then requires one blueprint entry per inventory item, checked off as added.
Consistency check verifies inventory coverage and end-to-end story
completability. /update-design keeps the inventory in sync; ui-design
skill documents the inventory rules.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Ken Yasue
2026-07-02 13:58:06 +02:00
parent 0dcd1ab8d4
commit 626986731a
5 changed files with 66 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -26,10 +26,13 @@ PRD, functional design, architecture, repository structure, development guidelin
(all under `docs/`). Review them and request edits in normal conversation if needed.
### Step 3 — Define the UI/UX design: `/define-design`
Creates the design specification under `docs/design/`: design brief, design tokens,
**`ui-blueprint.json` (the source of truth for UI generation)**, platform mapping, and SVG
wireframes (visual references only). You'll be asked once about platform, style, screens,
navigation, branding, and accessibility.
First builds an **exhaustive screen inventory** (`screen-inventory.md`) from the PRD and
functional design — every user story walked end-to-end, plus list/detail/create/edit/delete
coverage for every entity — so no screen gets skipped. Then creates the design specification
under `docs/design/`: design brief, design tokens, **`ui-blueprint.json` (the source of truth
for UI generation, one entry per inventory screen)**, platform mapping, and SVG wireframes
(visual references only). You'll be asked once about platform, style, screens, navigation,
branding, and accessibility.
### Step 4 — Review and refine the design **before writing any code**
This is the key design-decision gate: iterate on the design while it is still cheap to change.