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>
1.7 KiB
1.7 KiB
name, description
| name | description |
|---|---|
| workflow-visual | Create visual representations of page designs using external tools and integrate results back into specifications. |
[W] Visual Design — Work with Visual Tools
Goal: Create visual representations of page designs using external tools and integrate results back into specifications.
When to use: When the user wants to create or review visual mockups, prototypes, or design artifacts using tools like Figma, Nano Banana, Stitch, or Pencil.io.
INITIALIZATION
Read design log at {output_folder}/_progress/00-design-log.md before starting.
Entry
Load page specification from {output_folder}/C-UX-Scenarios/.
Steps
Execute steps in ./steps-w/:
| Step | File | Purpose |
|---|---|---|
| 01 | step-01-visual-approach.md | Choose visual tool and approach |
| 02 | step-02-generate-visual.md | Create visual representation |
| 03 | step-03-review-integrate.md | Review result and integrate into spec |
Supported tools:
- Nano Banana — AI image generation for mockups
- Figma — Professional design tool integration
- Stitch — Component-based design
- Pencil.io — Quick wireframing
- HTML prototype — Code-based visual design
Reference data:
./data/guides/HTML-VS-VISUAL-STYLES.md— choosing between approaches./data/guides/NANO-BANANA-PROMPT-GUIDE.md— prompt composition for AI image generation
AFTER COMPLETION
- Append a progress entry to
{output_folder}/_progress/00-design-log.mdunder## Progress:### [date] — Visual Design: [what was generated] - Suggest next action based on the adaptive dashboard (read Design Loop Status to find what needs attention next)