julian
17c08e6392
- Nx 22.7 monorepo (pnpm 11.1, TypeScript 5.9, Node 24) - apps/api: NestJS 11 (CJS conforme CODING-RULES.md PGD-DB-004) - apps/web: React 19 + Vite 8 (ESM) - libs/shared/api-interface: Zod contract base - Docker Compose dev: Postgres 18, Valkey 8, MinIO, Mailpit - WDS artifacts: - design-artifacts/A-Product-Brief/ (5 docs canônicos + 16 dialogs) - design-artifacts/B-Trigger-Map/ (hub + 4 personas + feature impact) - Stack canon: STACK.md v2.2 + CODING-RULES.md v2.0 + brand.md - AGENTS.md + README.md como entrada para devs/agentes Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2.1 KiB
2.1 KiB
name, description, borrows_from
| name | description | borrows_from |
|---|---|---|
| design-solution | Sketch and specify the update for a scoped improvement | Phase 4 (UX design) |
Design Solution
Goal: Design the solution for a scoped improvement — from quick sketch to development-ready specification.
INITIALIZATION
Design Log
Read {output_folder}/_progress/00-design-log.md. Check Current and Backlog for context.
Steps
Step 1: Load Scenario
Read the scenario from [S] Scope Improvement:
- Target description
- Current vs desired state
- User journey
- Pages and components affected
Step 2: Choose Design Approach
Based on the change scope, pick an approach:
- Quick fix — Small visual/copy change → Skip to Step 4 (specify directly)
- Sketch first — Layout or flow change → Sketch the before/after, then specify
- Generate design — Significant visual change → Use Phase 6 asset generation tools
Step 3: Design the Change
For sketch or generate approaches:
- Before snapshot — Capture or describe the current view
- After concept — Sketch, generate, or describe the desired view
- Diff view — Explicitly mark what changes: layout, components, content, behavior
- Edge cases — What happens on mobile? With long text? With empty state?
Present design to user for feedback. Iterate until approved.
Step 4: Write Specification
Create a mini page-spec at {output_folder}/evolution/specs/:
# [Page/View Name] — Update Specification
## Change Summary
[One paragraph describing the change]
## Before
[Current state description or reference]
## After
[Detailed specification of the new state]
## Components
[List each component with its new properties/behavior]
## Responsive Behavior
[How the change adapts across breakpoints]
## Acceptance Criteria
[Testable criteria from the scenario]
Step 5: Approve Specification
Present the specification for user sign-off:
- Does it match the scenario intent?
- Are acceptance criteria testable?
- Is scope still manageable?
AFTER COMPLETION
- Update design log
- Suggest next action
- Return to activity menu