bd495be965
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 12s
- 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
139 lines
2.8 KiB
Markdown
139 lines
2.8 KiB
Markdown
# Flow B: Verbal Specification
|
|
|
|
**Activates when:** User chooses to describe the page through discussion
|
|
|
|
---
|
|
|
|
## Introduction
|
|
|
|
<output>**Great! Let's build the page concept through conversation.**
|
|
|
|
We'll define:
|
|
- Page sections (what areas exist?)
|
|
- Section purposes (why does each section exist?)
|
|
- Key objects (what interactive elements?)
|
|
- User flow (how do they move through the page?)
|
|
|
|
This creates a conceptual specification - the page where concept meets description.</output>
|
|
|
|
---
|
|
|
|
## SUBSTEP B1: Identify Sections
|
|
|
|
<ask>**What are the main SECTIONS of this page?**
|
|
|
|
Think about areas/blocks, like:
|
|
- Header/Navigation
|
|
- Hero/Banner
|
|
- Content areas
|
|
- Forms
|
|
- Footer
|
|
|
|
List the sections from top to bottom:</ask>
|
|
|
|
<action>Store sections_list</action>
|
|
|
|
---
|
|
|
|
## SUBSTEP B2: Section Purposes
|
|
|
|
<output>**Now let's define each section's purpose:**</output>
|
|
|
|
<action>
|
|
For each section in sections_list:
|
|
<ask>
|
|
**{{section.name}}**
|
|
|
|
What is the PURPOSE of this section?
|
|
- What should the user understand/do here?
|
|
- Why does this section exist?
|
|
|
|
Purpose:
|
|
</ask>
|
|
|
|
Store section.purpose
|
|
End
|
|
</action>
|
|
|
|
---
|
|
|
|
## SUBSTEP B3: Key Objects
|
|
|
|
<ask>**What are the KEY INTERACTIVE OBJECTS on this page?**
|
|
|
|
Think about:
|
|
- Buttons (CTAs, actions)
|
|
- Forms (inputs, selectors)
|
|
- Links (navigation, external)
|
|
- Media (images, videos)
|
|
|
|
List the most important interactive elements:</ask>
|
|
|
|
<action>Store key_objects</action>
|
|
|
|
---
|
|
|
|
## SUBSTEP B4: User Flow
|
|
|
|
<ask>**How does the user move through this page?**
|
|
|
|
- Where do they enter?
|
|
- What's their first action?
|
|
- What's the desired outcome?
|
|
- Where do they go next?
|
|
|
|
Describe the flow:</ask>
|
|
|
|
<action>Store user_flow</action>
|
|
|
|
---
|
|
|
|
## SUBSTEP B5: Generate Specification
|
|
|
|
<output>**Creating conceptual specification...**</output>
|
|
|
|
<action>
|
|
Generate page specification document:
|
|
- Page name and purpose
|
|
- Navigation (prev/next)
|
|
- For each section:
|
|
- Section name
|
|
- Section purpose
|
|
- Status: "CONCEPTUAL - Needs visualization"
|
|
- For each key object:
|
|
- Object name
|
|
- Object type
|
|
- Object purpose
|
|
- Status: "CONCEPTUAL - Needs specification"
|
|
- User flow description
|
|
- Next steps: "Create visualization (sketch/wireframe)"
|
|
|
|
Save to: C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/{{page_number}}-{{page_slug}}.md
|
|
</action>
|
|
|
|
---
|
|
|
|
## Completion
|
|
|
|
<output>✅ **Conceptual page specification created!**
|
|
|
|
**What we defined:**
|
|
- {{sections_list.length}} sections with purposes
|
|
- {{key_objects.length}} key interactive objects
|
|
- Complete user flow
|
|
|
|
**Status:** CONCEPTUAL - Ready for visualization
|
|
|
|
**Next steps:**
|
|
1. Create sketch/wireframe based on this concept
|
|
2. Upload visualization
|
|
3. Run Page Process Workshop to enhance specification
|
|
|
|
Or:
|
|
|
|
[A] Create ASCII layout now (quick visual)
|
|
[B] Done - I'll create sketch later
|
|
[C] Actually, let's refine the concept more
|
|
|
|
Choice:</output>
|