2026-04-11-yomiya-onboarding-google-stitch-full-context-prompt

Yomiya Onboarding Google Stitch Full Context Prompt

中文边界说明：本文是给第三方设计工具使用的历史英文 Prompt，不再作为当前 onboarding 事实源。 当前中文事实入口请读 product/YomiyaOnboarding/README.md，维护规则请读 docs/文档唯一来源维护规则.md。

把下面整段直接粘贴给 Google Stitch 即可。

Create the first-pass onboarding design system for Yomiya / 每日日语, an iOS mobile Japanese-learning product. This is not a paywall-first flow and not a testing-heavy or survey-heavy onboarding. The core goal is to help first-time users reach one specific aha moment as quickly as possible: “I can start from real Japanese content right now, and this first-week plan is actionable.” The flow should feel like beginning a real first week, not entering a sales funnel. The audience includes two main groups: beginners or returning learners who need a lighter entrance and do not want to be overwhelmed by course pressure, and users who studied a little before but still cannot follow real content smoothly and do not want to be treated like true zero-beginners. The product strategy is not to split them into two separate onboarding systems, but to use one shared skeleton, one light branching layer, and then vary wording emphasis, default ordering, and plan variants later.

Use iPhone portrait, 375px wide, light mode only. The onboarding lives inside the existing EveryDayJapanese / Yomiya design family. Do not invent a completely separate visual brand. The correct direction is: emotionally stronger in the opening portion, then clearly returning to the main product language in the middle and later screens. Early screens may feel more atmospheric, inviting, and emotionally charged, but the whole system must still feel like the same family as the current product. It must not feel like a campaign in the first half and a different app in the second half. Emotional keywords: bright, encouraging, easy to start, light, restrained, trustworthy. Avoid anything that feels overly marketing-driven, achievement-system-driven, fitness-app-motivational, or textbook-like.

Do not design all 13 screens in the first pass. First create a reusable visual system and only 5 reusable template types, then map those templates back to the actual onboarding screens. The first-pass template scope is exactly: 1) Hero Start Template, 2) Single-Choice Decision Template, 3) Explanation + CTA Template, 4) Generation / Preparing Template, 5) Week-One Plan Delivery Template. Do not design the subscription page in the first pass. Map templates like this: Hero Start Template covers screens 01 / 02 / 03 / 07. Single-Choice Decision Template covers screens 04 / 05 / 06 / 08 / 09. Explanation + CTA Template covers screen 10. Generation / Preparing Template covers screen 11. Week-One Plan Delivery Template covers screen 12. Screen 13 subscription is out of scope for the first pass.

The product originally explored a 15-screen approach but was intentionally reduced to a 13-screen main chain because the later portion had duplication: screen 10 already explains how the user will begin, and extra later summary pages would only repeat information and create ceremony. The final 13-screen chain is: 01 Brand Opening, 02 Dynamic Start Page, 03 Stage Transition, 04 Primary Goal, 05 Main Pain Point, 06 Starting Level, 07 Neutral Transition, 08 Weekly Time Commitment, 09 Preferred Content Entry, 10 How You Will Start, 11 Plan Generation, 12 Week-One Plan Delivery, 13 Subscription Confirmation. The design must preserve this logic: every screen adds a new kind of information, there should be no second summary page, and the user should never be made to watch extra screens just for ceremony.

Global interaction rules are important. Single-choice question screens advance immediately after tapping an option. Auto-advance screens are 01 / 03 / 07 / 11, and these auto screens do not enter navigation history. The top progress UI should show 6 phases rather than literal 13-screen progress. Back arrows appear only on editable or decision-like pages. The back-chain is: 13 returns to 12, 12 returns to 10, 10 returns to 09, 09 returns to 08, 08 returns to 06, 06 returns to 05, 05 returns to 04, and 04 returns to 02. When users go back to a single-choice page, the previous selection remains highlighted. If they change any answer on 04 / 05 / 06 / 08 / 09, downstream screens 11 / 12 / 13 should be considered regenerated. If the user returns from 13 to 12, edits earlier choices, then re-enters 13, the subscription selection resets to the default recommended option. Also note one real product rule even if it does not need visual emphasis: if a returning user taps “我已有账号” on screen 02, enters the login flow, and closes the login page with X, they can skip the whole onboarding and enter the main product directly. Do not design against this flow.

Use exact existing copy in the first pass. Do not rewrite wording. Keep the writing short, multilingual-friendly, and never condescending, over-soothing, or overly promising. Buttons should be phrased as user actions, not system commentary. Existing copy to use: Screen 01: “每日日语” / “慢慢长出语感”. Screen 02: “边听边学” / “更容易开始” / button “开始” / secondary entry “我已有账号”. Screen 03: “快速找到” / “适合你的” / “学习方式”. Screen 04: title “你现在最想 / 改善什么？” with options “听懂一点 / 更容易跟上真实内容”, “更敢开口 / 说的时候没那么卡”, “重新开始 / 把学习接回来”. Screen 05: title “你最容易 / 卡在哪里？” with options “一听就丢 / 速度一快就断掉”, “连不起来 / 认识词，放进内容就糊”, “很难开始 / 知道该学，却总没开始”. Screen 06: title “你现在更接近 / 哪一种？” with options “刚开始 / 想轻松进入”, “学过一点 / 但还是跟不稳”, “基础还行 / 想更自然听懂”. Screen 07: “接下来，” / “安排你的第一周” / “再看两步，就能开始。”. Screen 08: title “这周你想留 / 多少时间？” with options “每天 5 分钟 / 轻一点，先开始”, “每天 10 分钟 / 更稳一点，也不重”, “每天 20 分钟 / 想更集中地往前走”. Screen 09: title “你想从哪类 / 内容开始？” with options “轻松听一听 / 更容易进入真实内容”, “日常对话 / 更接近生活里会遇到的表达”, “更有结构感 / 更适合想稳一点往前走”. Screen 10: title “你会这样开始” with 3 explanation blocks: “先开始一条内容 / 先走一小步，更容易开始。”, “卡住时再看一点 / 精听、AI 解析、查词，都会接住你。”, “按你的节奏继续 / 先坚持一周，你会更容易听进去。” and button “生成我的计划”. Screen 11: “你的第一周，” / “快整理好了” with three status lines “正在匹配第一条内容”, “正在整理这一周节奏”, “正在准备辅助功能入口”. Screen 12: “这是你的 / 第一周” with 4 modules “每天 10 分钟 / 先把开始做顺，再慢慢加深。”, “第一条内容：轻松听一听 / 一条更容易进入的真实内容，适合重新接回语感。”, “遇到卡点时 / 精听、AI 解析、查词都会在你需要时出现。”, “先坚持一周 / 你会更容易听进去，也更容易继续下去。” and button “正式开始”.

The first-pass visual system must inherit the existing EveryDayJapanese / Yomiya iOS token logic. The important inherited semantics are: page shell is light and not heavy; most surfaces are light backgrounds with gentle contrast layers; horizontal page inset is based on 16px; typography is rational, clean, and close to iOS-native hierarchy; cards are formed by soft surface differences and rounded corners, not by thick borders or shadows; shadow is not a default visual language. Important token references from the existing product language: pageBackground and surfacePrimary are essentially the app background, surfaceRaised is a softer light fill at about 50% opacity, surfaceMuted is a slightly stronger soft fill at about 82% opacity, textPrimary / textSecondary / textTertiary map to existing semantic text roles, accentStrong maps to brand1, dividerSubtle maps to the common divider role, and floatingShadow exists but is intentionally extremely weak. Spacing references include a core scale of 2 / 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48, with 16 as the page inset baseline, 10 for header cluster spacing, 22 for larger module spacing, 14 for section spacing, 12 for row spacing, 4 and 6 for text-tightness spacing, and 24 for larger card gaps. Typography references include 28 semibold display, 22 for strong page-level display, 17 semibold or regular title, 16 medium or regular headline, 14 body, and 12 small supporting text. You may push hero titles slightly stronger than the standard product tokens, but do not leave the family. The overall system must still feel like Yomiya.

Color strategy is strict. Keep the existing main accent color family from brand1 / accentStrong. Do not create a separate onboarding brand color. The accent color must act only as an accent, never as the dominant full-page fill. It may appear in primary buttons, selected-state highlights on option cards, active progress segments, key action moments on the week-one plan page, and a few small icon or emphasis points. It must not appear as full-screen saturated brand backgrounds, heavy blue/purple/neon gradients, or pages where brand color becomes the main visual mass. The mood of the opening should come mostly from composition, illustration, atmosphere, and restraint, not from flooding the screen with accent color.

Card strategy is also strict. Cards are allowed, but they must feel like the existing Yomiya frontend experiment: borderless, shadowless, lightweight, based on subtle surface differences and rounded corners. Do not create thick stacked card compositions. The user explicitly wants card presence but specifically references the existing frontend experiment’s borderless and shadowless cards as the model. Decision pages and plan pages must obey that.

Illustration strategy is precise. Use illustration or semi-realistic illustrated scenes only on Hero Start screens and the Generation / Preparing screen. All other templates should be product UI only. Characters should feel like urban young adults aged 22-30. Hero scenes should lean toward commuting, city movement, and “starting” energy. Generation/loading scenes should lean toward quiet indoor preparation: desk, sofa, window, warm indoor light, phone, headphones. Japanese-learning cues should be medium-intensity only: a few fragments of Japanese characters, subtitle fragments, waveform hints, dialogue bubbles, small learning-card fragments. Do not flood the interface with Japanese text and do not turn the product into a textbook UI.

There are explicit visual bans. Do not create fitness-app motivational poster energy, aggressive self-improvement mood, achievement-badge mood, glossy paywall energy in the first five templates, thick outlined cards, floating shadow cards, glassmorphism, anime-poster styling, stereotypical Japanese imagery such as torii, sakura, or traditional decorative patterns, textbook-like learning UI, summary-report or achievement-report energy on the plan page, or settings-page / survey-tool energy on decision pages. The positive targets are: bright but not loud, encouraging but not slogan-heavy, emotional but not salesy, branded but not brand-saturated, learning-oriented but not textbook-like.

Now design the 5 templates with these exact purposes and structures.

Hero Start Template: this covers screens 01 / 02 / 03 / 07. Its purpose is to create first impression, establish both brand and emotional headline, and make users feel they can start now. Its structure should include status/safe area, brand name, emotional headline, optional subcopy or stage hint, primary CTA or auto-transition cue, and an atmospheric illustrated background. It is the most emotional template in the system, but must not feel like an ad poster or hard-sell splash screen. Brand name and emotional headline should both be clear. Accent color should only appear as subtle highlights. The mood should come from composition, illustration, soft atmosphere, and restraint. Screen 01 should feel like a brand opening without CTA. Screen 02 should have the clearest start CTA and the strongest “begin now” energy. Screens 03 and 07 should feel like transition screens with emotional continuity but lower interaction weight.

Single-Choice Decision Template: this covers screens 04 / 05 / 06 / 08 / 09. Its purpose is to serve as the core onboarding skeleton and collect key preferences quickly. Structure: back arrow, top stage progress, two-line title, 3 option cards, each option with primary label and secondary explanation. This template should clearly return to the main product language: clean, readable, lightweight, no illustration. The cards should feel tactile but light. They should have card presence but still remain borderless and shadowless. Selected states must be clear but not overdone. Express selection through subtle surface shift, small accent highlight, type weight shift, and/or a fine marker. Do not make selection feel like a giant button. The top progress should be visible but restrained, like a phase hint rather than an exam progress bar.

Explanation + CTA Template: this covers screen 10. Its purpose is to explain “this is how you will start” and create confidence before generation. Structure: back arrow, stage progress, title, 3 explanation blocks, primary CTA. It should feel a little more explanatory than decision pages, but it must not become a detail page or product-lecture page. The 3 blocks should feel like concrete action steps, not marketing bullets. Keep the same borderless, shadowless, soft-surface card language.

Generation / Preparing Template: this covers screen 11. Its purpose is to turn waiting into a feeling of “we are preparing your start.” Structure: main title, preparation status lines, illustrated scene, optional soft progress hint, no back button, no top progress. It should be quieter and more focused than the Hero template, not a technical loading screen. It should feel like the system is carefully organizing the user’s first week. Keep it emotionally warm and specific, not generic app-loading.

Week-One Plan Delivery Template: this covers screen 12. Its purpose is to deliver the first real value and make the user feel they can start immediately. Structure: back arrow, title, 4 plan modules, primary CTA. It must feel like an action page, not a summary page. The 4 modules must not look like a generic checklist. Keep the same light card language: borderless, shadowless, soft surfaces, stronger and steadier than decision cards but still lightweight. Inside the page, prioritize the information in this order: 1) rhythm / time commitment, 2) first content recommendation, 3) support tools when blocked, 4) one-week expectation. The CTA should be visually clear, but the page must still feel like the plan itself is the main content, not a paywall pre-step.

Also keep in mind the underlying plan-generation product logic even if it is not fully visualized in the first pass. The key fields are intent_primary, pain_primary, level_self_assessed, weekly_commitment_minutes, interest_cluster_primary, onboarding_plan_variant, and first_content_id. The onboarding plan may resolve to one of four plan variants: light_restart_start, easy_listening_start, daily_dialog_start, structured_progress_start. Trigger rules are: if intent_primary equals 重新开始, prioritize light_restart_start; otherwise use interest_cluster_primary to map to easy_listening_start, daily_dialog_start, or structured_progress_start; if interest does not settle the choice, use level_self_assessed to fall back toward light_restart_start or structured_progress_start. This matters because the week-one plan page should feel like a real delivered plan, not a generic visual exercise. First content recommendation should imply low entry barrier, a complete ~10 minute experience, natural use of 精听 / AI 解析 / 查词, and a path into a second piece of content.

Your output should include: 1) a concise overall visual direction summary, 2) 5 template screen designs, 3) notes for each template’s core components, 4) a mapping from each template to actual onboarding screens, and 5) spacing / typography / surface guidance inferred from the current iOS product design language. Success means early templates feel emotionally inviting without becoming ad-like, middle and later templates clearly feel like the same family as the current Yomiya product, decision pages feel easy to choose and not like settings or survey tools, the explanation page feels clear rather than verbose, the generation page feels like careful preparation rather than generic loading, the week-one plan page feels like “I can start now” rather than “here is a pretty summary,” and the whole first-pass template system can expand to the full 13-screen flow later without being redesigned from scratch.