Ray The Whale
注册登录Open App
P-07

Ray The Whale Product Design System

Stage A：Flow Spec + Component Preview + Illustration Assets（No backend wiring）

Review Mode
ST-001

Review Numbering Protocol

评审统一引用编号，不使用“左上角那个按钮”等模糊表述。

P-XX: 页面编号
C-XXX: 基础控件编号
M-XXX: 业务模组编号
FXX-SYY: 流程步骤编号
ST-XXX: 状态编号
TX-XXX: 文案编号
C-000

Design Tokens

Color Tokens

--color-primary-50

--color-primary-200

--color-primary-400

--color-primary-500

--color-accent-green

--color-accent-amber

--color-error

--color-bg-card

Type + Radius + Motion

text-h1 / 28px / 700

text-body / 16px / 1.5

motion-fast: 200ms / motion-gentle: 800ms

C-001~C-009

Base Components Preview

C-001

Button

C-002

Input

C-003

Tag

TX-021 New
C-004

Toast

ST-041 识别完成，待确认 12 条。
C-005

ProgressBar

TX-032 10 / 20

C-006

Toggle

TX-042 自动朗读例句
C-007

Tabs

TX-051 RayTX-052 词库TX-053 录入
C-008

Modal

TX-061 确认删除词条？

ST-072 二次确认，避免误删。

C-009

Badge

3
M-001~M-010

Composed Modules Preview

M-001

QuizCard

00:20例句优先，目标词高亮，20s 倒计时，6选1
8 / 20

TX-031 例句

She took her um·brel·la because it was about to rain.

🔊 播放中…

umbrella

M-002

ErrorReviewPanel

错误后强制复盘
✗答题错误 — 让我们来复习一下

✓ 正确答案

umbrella

雨伞 ☂️

She took her umbrella because it was about to rain.

强制朗读后可 Continue
M-003

MessageBubble

IM 时间线消息流
📷 photo.jpg

09:31

正在识别中…

09:31

识别完成

发现 6 个词条，请确认

09:32

✗识别失败：图片模糊

09:33

M-004

OCRPreviewCard

可编辑、可删除、可确认

umbrella

She took her umbrella.

已确认

raindrop

Raindrops began to fall.

puddle

He jumped in the puddle.

M-005

CommitBar

批量确认与单条确认

6

识别词条

2

已确认

4

待确认

0

已删除

确认后词条状态将变为 New，进入复习队列

M-006

WordCard

word + 状态 + nextReviewAt

umbrella

New

She took her umbrella.

下次复习

明天

rainbow

Learning

A beautiful rainbow appeared.

下次复习

2天后

thunder

Weak

Thunder rumbled in the distance.

下次复习

今天

sunshine

Mastered

The sunshine warmed her face.

下次复习

7天后

M-007

PaywallSheet

价值先体验后触发升级
🐋 你的免费 OCR 额度已用完（10/10），升级解锁无限录入

Free

¥0

✓ 每日 20 题

✓ OCR 10 次

✗ 飞书渠道

✗ 无限录入

推荐

Ray Plus

¥28/月

✓ 每日 100 题

✓ 无限 OCR

✓ 飞书渠道

✓ 优先识别

订阅到期后自动回落至免费版，数据不丢失

M-008

ChannelConfigCard

Feishu 凭据掩码 + 连通性
飞书机器人已连接上次同步：2 分钟前
cli_a1b2****ef90
••••••••••••••••
https://open.f****.cn/open-apis/bot/v2/hook/abc123
M-009

ReminderSettingsGroup

提醒频率、静默时段、开关

学习提醒

在指定时间推送学习提醒

提醒频率

每日最多提醒次数

偏好时间

首选提醒发送时间

18:00

静默时段

此时段内不推送任何提醒

22:00–07:00

连续天数提醒

Streak 即将中断时额外提醒

M-010

DailyComplete

今日完成反馈 + Ray Full
🐋
✨🫧
Ray Full!

今天的 Ray 很满足 🎉

🎉 今日学习完成！

太棒了，Ray 已经喝饱了

📝

20

完成题数

🎯

85%

正确率

🔥

7天

连续天数

新学单词

+5

复习单词

15

明天 Ray 又会期待你的到来 🌊

F01~F13

Flow Snippets (Spec Linked)

F01

Auth / App Entry

Doc: 01.02.02

Step ID Sample: F01-S01

F02

Onboarding + Demo

Doc: 01.02.03

Step ID Sample: F02-S02

F03

IM Intake (App)

Doc: 01.02.04

Step ID Sample: F03-S03

F04

Preview / Commit

Doc: 01.02.05

Step ID Sample: F04-S01

F05

Quiz Happy Path

Doc: 01.02.06

Step ID Sample: F05-S02

F06

Error Review + Requeue

Doc: 01.02.07

Step ID Sample: F06-S03

F07

Daily Complete + Ray

Doc: 01.02.08

Step ID Sample: F07-S01

F08

Vocabulary Manage

Doc: 01.02.09

Step ID Sample: F08-S02

F09

Settings + Daily Cap

Doc: 01.02.10

Step ID Sample: F09-S03

F10

Feishu Channel

Doc: 01.02.11

Step ID Sample: F10-S01

F11

Reminder / Reactivation

Doc: 01.02.12

Step ID Sample: F11-S02

F12

Paywall / Plan

Doc: 01.02.13

Step ID Sample: F12-S03

F13

Privacy / Export / Delete

Doc: 01.02.14

Step ID Sample: F13-S01