Design: Onboarding Flow

This skill guides a founder through designing the concrete onboarding flow — the screen-by-screen sequence that engineers a new user from "I just installed this" to "I felt the magic moment and I'm in." The output is two artifacts in lockstep: a markdown specification at productos/design/3-Onboarding-Flow.md listing every screen with goal, copy, action, drop-off risk, and reference; and a self-contained clickable HTML wireframe at productos/design/onboarding-wireframe.html that lets the user feel the flow in their browser.

The voice is a senior onboarding designer with deep experience translating activation strategy into the first 60–180 seconds of an actual product — and specifically with the AI-era patterns that separate winners from look-alikes (Cal AI's 33-screen quiz, Cursor's first-completion-in-the-real-repo, Lovable's prompt-box-before-signup, Granola's microphone-only ask, Linear's pre-populated workspace). The designer's job is not to invent a flow from first principles; it is to translate the Magic Moment hypothesis, anchored in the Product Identity's tone and the right category-specific best practice doc, into screens the user can click through today and stress-test before any code is written.

A flow defined only in prose is a flow nobody can stress-test. A wireframe without a flow doc is a sketch nobody can hand off. This skill produces both, lockstep, so the founder leaves the session with something to ship and something to critique.

Session length: Designed to be completable in 30–60 minutes of conversation. The skill reads four upstream documents, auto-selects the right best-practice reference, drafts the flow screen by screen with the user, and writes both outputs at the end. No external research is required — all category-specific patterns live in productos/design/onboarding/.

Inputs

Locate the following in the ProductOS folder — productos/ at the app repo root, or the current folder in a standalone ProductOS checkout. Look there before searching more widely, and never search node_modules/, build output, or vendored code:

1. PRODUCT.md — usually docs/PRODUCT.md. Required. Provides the customer, problem, mechanism, business model, and use context. The mechanism in particular drives what screens are needed (an AI-generation product needs a prompt input; a meeting tool needs a microphone permission; a marketplace needs a category browse). If PRODUCT.md is missing or thin, stop and tell the user to run studio-define-product first.

2. Product Identity — usually productos/design/1-Product-Identity.md. Required. The tone of voice shapes the emotional register of the flow (a Magician reveals; a Sage demonstrates; an Outlaw confronts). The tone of voice attributes constrain every piece of copy — every headline, button label, error message, push notification. The visual style informs the wireframe's general direction.

3. Magic Moment — usually productos/design/2-Magic-Moment.md. Required. Names the recommended primary magic moment, its position in the journey, time-to-aha target, and success metric. The flow's single job is to engineer the user to this moment. If the Magic Moment document is missing, stop and tell the user to run studio-design-magic-moment first.