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>
3.2 KiB
Workshop: Page Creation (Discussion-Based)
Purpose: Define a page concept through conversation, create visualization method based on need
CONTEXT
This workflow activates when: User needs to define a page concept but doesn't have a visualization yet.
Goal: Define what the page IS, then choose how to visualize it.
Philosophy: The page (concept) comes first. Visualization (method) follows.
STEP 1: PAGE CONCEPT
What is this page about?
Tell me in your own words:
- What is this page called?
- What should it accomplish?
- Who uses it and why?
Describe the page concept:
Store page_concept
STEP 2: VISUALIZATION PREFERENCE
How would you like to visualize this page?
[A] I'll draw a sketch (physical/digital) and upload it [B] Let's describe it verbally - I'll specify sections through discussion [C] Create a simple ASCII layout together [D] It's similar to another page I can reference [E] Generate HTML prototype - I'll screenshot it for documentation
Choice:
Store visualization_method
FLOW ROUTING
Based on user choice, load the appropriate flow:
| Choice | Flow | File |
|---|---|---|
| A | Sketch Path | flow-a-sketch.md |
| B | Verbal Specification | flow-b-verbal.md |
| C | ASCII Layout | flow-c-ascii.md |
| D | Reference Page | flow-d-reference.md |
| E | HTML Prototype | flow-e-html.md |
Load and execute the selected flow substep
COMPLETION
Page concept defined! 🎯
Page: {{page_name}} Method: {{visualization_method_description}} Status: Conceptual specification complete
The page is the place where visualization meets specification.
What would you like to do next?
[A] Create/upload sketch for this page [B] Create another page [C] Review what we've created [D] Back to scenario overview
Choice:
KEY PHILOSOPHY
✅ Page-Centric Thinking
The page is the conceptual entity:
- Has a purpose
- Serves users
- Contains sections
- Has interactive objects
- Exists in a flow
The visualization is one representation:
- Sketch (preferred)
- Wireframe
- ASCII (last resort)
- Verbal description
- Reference to similar page
The page comes first. Visualization follows.
✅ Flexible Methods
Different projects need different approaches:
- Early concept → Verbal/ASCII → Sketch later
- Clear vision → Sketch directly
- Existing patterns → Reference + differences
- Iterative → Mix of methods
The workshop adapts to YOUR process.
INTEGRATION
This workshop creates:
- Conceptual page specification (always)
- Placeholder for visualization (always)
- Guidance for next steps (always)
Next workshops use:
- workshop-page-process.md - When sketch is ready
- page-init-lightweight.md - For quick structure
- 4b-sketch-analysis.md - For detailed analysis
Created: December 28, 2025 Purpose: Define page concept, choose visualization method Philosophy: Page first, visualization second Status: Ready for use