| name | design-ui |
| description | Phase 3 UI design — produce a visual mockup per screen using the generate-image capability, falling back to static HTML/CSS when image generation is unavailable. Use when: mocking up screens before frontend code, visualizing a UI per the UX flow, defining screen states/components for dev-fe, or iterating a visual with the user. |
One-Liner
One approved mockup per screen — covering empty/loading/error/populated states — before any
frontend code; use generate-image, fall back to static HTML/CSS, never block on a missing tool.
Input: requirements + UX flows. Output: mockups under docs/design/ui/ + notes.
Output template (per screen, in docs/design/ui/)
## Screen: <name>
Mockup: <image file | static HTML/CSS file>
States: empty | loading | error | populated
Components: <component> (props/behavior)
Responsive: <breakpoint rules>
Status: [ ] awaiting approval / [x] approved
Produce per screen
- A mockup using the generate-image capability
(../../resources/agent-tool-mapping.md). If the runtime
has no image tool, build a static HTML/CSS mockup instead — never block on a missing tool.
- States — empty, loading, error, populated.
- Components used and their key props/behavior.
- Responsive rules (breakpoints) where relevant.
- Non-Technical — show the mockup and ask "does this match what you want?" (click-select
approve/revise). Iterate on the visual, not the markup.
- Developer — confirm component breakdown, states, and responsive behavior for
dev-fe.
Gate
Step-gate: approve / revise each screen before implementation
(../../resources/step-gate.md). Hands the approved mockups + the
flow from design-ux-flow to dev-fe (F16).
