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>
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>
|