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
93 lines
2.6 KiB
Markdown
93 lines
2.6 KiB
Markdown
# Flow C: ASCII Layout
|
|
|
|
**Activates when:** User chooses to create an ASCII layout
|
|
|
|
---
|
|
|
|
## Introduction
|
|
|
|
<output>**Let's create a simple ASCII layout together.**
|
|
|
|
⚠️ **Note:** ASCII is a last resort - sketches are much better for capturing design intent!
|
|
|
|
We'll create a basic box-and-text layout to show structure.</output>
|
|
|
|
---
|
|
|
|
## Gather Sections
|
|
|
|
<ask>**What are the main sections from top to bottom?**
|
|
|
|
Example:
|
|
- Header
|
|
- Hero
|
|
- Features (3 columns)
|
|
- CTA
|
|
- Footer
|
|
|
|
List sections:</ask>
|
|
|
|
<action>Store sections_for_ascii</action>
|
|
|
|
---
|
|
|
|
## Generate ASCII
|
|
|
|
<action>
|
|
Generate ASCII layout:
|
|
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ [HEADER] │
|
|
│ Logo | Nav | Contact │
|
|
└─────────────────────────────────────────┘
|
|
|
|
┌─────────────────────────────────────────┐
|
|
│ │
|
|
│ [HERO SECTION] │
|
|
│ │
|
|
│ Headline Goes Here │
|
|
│ Subheadline text here │
|
|
│ │
|
|
│ [CTA Button] │
|
|
│ │
|
|
└─────────────────────────────────────────┘
|
|
|
|
┌───────────┬───────────┬───────────┐
|
|
│ │ │ │
|
|
│ [Feature] │ [Feature] │ [Feature] │
|
|
│ 1 │ 2 │ 3 │
|
|
│ │ │ │
|
|
│ Icon │ Icon │ Icon │
|
|
│ Text │ Text │ Text │
|
|
│ │ │ │
|
|
└───────────┴───────────┴───────────┘
|
|
|
|
... (for each section)
|
|
```
|
|
|
|
Save as conceptual specification with ASCII visualization
|
|
</action>
|
|
|
|
---
|
|
|
|
## Completion
|
|
|
|
<output>✅ **ASCII layout created!**
|
|
|
|
⚠️ **Remember:** This is a rough structural guide.
|
|
|
|
**Recommended next steps:**
|
|
1. Use this ASCII as a reference
|
|
2. Create a proper sketch/wireframe
|
|
3. Upload and run Page Process Workshop
|
|
|
|
**ASCII is helpful for structure, but lacks:**
|
|
- Visual hierarchy
|
|
- Spacing and proportions
|
|
- Typography details
|
|
- Color and visual design
|
|
- Actual content flow
|
|
|
|
Ready to move forward?</output>
|