# UI Echo

> 手写复现的 UI 设计系统：类型 × 三条材质轴（玻璃 / 极简 / 新拟态），每个组件带规格、必缺状态、可粘贴提示词与灵感来源。以下路径都相对本站根。

本站是**复现研究**，不是组件库分发：实现全部手写，判断写在标准里，代码与提示词都从同一批真值派生。

关键约定（改代码前先读这些，不要从截图反推）：

- 材质分级：玻璃只做悬浮层；内容面板一律不透明白底 + 软阴影；新拟态是独立风格轴，不是给别的风格加阴影
- token 两层：base 存原值、semantic 只做引用；暗色只覆写 base 一层；前景色 ≥4.5:1（WCAG SC 1.4.3）
- 骨架：视口高度固定，页头不滚，正文在容器内滚；全站宽度只有一处真值（--frame-max / --frame-gutter）
- 完成线：3 材质 + demo（必缺状态可见）+ notes + 术语 + 进一个整页场景 + 十一道闸全绿 + 真实浏览器核对

- 快进慢出（Fast-out, slow-in）：退场约为进场的 0.45 倍，曲线更陡；出场不许比入场慢｜依据 `/design#motion`
- 进出场成对（Paired enter & exit）：浮层进场与退场必须成对，不许啪地消失｜依据 `/design#motion`
- 降级是更少更温和（Reduced, not off）：降级保留颜色与透明度过渡，只去掉位移与形变｜依据 `/design#motion`
- 动效与降级同批交付（Motion ships with its fallback）：新增动效必须同时写降级分支，否则闸门白做｜依据 `/design#motion`
- 只动 transform 与 opacity（Compositor-only properties）：width/height/margin/padding/top/left 会触发布局重算，不许过渡｜依据 `/design#motion`
- 高频面少动效（Less motion on frequent surfaces）：每天上百次的动作永远不动；hover 只做几乎察觉不到的微动｜依据 `/design#motion`
- 材质三分级（Three material tiers）：悬浮层用玻璃 / 内容层用不透明白底 / 风格轴另算（新拟态）｜依据 `/design#material`
- 玻璃只做悬浮层（Glass is for overlays）：玻璃靠背后有东西才成立；内容面板一律白底 + 软阴影｜依据 `/design#material`
- 阴影只表高度（Shadows mean elevation）：sm 贴着表面 / md 浮起一层 / lg 压住全屏；一层只用一个档｜依据 `/design#material`
- 同一个屏宽基准（One width basis）：全站宽度只有一处真值（--frame-max / --frame-gutter / --frame-pad），容器与贴边定位都从它算｜依据 `/design#layout`
- 圆角一条阶梯（One radius scale）：4 / 6 / 8 / 12 / 16 / 24，8px 基准的倍数，不随手取值｜依据 `/design#layout`
- 间距只用 4 的倍数（4px spacing grid）：所有内外边距落在 4px 网格上｜依据 `/design#layout`
- 字号按角色选（Pick type by role）：正文 13–14、说明 12、元数据 10–12；标题与正文至少差两档｜依据 `/design#typography`
- 行长 17–40 字（Measure 17–40 CJK chars）：中文正文每行 17–40 字（硬上限 48），西文 45–90 字符｜依据 `/design#typography`
- 行距 1.5–2.0 倍（Leading 50–100% of size）：行距取字号的 50%–100%（clreq §7.1）｜依据 `/design#typography`
- 焦点环 ≥2px（Visible focus ring）：键盘焦点必须可见，等效周长 ≥2px（SC 2.4.13）｜依据 `/design#interaction`
- 指针目标 ≥24×24（24px hit target）：可点元素不小于 24×24 CSS px（SC 2.5.8）｜依据 `/design#interaction`
- 状态不只靠颜色（Never color alone）：色点旁必须有文字，色盲用户也要读得到｜依据 `/design#interaction`
- 状态矩阵（State matrix）：七态验收；APG 有专条的状态与键位不许缺｜依据 `/design#states`
- 术语驱动（Term-driven）：复现先说术语再给参数——照着术语就能找到现成规范｜依据 `/design#reuse`
- 单一真值（Single source of truth）：一个事实只写一遍；代码与文档不一致时以生成的那份为准｜依据 `/design#layout`

## 设计标准（判断层，8 篇）

- [动效验收标准](/llms/design/motion.md): 生效中（2026-10-30 随 P2 落地，标准已进 token 与检查脚本）
- [材质与阴影](/llms/design/material.md): 材质分三级——玻璃只做悬浮层、内容面板一律不透明白底、新拟态是独立风格轴不是修饰
- [字号节奏与排版](/llms/design/typography.md): 字号只有一套阶梯 + 一条缩放倍率，档位按"角色"选不按"好看"选
- [图标](/llms/design/icons.md): 通用 UI 图标统一走 Lucide 24 网格与 2px 线宽；品牌 Logo 与图形 demo 例外；激活态只改颜色不改线宽
- [状态色、交互反馈与指针](/llms/design/interaction.md): 状态色只表达"事情成没成"；按压与焦点是可用性底线；光标是操作提示，不是装饰
- [状态矩阵](/llms/design/states.md): 每个组件按七态验收；哪些状态"不许缺"由 APG 有没有专条决定
- [页面骨架与间距](/llms/design/layout.md): 全站页面固定视口高度、页头不滚、正文内滚；间距走 4px 网格，圆角走一条阶梯
- [页面模式](/llms/design/pages.md): 页面头只留一个主操作在右上；索引页的工具栏紧贴数据；设置里文本显式保存、开关即时生效；流程失败先给可聚焦的错误摘要

## 组件（术语 · 规格 · 参数 · 提示词 · 调研笔记）

- [玻璃头像](/llms/components/avatar--glass-apple.md): Avatar with fallback｜无图或 onError 回落首字母：中文取前两字，西文取首字母缩写，不重试加载
- [极简头像](/llms/components/avatar--minimal.md): Avatar with fallback｜同一份 props（name / src / size / status）
- [拟态头像](/llms/components/avatar--neumorphic.md): Avatar with fallback｜同一份 props（name / src / size / status）
- [玻璃徽标](/llms/components/badge--glass-apple.md): Status Badge｜胶囊只用文字色表达语义（neutral / accent / success / warning），底色始终中性
- [极简徽标](/llms/components/badge--minimal.md): Status Badge｜同一份 props（variant / dot）
- [拟态徽标](/llms/components/badge--neumorphic.md): Status Badge｜同一份 props（variant / dot）
- [玻璃提示条](/llms/components/banner--glass-apple.md): Notification Banner｜页面级状态：常驻、不自动消失，处理完或手动关闭才走
- [极简提示条](/llms/components/banner--minimal.md): Notification Banner｜同一份 props 与 role 分配
- [拟态提示条](/llms/components/banner--neumorphic.md): Notification Banner｜同一份 props 与 role 分配
- [玻璃面包屑](/llms/components/breadcrumb--glass-apple.md): Breadcrumb｜nav aria-label + ol/li；分隔符 aria-hidden，当前位置 aria-current=page 且不可点
- [极简面包屑](/llms/components/breadcrumb--minimal.md): Breadcrumb｜同一份 props（items）
- [拟态面包屑](/llms/components/breadcrumb--neumorphic.md): Breadcrumb｜同一份 props（items）
- [玻璃按钮](/llms/components/button--glass-apple.md): Liquid Glass Button｜半透明底 + 1px 细边框 + 背景模糊，做出玻璃厚度
- [极简按钮](/llms/components/button--minimal.md): Flat Minimal Button｜实底 + 一条发丝边线 + 一档软阴影，没有模糊与浮起
- [拟态按钮](/llms/components/button--neumorphic.md): Neumorphic Button｜控件与页面同色，只靠亮侧高光 + 暗侧投影浮出表面
- [玻璃卡片](/llms/components/card--glass-apple.md): Liquid Glass Card｜玻璃面 + 边缘光学（内高光 + 顶部定向光）
- [极简卡片](/llms/components/card--minimal.md): Flat Minimal Card｜无浮起、无模糊、无阴影
- [拟态卡片](/llms/components/card--neumorphic.md): Neumorphic Card｜同色底 + 一组外双阴影浮起，没有边框与模糊
- [聚光卡片](/llms/components/card--spotlight.md): Border Glow + Inner Spotlight Card｜外层渐变边框跟随鼠标位置，白底盖住中心只露 1px 光边
- [玻璃勾选](/llms/components/choice--glass-apple.md): Checkbox & Radio Group (APG)｜原生 checkbox / radio + fieldset / legend；单选组同 name，方向键与空格交给浏览器
- [极简勾选](/llms/components/choice--minimal.md): Checkbox & Radio Group (APG)｜原生 checkbox / radio + fieldset / legend；单选组同 name，方向键与空格交给浏览器
- [拟态勾选](/llms/components/choice--neumorphic.md): Checkbox & Radio Group (APG)｜原生 checkbox / radio + fieldset / legend；单选组同 name，方向键与空格交给浏览器
- [玻璃可搜索下拉](/llms/components/combobox--glass-apple.md): List-filtering Combobox｜input role=combobox + aria-expanded / aria-controls / aria-autocomplete=list / aria-activedescendant
- [极简可搜索下拉](/llms/components/combobox--minimal.md): List-filtering Combobox｜同一份 props 与行为（~/lib/combobox）
- [拟态可搜索下拉](/llms/components/combobox--neumorphic.md): List-filtering Combobox｜同一份 props 与行为（~/lib/combobox）
- [上下文光标](/llms/components/cursor--contextual.md): Contextual Cursor Ring (local demo)｜只在自身范围内跟随指针，原生光标始终保留，不写 cursor: none
- [磁吸指针](/llms/components/cursor--magnetic.md): Magnetic Hover｜指针靠近时元素向指针偏移，光标保持原生
- [玻璃描述列表](/llms/components/descriptions--glass-apple.md): Description List｜原生 dl / dt / dd，读屏按标签—值成对播报
- [极简描述列表](/llms/components/descriptions--minimal.md): Description List｜同一份 props（items / columns）
- [拟态描述列表](/llms/components/descriptions--neumorphic.md): Description List｜同一份 props（items / columns）
- [放大坞站](/llms/components/dock--glass-apple.md): macOS-style Dock with Magnification｜余弦平方衰减的放大：峰值在鼠标处，半径外平滑归零
- [极简坞站](/llms/components/dock--minimal.md): macOS-style Dock, Flat Tray｜余弦平方衰减的放大：峰值在鼠标处，半径外平滑归零
- [拟态坞站](/llms/components/dock--neumorphic.md): macOS-style Dock, Neumorphic Tray｜余弦平方衰减的放大：峰值在鼠标处，半径外平滑归零
- [拖拽排序](/llms/components/drag--sortable-list.md): Sortable List (Pointer + Keyboard)｜Pointer Events + setPointerCapture，只在把手按下时开始拖拽
- [滑动删除](/llms/components/drag--swipe-to-dismiss.md): Swipe Actions｜四段链：1:1 跟手 → 越界阻尼 30% → 阈值 96px / 速度 0.5px/ms 双判 → 吸附或飞出
- [玻璃抽屉](/llms/components/drawer--glass-apple.md): Side Sheet / Drawer｜role=dialog + aria-modal + 标题命名；打开移入首个可聚焦，Tab 首尾循环
- [极简抽屉](/llms/components/drawer--minimal.md): Side Sheet / Drawer｜同一份 props（open / onClose / title / side / children / footer）
- [拟态抽屉](/llms/components/drawer--neumorphic.md): Side Sheet / Drawer｜同一份 props（open / onClose / title / side / children / footer）
- [玻璃下拉](/llms/components/dropdown--glass-apple.md): Select-Only Combobox (APG)｜触发器 role=combobox，弹层 role=listbox，aria-activedescendant 指向高亮项
- [极简下拉](/llms/components/dropdown--minimal.md): Select-Only Combobox (APG)｜触发器 role=combobox，弹层 role=listbox，aria-activedescendant 指向高亮项
- [拟态下拉](/llms/components/dropdown--neumorphic.md): Select-Only Combobox (APG)｜触发器 role=combobox，弹层 role=listbox，aria-activedescendant 指向高亮项
- [玻璃空态](/llms/components/empty-state--glass-apple.md): Empty State｜三件套：正面措辞的标题 + 一句说明 + 单个主操作；零数据不是错误，不用 warning 色
- [极简空态](/llms/components/empty-state--minimal.md): Empty State｜同一份 props（title / description / icon / action）
- [拟态空态](/llms/components/empty-state--neumorphic.md): Empty State｜同一份 props（title / description / icon / action）
- [玻璃输入框](/llms/components/input--glass-apple.md): Floating Label Input｜标签在框上方，不做浮动标签动画
- [极简输入框](/llms/components/input--minimal.md): Flat Minimal Input｜标签在框上方，白底 + 发丝边 + 一档软阴影
- [拟态输入框](/llms/components/input--neumorphic.md): Neumorphic Input｜输入区是同色凹槽：左上暗、右下亮两条 inset 阴影
- [玻璃菜单](/llms/components/menu--glass-apple.md): Menu Button (APG)｜触发器 aria-haspopup=menu + aria-expanded + aria-controls；菜单 role=menu，项 role=menuitem
- [极简菜单](/llms/components/menu--minimal.md): Menu Button (APG)｜同一份 props（label / items / placement）
- [拟态菜单](/llms/components/menu--neumorphic.md): Menu Button (APG)｜同一份 props（label / items / placement）
- [玻璃模态](/llms/components/modal--glass-apple.md): Sheet / Modal Dialog (APG)｜role=dialog + aria-modal + aria-labelledby
- [极简模态](/llms/components/modal--minimal.md): Flat Minimal Dialog (APG)｜role=dialog + aria-modal + aria-labelledby
- [拟态模态](/llms/components/modal--neumorphic.md): Neumorphic Dialog (APG)｜role=dialog + aria-modal + aria-labelledby
- [灵动岛形变](/llms/components/motion--island-ios.md): Dynamic Island Morph｜紧凑⇄展开两态之间做弹簧插值（阻尼比 ≈0.78）
- [弹簧曲线](/llms/components/motion--spring-ios.md): Spring Timing Explorer｜基准参数：response 0.5s、dampingFraction 0.825
- [文字解码](/llms/components/motion--text-decode.md): Text Decode / Scramble｜字符逐个替换成随机字符再落回
- [玻璃导航](/llms/components/nav--glass-apple.md): Top Navigation Bar｜固定顶栏 + 背景模糊，滚动不跟随
- [极简导航](/llms/components/nav--minimal.md): Flat Top Navigation｜白底 + 发丝边外壳，圆角收到 --radius-md
- [拟态导航](/llms/components/nav--neumorphic.md): Neumorphic Top Navigation｜外壳同色浮起（一组外双阴影），无边框无模糊
- [玻璃验证码输入](/llms/components/otp--glass-apple.md): One-Time Code Input｜一个真输入框 + 画的格子：逐格 input 会打断 autocomplete=one-time-code 自动填充
- [极简验证码输入](/llms/components/otp--minimal.md): One-Time Code Input｜同一份行为与语义（单输入框 + 画的格子）
- [拟态验证码输入](/llms/components/otp--neumorphic.md): One-Time Code Input｜同一份行为与语义（单输入框 + 画的格子）
- [玻璃分页](/llms/components/pagination--glass-apple.md): Pagination｜nav aria-label + ul/li；当前页 aria-current=page；每个页码 aria-label=第 n 页
- [极简分页](/llms/components/pagination--minimal.md): Pagination｜同一份 props（page / pageCount / onChange）
- [拟态分页](/llms/components/pagination--neumorphic.md): Pagination｜同一份 props（page / pageCount / onChange）
- [玻璃浮层](/llms/components/popover--glass-apple.md): Non-modal Popover｜触发器 aria-haspopup=dialog + aria-expanded + aria-controls；浮层 role=dialog 以标题命名
- [极简浮层](/llms/components/popover--minimal.md): Non-modal Popover｜同一份 props（trigger / title / children / placement）
- [拟态浮层](/llms/components/popover--neumorphic.md): Non-modal Popover｜同一份 props（trigger / title / children / placement）
- [分段控件](/llms/components/segmented--glass-apple.md): Segmented Control (iOS)｜APG radiogroup：方向键遍历 + roving tabindex
- [极简分段控件](/llms/components/segmented--minimal.md): Flat Segmented Control｜APG radiogroup：方向键遍历 + roving tabindex
- [拟态分段控件](/llms/components/segmented--neumorphic.md): Neumorphic Segmented Control｜APG radiogroup：方向键遍历 + roving tabindex
- [玻璃骨架](/llms/components/skeleton--glass-apple.md): Skeleton Screen｜role=status + aria-busy，占位块全部 aria-hidden，读屏只播一句加载状态
- [极简骨架](/llms/components/skeleton--minimal.md): Skeleton Screen｜role=status + aria-busy，占位块全部 aria-hidden，读屏只播一句加载状态
- [拟态骨架](/llms/components/skeleton--neumorphic.md): Skeleton Screen｜role=status + aria-busy，占位块全部 aria-hidden，读屏只播一句加载状态
- [玻璃滑块](/llms/components/slider--glass-apple.md): UISlider｜role=slider + aria-valuenow/min/max，← → 单步、PageUp/Down 十步、Home/End 到端
- [极简滑块](/llms/components/slider--minimal.md): Minimal Range｜4px 发丝线轨道，无边框无内阴影
- [拟态滑块](/llms/components/slider--neumorphic.md): Neumorphic Range｜轨道压入（inset 双阴影）、旋钮浮起（外双阴影），方向相反
- [玻璃开关](/llms/components/switch--glass-apple.md): iOS UISwitch｜role=switch + aria-checked，Space / Enter 切换
- [极简开关](/llms/components/switch--minimal.md): Flat Minimal Switch｜role=switch + aria-checked，Space / Enter 切换
- [拟态开关](/llms/components/switch--neumorphic.md): Neumorphic Switch｜role=switch + aria-checked，Space / Enter 切换
- [玻璃数据表](/llms/components/table--glass-apple.md): Data Table｜table + caption（视觉隐藏）；表头 scope=col，首列当行头 scope=row
- [极简数据表](/llms/components/table--minimal.md): Data Table｜同一份 props（caption / columns / rows / className）
- [拟态数据表](/llms/components/table--neumorphic.md): Data Table｜同一份 props（caption / columns / rows / className）
- [玻璃标签页](/llms/components/tabs--glass-apple.md): Tabs (APG, automatic activation)｜tablist / tab / tabpanel 三件套，aria-selected + aria-controls 绑定面板
- [极简标签页](/llms/components/tabs--minimal.md): Tabs (APG, automatic activation)｜tablist / tab / tabpanel 三件套，aria-selected + aria-controls 绑定面板
- [拟态标签页](/llms/components/tabs--neumorphic.md): Tabs (APG, automatic activation)｜tablist / tab / tabpanel 三件套，aria-selected + aria-controls 绑定面板
- [玻璃标签输入](/llms/components/tags--glass-apple.md): Tag Input (chips)｜回车 / 逗号 / 失焦提交；粘贴逗号分隔的多个值会拆开并去重
- [极简标签输入](/llms/components/tags--minimal.md): Tag Input (chips)｜同一份 props（value / defaultValue / onChange / max / disabled）
- [拟态标签输入](/llms/components/tags--neumorphic.md): Tag Input (chips)｜同一份 props（value / defaultValue / onChange / max / disabled）
- [玻璃多行输入](/llms/components/textarea--glass-apple.md): Autosizing Textarea｜label 在框上方；校验契约与单行输入一致（aria-describedby + aria-invalid + role=alert）
- [极简多行输入](/llms/components/textarea--minimal.md): Autosizing Textarea｜白面 + 发丝边 + shadow-sm，没有模糊与 inset
- [拟态多行输入](/llms/components/textarea--neumorphic.md): Autosizing Textarea｜同色凹槽：左上暗、右下亮两条 inset 阴影，没有边框
- [玻璃通知](/llms/components/toast--glass-apple.md): Toast Stack (sonner-style)｜新通知在前，后排逐层缩小上移
- [极简通知](/llms/components/toast--minimal.md): Flat Toast Stack (sonner-style)｜宽 356px，牌堆每层缩 5%、抬 14px
- [拟态通知](/llms/components/toast--neumorphic.md): Neumorphic Toast Stack (sonner-style)｜宽 356px，牌堆每层缩 5%、抬 14px
- [玻璃提示](/llms/components/tooltip--glass-apple.md): Tooltip (WCAG 1.4.13)｜悬停等 --dwell-tooltip（350ms）才出，键盘聚焦立即出；移出 / 失焦 / Esc 立即关
- [极简提示](/llms/components/tooltip--minimal.md): Tooltip (WCAG 1.4.13)｜同一份 props（content / children / placement）
- [拟态提示](/llms/components/tooltip--neumorphic.md): Tooltip (WCAG 1.4.13)｜同一份 props（content / children / placement）
- [玻璃上传](/llms/components/upload--glass-apple.md): Dropzone｜三个入口：拖放、点选择文件、键盘聚焦按钮后 Enter 打开选择器
- [极简上传](/llms/components/upload--minimal.md): Dropzone｜同一份 props（accept / multiple / maxSizeMb / files / onChange）
- [拟态上传](/llms/components/upload--neumorphic.md): Dropzone｜同一份 props（accept / multiple / maxSizeMb / files / onChange）

## 整页场景

- [使用概览](/llms/scenes/dashboard.md): 2 个真实组件拼装的整页参考实现｜/showcase/demo/dashboard
- [组件目录](/llms/scenes/list.md): 5 个真实组件拼装的整页参考实现｜/showcase/demo/list
- [新建发布](/llms/scenes/create.md): 4 个真实组件拼装的整页参考实现｜/showcase/demo/create
- [发布记录](/llms/scenes/record.md): 8 个真实组件拼装的整页参考实现｜/showcase/demo/record
- [两步验证](/llms/scenes/auth.md): 3 个真实组件拼装的整页参考实现｜/showcase/demo/auth
- [账户设置](/llms/scenes/page-settings.md): 3 个真实组件拼装的整页参考实现｜/showcase/demo/page-settings
- [产品首页](/llms/scenes/page-home.md): 0 个真实组件拼装的整页参考实现｜/showcase/demo/page-home

## 机器可读出口（要装进项目就走这里）

- [注册表目录](/r/registry.json): 全部条目的索引，112 条
- [注册表页](/showcase/registry): 命名空间注册与安装命令
- 单个组件条目：/r/<类型>--<材质>.json，内联源码 + cssVars + 结构化 props

## Optional

- [组件矩阵](/showcase/matrix): 类型 × 材质全景与场景归属
- [设计标准页](/design): 上面 8 篇的站内渲染版（带站点外壳，读用 /llms/design/）