Giggle Academy Components

Tokens

设计语言的最底层契约。13 色族 × 11 阶 ramp，Alpha 矩阵，Theme 状态色，Nunito + 方正兰亭圆 S 双语字体规范。每个上层组件必须引用 token，不允许写死值。

📐 数据来源：导入自 Giggle Tokens.xlsx（2026-05-03）。13 BaseColor 族 · Alpha 矩阵 · ThemeColor 状态 · Nunito + 方正兰亭圆 S 双语字体规范。点任一色块复制 var name。

Color · BaseColor

50
100
200
300
400
500
600
700
800
900
950
用途
neutral-gray
50
100
200
300
400
500
600
700
800
900
950
中性灰
neutral-slate
50
100
200
300
400
500
600
700
800
900
950
中性 slate
blue
50
100
200
300
400
500
600
700
800
900
950
⭐ 主 CTA
blue-gray
50
100
200
300
400
500
600
700
800
900
950
蓝灰
blue-dark
50
100
200
300
400
500
600
700
800
900
950
深蓝
red
50
100
200
300
400
500
600
700
800
900
950
错误
green
50
100
200
300
400
500
600
700
800
900
950
✓ 成功
yellow
50
100
200
300
400
500
600
700
800
900
950
警告
purple
50
100
200
300
400
500
600
700
800
900
950
中文/庆祝
orange
50
100
200
300
400
500
600
700
800
900
950
强调
sky
50
100
200
300
400
500
600
700
800
900
950
天空
pink
50
100
200
300
400
500
600
700
800
900
950
法语/活力
teal
50
100
200
300
400
500
600
700
800
900
950
青绿

Color · ThemeColor State

每个状态有 4 个阶（dark / base / light / lighter）+ light/dark mode 双套映射。

dark
base
light
lighter
state-error · light
#681219
#FF6673
#FFC0C5
#FFEBEC
state-error · dark
#FF6673
#E93544
alpha
alpha
state-warning · light
#E6A819
#FFD100
#F7DB48
#FFECC0
state-warning · dark
#FFD100
#E6A819
alpha
alpha
state-success · light
#001507
#0DB564
#82FFC2
#DBFFE5
state-success · dark
#0DB564
#067E44
alpha
alpha

Color · Alpha 矩阵

半透明色用于状态层叠（hover bg / disabled / 弱引导）。

slate
sl-72
sl-64
sl-48
sl-32
sl-24
sl-16
sl-10
blue
bl-24
bl-16
bl-10
orange
or-24
or-16
or-10
red
re-24
re-16
re-10
green
gr-24
gr-16
gr-10
yellow
ye-24
ye-16
ye-10
purple
pu-24
pu-16
pu-10
sky
sk-24
sk-16
sk-10
pink
pi-24
pi-16
pi-10
teal
te-24
te-16
te-10
white
wh-72
wh-64
wh-48
wh-24
wh-16
wh-8
wh-4
black
bk-72
bk-64
bk-48
bk-24
bk-16
bk-8
bk-4

Typography · GA 16 阶

10 size × 2 weight = 20 specimens。点击复制 var name。

Aa 你好 Giggle Academy
title.lg.bold · 48/64 · 800
Aa 你好 Giggle Academy
title.lg.medium · 48/64 · 500
Aa 你好 Giggle Academy
title.md.bold · 40/48 · 800
Aa 你好 Giggle Academy
title.md.medium · 40/48 · 500
Aa 你好 Giggle Academy
title.sm.bold · 32/38 · 800
Aa 你好 Giggle Academy
title.sm.medium · 32/38 · 500
Aa 你好 Giggle Academy
heading.lg.bold · 24/30 · 800
Aa 你好 Giggle Academy
heading.lg.medium · 24/30 · 500
Aa 你好 Giggle Academy
heading.md.bold · 20/26 · 800
Aa 你好 Giggle Academy
heading.md.medium · 20/26 · 500
Aa 你好 Giggle Academy
heading.sm.bold · 18/22 · 800
Aa 你好 Giggle Academy
heading.sm.medium · 18/22 · 500
Aa 你好 Giggle Academy
body.lg.bold · 16/20 · 800
Aa 你好 Giggle Academy
body.lg.medium · 16/20 · 500
Aa 你好 Giggle Academy
body.md.bold · 14/18 · 800
Aa 你好 Giggle Academy
body.md.medium · 14/18 · 500
Aa 你好 Giggle Academy
body.sm.bold · 12/14 · 800
Aa 你好 Giggle Academy
body.sm.medium · 12/14 · 500
Aa 你好 Giggle Academy
body.xs.bold · 10/12 · 800
Aa 你好 Giggle Academy
body.xs.medium · 10/12 · 500

Spacing

--space-14px
--space-28px
--space-312px
--space-416px
--space-624px · 卡内
--space-832px
--space-936px · 卡内大
--space-1664px · 移动 section
144px
--space-36144px · 桌面 section ⭐

Radius

--r-sm6px
--r-md8px · 标签
--r-lg ⭐12px · 主用
--r-xl16px · 卡
--r-2xl24px · 大卡
--r-pill药丸 · Tag

Shadow

规范：sharp shadow 使用 filter: drop-shadow(0 4px 0 同色族-400)——同色阶在下方偏移，无模糊，无 spread，最大厚度 4px。按下时 filter 消失元素下移到阴影位 → 糖果按压感。

filter sharp · blue ⭐drop-shadow(0 4 0 blue-400)
filter sharp · reddrop-shadow(0 4 0 red-400)
filter sharp · greendrop-shadow(0 4 0 green-400)
--shadow-sm细微柔影
--shadow-md卡片柔影 · 主用
--shadow-lg弹窗柔影
2 · Components

基础组件

基于 Token 拼装的最小可用组件。每个组件提供变量控制（slot / size / state），可即时预览并复用到产品。

Modal 是一个居中浮层，承担"打断当前任务、引导用户做出一次明确决定"的职责。所有内容元素（插画 / 标题 / 描述 / 关闭按钮 / 底部按钮）都是可选 Slot，组合自由。最少形态可以只有一行标题（用于轻量提示）+ 底部按钮，最多形态包含全部 5 个 Slot。

Usage · 适用场景
场景 推荐 Size 推荐配置
权限请求（如"开启录音"） md 插画 + 标题 + 描述 + 双按钮
确认型操作（如"确定退出？"） sm 标题 + 描述 + 双按钮（无插画）
功能引导 / 试学说明 md 插画 + 标题 + 描述 + 单主按钮
错误提示（轻量） sm 标题 + 描述 + 单主按钮
仪式感页面（如领取证书） lg 插画 + 标题 + 描述 + 双按钮
❌ 不适用场景
  • 全屏庆祝/恭喜页：用 Full-screen Page，不用 Modal（如试学完成的 CERTIFIED 页）
  • 轻量提示反馈（成功保存、网络错误）：用 Toast / Snackbar
  • 持续性引导（新手指引）：用 Coachmark / Tooltip
  • 复杂多步表单：用 Bottom Sheet 或独立页
  • 需要长时间停留的内容（如阅读条款）：用独立页
频次约束
  • 同一会话内 Modal 出现频率：≤ 3 次/会话，避免疲劳
  • 同一时刻只能存在一个 Modal：禁止 Modal 嵌套（破坏层级感）
  • Modal 与 Toast 不能同时出现：Modal 优先级高于 Toast
MD · EN · STATIC
形态
语言
尺寸
底部按钮 · footer

点预览中的按钮可看 press 态

关闭按钮（×）
插画
标题
描述
按钮文案

Button · 按钮

Configurator · 配置器
MD · 40 · PRIMARY · DEFAULT
812 × 375
尺寸 · size
变体 · variant
状态 · state
文案 · label
前置图标 · front icon
后置图标 · back icon
Press it · 试按
Sizes · 尺寸对照
Variants · 变体
变体 surface depth text 用途
primary--blue-400--blue-700--color-bg主操作（开始 / 下一步）
submit--green-400--green-600--color-bg提交 / 确认（Got it）
accent--yellow-400--yellow-700--color-text奖励 / 领取（Claim）
secondary--neutral-gray-100--neutral-gray-300--color-text次要操作（Cancel / 返回）
disabled--neutral-gray-300--neutral-gray-400--color-text-muted不可用（兜底硬灰）
Sizes · 尺寸规格
size height padding-x font-size depth 使用场景
lg · 484824184 px主 CTA · Modal 底部 · 关键决策
md · 404020163 px表单 / 工具栏 · 默认场景
sm · 323216142 px紧凑卡片 · 列表行内操作

Icon Button · 系统按钮

用于课程、故事书、任务系统等核心操作界面，承担退出、返回、分享、举报等主要操作功能。支持 Light / Dark 双主题与 5 种交互状态。

Types · 类型 · 交互演示

切换状态与主题查看不同样式；Default 状态下可直接 hover / 点击按钮验证 2 px 下沉效果。

状态 · state
主题 · theme
尺寸 · size
文字 · label
类型说明 · Reference
  • 菜单Menu 在主界面或课程中快速打开菜单。
  • 返回Back 返回上一级或退出当前界面。
  • 关闭Close 关闭弹窗 / 退出操作；S size 用于 Modal 角落。
  • 分享Share 社交分享或调用系统分享弹窗。
  • 前进Next 翻页或进入下一阶段。
  • 退出Quit 课程 / 故事书 退出（带文字以避免误点）。
  • 举报Report 提供反馈或举报内容入口（带文字以避免误点）。
  • 搜索Search dark only 工具栏的搜索入口。
  • 筛选Filter dark only 工具栏的筛选入口。
  • 书架Booklist dark only 切换到书架 / 已读书目。
Spec · 规格
属性 L · 默认 48 S · 紧凑 32 带文字 · Quit / Report
尺寸 48 × 48 px 32 × 32 px auto × 48 px
圆角 var(--r-2xl) · 24 16 px var(--r-2xl) · 24
内边距 8 5.33 8 14 8 8
图标尺寸 20 – 32 · 见 Glyph 21.33 32 + 文字
文字 · Label — — Nunito 800 · 12 / 12
下沉阴影 · Default inset 0 -2 0 #00000019 inset 0 -1 0 #00000019 inset 0 -2 0 #00000019
按压位移 · Pressed translateY(2px) translateY(1px) translateY(2px)
背景 · Light var(--color-bg) · #FFFFFF
背景 · Dark rgba(23, 23, 23, 0.24) · 黑色 24% 半透明
GA_SYSTEM_ICON_BUTTON_SPEC v1.0.0

机器可读合约源 · <script type="application/json" id="ga-system-icon-button-spec">


            

          

        

        
        
Progress · 进度


        
        
Progress 用于反映异步任务的完成度，让小朋友"等得有底"。三种形态对应不同场景：Bar 用于已知进度的全屏等待；Card border 在一个视觉锚点（icon / 物件）周围描边推进，配合"打开宝箱"式的仪式；Spinner 用于不确定时长的轻量等待，不显示百分比。


        
        
Usage · 适用场景

        

          

            
              

                场景
                推荐类型
                推荐配置
              

            
            
              

                全屏加载（已知进度，如生成学习路径）
                bar
                居中 · 显示 % · 带 caption
              

              

                围绕一个 icon / 对象等待
                card-border
                顺时针填充描边
              

              

                按钮内 / 局部 inline 等待（< 5 秒）
                spinner
                size 24 · 不显示 %
              

              

                课程下载 / 大文件传输
                bar
                配合估计剩余时间文案
              

              

                评测打分 / AI 处理仪式
                card-border
                icon = 评分 / AI 图标
              

            
          

        


        
        
❌ 不适用场景

        
    
          
  • 任务 < 1 秒：直接展示结果，不要展示 Spinner（一闪而过反而眼花）
    • 
          
  • 任务 > 30 秒：必须用 Bar（带 % + caption），Spinner 跑久了让人以为卡死
    • 
          
  • 真实进度未知却假装有 % 数：禁止“假进度条”（信任感崩盘）
    • 
          
  • 同屏多个 Progress 同时旋转：禁止（视觉嘈杂 · 注意力撕裂）
    • 
        


        
        
类型 1 · Bar 进度条

        
胶囊形进度条，外圈深色描边、内部条纹动画填充。可配合右侧百分比与下方 caption 文案，常用于全屏等待页。

        

          

            GREEN ·
            80%
          

          

        

        

          

            颜色 · color
            

          

          

            进度 · progress
            

              
              80
            

            
0100

          

          

            百分比数字
            

              
              
            

            
位于条右侧，白色加粗

          

          

            下方文案 · caption
            

              
              
            

            
          

        

        

        
        
类型 2 · Card border 卡片描边

        
围绕一个 icon / 物件，沿圆角矩形描边顺时针填充。适合"打开宝箱"式的仪式感等待，让小朋友的注意力锚定在主体上。

        

          

            YELLOW ·
            80%
          

          

        

        

          

            颜色 · color
            

          

          

            进度 · progress
            

              
              80
            

            
0100

          

          

            图标 · icon
            
            

              
              
              
            

            
居中显示在白色卡片内，120 × 120

          

          

            尺寸 · size
            

              
              
              
            

          

        

        

        
        
类型 3 · Spinner 加载圈

        
圆环旋转的轻量加载指示，不显示百分比。用于按钮内 / 局部 inline 的短暂等待（< 5 秒）。

        
        

          

            颜色 · color
            

          

          

            尺寸 · size
            

              
              
              
            

          

          

            速度 · speed
            

              
              
              
            

          

          

            数量 · count
            

              
              
              
            

            
多个时按 0.15s 错相位旋转

          

        

        

        
        
Tokens · 颜色映射

        

          

            
              

                color
                track（背景）
                fill（前景）
                ring（外圈）
              

            
            
              
red--red-300--red-500--red-700

              
blue--blue-300--blue-500--blue-700

              
green--green-300--green-500--green-700

              
yellow--yellow-300--yellow-500--yellow-700

              
purple--purple-300--purple-500--purple-700

              
orange--orange-300--orange-500--orange-700

              
pink--pink-300--pink-500--pink-700

              
sky--sky-300--sky-500--sky-700

            
          

        


        
        
Inputs · 输入控件


        
表单输入控件集合，覆盖三类交互：选择（Checkbox / Radio / Switch / Rating）、输入（Input / Textarea / Select）、调节（Slider / Color Picker / Image Upload）。所有样式严格基于 Token，sm/md/lg 三档尺寸与 Button 对齐。


        
        

          Selection · 选择类
          · 4 ·
          Checkbox · Radio · Switch · Rating
        


        
        

          

            
Radio · 单选 input/radio

          

          

            

              

                
unchecked

                
checked · primary

                
submit

                
disabled

                
sm · 16

                
md · 20

                
lg · 24

                
accent

              

            

            

              
Sizes · 尺寸

              

                

                  
sizecircledotlabel fontgap

                  
                    
sm166138

                    
md2081410

                    
lg24101612

                  
                

              

              
单选组内 name 必须一致；推荐使用 fieldset 包裹并提供 legend。

            

          

        


        
        

          

            
Switch · 开关 input/switch

          

          

            

              

                
off

                
on · primary

                
on · submit

                
disabled

                
sm · 24×16

                
md · 32×20

                
lg · 40×24

                
with label
                  
                

              

            

            

              
Sizes · 尺寸

              

                

                  
sizetrackknob使用场景

                  
                    
sm24 × 1612设置子项 / inline 行内开关

                    
md32 × 2016表单 / 设置主项（默认）

                    
lg40 × 2420家长面板 / 重要开关

                  
                

              

              
Variants · 颜色

              

                

                  
varianttrack-on语义

                  
                    
primary--blue-500默认开启

                    
submit--green-500确认 / 完成 / 已订阅

                  
                

              

            

          

        


        

          Input · 输入类
          · 3 ·
          Input · Textarea · Select
        


        
        

          

            
Input · 输入框 input/text

          

          

            

              

            

            

              
Configurator · 配置器

              

                

                  size
                  

                    
                    
                    
                  

                

                

                  variant
                  

                    
                    
                    
                  

                

                

                  state
                  

                    
                    
                    
                    
                    
                  

                

                

                  提示文字
                  
                

              

              
              
States · 状态

              

                

                  
stateborderbgring说明

                  
                    
default--neutral-gray-200--color-bg—未聚焦空状态

                    
focus--blue-500--color-bg--blue-100 3px键盘聚焦

                    
filled--neutral-gray-300--color-bg—有值未聚焦

                    
error--red-500--red-50--red-100 3px校验失败

                    
disabled--neutral-gray-200--neutral-gray-50—不可编辑

                  
                

              

              
Sizes · 尺寸

              

                

                  
sizeheightpadding-xfont-sizeradius

                  
                    
sm321013--r-md (8)

                    
md401214--r-md (8)

                    
lg481616--r-lg (12)

                  
                

              

            

          

        


        
        

          

            
Textarea · 多行输入 input/textarea

          

          

            

              

                
                
                
              

            

            

              
Sizes · 尺寸

              

                

                  
sizemin-heightpaddingfont-sizeradius

                  
                    
md7210 1214--r-md (8)

                    
lg9614 1616--r-lg (12)

                  
                

              

              
resize: vertical 默认开启；行高 1.55；状态系统与 Input 完全一致。

            

          

        


        
        

          

            
Select · 选择器 input/select

          

          

            

              

            

            

              
Configurator · 配置器

              

                

                  size
                  

                    
                    
                    
                  

                

                

                  state
                  

                    
                    
                    
                    
                  

                

              

              
              
States · 状态

              

                

                  
stateborderchevron说明

                  
                    
default--neutral-gray-200down未展开占位

                    
open--blue-500up展开列表，显示选项

                    
selected--neutral-gray-300down已选中值

                    
disabled--neutral-gray-200down (gray-300)不可选

                  
                

              

            

          

        


        
        

          Adjust · 调节类
          · 3 ·
          Slider · Color Picker · Image Upload
        


        
        

          

            
Slider · 滑块 input/slider

          

          

            

              

            

            

              
Configurator · 配置器

              

                

                  size
                  

                    
                    
                  

                

                

                  type
                  

                    
                    
                  

                

                

                  color
                  

                    
                    
                    
                    
                    
                    
                    
                    
                  

                

                

                  state
                  

                    
                    
                    
                  

                

              

              
              
Tokens · 颜色映射

              

                

                  
colortrackfillthumb-depth

                  
                    
blue--blue-100--blue-500--blue-700

                    
green--green-100--green-500--green-700

                    
red--red-100--red-500--red-700

                    
yellow--yellow-100--yellow-500--yellow-700

                    
purple--purple-100--purple-500--purple-700

                    
orange--orange-100--orange-500--orange-700

                    
pink--pink-100--pink-500--pink-700

                    
sky--sky-100--sky-500--sky-700

                  
                

              

              
Sizes · 尺寸

              

                

                  
sizetrack hthumb使用场景

                  
                    
md416表单 / 设置项（默认）

                    
lg620音量 / 进度 / 难度调节大 UI

                  
                

              

            

          

        


        
        

          

            
Color Picker · 颜色选择 input/color-picker

          

          

            

              

                
swatch · 8 brand
                  

                    
                    
                    
                    
                    
                    
                    
                    
                  

                

                
trigger · with picker
                  
                

              

            

            

              
Variants · 变体

              

                

                  
variant形态使用场景

                  
                    
swatch8 个品牌色色块横排主题色 / 标签色选择（默认）

                    
trigger按钮 + 当前色 + Hex + 取色 icon自由 HEX 选色（弹出 picker）

                  
                

              

              
swatch 推荐 8 色限定品牌色（color/500 阶）；trigger 形态可承接系统 input[type=color] 弹出自由取色。

            

          

        


        
        

          

            
Image Upload · 图片上传 input/upload

          

          

            

              

                
empty · md
                  
                

                
empty · lg
                  
                

                
preview
                  

                    
                  

                

                
uploading · 60%
                  

                    

                    60%
                  

                

                
error
                  

                    
                    Failed
                    Try again
                  

                

                
multiple · 2 / 3
                  

                    

                    

                    
                  

                

              

            

            

              
States · 状态

              

                

                  
stateborderbg说明

                  
                    
empty--neutral-gray-300 dashed--neutral-gray-50待选择文件

                    
hover--blue-500 dashed--blue-50拖入或悬停

                    
previewnone图片缩略图文件已选择

                    
uploading--neutral-gray-200--neutral-gray-50 + 进度条上传中

                    
error--red-500 dashed--red-50上传失败

                  
                

              

              
Sizes · 尺寸

              

                

                  
sizeboxradius使用场景

                  
                    
sm72 × 72--r-md (8)多图九宫格 / 头像缩略

                    
md120 × 120--r-lg (12)单图上传（默认）

                    
lg200 × 160--r-xl (16)封面 / 横版海报

                  
                

              

            

          

        


              

    


    
    

      

        3 · Animation
        
动画

        
动画段按「动效承担什么职责」分类，不按实现技术分类。每一条都给出定义、适用与不适用场景、行为描述与默认参数，并配一个可调参舞台 —— 参数改动会实时改到动画本体，下方代码块输出的是当前参数下可直接粘走的实现。

      

      


        
        
Object Move · 对象移动

        
Object Move 是单对象位移动效的调参基准，把 transform / opacity 与 30 条 ease 曲线放在同一个舞台上对照，用于在写代码前先定下"这个东西该怎么动"。它本身不是产品动效，是产出参数的工具。

        

          

            
              
适用确定新动效的位移量、时长与 ease 曲线；对齐设计与开发对"快慢"的口径

              
不适用直接把这里的默认值抄进产品 —— 默认值是为了演示曲线差异，不是推荐值

              
行为gsap.to() 单条 tween，参数与 ease 实时写入下方代码块

              
默认x 200 · scale 1.2 · rotation 180 · 1s · power2.out

            
          

        


        
        
Stage · 舞台

        

          

            1.00s ·
            power2.out
          

          

            
GO

          

          

            
            
            
            
          

        


        
        
Properties · 属性

        

          

            x · translateX (px)
            
          

          

            y · translateY (px)
            
          

          

            scale
            
          

          

            rotation (deg)
            
          

          

            opacity (0 – 1)
            
          

          

            duration (s)
            
          

          

            delay (s)
            
          

          

            repeat
            
            
-1 = 无限循环

          

          

            yoyo
            

              
              
            

          

        


        
        
Ease · 曲线

        


        
        
Code · 实时代码

        

          
          

        


        
        
Page Transition · 页面转场

        
Page Transition 是一组跨层级转场，用遮罩盖住旧页 → 换内容 → 揭开新页，用于让用户意识到"离开了刚才那一层"。与同层切换（见 Flip）职责不同，不可互换。

        

          

            
              
适用路由跳转、进入 / 退出玩法、章节切换

              
不适用同层内容替换（改用 Flip）；也不要在一次跳转里叠两种遮罩

              
行为Shape Overlays 用多层 SVG 曲线分时渐进覆盖；Curve Morph 用 MorphSVG 在两条路径间插值

              
默认Shape Overlays 仅需 gsap；Curve Morph 另需 MorphSVGPlugin（GSAP 3.13+ 免费）

            
          

        


        
Flip · 翻牌转场

        
Flip 是一个同层场景切换转场，一张卡沿单轴翻面，正反两面各承载一个场景，用于在不离开当前层级的前提下更换内容。透视值越小翻得越夸张，1000px 左右是"有立体感但不晕"的区间。

        

          

            
              
适用场景 A/B 切换、卡片正反面（题面 / 答案）、同层内容替换

              
不适用层级跳转（改用遮罩类转场）；也不要连续翻多次 —— 用户会丢失方向

              
行为纯 CSS 3D：容器 perspective + 卡片 preserve-3d + 双面 backface-visibility: hidden

              
默认600ms · perspective 1000px · Y 轴 · smooth

            
          

        

        

          

            

            

              

                

                  
🏫

                  
🌳

                

              

            

            

              
              
            

          

          

            

              duration (ms)
              
            

            

              perspective (px)
              
            

            

              axis · 翻转轴
              

                
                
              

            

            

              easing · 缓动
              

                
                
                
              

            

          

          

            
            

          

        


        
        
Click Feedback · 点击反馈

        
Click Feedback 是一组由一次点击直接触发的视觉回应，按强度分三级：Ripple 只确认"收到"，StarBurst 表示"你获得了什么"，Tap Effects 宣告"判定结果是什么"。同一次点击只能触发其中一级。


        
        
Ripple · 点击波纹

        
Ripple 是一个触点级确认反馈，以落点为圆心扩散一圈半透明色并淡出，用于告诉用户"这一次点击已被接收"。它不表达对错，只表达"收到"。

        

          

            
              
适用任何可点区域的即时反馈，尤其是点击后画面不会立刻变化的场景

              
不适用叠加在已有强反馈（弹跳 / 圈扩散 / 转场）的元素上 —— 会被读成两次独立事件

              
行为落点生成节点 → scale 0 → scaleTo、opacity 起始值 → 0 → 播完销毁节点

              
默认60px · opacity 0.55 · 500ms · ease-out

            
          

        

        

          

            

            

              点击舞台任意位置
            

            

              
              
            

          

          

            

              size · 直径 (px)
              
            

            

              opacity · 起始透明度
              
            

            

              scaleTo · 终点缩放
              
            

            

              duration (ms)
              
            

            

              color · 颜色
              

                
                
                
                
                
              

            

            

              easing · 缓动
              

                
                
                
              

              
原始实现是 ease-out

            

          

          

            
            

          

        


        
        
Sparkle · 内容更新闪光

        
Sparkle 是一个常驻状态标记而非点击反馈，几颗星星以各自独立的周期与延迟无限闪烁，用于标记"此处有未查看的新内容"。用户查看后必须移除。

        

          

            
              
适用入口图标 / 卡片角标上提示新内容、新解锁

              
不适用作为点击后的反馈；也不要长期挂在已被查看过的入口上 —— 会退化成纯装饰

              
行为每颗星独立 scale 0 → 1.2 → 1 → 0 无限循环，周期与延迟各不相同，刻意不同步

              
默认5 星 · 12–26px · 周期 1650–2950ms · 最大延迟 1560ms

            
          

        

        

          

            

            

              
Mai

            

            

              
              
            

          

          

            

              count · 星数
              
              
点位取自 8 点固定表，前 5 个即原始手调值

            

            

              minSize · 最小尺寸 (px)
              
            

            

              maxSize · 最大尺寸 (px)
              
            

            

              minDur · 最短周期 (ms)
              
            

            

              maxDur · 最长周期 (ms)
              
            

            

              maxDelay · 最大延迟 (ms)
              
              
延迟拉开才不同步；设 0 会变成齐闪

            

          

          

            
            

          

        


        
        
Tap Effects · 三大反馈特效

        
Tap Effects 是一组结果级粒子反馈，含点对（绿圈闭环）、点错（光点螺旋炸散）、收集成功（黄圈扩散）三条互斥特效，用于宣告一次判定的结果。粒子曲线与贴图烘焙在 mai-fx.min.js 内，只能整条选用，不能逐参数调节。

        

          

            
              
适用有明确对错判定的交互 —— 答题、找词、跟读打分

              
不适用无判定的普通点击（改用 Ripple）；三条特效也不可同时播放

              
行为由 MaiFX.EffectPlayer 运行时驱动，spawn(kind, x, y) 在落点播放一次

              
默认correct · 单发 · 特效时长见舞台角标

            
          

        

        

          

            

            

              
              点击舞台任意位置播放
            

            

              
              
            

          

          

            

              kind · 特效
              

                
                
                
              

            

            

              burst · 连发数
              
            

            

              interval · 连发间隔 (ms)
              
            

            

              loop · 自动循环
              

                
                
              

            

            

              loopEvery · 循环间隔 (ms)
              
            

          

          

            
            

          

        


        
        
Micro Motion · 微动效

        
Micro Motion 是一组幅度 < 20px、时长 < 1s 的低强度动效。它们不推进流程，只负责维持界面的存活感与即时反馈：待机呼吸、成功弹跳、失败摇晃、引导点击。全部零依赖（CSS keyframes + Web Animations API），幅度与周期均已抽为变量。


        
        
Card States · 选项卡三态

        
Card States 是选项卡的三态动效契约：待机微呼吸、答对弹跳并停在略大尺寸且卡心炸开黄圈、答错横向摇晃并置灰。三态互斥，任一时刻只允许一条在播。

        

          

            
              
适用单选题选项卡、找词卡片，以及任何有对错判定的可选对象

              
不适用三态混播（答错又弹又摇）—— 两条曲线撞在一起，孩子读不出结果

              
行为待机走 CSS 无限循环；答对 forwards 停在 popEnd 并 spawn 黄圈；答错等幅 6 摆 + grayscale(1)

              
默认呼吸 1.02 / 2000ms · 弹跳 1.18 → 1.057 / 280ms · 摇晃 4px / 500ms

            
          

        

        

          

            

            

              
              
Mai

            

            

              
              
            

          

          

            

              state · 状态
              

                
                
                
              

            

            

              breatheScale · 呼吸幅度
              
              
超过 1.05 就会像在跳，不像在待机

            

            

              breatheDur · 呼吸周期 (ms)
              
            

            

              popPeak · 弹跳峰值
              
            

            

              popEnd · 弹跳落点
              
              
停在 >1 的尺寸上，卡片就一直「亮着」

            

            

              popDur · 弹跳时长 (ms)
              
            

            

              shakeAmp · 摇晃位移 (px)
              
            

            

              shakeDur · 摇晃时长 (ms)
              
            

          

          

            
            

          

        


        
        
Shake · 目标晃动

        
Shake 是一个否定 / 受击反馈，沿单轴做一串递减位移，用于表达"这个不能点"或"这个刚被撞了一下"。衰减系数决定它读起来是弹性实体还是机械抖动，0.8 左右最像被碰了一下的实体。

        

          

            
              
适用锁定项被点击、输入校验失败、被飞行物击中的容器

              
不适用表达成功或进度；也不要用在大面积容器上 —— 会像页面出错

              
行为首帧幅度 amp，之后每摆 ×decay 并交替换向，末帧归零

              
默认5px · decay 0.78 · 5 摆 · 500ms

            
          

        

        

          

            

            

              
Letter

            

            

              
              
            

          

          

            

              amp · 首次位移 (px)
              
            

            

              decay · 衰减系数
              
            

            

              cycles · 摆动次数
              
            

            

              duration (ms)
              
            

            

              axis · 方向
              

                
                
                
              

              
旋转模式下 amp 的单位是 deg

            

          

          

            
            

          

        


        
        
Tap Guide · 手指点击引导

        
Tap Guide 是一个新手操作引导，一只手指在目标上方连点两下后长时间静止再循环，用于在用户卡住时指出下一步该点哪里。节奏中的"长静止"是必要成分，不是留白。

        

          

            
              
适用首次进入某玩法，或用户长时间无操作后的兜底提示

              
不适用常驻显示 —— 连续不停地点会退化成背景噪音，用户反而不看

              
行为每轮 taps 次"抬起 lift + 缩放 press"，占 cycle 的 taps×2×tapPct%，其余全部静止

              
默认2 连点 · 抬 8px · press 0.92 · 单次占比 8% · 每轮 3000ms

            
          

        

        

          

            

            

              

                
Letter

                
👆

              

            

            

              
              
            

          

          

            

              lift · 抬起高度 (px)
              
            

            

              press · 按下缩放
              
            

            

              taps · 每轮点击次数
              
            

            

              tapPct · 单次占比 (%)
              
              
剩下的时间全是静止；静止越长越不吵

            

            

              cycle · 整轮周期 (ms)
              
            

          

          

            
            

          

        


        
        
Float · 悬浮呼吸

        
Float 是一个存活感信号，沿 Y 轴做一条低幅正弦，用于让静止的角色或浮层看起来"是活的"。它不承载任何语义，唯一职责是对抗画面死寂。

        

          

            
              
适用待机角色、睡眠气泡、悬浮按钮、等待期的空状态插画

              
不适用紧邻需要聚焦阅读的文本区域；周期 <1.5s 显焦躁，>3s 看不出在动

              
行为translateY 0 → −amp → 0 无限循环

              
默认±6px · 2400ms · ease-in-out

            
          

        

        

          

            

            

              
Max

            

          

          

            

              amp · 位移幅度 (px)
              
            

            

              dur · 周期 (ms)
              
            

          

          

            
            

          

        


        
        
Storybook Sprite Reactions · 故事书专用精灵反应

        
Storybook Sprite Reactions 是一组故事书场景专用的角色点击反应，5 条预设各对应一类角色性格。幅度与速度倍率统一缩放全部关键帧，保证同一页里不同体型的精灵节奏一致。

        

          

            
              
适用故事书 / 探索页里可点的角色与物件

              
不适用功能性 UI 控件（按钮、开关）—— 会让用户误以为那是可玩对象

              
行为squeak 短促两下 · dive 沉下再浮起 · wag 左右摆尾 · meow 抬头拉长 · hopflap 先跳后扑翅

              
默认squeak · 幅度 ×1 · 速度 ×1（×1 = 原始工程数值）

            
          

        

        

          

            

            

              
Mai

            

            

              
              
            

          

          

            

              action · 动作
              

                
                
                
                
                
              

            

            

              amplitude · 幅度倍率
              
              
1 = 原始工程数值

            

            

              speed · 速度倍率
              
              
值越大越快（时长 ÷ 倍率）

            

          

          

            
            

          

        


        
        
Collect Flight · 收集飞行

        
Collect Flight 是一条三段式收集反馈链：物体沿二次贝塞尔弧线飞向收纳目标 → 目标晃动 → 落点圈扩散。三段是一个整体，缺任何一段用户都会追问"东西去哪了"。

        

          

            
              
适用单词收集、道具入包、答对后的物品归位

              
不适用拆成单段使用；也不要用在没有明确"收纳容器"的场景 —— 飞行需要一个终点

              
行为起点复制飞行体 → 采样 frames 帧贝塞尔路径 → 弹大到 scalePop 再缩到 scaleEnd → fadeFrom 后淡出 → 落地触发晃动与圈扩散

              
默认1100ms · 28 帧 · 1.12 → 0.28 · 弧高 ×0.4（上限 180px）

            
          

        


        
Stage · 舞台

        

          

            

            

              
              
Mai

              
Letter

            

            

              
              
            

          


          
Properties · 属性

          

            

              duration · 飞行时长 (ms)
              
            

            

              frames · 采样帧数
              
              
贝塞尔要手动采样成关键帧；低于 12 帧会看出折线

            

            

              pop · 弹大位置 (0–1)
              
            

            

              scalePop · 弹大倍数
              
            

            

              scaleEnd · 落点缩放
              
              
缩到很小才像「被收进去了」

            

            

              fadeFrom · 淡出起点 (0–1)
              
            

            

              arcRatio · 弧高系数
              
              
× 起止直线距离；0 = 直线飞

            

            

              arcMax · 弧高上限 (px)
              
            

            

              shakeAmp · 目标晃动 (deg)
              
            

            

              shakeDur · 晃动时长 (ms)
              
            

            

              anticipate · 迎接放大
              
              
目标在道具飞近时张口变大，落地再收回

            

            

              anticipateFrom · 起始点 (0–1)
              
              
太早开始会像目标自己在呼吸

            

            

              revealHold · 图标停留 (ms)
              
              
落地后浮出刚收下的道具，停留这么久再淡出

            

            

              revealFade · 淡出时长 (ms)
              
            

            

              ring · 落地圈扩散
              

                
                
              

            

          


          
Code · 实时代码

          

            
            

          

        


        
        
Loading · 加载

        
Loading 是一条等待期安抚曲线，用指数逼近爬到 cap% 后停住，真数据返回时一步冲到 100%。它刻意不诚实映射真实进度 —— 用户需要的是"它还在动"，不是精确百分比。

        

          

            
              
适用时长不可预测的加载 —— 首屏、资源包、网络请求

              
不适用时长已知且可精确计算的进度 —— 那种情况应直接映射真实值

              
行为每 tick 吃掉剩余距离的 approach 比例 + floor 保底步长；到 cap 停表，dashDelay 后跳 100%；条纹全程流动

              
默认cap 90% · approach 0.08 · floor 0.5% · tick 150ms · 冲刺延迟 300ms

            
          

        


        
Stage · 舞台

        

          

            

            

              

                

                0%
              

            

            

              
              
            

          


          
Properties · 属性

          

            

              cap · 卡点 (%)
              
            

            

              approach · 逼近系数
              
              
每 tick 吃掉剩余距离的这个比例

            

            

              floor · 每 tick 保底 (%)
              
              
没有保底，指数逼近到后面会肉眼可见地停住

            

            

              tick · 步进间隔 (ms)
              
            

            

              dashDelay · 冲刺延迟 (ms)
              
            

            

              widthDur · 宽度过渡 (ms)
              
            

            

              stripeDur · 条纹流速 (ms)
              
              
条纹一直流，让「卡在 90%」也不像死掉

            

            

              theme · 主题
              

                
                
              

            

          


          
Code · 实时代码

          

            
            

          

        


        
        
Ambient · 环境氛围

        
Ambient 是一类不指向任何具体对象的全局氛围动效。本条"边缘音波"沿舞台四边生成采样点，每点沿法线按独立随机相位起伏，绘成渐变条带后整体高斯模糊，用于表达"时间变慢了"这类全局状态。

        

          

            
              
适用限时挑战的子弹时刻、录音中、全局状态切换

              
不适用与页面内其他动效同时播放 —— 全局层和对象层会互相抢注意力

              
行为roundedRectPerimeter 生成 points 个采样点 → waveDepth 逐点求深度 → 梯形条带画到离屏 canvas → blur 后贴回

              
默认260 点 · 带深 44px · 振幅 26px · 模糊 10px · sky（模糊是效果本体，设 0 会露出条带拼缝）

            
          

        


        
Stage · 舞台

        

          

            

            

              
              音波沿舞台四边内缩
            

            

              
              
            

          


          
Properties · 属性

          

            

              points · 采样点数
              
              
点数决定边缘的细碎程度，也是主要开销

            

            

              bandDepth · 带深 (px)
              
            

            

              minDepth · 最小深度 (px)
              
            

            

              amplitude · 振幅 (px)
              
            

            

              speed · 速度
              
            

            

              blur · 模糊 (px)
              
              
模糊是这个效果的灵魂；设 0 会露出条带拼缝

            

            

              aOut · 外沿透明度
              
            

            

              aMid · 中段透明度
              
            

            

              color · 颜色
              

                
                
                
                
              

            

          


          
Code · 实时代码

          

            
            

          

        


        
        
Text Motion · 文字动效

        
Text Motion 是一组由文字与小图标自身承担的节奏动效。在跟读场景里它们承担实时定位职责 —— 告诉用户"现在念到这里"、"此刻正在出声" —— 因此节奏必须与音频严格对齐。


        
        
Karaoke · 逐词高亮

        
Karaoke 是一个实时朗读定位标记，按固定间隔逐字推进已读区间，用于在跟读时告诉用户"现在念到这里"。节奏必须与音频对齐，快慢都会让用户跟丢。

        

          

            
              
适用跟读、听力字幕、分级阅读的引导朗读

              
不适用同一课内混用 mark 与 color 两种模式 —— 用户会以为它们表示不同含义

              
行为每 tick 推进一个字符，已读段按模式套底色或换字色，未读段保持弱色

              
默认55ms/字（≈ 正常语速）· mark 模式

            
          

        

        

          

            

            

              

            

            

              
              
            

          

          

            

              text · 文本
              
            

            

              tick · 每字间隔 (ms)
              
              
55ms ≈ 正常语速；跟读要跟音频对齐

            

            

              mode · 模式
              

                
                
              

            

          

          

            
            

          

        


        
        
Pronounce Icon · 发音图标

        
Pronounce Icon 是一个音频播放中指示器，声波弧逐圈亮起后归零循环，是"此刻正在出声"的唯一视觉证据。音频停止时必须同步停止并复位到满圈。

        

          

            
              
适用单词发音按钮、跟读示范，以及任何点击后播放音频的图标

              
不适用作为"可点击"的常驻提示循环 —— 会让用户一直等一个不会来的声音

              
行为arcs + 1 帧循环，第 f 帧点亮前 f 圈弧，帧间隔 frameGap

              
默认2 圈 · 240ms/帧 · 一轮 720ms（<120ms 会闪得像故障）

            
          

        

        

          

            

            

              
                
                
                
              
            

            

              
              
            

          

          

            

              frameGap · 帧间隔 (ms)
              
              
低于 120ms 会闪得像故障

            

            

              arcs · 声波圈数
              
            

          

          

            
            

          

        


      

    


    
    

      

        4 · Asset
        
资产

        
静态背景与可平铺底纹。Background 为完整 SVG 资源；Pattern 为无限平铺 tile，支持元素疏密、底色、方向调节。

      

      


        
        
Brand · 品牌 Logo

        
Giggle Academy 官方 logo 三版本。所有跨产品物料应通过本目录调用，禁止外部传文件、重命名、加滤镜、改色。

        

          Logo 锁定版
          · 3 ·
          纵向 / 横向 / 纯图形
        


        
        

          

            
纵向锁定版 brand/logo-vertical

            GA 已采纳 · canonical
          

          

            

              Giggle Academy 纵向锁定版
            

            

              

                
aspect276 × 97 (~2.85 : 1)

                
组成Logo 左 + 文字两行右

                
气质稳定 / 正式 / 呼吸感

                
调用 pathassets/brand/logo-vertical.svg

                
formatSVG · 24 KB · vector

              

              

                
用：核心品牌位 — App 启动页、官网顶部、证书认证、对外正式物料（PR 稿、合作 PPT 封面）。这是"完整版品牌签名"，传达机构感和权威感。

                
禁：拉伸 / 压扁 / 拆分文字与图形 / 在低对比背景使用原色（待补反色版本）。

              

            

          

        


        
        

          

            
横向锁定版 brand/logo-horizontal

            GA 已采纳 · canonical
          

          

            

              Giggle Academy 横向锁定版
            

            

              

                
aspect357 × 56 (~6.4 : 1)

                
组成Logo 左 + 文字一行右

                
气质紧凑 / 灵活 / 高频

                
调用 pathassets/brand/logo-horizontal.svg

                
formatSVG · 24 KB · vector

              

              

                
用：横向受限的高度敏感场景 — 产品顶部 Header、邮件签名、视频片头、横幅 Banner。这是日常工作版本，使用频率最高。

                
禁：拉伸 / 压扁 / 拆分。在紧凑布局放纵向版会让其显得太大、夺戏。

              

            

          

        


        
        

          

            
纯图形版（仅笑脸标） brand/logo-mark

            待补 SVG
          

          

            

              Giggle Academy 纯图形版
              
              
            

            

              

                
aspect97 × 97 (1 : 1)

                
组成仅笑脸图形

                
气质亲和 / 轻量 / 极简

                
调用 pathassets/brand/logo-mark.svg

                
formatSVG · 4.5 KB · vector

              

              

                
用：品牌已被识别后的简化场景，或空间极度受限处 — App icon、Favicon、社交媒体头像、产品内角色身份标识、徽章贴纸、Loading 动画。

                
缩放：SVG 矢量任意缩放无失真。常见用法 24 / 48 / 97，更大尺寸用纵向锁定版替代。

                
禁：把笑脸标拉伸 / 压扁 / 加滤镜 / 改色（待提供单色 / 反色变体后才允许）。

              

            

          

        



        
        
Background Library · 静态背景资源

        
19 个 SVG 矢量背景，按 5 类组织。所有 token 形如 var(--bg-*)。点缩略图复制 token；点 应用 实时铺到整站背景。使用场景为提议版，待 review。


        
        

          深色 Dark
          · 4 ·
          Onboarding · 注册 · 登录 · 表单 · 价值传递
        

        

          

            

            

              宇宙空间主题
              --bg-dark-cosmos
              Onboarding 主流程 · 注册 / 登录 · 表单 · 产品价值传递（已确认 · 来自 Figma 注释）
            

          

          

            

            

              深蓝 1（带月亮）
              --bg-dark-blue-1
              提议 · 设置页 / 个人中心（"安静的夜"，弱化的故事感）
            

          

          

            

            

              深蓝 2（山形）
              --bg-dark-blue-2
              提议 · 表单 / 输入页（带山形装饰，更克制）
            

          

          

            

            

              深蓝 3（浪线）
              --bg-dark-blue-3
              提议 · 全屏深色 hero / 内嵌 modal 黑底（最简，仅浪线）
            

          

        


        
        

          课程 Course
          · 3 ·
          Lesson 主舞台（按主题切换）
        

        

          

            

            

              草地主题
              --bg-course-grass
              提议 · Lesson 草地主题（动物 · 植物 · 数字 · 颜色基础课）
            

          

          

            

            

              沙漠主题
              --bg-course-desert
              提议 · Lesson 沙漠主题（探索 · 地理 · 沙漠动物 · 季节词汇）
            

          

          

            

            

              天空主题
              --bg-course-sky
              提议 · Lesson 天空主题（天气 · 颜色 · 自然现象 · 飞行类）
            

          

        


        
        

          中性肌理 Neutral
          · 6 ·
          默认背景 · 卡片底纹 · 中性容器
        

        

          

            

            

              Giggle 肌理
              --bg-neutral-giggle
              提议 · 默认应用背景（最常用 · 含 Giggle 标志肌理）
            

          

          

            

            

              三角形肌理
              --bg-neutral-triangle
              提议 · 设置 / 工具 / 帮助页（次级容器）
            

          

          

            

            

              米色原点
              --bg-neutral-dots
              提议 · 卡片底（温暖 · 单词卡 / 提示卡 / 阅读卡）
            

          

          

            

            

              浅绿网格
              --bg-neutral-grid-green
              提议 · 学习 / 成长容器（进度页 · 周报告 · 成就页）
            

          

          

            

            

              浅蓝网格
              --bg-neutral-grid-blue
              提议 · 信息 / 规则容器（说明 · 帮助 · 家长门后台）
            

          

          

            

            

              绿色涂鸦底纹
              --bg-neutral-doodle
              提议 · 单词卡首页 · 游戏入口（活泼，有手绘感）
            

          

        


        
        

          情境 Scene
          · 5 ·
          特定场景画布（学院 · 森林 · 舞台 · 木纹）
        

        

          

            

            

              学院
              --bg-scene-academy
              提议 · Home Hub / 主入口大厅（建筑插画 · 课程地图）
            

          

          

            

            

              学院（紫条纹）
              --bg-scene-academy-purple
              提议 · 剧场 / 演出场景 / 课堂仪式（紫色幕布感）
            

          

          

            

            

              森林
              --bg-scene-forest
              提议 · 探索类课程 / 故事场景 / 冒险副本
            

          

          

            

            

              舞台
              --bg-scene-stage
              提议 · 庆祝舞台 / 演出 / 录音回放（圆台居中）
            

          

          

            

            

              木纹
              --bg-scene-wood
              提议 · 暖纹理底（社区 / 留言板 / 家长侧）
            

          

        


        
        

          英雄时刻 Reward
          · 5 ·
          高光时刻 / 奖励画面专用底（光圈 + 光线放射）
        

        

          

            

            

              光圈 · 金色
              --bg-reward-halo-gold
              规范 · 关卡通关 / 满分 / 升级（角色居中 · 金色光圈聚焦）
            

          

          

            

            

              光圈 · 金色 + 云朵
              --bg-reward-halo-gold-clouds
              规范 · 大成就 / 章节完成 / 排行榜首（金色光圈 + 蓝天云朵 · 最高光时刻）
            

          

          

            

            

              光圈 · 天蓝色
              --bg-reward-halo-sky
              规范 · 中等奖励 / 进度达成 / 解锁新内容（蓝色平静感 · 替代金色用于次级时刻）
            

          

          

            

            

              光圈 · 天蓝（淡）
              --bg-reward-halo-sky-light
              规范 · 轻量正反馈 / 小奖励 / 答对提示底（淡蓝 · 不抢戏前景动效）
            

          

          

            

            

              光线 · 金色
              --bg-reward-rays-gold
              规范 · 颁奖 / 证书 / 高强度爆发时刻（放射状光线 · 推荐配合 0.6s 旋转动效）
            

          

        


        
        

          启动 Splash
          · 1 ·
          App 启动闪屏（仅一帧 1500ms 入场）
        

        

          

            

            

              启动闪屏
              --bg-splash
              App 启动唯一闪屏（白底 + Giggle Logo）
            

          

        


        
        
平铺底纹

        
选择内置 motif 或上传任意 SVG 作为图形，调节疏密（图形间距）、角度、底色后实时预览，可一键应用到整站。下方 10 张卡为已收录的 CSS 平铺 token 参考。


        
        

          

            

          

          

            

              
              
            

            

              
              
            

            

              
              
            

            

              
              
            

            

              
              
            

            

              
              
            

            

              
              

                
                
                
                
                
                
                
              

            

            

              
              

                
                
                
              

              

                
                
                
              

            

            

              
              

                
                
              

            

          

        


        

          

            

            .pattern-dots
            圆点 · 32px tile
          

          

            

            .pattern-leaf
            叶片 · 80px tile（Animal Island 风）
          

          

            

            .pattern-sparkle
            星星 · 60px tile
          

          

            

            .pattern-wave
            波浪 · 80×40 tile
          

          

            

            .pattern-cloud
            云朵 · 100×60 tile
          

          

            

            .pattern-grid
            网格 · 24px tile（坐标纸）
          

          

            

            .pattern-topo
            等高线 · 120×80 tile
          

          

            

            .pattern-bubbles
            气泡 · 90px tile
          

          

            

            .pattern-wiggle
            抖动线 · 100×30 tile
          

          

            

            .pattern-hideout
            蜂巢 · 40×34 tile
          

        



        
        
Illustration · 插画库


        

          

            

              
              
            

            

              
            

          


          

            

            
            
          


          


          

          

          
        


      

    


    
    

      

        
通用页面

        
完整页面模板。每个模板用 GA tokens + 组件构建，PRD 流程中识别匹配场景时直接调用，仅替换 [data-bind] 节点，不要重新设计。

      

      


        
        

          Welcome · 欢迎页
          
        


        
未登录 / 冷启动入口。单 CTA + 品牌展示 + 法律占位三件套。888×500 master canvas → 裁切为 iOS 812×375 / iPad 666×500 / Android 888×375 三个 size。


        

          
          
          
        


          
          

          
          


            
            

              
iOS · 812 × 375

              

                

                  
                  
                  
                  
                  
一所开放给全世界孩子的
免费英语启蒙学院

                  
                  
继续使用即表示您同意我们的服务条款和隐私政策。

                

              

            


            
            

            
            

          


          
          
            

              

                
GA_WELCOME_SPEC v1.0.0

                
机器可读合约源 · <script type="application/json" id="ga-welcome-spec">