Vadim Flowed
58 lines
3.6 KiB
Markdown
58 lines
3.6 KiB
Markdown
---
|
|
name: ux-constructor
|
|
description: Create UX architecture, information architecture, user flows, screen inventory, UX decisions, research citations, acceptance criteria, and screen blueprints from a normalized product model. Use when Codex needs evidence-based UX planning before Figma wireframe generation, including citation-backed UX rationale and editable screen_blueprints.
|
|
---
|
|
|
|
# UX Constructor
|
|
|
|
Convert `normalized_project.json` into `ux_spec.json`, `ux_spec.summary.md`, and `screen_blueprints.json`.
|
|
|
|
## Load First
|
|
|
|
- `.agents/skills/_shared/references/artifact-contracts.md`
|
|
- `.agents/skills/_shared/references/ux-research-policy.md`
|
|
- `.agents/skills/_shared/references/ux-research-registry.json`
|
|
- `.agents/skills/_shared/references/quality-gates.md`
|
|
|
|
## Workflow
|
|
|
|
1. Read `workspace/artifacts/wireframe-gen/normalized_project.json` and `normalized_project.summary.md`.
|
|
2. Run the pre-UX open question gate:
|
|
`powershell -File scripts/wireframe/validate-artifacts.ps1 -ArtifactDir workspace/artifacts/wireframe-gen -Stage pre-ux`
|
|
3. Stop and return unresolved blocking questions to the coordinator if the gate fails.
|
|
4. Identify primary audiences, actors, jobs, goals, constraints, risks, and open questions.
|
|
5. Create information architecture and user flows that cover the core functional modules.
|
|
6. Create `screen_inventory` with stable `screen_id` values.
|
|
7. For each screen, define purpose, main user intent, content priorities, states, and acceptance criteria.
|
|
8. Use the curated UX registry first. If it lacks a relevant source, do live web research from authoritative sources, then update the registry with `scripts/wireframe/update-research-registry.ps1`.
|
|
9. Write `ux_spec.json` using the shared contract and citations.
|
|
10. Write `screen_blueprints.json` as an array of build-ready screen plans.
|
|
11. Write `ux_spec.summary.md` in Russian, including unresolved user decisions.
|
|
12. Validate:
|
|
`powershell -File scripts/wireframe/validate-artifacts.ps1 -ArtifactDir workspace/artifacts/wireframe-gen`
|
|
|
|
## UX Decision Rules
|
|
|
|
- Ground each screen in a requirement, user goal, or explicit assumption.
|
|
- Prefer proven, boring UX patterns for operational tools: clear navigation, dense but readable layouts, visible status, good empty/error/loading states.
|
|
- Do not turn UX research into generic decoration. Cite only claims that directly support the decision.
|
|
- Keep flows implementation-ready: actor, trigger, steps, success outcome, failure/edge states.
|
|
- Put unresolved product choices into `open_questions` or `decision_log.md`; do not decide business policy without evidence.
|
|
|
|
## Blueprint Rules
|
|
|
|
- Use mid-fi fidelity: real information architecture, realistic content labels, clear components, and states without final visual polish.
|
|
- Include `content_type` in every blueprint: `screen` for full screens and `element` for bounded UI elements.
|
|
- Include desktop viewport by default for screens: `{ "width": 1440, "height": 800 }`.
|
|
- Increase screen height above `800` only when the content requires more vertical space.
|
|
- For element blueprints, include `element_id`, `parent_screen_id`, and `bounds`.
|
|
- Add mobile blueprint variants only when source docs or user request require mobile UX decisions.
|
|
- Include `empty_error_loading_states` for data-heavy screens, forms, and async flows.
|
|
|
|
## Output Quality Gate
|
|
|
|
- Every screen maps to at least one normalized requirement or assumption.
|
|
- Every major UX decision has `research_citations`, `source_refs`, or an explicit assumption.
|
|
- `screen_blueprints.json` has no placeholder-only screens.
|
|
- Acceptance criteria are observable in the future Figma output.
|