白光
Light界面：中性底色与文字。
规则：冷调近白，暗色主题是“暗室”。正文只用 ink、ink-2、ink-3 三级。
GEO 设计语言 · 草案 v3
一束光，折射成光谱
Prism 棱镜是 GEO 平台的设计语言。GEO 把一篇文章送进搜索引擎、AI 回答、社媒和站群，像棱镜把一束白光折射成光谱。界面就是那块棱镜：本身透明、精确，不和内容争夺注意力；颜色只在光被折射的地方出现，也就是有信息的地方。
1束主光
每屏只有一个主操作被品牌色点亮，其余都是未受光的玻璃。
6条光谱色带
分发、账单、站群、搜索、内容、AI 各一种颜色，只用来识别和表达数据。
5层玻璃
从台面到覆盖层，层级靠厚度、投影和顶边高光表达，不靠描边。
4种弹簧
所有运动来自同一组弹簧参数，时长是计算结果，不是拍脑袋定的数。
核心隐喻
五个词，管住整套界面
白光、棱镜、主光、光谱、折射。每个词对应界面里的一类东西，并带一条硬规则。遇到规范没写到的情况，先问这一处在隐喻里是什么。
平板 · 1 层
浮起 · 3 层
棱镜
Glass界面：卡片、菜单、对话框这些表面。
规则：厚度就是层级。顶边受光的 1px 高光代替描边，越高越亮。
主光
Key light界面：品牌色 Iris。
规则：一屏只有一束主光，照在主操作和当前位置上，面积不超过 10%。
光谱
Spectrum界面：六条领域色带、状态色和数据颜色。
规则：颜色只表达信息，按波长排序。装饰位置一律用中性色。
折射
Refraction界面：动效。点一下上面的筛选标签，浅色从指尖位置展开。
规则：运动从光源出发，向外散开，关闭时收回原处。
白光：一篇文章编辑器里写下的原始内容
棱镜：GEO 平台改写、翻译、审核、排期
光谱：各个渠道搜索、AI 回答、社媒、站群
为什么是棱镜
Why产品做的事就是“一进多出”。界面借用同一个结构，用户看到颜色，就知道内容去了哪里。
设计原则
五条原则，每条都能验证
原则用来做取舍。每张卡片下方是一条可以量出来的规则，上方是可以动手试的例子。
一束主光
每屏只有一个主操作被 Iris 点亮。打开下面的开关，看看所有东西都亮起来时会发生什么。
品牌色面积≤ 10%· 主按钮每屏 1 个
Google
8,677
Bing
4,512
Perplexity
2,980
ChatGPT
1,104
Yandex
2,041
只有下降超过 30% 的 ChatGPT 用了红色，一眼就能找到。
色即信息
颜色只出现在领域识别、数据、状态上。切到“滥用”，同一组数据就找不到重点了。
光有来处
点两个按钮：菜单从各自的按钮长出来，左边的向右下展开，右边的向左下展开，选项依次出现。
出现利落弹簧 · 0.96→1· 离场150ms 退出曲线
平板 · 1 层卡片
玻璃有厚度
拖动滑块，同一块玻璃从台面升到覆盖层：投影变宽变柔，顶边高光一直在。全程没有一根描边。
结构线0 根· 层级0–4
搜索点击9,691
AI 推荐率32.1%
光随手动
任何输入在 100ms 内得到光学反馈。把指针移到卡片上：卡片受光抬起，柔光跟着指针走；按下时贴近台面；用 Tab 键聚焦时，一圈光束收拢到卡片边缘。
反馈≤ 100ms· 悬停+1 层 · 上移 1px· 按下0.99
色彩
白光打底，光谱表意
中性色是白光，品牌色 Iris 是主光，六条领域色带是光谱。下面的色块读取当前主题的真实令牌，切换右上角的主题即可对照。
白光 · 中性色
冷调近白，色相 265。表面按 canvas → surface → container 逐级区分，不靠描边。
canvas 台面#f3f6fb · #0c0f14
surface 玻璃#ffffff · #16191f
container 容器#edf0f6 · #1f232b
container-high#e4e7ef · #282d36
separator 分隔#e0e3ea · #2c3039
ink 正文#191e29 · #f2f3f7
ink-2 次要#515763 · #b1b6bf
ink-3 辅助#656a75 · #8e929b
主光 · Iris
色相 270 的蓝紫。只照亮主按钮、当前导航、焦点环和链接。
Iris
brand · #415ae0 / #6b89f9 · oklch(0.53 0.205 270)
主按钮文字：亮色白 5.6:1 · 暗色 canvas 6.0:1
brand主按钮、当前导航图标、焦点环、链接
brand-hover主按钮悬停 · #384ecf / #7d9bff
brand-tint已选标签、选中行、品牌色徽标底
on-brand-tintbrand-tint 上的文字与图标
光谱 · 六条领域色带
按波长从长到短排列。每条色带三档：实色（图标、图表线）、tint（图标块、标签底）、on-tint（tint 上的文字）。
distribution · 50
分发
社媒分发、平台账号
已分发 12billing · 80
账单
订阅、订单、代理返佣
本月 ¥2,400cluster · 155
站群
站群站点、域名
3 个站点search · 205
搜索
SEO、GSC、关键字
被提及content · 250
内容
文章、栏目、媒体、采集、审核
16 篇ai · 300
AI
AI 生成、GEO 推荐、MCP
被推荐图表系列为了相邻可分辨，按 内容 → AI → 搜索 → 分发 → 站群 → 账单 取色。
状态色
状态徽标 = tint 底 + on-tint 文字 + 图标，不加边框。
已发布#0e8c41 / #62c37a
完成、通过、在线、增长。
配额将用尽#bc7400 / #e19b34
需要留意但还能继续，如配额 ≥ 80%。
发布失败#bc4945 / #f7857d
失败、驳回、下降、不可逆操作。
审核中#007dc2 / #47b5fa
进行中、排队、提示信息。
色散 · 只在三处出现
六条色带连成的渐变是本语言最强的视觉符号，所以严格限量。
AI 生成摘要：选购智能灯泡的 5 个要点
色温、显色指数、协议兼容性、功耗和售后。
1 · AI 生成内容的色散边
卡片顶部 2px，告诉用户这段内容来自 AI，需要人工确认。
2 · 品牌标识与官网 Hero
标识里的三角就是棱镜。官网首屏可以用一次色散光束。
3 · 成功确认的一次光扫
点一下按钮：完成时一道色散光从左扫到右，600ms，只扫一次。
不要整块背景渐变、按钮渐变、文字渐变、把色散当装饰边框。
光谱条 · 本语言独有的数据图形
一篇内容在各渠道的分布，用分段横条表达：高 8–12，段间 2px 缝，圆角 full。把指针移到图例上可以单独查看。
对比度 · 实时计算
读取当前主题的令牌，按 WCAG 公式现场计算。正文 ≥ 4.5:1，图标与 24px 以上大字 ≥ 3:1。当前：亮色
| 前景 / 背景 | 样例 | 比值 | 要求 | 结果 |
|---|
材质与层级
五层光学玻璃
光源在上方偏左，阴影向下落。每一层都由三样东西组成：表面色、投影、顶边高光。层越高，投影越宽越柔；暗色主题里层越高表面越亮。
0
台面 Table
页面底。无投影，无高光。
background: canvas
1
平板 Slab
卡片、侧栏当前项。
0 1px 2px /.04, 0 2px 6px /.05 · inset 0 1px 0 白 70%
2
抬起 Raised
悬停卡片、粘性栏、选中的分段。
0 2px 4px /.05, 0 8px 20px -4px /.10
3
浮起 Float
菜单、下拉、提示。浮在内容上，多一圈 6% 发丝边。
0 4px 8px -2px /.08, 0 16px 32px -8px /.16
4
覆盖 Overlay
对话框、抽屉，下面铺固定深色遮罩。
0 8px 16px -4px /.10, 0 32px 64px -12px /.28
暗色主题：投影不透明度 ×2，顶边高光降到 6%。遮罩两套主题相同：oklch(0.18 0.02 265 / 0.40) + 模糊 4px。
磨砂玻璃与指光
磨砂只给“浮在滚动内容之上”的东西：顶栏、手机底栏、批量操作栏、浮动工具条。
智能家居照明选购指南（2026）已发布 · 8,677 浏览
如何写出被 AI 引用的 FAQAI 改写中 · 预计 2 分钟
YouTube 与 X 分发：标题怎么写已排期 · 11 月 6 日 09:00
站群推广的边界：来源标注草稿 · 林岚
2026 年跨境电商 SEO 趋势待审核 · 7,886 浏览
黑五备货清单与物流时效已发布 · 6,966 浏览
磨砂顶栏
在上面的列表里滚动：顶栏在未滚动时完全透明，内容滑到下面后才出现 surface 72% + 模糊 20px + 饱和 180% 和一层投影。
发布文章16
搜索点击9,691
分发触达3.5万
指光 Specular
可点的卡片在悬停时出现一团跟随指针的柔光，半径 280px，淡入 150ms。触控设备和“减弱动效”下不出现。
形状 · 抛光的玻璃边
六档圆角。支持超椭圆的浏览器用 corner-shape: squircle，转角更顺。
xs · 6小标签、徽标内角
sm · 10按钮、输入、导航项、图标块
md · 14菜单、小卡片、行悬停底
lg · 20卡片、对话框
xl · 28大面板、底部弹层
full胶囊、分段、头像、徽标
内 12 = 外 20 − 边距 8
内外都是 20
同心圆角
内圆角 = 外圆角 − 内边距，最小 6。拖动滑块改变边距，左边的内圆角会跟着算。
层叠顺序
浮层的 z-index 固定成七档，新组件只能选其中一档。
内容0
粘性栏 sticky1020
抽屉 drawer1030
对话框 dialog1040
弹出 popover1045
吐司 toast1050
提示 tooltip1060
字体
精确的字，安静的版面
拉丁字母和数字用 Geist，中文用系统黑体（苹方、Noto Sans SC、微软雅黑），数据与代码用 Geist Mono。字号拉开层级，字重只用 400 / 500 / 600。
Aa棱镜9,691
数字一律 tabular-nums，表格里的列才对得齐。中英混排之间留一个空格，例如“近 30 天 AI 推荐率 32.1%”。
Geist
"Geist", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui界面文字、标题、数字。
Geist Mono
"Geist Mono", ui-monospace, "SF Mono", Menlo代码、令牌名、域名、ID。
苹方 / Noto Sans SC
系统字体，不单独加载中文不用斜体，不用全大写。
后台字阶
默认密度。一张卡片内最多三级：标题 → 主内容 → 辅助。
display数据总览 Overview
metric9,691 次
title-lg文章管理
title搜索点击与 AI 提及
headline智能家居照明选购指南（2026）
body站点、内容、搜索与 AI 可见度的整体表现。
body-sm新增 WebMCP 模块，站点可对浏览器 AI 代理暴露工具。
label保存草稿 · 发布 · 近 30 天
caption统计区间 2026年10月5日 – 11月3日
overline内容 · CONTENT
等宽数字
切换看看：比例数字在列里左右晃动，等宽数字整齐对位。
1,1119,69118,804101,170
官网字阶（舒适密度）
一篇内容，处处可见
让 AI 回答引用你的品牌
hero 64/68（手机 40/44）· section 40/48 · lead 18/30。官网可以更大更松，后台保持紧凑。
行宽
正文 ≤ 68ch（约 720px），说明文字不铺满宽屏。
截断
列表标题单行截断并给完整提示；正文从不截断。
单位
数字与单位空一格，单位用 ink-2 小一号：9,691 次。
强调
用字重和颜色，不用下划线、斜体或全大写中文。
布局
四种宽度，一套骨架
单位是 px，4 为基准、8 为节奏。窗口分成紧凑、中等、展开、宽屏四个尺寸类别，每个类别规定导航方式、栅格列数、页边距和栏间距。
间距刻度
14
28
312
416
520
624
832
1040
1248
1664
2080
深色条是 8 的倍数，用在区块与卡片之间；浅色条用在控件内部。
尺寸类别
| 类别 | 宽度 | 导航 | 栅格 | 页边距 | 栏间距 |
|---|---|---|---|---|---|
| 紧凑 compact | < 640 | 顶栏 + 抽屉，主操作进底栏 | 4 | 16 | 12 |
| 中等 medium | 640–1023 | 顶栏 + 覆盖式抽屉 | 8 | 24 | 16 |
| 展开 expanded | 1024–1279 | 侧栏 256，可收成轨 72 | 12 | 32 | 20 |
| 宽屏 large | ≥ 1280 | 侧栏 256，内容最大 1440 居中 | 12 | 40 | 24 |
拖动窗口宽度
模拟一个用户端页面。拖动滑块或点预设宽度，导航方式和栅格会按尺寸类别切换；紧凑和中等宽度下可以点左上角按钮打开抽屉。
尺寸类别宽屏 large
导航侧栏 256
栅格12 列
页边距40
栏间距24
外壳结构
侧栏与台面同色、无分隔线；顶栏滚动后变磨砂；内容卡片浮在台面上。
侧栏256 · 轨 72台面色，无右边线
顶栏高 60 · 滚动后磨砂
页头大标题 + 说明 + 筛选 · 下距 24
内容区 · 页边距 32–40 · 最大 1440 · 卡片间距 20
顶栏56
内容页边距 16
底栏64 + 安全区
抽屉304
阅读宽度68ch / 720
手机底栏64 + safe-area
七个页面模板
每个新页面先选模板，再填内容。白块是卡片，蓝色是主操作，浅蓝是选中或强调区域，磨砂块是浮在内容上的栏。
总览 Overview
页头 + 筛选；4 张指标卡；主图表 8 列 + 侧图 4 列；三张列表卡。
指标 4 / 2 列·8 + 4·4 + 4 + 4
列表 Collection
页头 + 主操作；搜索与筛选条；整宽列表；选中后底部升起磨砂批量栏。
行高 52·紧凑类别 → 卡片
详情 Detail
返回 + 对象头（44 图标块、标题、状态、操作）；分段切换视图；主栏 8 + 侧栏 4。
8 + 4·视图 ≤ 4 个用分段
设置 Settings
左侧分组导航 220；内容最大 720 的分组列表；有改动时底部升起保存栏。
220 + 720·行高 52
编辑器 Editor
全幅；顶栏显示保存状态；写作栏 720 居中；右侧检查器 320 可收起。
720 + 320·自动保存 2s
向导 Flow
顶部步骤；单栏 560；主操作在右下，返回在左下。
单栏 560·步骤 ≤ 5
空状态 Empty
64 图标块 + 标题 + 一句说明 + 一个主操作，居中，最大宽 400。不用插画。
图标块 64·操作 1 个
用户端页面怎么选
数据总览、数据分析总览
文章、媒体、关键字列表
站点、文章详情详情
公司与账号设置设置
写文章、改稿编辑器
新建站群站点、接入域名向导
首次进入、没有数据空状态
密度
同一套组件三种密度：官网和站群用舒适，用户端用默认，管理端用紧凑。可以只作用于页面的一部分。触控设备上控件最小 44。
关键字点击排名
Acme Lumo 3 review79328
Acme 智能家居78534
节能 智能灯73728
控件高度36px
列表行高52px
卡片内边距20px
卡片间距20px
响应式表格
每一列标上优先级：P1 永远显示，P2 在 768 以上显示，P3 在 1280 以上显示。紧凑类别下列表变成卡片。
标题P1状态P2浏览P3更新时间P3
智能家居照明选购指南（2026）已发布8,67711-02 14:20
如何写出被 AI 引用的 FAQ审核中6,79211-01 09:05
2026 年跨境电商 SEO 趋势草稿—10-30 18:44
智能家居照明选购指南（2026）
已发布8,677 浏览 · 11-02
如何写出被 AI 引用的 FAQ
审核中6,792 浏览 · 11-01
2026 年跨境电商 SEO 趋势
草稿— · 10-30
交互 Interaction
光随手动：每次输入都有光学反馈
指针、触控、键盘同等对待。每个可交互元素都定义同一组状态，每种状态对应一种光学含义：悬停受光，按下贴近台面，聚焦打出光束。反馈在 100ms 内出现，等待超过 300ms 才提示，超过 10 秒交给后台。
状态模型
同一组控件在八种状态下的样子。列名下方是它的光学含义，不适用的格子写“—”。
试一试
悬停、按下，或按 Tab 键看聚焦光束
站点
点击区域
看到的图形可以很小，能点到的范围不能小：指针 ≥ 32×32，触控 ≥ 44×44，相邻目标间距 ≥ 8。
显示点击区域
桌面工具栏 · 图标 16 · 点击区域 32
手机列表行 · 勾选框 18 · 点击区域 44
智能家居照明选购指南已发布 · 8,244 浏览
响应时序
按等待时长选择反馈方式。下面四个按钮模拟四种耗时，点一下看它们各自的反馈。
< 100ms直接反馈状态立即改变，不出现任何等待提示
100–300ms先不提示按钮保持按下后的样子，避免闪一下转圈
300ms–1s行内转圈在触发的按钮里转圈，至少显示 400ms，宽度不变
1–10s骨架或进度首次加载用骨架，可知进度时用进度条
> 10s转入后台吐司告知，任务中心跟踪，完成后通知
标记已读约 80ms · 乐观更新
3 条未读点击后立即生效，失败再回滚
保存设置约 800ms · 行内转圈
300ms 后按钮里出现转圈—
生成摘要约 4s · 进度 + 骨架
摘要会显示在这里
翻译成 12 种语言约 15s · 转入后台
任务中心 · 翻译中 0%点击后可以继续做别的事
反馈层级
从左到右，打断用户的程度递增，层也越高。能用低一级说清楚，就不用高一级。
字段内
guide@邮箱格式不对
只和这个字段有关：格式、必填、重名。状态文字
已保存 10:32
持续存在的状态：保存、同步、草稿。横幅
本月 AI 额度已用 86%
影响整页、需要用户知道但不必马上处理。吐司
已发布 3 篇文章
操作完成的回执，几秒后自己消失，可带撤销。对话框
永久删除 3 篇文章？删除后无法恢复
必须先回答才能继续：不可撤销、需要确认。危险操作
能撤销就直接做、给撤销；不能撤销才确认；影响越大，确认越重。
可撤销：直接执行删除后行收起，吐司保留 6 秒撤销，悬停时暂停计时。
不可撤销：确认对话框写明对象和后果，危险按钮在右。Esc 关闭，焦点回到按钮。
回收站里有 3 篇文章
高影响：输入名称确认删站点、删公司这类操作，要求输入对象名称。
智能家居指南站smart-home-guide
隐藏还是禁用
没有权限就不显示；有权限但暂时做不了，就禁用并说明原因。提交按钮不因校验未过而禁用，点了再告诉用户哪里不对。
以谁的身份看
智能家居照明选购指南（2026 版）
管理员有发布权限，但审核未通过，所以「发布」禁用，悬停或聚焦能看到原因。
表单
字段改过并离开后才校验；出错后随输入实时复核；提交时全部校验并聚焦第一个错误。有未保存的改动时，底部升起保存栏。
编辑器自动保存停止输入 2 秒后保存，状态文字在标题旁，不弹吐司。
文章摘要已保存 10:32
保存状态是“状态文字”这一级反馈：持续存在，不打断输入。
键盘
所有操作都能只用键盘完成。右侧演示区内可以直接试，快捷键只在焦点位于演示区时生效。
⌘KCtrl K搜索与命令
/聚焦当前列表的搜索框
Esc关闭最上层（弹层、抽屉、对话框）
?快捷键帮助
↑↓在列表中移动
Enter打开当前项
Space选择 / 取消选择
Shift+ 点击选择一段区间
←→切换标签、分段
A–Z菜单内按首字母跳转
Tab对话框内焦点循环，关闭后回到触发按钮
文章点一下列表后试 ↑↓ Space Enter / ⌘K
已选 0 篇
选择、批量与拖拽
桌面上悬停才出现勾选框，触控设备常显；选中后底部升起磨砂批量栏。拖动把手排序，其他行平稳让位；键盘用 Alt + ↑↓。
文章浏览
栏目顺序拖动把手，或聚焦把手按 Alt + ↑↓
顺序会立即保存
复制反馈与提示延迟
复制成功时图标换成勾，1.5 秒后复原。提示只给纯图标按钮、被截断的文字和禁用原因：停留 500ms 出现，300ms 内移到相邻按钮立即出现，离开立即消失。
API 密钥
只在创建时完整显示一次
geo_live_7f3a9c21e84b
文章操作
在按钮间滑动：第一个等 500ms，之后的立即出现。
触控手势（紧凑尺寸）
松手时按“速度投影后的落点”判断结果，而不是手指停在哪里。
| 手势 | 阈值 | 结果 |
|---|---|---|
| 左边缘右滑 | 起点在左边缘 20px 内 | 打开导航抽屉，抽屉跟手 |
| 抽屉 / 底部弹层关闭 | 位移 > 30%，或速度 > 0.5px/ms | 关闭；否则按「平稳」弹回 |
| 长按列表行 | 500ms，期间移动 < 8px | 打开行菜单 |
| 方向锁定 | 移动 8px 后锁定横向或纵向 | 横滑不触发页面滚动，竖滑不触发横向手势 |
| 下拉刷新 | 不使用 | 数据靠自动刷新与「刷新」按钮 |
动效 Motion
光有来处：用弹簧描述运动
运动都有原因和方向：从触发点出现，向外散开，关闭时收回原处。位置与尺寸的变化用弹簧，颜色和透明度用短淡变，离场一律用更快的退出曲线。弹簧只给两个参数，时长由物理算出来。
模型
弹簧的运动可以被打断并从当前位置继续，不会因为时长写死而显得机械。参数在构建时采样成 CSS linear() 曲线，由浏览器合成，不占用脚本。
设计参数0.30s · 0.82response 与阻尼比：多快到位、晃不晃
物理参数（质量 1）k 439 · c 34.3刚度 = (2π / response)²，阻尼 = 4π·阻尼比 / response
令牌linear(49 点)--spring-snappy 与 --dur-snappy: 430ms（停稳时间）
四个弹簧，两条曲线
横轴统一为 0–720ms，方便比较。空心点是到达 95% 的时刻，用户感知的“完成”大约在这里。点「播放」看真实令牌驱动的运动。
编排
四条规则决定多个元素一起动时的样子。
从触发点出现弹层的变换原点对准触发按钮，关闭时收回去。
利落 · 退出文章栏目站群站点
色散：间隔 30ms，最多 8 个同组元素自光源向外依次出现，整组多花的时间不超过 240ms。
一次只有一个主运动主体上升，其余只做淡变。
不要：全部一起动
要：一个主运动
页面级位移不超过 16px桌面不做整页横滑；内容上移 8px 加淡入就够了。
不要：滑入 120px
要：上移 8px
六个特征动作
Prism 的动效词汇。新组件先从这六个里找，再考虑新动作。
折射 Refract利落
选中时浅色从点击点圆形展开，像光穿过棱镜。用于 Chip、分段、列表行选中。
色散 Disperse舒展 · 30ms
聚光 Focus beam利落
2px Iris 焦点环从外侧 6px、透明收拢到 2px 处，只在键盘聚焦时出现。按 Tab 也能看到。
光扫 Sweep1.6s 循环 · 一次
抬升 / 按压平稳 · 利落
悬停抬升 1px，按下 0.99
指光 Specular淡变 150ms
在卡片上移动指针
转场目录
每种界面变化都有固定写法。点行尾的播放按钮，在右侧舞台上看它。
舞台选一个转场播放
中断与跟手
拖动时 1:1 跟手；松手后按速度投影出落点，选最近的位置，并带着松手时的速度弹过去。运动中再抓起，会从当前位置继续。
左
右
投影落点
松手速度 0.00 px/ms · 投影落点 — · 目标 左用力甩一下，或轻轻放下，结果不同
减弱动效
系统开启“减弱动态效果”，或顶栏选择「减弱」时生效。位移换成短淡变，信息一样不少。
当前：完整动效
- 弹簧时长变为 1ms：位置与尺寸直接到位
- 保留 120ms 透明度淡变，变化仍然可见
- 关闭色散间隔、骨架光扫循环、指光、数字滚动（直接显示终值）
- 保留拖拽跟手：手指在哪，东西就在哪
- 不靠动效传达的信息，同样要有文字或状态
性能
只动合成属性transform、opacity、clip-path、filter
阴影用伪元素淡变不直接对 box-shadow 做长动画
高度用 grid-rows0fr → 1fr，不测量 height
同屏 ≤ 50 个动画元素长列表只动可见区域
will-change 只在运动中结束后移除，避免占用显存
可逆状态用 transition新状态从当前值继续，不用 keyframes
Components · 组件
每个组件都是一块会受光的玻璃
全部组件按同一套状态模型实现：悬停受光、按下下沉、聚焦有光束、选中让光穿过。每块卡片右上角写着它的特征动作，可以直接按一按、切一切、用键盘走一遍。
操作
按钮 · 图标按钮 · 菜单按钮 Button按压 · 利落
小 32默认 36大 44
主
次
文字
危险
一屏只有一个主按钮。加载时宽度不变，300ms 内完成不显示转圈。禁用按钮必须在提示里写原因。
图标按钮 Icon button提示 · 500ms 延迟
纯图标按钮一定有提示和无障碍名称。依次滑过：第一个等 500ms，后面的立即出现。
菜单 Menu自触发点展开 · 利落
从按钮的位置长出来，收起时缩回去。↑↓ 移动，Enter 选择，Esc 关闭并把焦点还给按钮。
输入
输入框 · 下拉选择输入框 Text field聚焦 · 光束
建议 20–60 个字，会用作 SEO 标题
/
在列表页按 / 直接聚焦这里
/blog/
这个别名已被「智能照明选购指南」使用，换一个
域名验证通过后不可修改
填充式，没有描边。悬停加深一级，聚焦变成白色平板加 2px 光束；出错时说明写在字段正下方，告诉用户怎么改。
下拉选择 Select淡变 150ms
与输入框同一外观。选项超过 7 个时改用可搜索的组合框。
选择
分段 · Chip · 开关 · 勾选框 · 单选分段控件 Segmented滑块平移 · 利落
页面级视图切换用分段，不用下划线标签。2–5 个选项，←→ 切换。
筛选 Chip折射 · 自点击点展开
选中的浅色从手指按下的位置圆形扩散，勾随后滑入。可多选，筛选结果写进 URL。
开关 Switch拇指 · 跃动
定时发布到点后自动发布到所有站点
发布后自动分发同步到 X、LinkedIn、YouTube
立即生效的设置用开关；需要“保存”才生效的用勾选框。按住时拇指拉宽 4px。
勾选框 Checkbox中心填充 + 勾描绘
父项显示部分选中。点击文字也能切换，点击区域不小于 32×32。
单选 Radio圆点 · 跃动
2–5 个互斥选项且需要看到说明时用单选；选项更多用下拉。方向键在组内移动。
步进器 Stepper数字 · 跃动
每日发布上限到达上限后，新文章排到第二天
只用于小范围整数（1–10）。到达边界时按钮变为不可用，提示里写出范围。
导航
标签页 · 侧栏与顶栏见下方样板标签页 Tabs指示条 · 前沿利落、后沿平稳
共 128 篇文章，覆盖 3 个站点、4 种语言。本周新增 9 篇。
内容区里的次级切换用标签页；指示条先伸向目标、再收回尾部，内容向切换方向位移 4px 后淡入。
分页 Pagination当前页 · 被照亮
共 128 篇 · 第 1–20 篇
当前页与侧栏当前项同一种“被照亮的平板”。页码、筛选写进 URL，返回时恢复。
反馈
吐司 · 对话框与抽屉 · 横幅 · 骨架 · 进度 · 空状态吐司 Toast到达 · 跃动
反色面，底部居中，最多同时 3 条。可撤销的删除给 6 秒「撤销」，指针停在上面时暂停计时。
对话框 · 抽屉舒展 · 平稳
对话框只用于不可撤销或必须马上决定的事；查看详情用抽屉，不打断列表。打开后焦点锁在里面，Esc 关闭并还给触发按钮。
横幅 Banner收起 · 平稳
页面级的持续状态用横幅，不加边框。关闭后用吐司提供撤销；手机上操作换行到正文下方。
骨架 Skeleton光扫 1.6s
智能家居照明选购指南（2026）Acme 官网 · 8,244 次浏览
首次加载超过 1 秒用骨架，形状与真实内容一致；加载完交叉淡化 200ms，不再位移。
进度 · 光谱条平稳生长
上传媒体3 / 5
这篇文章去了哪里
搜索 38%AI 回答 24%社媒 22%站群 16%
光谱条是本语言独有的图形：一份内容被折射到几个渠道，用分段长度比较，段间留 2px 缝。
空状态 Empty入场 · 舒展
还没有文章
从一个关键词开始，AI 会先给出大纲和初稿，审核后再发布。
一个图标块、一句标题、一句说明、一个操作。不用插画。
自动保存 Save status淡变 150ms
已保存 10:32
编辑器停止输入 2 秒后自动保存。状态只有三种：有未保存的修改、保存中…、已保存 + 时间。
提示 Tooltip淡入 + 2px
站群推广的边界：来源标注与合规
只用于三种情况：纯图标按钮、被截断的文字、禁用的原因。不放可点击的内容。
展示
徽标 · 图标块 · 卡片 · 指标卡 · 列表 · 分组列表 · 头像徽标 Badge无
已发布待审核已驳回定时草稿
内容搜索AI 生成分发站群账单
tint 底 + 同色深字 + 圆点或图标，不加边框。状态永远同时有颜色和文字。
图标块 Icon tile无
六个领域按光谱顺序排列，图标块是领域色唯一的大面积出现位置。尺寸 32 / 36 / 44 / 64。
卡片 Card抬升 · 按压 · 指光
平板（静止）
放信息的容器，不可点击。
可点卡片
悬停上移 1px、加一层投影，指针处有柔光；按下回落。
卡片之间靠投影和画布的明度差分开，没有描边。卡片里不再套带投影的卡片。
指标卡 Metric数字滚动 600ms
搜索点击
9,691
+46.8%较上期
图标块 + 标签 + 数字 + 环比胶囊 + 贴底迷你趋势。数字只在第一次出现时滚动，刷新时不重复。
列表表格 List table行悬停 · 淡变
P1 排名 · 标题 · 浏览P2 分发 ≥ 420P3 AI 可见度 ≥ 560
#标题浏览分发AI 可见度
1用 RSS 采集 + AI 润色搭建内容流水线8,677051
2内容审核流程设计：驳回原因模板8,464038
3智能家居照明选购指南（2026）8,244264
4站群推广的边界：来源标注与合规8,181022
无外框、无列线；行间分隔线从第一列内容起缩进，悬停时变成圆角底色。数字列右对齐、等宽。变窄时按优先级收起列，名称列不被截得过短。
分组列表 Grouped list行悬停 · 淡变
两步验证
设置页用分组列表：左侧图标块、右侧当前值和箭头，行高 52，分隔线从文字处开始。
头像 Avatar无
林
ES
LC
佐
AI
没有照片时用姓名首字，底色按成员 ID 在六个领域色里取，保证同一个人颜色固定。
数字与单位 Numbers等宽数字
9,691千分位，等宽数字
3.5 万≥ 1 万用“万”，保留 1 位；英文界面用 35K
32.1%比率保留 1 位小数
€129.00 · JP¥8,900金额跟随订单币种
2026-11-03 10:30按用户时区；24 小时内写“3 分钟前”
数字与单位之间空一格，单位用 ink-2 小一号；表格里数字右对齐。
Pattern · 样板
用户端「数据总览」，按 Prism 重做
同一份数据、同一套功能，换成棱镜的语言：台面上放玻璃板，颜色只出现在领域图标、图表和来源光谱条上，被点亮的只有当前位置。往下滚动，看顶栏从透明变成磨砂；点侧栏，看那块被照亮的平板移动过去。
数据总览
站点、内容、搜索与 AI 可见度的整体表现
统计区间 2026年10月5日 – 2026年11月3日搜索点击与 AI 提及
搜索点击 · 左轴AI 提及 · 右轴
来源占比
AI 建议为 3 篇高点击文章补充 FAQ 结构化数据
这 3 篇文章近 30 天搜索点击都超过 8,000，但还没有被 AI 回答引用。补充 FAQ 后，AI 引擎更容易摘录原文并标注来源。
桌面版宽 1180px，左右滑动查看；下方是同一页在手机上的样子。
数据总览
统计区间 2026年10月5日 – 2026年11月3日搜索点击与 AI 提及
搜索点击 · 左轴AI 提及 · 右轴
来源占比
AI 建议为 3 篇高点击文章补充 FAQ 结构化数据
补充后 AI 引擎更容易摘录原文并标注来源。
从“字和线条”到“玻璃与光”
以面代线
卡片、表格、输入框不再靠 1px 线分隔。画布、平板、抬起三级明度加投影区分层次，表头不再有底色。
一束主光
桌面上被 Iris 点亮的只有当前导航；手机上唯一的主操作「新建文章」放进磨砂底栏，拇指够得到。
色即信息
六条领域色带只出现在图标块、图表和来源光谱条上；数字和正文保持中性，眼睛先看到数字。
光谱条代替环形图
「来源占比」用一条分段光谱条：一份流量折射到五个来源，长短一眼可比，旁边列出具体次数。
色散边只给 AI
只有 AI 生成的建议带一道色散边，用户一眼分清哪些内容是 AI 给的、需要人确认。
紧凑类别
390 宽：顶栏 + 抽屉菜单，指标两列，卡片单列，图表改用紧凑坐标轴。点左上角菜单试试抽屉。