bd495be965
- Sidebar: dynamic brand-accent colors, brainstorm section restyled - AI chat general: popup panel with expand/collapse, hides when contextual AI open - AI chat contextual: tabs reordered (Actions first), X close button, height fix - Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.) - Global color cleanup: emerald/orange hardcoded → brand-accent dynamic - Brainstorm page: orange → brand-accent throughout - PageEntry animation component added to key pages - Floating AI button: bg-brand-accent instead of hardcoded black - i18n: all 15 locales updated with new AI/billing keys - Billing: freemium quota tracking, BYOK, stripe subscription scaffolding - Admin: integrated into new design - AGENTS.md + CLAUDE.md project rules added
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