Overview — the systematic user flow

This section walks the complete user journey through AtomPRD, phase by phase. Every screen, every banner, every gate. If you want to know what a user sees the first time they sign in versus the hundredth, this is the map.

The journey breaks into six phases, plus a meta phase (continuous AI assistance that overlays everything). Each has a dedicated page; this page is the at-a-glance index.

The journey

graph LR
  classDef phase fill:#eef0ff,stroke:#4f46e5,color:#0a0a0a;
  classDef meta  fill:#fef3c7,stroke:#f59e0b,color:#0a0a0a;

  S[1. Sign up]:::phase
  D[2. Dashboard]:::phase
  C[3. Create project]:::phase
  W[4. Workspace authoring]:::phase
  H[5. Handoff & iterate]:::phase

  AI[AI assistance — overlay]:::meta

  S --> D --> C --> W --> H

  AI -. "Coach · Decompose Wizard · Pattern D · Critique" .-> W
  AI -. "Sample seed · scaffold" .-> C

Phases at a glance

#	Phase	Page	Key surfaces
1	Sign up & first contact	Sign up	OAuth (Google / GitHub / Facebook), email + password, org bootstrap, plan badge, connection indicator
2	Dashboard	Dashboard	Greeting strip, 5-KPI strip, 14-day activity sparkline, live activity tail, recent projects, quick actions, sample PRD gallery
3	Create project	Create project	3-step wizard: name + description → profile picker → tree mode + AI scaffold; sample prefill via `?sample=<id>`
4	Workspace authoring	Workspace	5-step first-time tour, completeness ring, next-step banner, 7 sections with Try-example seeds, mark-ready gate, module dashboard, graph view, relation chips
⊕	AI assistance (overlay)	AI assistance	Decompose Wizard (4-step archetype → modules → features → criteria), Persona Critique (5 default + 3 specialty), Pattern D suggestions on Layer 2 fields, Coach gap-finder
5	Handoff & iterate	Handoff	Snapshots (time-travel + tag + diff + safe-restore), mark-ready emerald badge, codegen targets, MCP token + IDE config, audit log

What’s not covered here

This section traces end-user surfaces only. For the underlying spec / API / package architecture, see:

Concepts — the atom model, two-layer split, four patterns.
Spec v0.3 — the wire format every user surface lowers into.
Codegen — the CodegenTemplate interface and the SenLang bridge.
MCP — the tool catalog and IDE-side configuration.

A pattern you’ll see everywhere — `PageGuide`

Almost every non-trivial page carries a small dismissible banner at the top:

Element	Purpose
Icon + title	One-line “what is this page for”.
Description	1-2 sentence framing.
Steps row	Up to 4 stepper cards with linear progress or checklist mode (computed `done` per step from real data).
CTA	Optional primary button linking to the next likely action.
✕ dismiss	Hides per-(user, page) via `localStorage:atomprd:page-guide-dismissed:<guideId>`.
Help icon (top-right)	Re-opens a dismissed guide.

This is the system-wide onboarding pattern. Tour overlays only fire once per user; PageGuides stay until dismissed and can be re-summoned. Where you see one in this section’s pages, it’s documented inline.

Reading the rest of this section

The 6 phase pages are intended to be read in order the first time, then jumped into individually. Each one:

Opens with a one-paragraph “what happens here”.
Shows the screen surfaces (text + any inline diagrams).
Calls out the localStorage flags / API endpoints that drive state.
Cross-links into Concepts, Spec, Codegen, MCP where the surface bottoms out into a deeper reference.