Screen map - what to mock up
Brand rules from Design-File-WTFISAI.md apply to every screen: purple #5E17EB + lilac #E8E6F8, cyan #00FFFF / magenta #FF00FF glitch offsets, Playfair Display for headlines at weight 600, Inter for UI, square corners, no shadows, no em dashes in any copy.
Phase 0 screens - the Sept 1 MVP
1 Welcome / sign in
|
2 Pick your path Career | Business
|
3 Goal intake conversational, 3-5 questions
|
4 Plan generating the agent working, on-brand
|
5 Your AI plan the deliverable. save, email, share
|
6 Home / portal plan, free shelf, intro video, what's next
|
+-- 7 Free resource shelf 3 lead magnets
+-- 8 Resource detail preview + download, email gate
+-- 9 Intro video
+-- 10 Course teaser 101 waitlist / buy intent
+-- 11 Profile business info that feeds the agent's contextScreen notes
1. Welcome / sign in. Purple full-bleed. The promise, not the feature list. Sign in with Apple, sign in with Google, or email. Per the 06-25 call Sheila liked PIN / no-password - a 6-digit email code satisfies that and works identically on web and iOS.
2. Pick your path. The two-up compare template from the design system: one white card, one dark purple card. Career on the left, Business on the right. This is the single most important screen for positioning, because it is where "this is for advancing your business or career, not for becoming a founder" gets communicated.
3. Goal intake. Conversational, one question per screen, big tap targets. Do not build a form that looks like Typeform - the case-study module in the course is literally about replacing Typeform. Eat the dog food.
4. Plan generating. Progress bar using the brand gradient linear-gradient(90deg, #5E17EB, #00FFFF, #FF00FF). Show what the agent is doing in plain English. This screen is teaching material - it is the first time the user watches an agent work.
5. Your AI plan. The whole reason someone downloads the app. Needs to feel like a document she would send to her accountant, not a chat transcript. Sections: where you are now, your top 3 opportunities, what to build vs buy, your first project, your 90-day roadmap. This maps directly onto the 101's audit spine (modules 3, 4, 5, 7), which makes the course upsell feel like the obvious next step rather than a pitch.
6. Home / portal. Her plan pinned at the top. Free shelf. Intro video. One clear next action. This screen becomes the course dashboard in Phase 1, so lay it out now with the module list in mind.
7-8. Free resource shelf. Three cards, white fill, 2px lilac border, 4px cyan top accent. Email gate on download, wired to Kit.
10. Course teaser. Not a hard sell. Show the 8 modules plus the two new ones, mark them locked, and put the transformation statement from the curriculum on it.
11. Profile. Business type, size, what she sells, what she is worried about. This is the shared-context layer from the 06-25 call, made concrete. It is why the second plan she generates is better than the first, and it is the retention mechanic.
Phase 1 screens - the course portal
12 Course dashboard 10 modules, progress, continue where you left off
13 Module detail video, script/transcript, take-home asset, "do this"
14 Video player chapters, resume, speed
15 Take-home library all one-pagers in one place
16 Purchase / entitlement web checkout, iOS handled per the decision in 03Mockup order
If we build mockups this week, build them in this order. Each one either de-risks a decision or is the screen everything else hangs off.
- Home / portal (6) - sets the whole visual system
- Pick your path (2) - the positioning screen
- Your AI plan (5) - the deliverable
- Course dashboard (12) - proves the Phase 0 layout survives into Phase 1
- Goal intake (3) + generating (4)
- Welcome (1), shelf (7-8), module detail (13)
Mock in two widths side by side: 390px (iPhone) and 1280px (desktop web), from the same markup, so the responsive story is visible from the start.