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

Yomiya Onboarding Google Stitch Prompt

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

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

Design a light-mode iPhone onboarding system for Yomiya / 每日日语.

This is not a paywall-first flow. The goal is to help first-time users reach one clear aha moment as quickly as possible:
"I can start from real Japanese content right now, and this first-week plan is actionable."

Do not design all 13 screens in the first pass. First create a reusable visual system and 5 reusable template types, then map those templates back to the actual onboarding screens.

Product context:
- Audience includes beginners, returning learners, and users who learned a little before but still cannot follow real content smoothly.
- The product should feel bright, encouraging, calm, trustworthy, and easy to start.
- The experience should feel like "starting the first week" rather than "going through a sales funnel."

Design direction:
- Use direction B: emotional in the first part, then return to the main product language.
- Early screens may feel more atmospheric and emotionally inviting.
- Middle and later screens must clearly return to the existing app's lightweight product language.
- Keep everything in the same family. Do not make the first part feel like a campaign and the rest feel like a different app.

Mandatory visual constraints:
- Light mode only.
- iPhone portrait, 375px width.
- Use iOS-native layout language.
- Extend the existing EveryDayJapanese/Yomiya design language instead of inventing a completely new one.
- The design language should inherit these principles:
  - light shell
  - soft surface hierarchy
  - 16px horizontal page inset baseline
  - rational, clean typography
  - cards formed by subtle surface contrast and rounded corners
  - no heavy borders
  - no floating shadows
  - shadow is not a default design language

Color strategy:
- Keep the existing main accent color family from brand1 / accentStrong.
- Do not create a separate onboarding brand color.
- Use the accent only as an accent, not as a full-page fill.
- Accent color can appear in:
  - primary buttons
  - selected state highlights on option cards
  - active progress segments
  - key action points on the plan page
  - a few small icons or emphasis points
- Do not use:
  - full-screen saturated brand backgrounds
  - heavy blue/purple/neon gradients
  - pages where accent color becomes the main visual weight

Card strategy:
- Cards are allowed, but they must feel like the existing Yomiya frontend experiment:
  - borderless
  - shadowless
  - lightweight
  - based on soft surface differences and rounded corners
- Do not create thick stacked card compositions.

Illustration strategy:
- Use illustration or semi-realistic illustrated scenes only on:
  - Hero start pages
  - Generation/loading page
- 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 light, phone, headphones.
- Japanese-learning cues should be medium intensity:
  - a few fragments of Japanese characters
  - subtitle fragments
  - listening waveform hints
  - dialogue bubbles
  - small learning-card fragments
- Do not flood the screen with Japanese text.

Explicit visual bans:
- no fitness-app motivation poster energy
- no aggressive self-improvement or achievement-badge mood
- no glossy paywall energy in the first five templates
- no thick outlined cards
- no floating shadow cards
- no glassmorphism
- no anime poster look
- no stereotypical Japanese imagery like torii, sakura, traditional patterns
- no textbook-like learning UI
- no summary-report or achievement-report feeling on the plan page
- no settings-page or survey-tool feeling on decision pages

Positive emotional targets:
- bright but not loud
- encouraging but not slogan-heavy
- emotional but not salesy
- branded but not brand-saturated
- learning-oriented but not textbook-like

Template scope for the first pass:
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 this first pass.

Map the templates to the actual onboarding screens like this:
- Hero Start Template -> screens 01 / 02 / 03 / 07
- Single-Choice Decision Template -> screens 04 / 05 / 06 / 08 / 09
- Explanation + CTA Template -> screen 10
- Generation / Preparing Template -> screen 11
- Week-One Plan Delivery Template -> screen 12

Template requirements:

1. Hero Start Template
- Purpose: create first impression, establish both brand and emotional headline, make users feel they can start now.
- Structure:
  - status/safe area
  - brand name
  - emotional headline
  - optional subcopy or stage hint
  - primary CTA or auto-transition cue
  - atmospheric illustrated background
- Feel:
  - this is the most emotional template in the system
  - but it 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

2. Single-Choice Decision Template
- Purpose: serve as the core onboarding skeleton and collect key user preferences quickly.
- Structure:
  - back arrow
  - top stage progress
  - two-line title
  - 3 option cards
  - each option has primary label + secondary explanation
- Feel:
  - should clearly return to the existing product language
  - clean, readable, lightweight
  - no illustration
  - cards should feel tactile but light
- Selected state:
  - clear but not overdone
  - use subtle surface shift, small accent highlight, type weight shift, and/or a fine marker
  - do not make selection feel like a giant button

3. Explanation + CTA Template
- Purpose: explain "this is how you will start" and create confidence before the generation step.
- Structure:
  - back arrow
  - stage progress
  - title
  - 3 explanation blocks
  - primary CTA
- Feel:
  - more explanatory than the decision page
  - but not a detail page or value-proposition lecture
  - the 3 blocks should feel like clear action steps, not marketing bullets
  - keep the same borderless, shadowless, soft-surface card language

4. Generation / Preparing Template
- Purpose: 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
- Feel:
  - quieter and more focused than the Hero template
  - not a technical loading screen
  - should feel like the system is carefully organizing the user's first week

5. Week-One Plan Delivery Template
- Purpose: deliver the first real value and make the user feel they can start immediately.
- Structure:
  - back arrow
  - title
  - 4 plan modules
  - primary CTA
- Feel:
  - this must feel like an action page, not a summary page
  - the 4 modules should not feel like a generic checklist
  - keep the same light card language: borderless, shadowless, soft surfaces
  - stronger and steadier than decision cards, but still lightweight
- Prioritization inside the page:
  1. rhythm / time commitment
  2. first content recommendation
  3. support tools when blocked
  4. one-week expectation
- CTA:
  - should be visually clear
  - but the page must still feel like the plan itself is the main content
  - do not let it feel like a paywall pre-step

Use the existing exact copy below. Do not rewrite the wording in the first pass.

Hero Start screens:
- 01: 每日日语 / 慢慢长出语感
- 02: 边听边学 / 更容易开始 / 开始 / 我已有账号
- 03: 快速找到 / 适合你的 / 学习方式
- 07: 接下来， / 安排你的第一周 / 再看两步，就能开始。

Decision screens:
- 04: 你现在最想 / 改善什么？
  - 听懂一点 / 更容易跟上真实内容
  - 更敢开口 / 说的时候没那么卡
  - 重新开始 / 把学习接回来
- 05: 你最容易 / 卡在哪里？
  - 一听就丢 / 速度一快就断掉
  - 连不起来 / 认识词，放进内容就糊
  - 很难开始 / 知道该学，却总没开始
- 06: 你现在更接近 / 哪一种？
  - 刚开始 / 想轻松进入
  - 学过一点 / 但还是跟不稳
  - 基础还行 / 想更自然听懂
- 08: 这周你想留 / 多少时间？
  - 每天 5 分钟 / 轻一点，先开始
  - 每天 10 分钟 / 更稳一点，也不重
  - 每天 20 分钟 / 想更集中地往前走
- 09: 你想从哪类 / 内容开始？
  - 轻松听一听 / 更容易进入真实内容
  - 日常对话 / 更接近生活里会遇到的表达
  - 更有结构感 / 更适合想稳一点往前走

Explanation + CTA screen:
- 10: 你会这样开始
  - 先开始一条内容 / 先走一小步，更容易开始。
  - 卡住时再看一点 / 精听、AI 解析、查词，都会接住你。
  - 按你的节奏继续 / 先坚持一周，你会更容易听进去。
  - 生成我的计划

Generation screen:
- 11: 你的第一周， / 快整理好了
  - 正在匹配第一条内容
  - 正在整理这一周节奏
  - 正在准备辅助功能入口

Plan Delivery screen:
- 12: 这是你的 / 第一周
  - 每天 10 分钟 / 先把开始做顺，再慢慢加深。
  - 第一条内容：轻松听一听 / 一条更容易进入的真实内容，适合重新接回语感。
  - 遇到卡点时 / 精听、AI 解析、查词都会在你需要时出现。
  - 先坚持一周 / 你会更容易听进去，也更容易继续下去。
  - 正式开始

Expected output:
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
5. Spacing / typography / surface guidance inferred from the current iOS product design language

Success criteria:
- 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, not like settings or survey screens
- the explanation page feels clear, not verbose
- the generation page feels like careful preparation, not generic loading
- the plan page feels like "I can start now," not "here is a pretty summary"