ken/opencode-boilerplate
2
1
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:22 +02:00
parent 2a803a80b9
commit a4f80e8c8c
5 changed files with 74 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
README.md
View File

@ -27,10 +27,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.
@ -205,6 +208,7 @@ opencode
│ ├── ideas/
│ │ └── initial-requirements.md # Brainstorming notes (pre-PRD)
│ ├── design/ # UI/UX design spec (created by /define-design)
│ │ ├── screen-inventory.md # exhaustive screen checklist (from the PRD)
│ │ ├── design-brief.md
│ │ ├── design-tokens.json
│ │ ├── ui-blueprint.json # source of truth for UI
@ -324,9 +328,12 @@ first if you have your own idea, or replace it.
> /define-design
```
Creates the design specification under `docs/design/` (design brief, design tokens, UI blueprint,
platform mapping, and SVG wireframes). You'll be asked about target platform, visual style, main
screens, navigation, branding, and accessibility; if you don't specify, sensible defaults are proposed.
First builds an exhaustive screen inventory (`screen-inventory.md`) from the PRD and functional
design — every user story walked end-to-end, with list/detail/create/edit/delete coverage per
entity — then creates the design specification under `docs/design/` (design brief, design tokens,
UI blueprint with one entry per inventory screen, platform mapping, and SVG wireframes). You'll be
asked about target platform, visual style, main screens, navigation, branding, and accessibility;
if you don't specify, sensible defaults are proposed.
Review and refine the UI/UX **before** generating the app — it is far easier to iterate on the design
than on generated code:
@ -504,7 +511,7 @@ Playwright covers the `web` target; for `flutter` the equivalent is `integration
| `repository-structure` | Defining the directory layout | `docs/repository-structure.md` |
| `development-guidelines` | Creating coding conventions / implementing code | `docs/development-guidelines.md` |
| `glossary-creation` | Creating a project glossary | `docs/glossary.md` |
| `ui-design` | Creating the design brief, UI blueprint, and SVG wireframes | `docs/design/` files |
| `ui-design` | Creating the screen inventory, design brief, UI blueprint, and SVG wireframes | `docs/design/` files |
| `design-tokens` | Creating and maintaining design tokens | `docs/design/design-tokens.json` |
| `platform-ui-generation` | Converting design files into Web/Flutter/WinUI 3 code | generated app code |
| `milestone-planning` | Planning phases/milestones and the feature breakdown per milestone | `docs/milestones/` phase files |