设计知识库
由社区维护、审核后发布，并在 Agent 页面创作前被 RAG 检索为设计约束。
滚动容器归属契约
长页面、库页面和工作台必须明确唯一主滚动容器；嵌套 `height: 100vh`、`overflow: hidden/auto` 和 sticky 面板前要先声明滚动归属。
滚动不是浏览器附带行为，而是布局契约。谁拥有页面滚动、谁拥有局部滚动、哪些面板 sticky、移动端如何 reflow，都要在实现前确定。97%Knowledge Architecture RAGfacets / search全局分面索引契约
知识库、素材库和风格库的侧栏分面应来自全库索引，而不是当前结果子集；结果区再解释当前 query 与筛选条件。
分面导航既是检索控件，也是信息架构地图。若分面只从当前结果集派生，用户搜索后会失去其他分类入口，RAG 也难以稳定发现相邻知识。97%Frontend Implementationmaterial / glass半透明材质可读性契约
玻璃、acrylic、mica、smoke 和 backdrop blur 不能只是风格滤镜；它们必须明确 surface role、背景可变性、层级、对比度、用户偏好、forced-colors 和 fallback。
半透明材质的价值是把界面层级和背景上下文连接起来；如果它降低阅读、状态识别、键盘焦点或可访问偏好，它就应该退回不透明 surface。96%Frontend Implementationai-ui / citationsAI 答案引用与证据面契约
AI/RAG 答案的引用不是页脚装饰，而是 claim、source、snippet、权限、streaming 状态、复制/分享和审计行为共同组成的证据面。
可信 AI 界面要让用户知道哪些结论有来源、来源是否可访问、证据何时生成、如何打开或复制，以及缺失/过期/低置信来源如何处理。96%Frontend Implementationapi-reference / openapiAPI Reference 端点页面契约
API 端点页应把 method/path、鉴权、参数、请求体、响应/错误矩阵、示例、try-it 安全和移动端 schema 阅读收敛成一个可执行文档契约。
API reference 不是把 OpenAPI schema 渲染出来就结束。它是开发者执行任务的操作面，必须同时服务发现、首次调用、鉴权配置、错误恢复、复制示例、试运行安全和版本信任。96%Frontend Implementationdeveloper-docs / code-block开发者文档代码示例与复制契约
开发者文档中的代码块不仅要高亮好看，还要说明任务、可安全复制、反馈清楚、tabs 可键盘操作、移动端不破坏页面滚动。
代码示例是产品操作面。它同时承担教学、配置、API 调用、信任和执行成本，因此必须把语法高亮、复制、占位符、tabs、playground、响应式和可访问反馈作为一套组件契约。96%Frontend Implementationaria / componentsARIA 组件契约
自定义交互组件在写样式前要先定义 native-first 决策、name/role/value、ARIA/DOM 状态、键盘矩阵、焦点路径、视觉状态和测试断言。
ARIA 不是给 div 补语义的魔法层；组件只有在原生语义、键盘行为、可访问名称、状态属性和视觉状态互相一致时，才是可实现的。96%Interaction Responsive Motionoverlay / dialog浮层焦点与滚动锁契约
浮层不是一层遮罩，而是 modality、初始焦点、焦点循环、关闭规则、背景 inert、滚动锁、portal 层级和移动端安全区的联合契约。
只要浮层改变用户可交互范围，就必须同时治理键盘、读屏、指针、滚动和移动端行为；视觉上盖住背景但语义上仍可达，是最危险的假 modal。96%Design Systems Page Patternscommerce / catalog电商浏览购物车结账漏斗
零售电商需要把商品发现、商品评估、加购反馈、购物车审阅、访客结账、地址/支付恢复和订单确认串成连续决策系统。
电商转化不是单个 PDP 或 checkout 表单的优化，而是每一段都回答用户能否找到、比较、确认总成本、修复错误并放心付款。96%Knowledge Architecture RAGrag / retrievalRAG 检索意图覆盖契约
每条 skill、知识、风格和素材条目都要覆盖用户话术、设计理论词、组件状态词、实现风险词和来源词，避免只靠标题被动召回。
RAG 质量不只取决于内容深度，还取决于条目能否被正确召回。检索 query 是给未来 agent 的路标，必须覆盖多种说法和任务意图。96%Design Systems Page Patternssearch / filters搜索与筛选 UX 契约
搜索、筛选、分面和排序必须共同解释当前结果集：查询是什么、范围是什么、条件是什么、结果为何出现、如何恢复。
检索界面是一台状态机。用户每输入 query、选择 facet、改变排序或清空条件，都应看到结果数量、active filters、命中摘要、空结果恢复和可分享的 URL 状态。96%Design Systems Page Patternstokens / settings设计系统 Token 设置页
Token 设置页必须让语义、别名、模式、影响组件、版本 diff 和发布风险同时可见，不能只是颜色和数字输入表单。
Design token 是跨设计工具、代码平台和组件库传播的设计决策。设置页的核心任务不是编辑值，而是解释一个值如何被引用、在哪些模式下变化、会影响哪些组件和版本。96%Frontend Implementationupload / dropzone文件上传状态与校验契约
上传组件不是一个虚线框，而是一套从选择、校验、上传、暂停、失败、重试到最终文件记录的状态机器；拖放只能是增强，不能替代可访问文件选择和服务端校验。
文件上传同时涉及交互、网络、隐私、安全和可访问性。健康上传体验先定义文件目的、限制、API、状态和失败恢复，再选择 react-dropzone、Uppy、FilePond、tus-js-client 或原生 input。96%Frontend Implementationcomponents / states组件状态矩阵契约
生成或接入组件前，先列出状态矩阵、交互触发、ARIA/DOM 表达、视觉 token 和测试路径，避免只完成静态默认态。
组件质量不是默认态截图，而是所有可达状态在鼠标、键盘、触控、读屏、加载、错误和权限限制下都保持可理解、可恢复、可测试。95%Frontend Implementationcopy-in / motionCopy-in 动效组件本地化与可访问性
复制外部动效组件、Lottie/Rive 播放器、Motion/GSAP 示例或 registry block 后，要把文字、状态、方向、时长、reduced-motion、pause/stop/hide、键盘路径和授权来源改成本地契约。
动效组件复制进仓库后不再是演示片段，而是本地交互资产。它必须同时满足品牌语气、语言方向、可访问降级、性能预算和来源授权。95%Frontend Implementationaria / apgARIA APG 组件模式契约
手写复杂 widget 前，先从 WAI-ARIA APG 提取角色、状态、属性、键盘表、焦点策略和测试断言；能用原生或成熟 primitive 时不从零造。
ARIA 是语义和交互契约，不是给 div 补魔法属性。自定义 combobox、dialog、tabs、treegrid、menu、listbox 等组件必须先证明它们的键盘、焦点和辅助技术模型成立。95%Interaction Responsive Motionscroll / horizontal横向滚动作品集边界
横向滚动适合有限作品集、画廊和项目序列，不适合长正文、文档和核心任务流程。
横向滚动必须是一种明确内容格式：用户看得见下一项、能用键盘和触控操作、能在窄屏重排，并且核心文字不被藏进横轴。95%Interaction Responsive Motionmotion / scroll滚动叙事章节契约
滚动叙事的基本单位不是动画帧，而是可读章节：每章要有明确问题、文本锚点、视觉状态、静态 fallback 和可验证的滚动行为。
滚动叙事应把复杂机制拆成用户可停留、可跳过、可回到的证据链；动效只负责连接章节和状态，不应成为唯一内容载体。95%Design Systems Page Patternsknowledge-base / library知识库与资源库浏览模式
知识库、素材库和模式库需要把搜索、分类、筛选、结果数量、命中摘要、空结果和详情返回路径组织成稳定浏览流程。
库页面的价值不是展示很多卡片，而是帮助用户从模糊意图逐步收敛到可调用条目，并保留来源、质量、分类和下一步行动。95%Design Systems Page Patternsfood-commerce / first-viewport食品快商的食欲到下单路径
餐饮、饮品和快商页面可以高能、有趣、有动效，但首屏必须把食欲转成菜单、价格、食材/营养证据和稳定下单路径。
食品电商的表现力只有在服务选择、信任和购买时才成立；动效、夸张字体、食材插画和品牌色必须把用户带回可检查的商品与下单行动。95%Design Systems Page Patternspublic-service / trust公共服务信任锚点与恢复路径
公共服务界面必须把官方身份、负责机构、法定链接、任务标题、表单语义、错误摘要和恢复路径做成可验证的页面结构，而不是只套蓝白政务视觉。
公共服务的信任来自可检查的责任链和可恢复的任务流：用户需要知道是否官方、谁负责、信息是否安全、为什么需要填写、出错后如何修复、以及去哪里查看隐私/无障碍/监督信息。95%Design Systems Page Patternsdashboard / kpiDashboard KPI 告警分诊契约
运营 dashboard 应把 KPI、告警、阈值、负责人、证据和下一步行动组织成可扫描的分诊系统，而不是同权重图表墙。
好的 dashboard 先回答是否需要行动、严重程度、影响范围、责任人和证据路径；图表只是支持分诊的证据层。95%Frontend Implementationscroll / motion滚动联动动效实现边界
滚动动效要区分 CSS scroll timeline、GSAP ScrollTrigger、Lenis smooth scroll 和普通原生滚动；不要为了沉浸感破坏阅读、锚点、键盘和移动端手感。
滚动是用户控制阅读节奏的输入，不是动画导演的时间轴。实现应优先保留原生滚动语义，再为确有价值的局部段落绑定轻量动效。95%Interaction Responsive Motionmotion / reduced-motion动效可访问与性能分诊
动效上线前要先分清目的、触发、可关闭性、性能属性和验证证据，不能只凭“看起来顺滑”通过。
好的动效解释变化，坏的动效制造额外负担。分诊的核心是把每个动画变成可说明、可降级、可测试、可清理的界面行为。95%Design Systems Page Patternsprogressive-disclosure / settings复杂界面的渐进披露
复杂设置、表单和后台页面要先暴露常用任务，再把高级、危险、稀有或条件性选项放进可预测的二级路径。
渐进披露不是把东西藏起来，而是按用户任务、风险和频率安排显示时机，让新手少犯错、熟练用户仍能找到高级控制。95%Frontend Implementationtables / responsive响应式数据表披露契约
复杂数据表在移动端不能只缩小字号或强塞横向滚动；必须定义主键、列优先级、替代表达、表头关联和批量/行内操作边界。
数据表是一种比较结构。响应式处理要保护比较关系和可访问语义，而不是只保护桌面视觉外观。95%Design Systems Page Patternsinformation-architecture / navigation信息气味与链接标签契约
导航、卡片和正文链接必须让用户在点击前判断目的地、价值和成本；模糊的“了解更多”会削弱查找效率和可访问性。
信息气味来自链接文字、周围语境和用户已有经验。设计系统应把链接标签当成信息架构的一部分，而不是按钮文案的最后填空。95%Interaction Responsive Motionbulk-actions / tables批量操作预览与 Diff
批量操作需要先建立选择范围、动作对象、影响数量、失败分支和撤销/审计路径，危险批量修改必须在提交前展示 diff。
批量操作提升效率，也会放大错误。界面必须把当前选择、动作范围、不可处理项、危险后果、异步进度和完成后恢复路径全部显性化。95%Design Systems Page Patternsaudit-log / evidence审计日志证据链
审计日志界面要支持调查、过滤、详情、JSON/CSV 导出和证据解释，而不是只展示按时间排序的活动流。
审计日志的核心价值是可追溯和可证明。每条记录都要回答谁在什么时候、从哪里、对什么对象、做了什么、结果如何、后续证据在哪里。95%Design Systems Page Patternsnotifications / inbox通知收件箱分诊模型
通知中心需要区分即时反馈、可延后阅读的通知、需要处理的任务和系统级告警，并用读取状态、严重度、来源和批量操作组织分诊。
通知不是消息列表。它是一套注意力分配系统：什么时候打断、什么时候静默、何时进入收件箱、如何归档、如何回到原始对象，都需要明确规则。95%Design Systems Page Patternspermissions / roles权限矩阵继承预览
权限界面必须解释谁通过哪条路径获得什么能力，并在保存前预览继承、覆盖、危险权限和批量修改影响。
权限矩阵不是普通设置表格。它是安全、组织结构、资源范围和审计责任的交汇点；用户必须能区分直接授权、角色授权、团队/组继承、默认权限、外部访客和显式拒绝。95%Data Visualizationmap / poi地图 POI 图标归因边界
Maki 这类 POI 图标集只解决地图符号，不等于解决地图数据、瓦片、样式、底图 provider、地点标签和交互归因。
地图符号是一层视觉编码。agent 必须把 icon set、sprite、地图样式、地理数据、瓦片 provider、图例和可访问标签分开治理，避免把图标许可误当地图许可。95%Data Visualizationmaps / geospatial地图数据归因与替代路径
地图界面必须把运行时库、瓦片、样式、glyph、sprite、地理数据和 provider 归因分别记录，并提供列表/表格替代和键盘可达路径。
地图不是一张背景图。它是复杂数据可视化、交互控件和授权对象的组合；用户必须能理解位置、范围、选中对象、数据来源、更新时间和替代访问方式。95%Data Visualizationaccessibility / charts可访问图表替代说明
图表需要标题结论、文本摘要、冗余编码和数据表替代；Canvas 或 SVG 本身不能自动等于可访问。
数据可视化是一种非文本内容和交互内容。它必须让看不见图、无法辨色、只用键盘、缩放页面或使用屏幕阅读器的人获得等价结论和数据路径。95%Data Visualizationdata-transform / provenance可视化数据转换来源
图表必须记录 filter、aggregate、bin、timeUnit、join、missing value 和排序逻辑；否则用户无法审计图表为什么这样显示。
数据可视化的可信度不仅来自图形，还来自可解释的数据转换链。每个聚合、过滤和派生字段都应能追溯。95%Resource Licensingfigma / licenseFigma Community 资源许可分诊
Figma Community 不是统一开源仓库；每个文件、插件、widget、付费资源和 slide template 都要逐条确认许可与再分发边界。
素材库不能把“来自 Figma Community”当作授权说明。可下载、可复制、可商用、可改作、可再分发和可训练/RAG 引用是不同问题。95%Frontend Implementationcontainer-query / responsiveContainer Query 组件响应式契约
组件响应式不应只跟随 viewport；卡片、侧栏、图表和资源卡应根据自身容器宽度调整密度、层级和操作显隐。
Container queries 把响应式判断从页面级断点推进到组件级上下文，让同一组件能安全放进 grid、sidebar、drawer、modal 和 dashboard 插槽。95%Typography Color Accessibilityforced-colors / high-contrastForced Colors 与高对比支持
高对比不是暗色模式；forced-colors 会改写许多颜色属性，组件必须用系统颜色、真实 outline 和非颜色冗余保持可辨。
可访问色彩系统要尊重用户代理的高对比渲染，而不是强行保留品牌色。关键状态应在颜色被系统接管、阴影被移除、背景图失效时仍然可理解。95%Frontend Implementation3d / three.jsWeb 3D 素材运行时管线
Three.js 页面不是只放一个 canvas；3D 素材要同时定义来源授权、glTF 优化、纹理压缩、加载状态、交互目标、fallback 和验证证据。
Web 3D 是设计、素材、运行时和性能预算的组合。agent 只有先治理模型来源、几何复杂度、纹理格式、降级路径和可访问说明，才能安全生成 3D 体验。95%Resource Licensingavatar / placeholder确定性头像占位治理
Boring Avatars、DiceBear 这类头像生成器适合做身份占位，但必须记录 seed、样式、授权、隐私输入和可访问名称，不能把生成图当真人肖像或品牌资产。
确定性头像的价值是稳定识别同一对象，而不是提供真实身份。它同时涉及视觉区分、隐私、授权、可访问标签和跨项目复用边界。95%Interaction Responsive Motionforms / validation表单错误状态契约
表单错误状态契约把 label、帮助文本、验证时机、内联错误、错误摘要、提交状态、服务端失败、移动键盘和 ARIA 连接放进同一个可实现模型。
表单错误不是某个红色组件，而是字段契约、状态机和恢复路径的组合；它应路由到更细的错误摘要、可访问反馈、标签持久性和事务型恢复知识。95%Resource Licensingpattern / texture图案/纹理授权边界
图案、纹理和背景生成器要区分代码授权、导出资产授权、署名要求、修改权和再分发边界，不能把“免费生成”当作可任意入库。
同一个资源可能同时包含工具代码、示例图案、导出 SVG、真实材质文件、作者署名和商标/平台条款。素材库必须记录到实际可复用资产层。95%Resource Licensingbrand-logo / trademark品牌 Logo 使用边界
品牌 logo 只能在真实品牌引用、集成、支付方式、客户/伙伴证明或授权合作中使用；必须确认商标/品牌指南、不得暗示背书、不得随意改形改色，并提供可访问名称。
品牌 logo 不是普通 icon。开源项目、聚合站或 SVG 包的代码许可，通常不能替代商标、品牌指南、背书语境和使用范围判断。95%Resource Licensingicons / license图标集授权、商标与可访问治理
图标不是可随意混搭的装饰素材；主图标集、聚合图标、品牌 logo 和 icon-only 控件分别需要授权、商标、导入和可访问规则。
图标治理的目标是让界面符号一致、可合法复用、可被读屏理解、可被 tree-shake，并且不把品牌 logo 当作自由装饰或背书。95%Resource Licensingfonts / licenseWeb 字体授权与加载治理
字体入库不能只选好看字体；必须同时确认字体级授权、交付方式、隐私约束、CJK 体积、fallback 和加载性能。
字体是品牌资产，也是运行时依赖。一个字体方案只有在授权可追踪、加载面可控、fallback 稳定、隐私边界明确时，才适合被 agent 自动推荐。95%Resource Licensingvideo / motionStock Video 首屏与背景治理
免费 stock video 可以让首屏更真实，但必须同时确认具体授权、人物/商标/地点权利、署名、poster、暂停控制、reduced-motion 和移动端性能。
背景视频不是动态壁纸。它只有在服务首屏信号、品牌语气或叙事证据，并且不破坏阅读、可访问性、授权和性能时，才适合进入生产界面。95%Resource Licensingillustration / empty-state友好素材在空状态中的治理
插画、emoji 和 Lottie 可以让空状态更亲切，但必须先服务原因、下一步行动、授权记录、替代文本和 reduced-motion。
友好素材不是空状态的主角。它只能强化语气、降低焦虑或帮助理解；真正的界面价值来自清楚说明为什么为空、用户下一步能做什么、素材是否可合法复用。95%Resource Licensingattribution / license素材署名展示契约
授权元数据不只存在于 catalog；CC BY、自定义许可、地图、图片、插画、Lottie 等需要在 UI、导出物或来源说明中以可读、邻近、可追溯的方式呈现署名、许可链接、修改说明和商用风险。
署名是界面信息架构的一部分，不是素材库后台字段。凡是授权要求归因的资源，都要设计用户能找到、法务能审计、agent 能追踪的展示面。95%Interaction Responsive Motion3d / storytelling沉浸式 3D 叙事关卡
WebGL/Three.js/3D 动效应被拆成可理解的叙事关卡：每一段都回答一个问题，并提供静态、低动效和可跳过路径。
沉浸式 3D 的价值不是把用户困在场景里，而是把抽象概念变成可暂停、可理解、可继续的证据链。94%Typography Color Accessibilitycharts / accessibility图表可访问编码
图表可访问编码把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
可访问图表不是给图像加一句 alt，而是让视觉编码、文字总结、交互状态和数据替代路径共同传达同一证据。94%Typography Color Accessibilitybackground / texture装饰背景可读性
纹理、图案、渐变、噪声和媒体背景必须服从文字、控件、语义和性能，而不是把内容压成氛围图。
背景是层级和氛围的支持层；一旦承载信息、影响阅读或移动，它就需要语义替代、对比证据、运动降级和授权记录。94%Visual Foundationscase-study / awwwards获奖网站案例证据矩阵
分析 Awwwards 等获奖网站时，要把布局、配色、字体、交互、动效和可用性证据拆开记录，避免只说“高级、沉浸、好看”。
案例分析的价值不是模仿表面风格，而是把可验证的设计选择转化为可复用的判断和实现约束。94%Data Visualizationchart-choice / data-relationship图表问题先于图表类型
先明确用户要判断的数据关系，再选图表类型和前端库；不要从“我想要一个漂亮图表”开始。
优秀图表不是视觉样式集合，而是把数据结构、用户问题和视觉编码匹配起来的决策结果。94%Data Visualizationdashboard / metric-cardDashboard 指标卡语义契约
指标卡不是大数字装饰；每张卡都要说明指标定义、时间范围、比较基线、单位、数据状态和下一步行动。
Dashboard 首屏应先回答用户当下该判断什么，而不是把所有数据压成等权图表墙。指标卡是决策入口，需要有语义和证据链。94%Frontend Implementationview-transition / navigationView Transition 路由连续性
View Transition API 能让路由、筛选和详情切换更连续，但必须保留 URL、焦点、滚动、reduced-motion 和渐进增强边界。
页面转场的目标不是炫技，而是让用户理解同一对象在列表、详情、筛选和状态变化之间的连续关系。94%Frontend Implementationa11y-testing / axe-core自动化可访问性工具分诊
axe-core、Storybook a11y、Pa11y、Lighthouse、Accessibility Insights 和 WAVE 应分层使用：自动化先抓常见问题，人工再验证任务流。
自动化可访问性测试是早期预警系统，不是完整合规证明。健康流程会把工具结果转成可复现、可修复、可复测的产品任务缺陷。94%Typography Color Accessibilityoklch / colorOKLCH 感知均匀色阶
OKLCH 让 agent 能围绕 lightness、chroma 和 hue 生成更可控的主题色阶，但仍需要语义映射、色域检查和对比矩阵。
色阶不是把一个 hex 色线性变亮变暗。健康的主题色阶应让视觉亮度、饱和度、品牌语气和使用语义一起受控。94%Resource Licensinggenerated-assets / provenance生成素材来源记录
AI 生成素材也有来源链路：工具、模型、prompt、参考输入、编辑历史、权利风险和复用边界必须一起入库。
素材库不能把“AI generated”当作授权和来源说明。生成素材是否可复用，取决于输入权利、描绘对象、编辑链路、验证信号和使用场景。94%Interaction Responsive Motionforms / errors事务型表单错误恢复
高信任表单的错误处理不是提示用户错了，而是把用户带回可修复、可继续、无需重填的状态。
事务型服务的错误恢复必须同时处理可见位置、屏幕阅读器、焦点、原始输入、错误文案和下一步行动。94%Frontend Implementationbackground-texture / css背景纹理 CSS 与可访问 fallback
纹理背景应作为次级层级接入 token、CSS/SVG 输出和降级策略；在 forced-colors、打印、移动端和低带宽下仍要保留可读界面。
背景纹理的价值是增加表面深度、品牌语气或冗余编码，不是抢走信息层级。生产实现必须把纹理当作可关闭、可压缩、可替换的 surface layer。94%Design Systems Page Patternsportfolio / navigation概念二元驱动案例导航
品牌概念可以成为作品集和服务页的组织轴，但必须映射到服务、案例、团队、菜单和 CTA，而不是停留在一句抽象口号。
概念型网站的结构要把“品牌主张”拆成可浏览的证据：服务如何体现它、案例如何证明它、团队如何支撑它、用户下一步如何行动。93%Visual Foundationstypography / navigation字体索引式品牌系统
当网站用大字号、索引、菜单和项目列表建立品牌气质时，字体必须同时承担导航、层级和信息气味，而不是只做海报效果。
表达型字体系统要把品牌声音转化为可操作结构：用户能从字级、位置、索引和状态判断自己在哪里、下一步去哪里、哪些项目最重要。93%Frontend Implementationcss-color / oklchCSS 色彩空间与色域回退
现代 CSS 支持 OKLCH、P3 和相对颜色，但生产 token 仍要照顾 sRGB、旧工具链、截图测试和第三方渲染器。
前端色彩实现要区分设计源、现代 CSS 输出和兼容 fallback；不能把浏览器支持当作所有工具链都支持。93%Resource Licensinglicense / assets素材授权元数据记录
素材库入库必须记录到具体资源级别的授权、商用判断、归因要求、下载方式和 RAG 关键词，不能只写平台名。
素材库的核心不是多，而是可合法复用、可追踪、可下载、可被 agent 准确检索。聚合平台和素材市场尤其需要资源级授权判断。93%Frontend Implementationcomponents / radixPrimitive 组件选择
当交互包含焦点、键盘、浮层、方向键或屏幕阅读器语义时，优先选择成熟 primitive，再接入本地视觉系统。
复杂交互组件的风险通常不在样式，而在焦点管理、键盘路径、ARIA 语义、portal、碰撞定位和移动端滚动锁定。Primitive 的价值是把底层行为先稳定下来。92%Interaction Responsive Motionmotion / scroll获奖站点的滚动叙事动效
滚动动效应帮助用户理解产品状态和叙事推进，而不是把信息藏在不可控的表演里。
叙事型页面的滚动动效必须服务因果、层级和节奏：每个运动段落都要解释一个状态变化或价值证据。92%Typography Color Accessibilitycolor / contrast对比度生成色阶
用目标对比度生成色阶可以提高主题可访问性，但生成结果必须再映射为语义 token 和状态用途。
可访问色彩系统不应在设计结束后才审计对比度，而应把对比度目标前置到色阶生成和 token 命名中。92%Frontend Implementationshadcn / component-governanceCopy-in 组件治理
shadcn/ui 这类复制源码组件进入项目后就变成本地资产，必须有 token 映射、状态矩阵、升级策略和授权记录。
复制源码组件的优势是可控和可改，代价是项目团队自己承担一致性、升级、授权声明和设计系统适配。91%Design Systems Page Patternspatterns / flow真实产品流作为模式证据
做模式库时应从真实产品流程提取任务、状态和文案，而不是只模仿单张漂亮截图。
优秀 UI 模式不是视觉截图的集合，而是任务流、状态流、约束和反馈的可复用证据。91%Design Systems Page Patternstokens / theme语义主题 Token 的作用域
主题 token 要定义作用域和层级，让组件消费语义角色，而不是散落一次性颜色值。
设计系统的主题能力来自少量可预测的语义开关：强调色、灰阶、面板背景、缩放、圆角和组件变体。90%Interaction Responsive Motionportfolio / motion作品集里的安静动效
作品集动效应突出选择、进入、比较和记忆点，而不是让每个元素都表演。
作品集的交互价值在于帮助用户判断作者能力：项目选择、视觉细节、案例跳转和上下文过渡要比装饰动画更重要。90%Frontend Implementationloading / skeleton加载骨架进度契约
加载状态要按时长、范围和可测进度选择 skeleton、inline loading、spinner、进度条或阶段反馈，并用前端状态机保证可访问、稳定和可恢复。
加载反馈的目标不是让等待更花哨，而是让用户知道系统是否响应、哪里正在变化、是否还能行动、等待是否可估计、失败后如何恢复。不同等待场景需要不同的反馈模式。90%Interaction Responsive Motionempty-state / recovery空状态恢复契约
空状态要先说明系统状态和原因，再给出解决当前原因的主行动，而不是只用插图填补空白。
空状态是一种已完成的系统反馈：用户需要知道内容为什么没有出现、当前请求是否已经结束、自己能做什么，以及是否需要权限、配置、重试或等待。90%Design Systems Page Patternsai / generationAI 生成进度模式
AI 生成进度模式把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
AI 生成需要让用户知道系统正在做什么、还能做什么、失败后如何恢复。88%Design Systems Page Patternstokens / editorToken 编辑器模式
Token 编辑器模式把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
Token 编辑器需要让设计决策、引用关系和影响范围可见。87%Design Systems Page Patternsdocumentation / design-system设计系统文档页
设计系统文档页把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
设计系统文档要同时支持查找、理解、复制和判断是否适用。87%Design Systems Page Patternssettings / ia设置页信息架构
设置页信息架构把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
设置页应该按用户意图和风险分组，而不是按数据库字段或内部组织结构。87%Interaction Responsive Motionmodal / focus弹窗焦点管理
弹窗焦点管理把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
弹窗改变了交互上下文，必须管理焦点、背景可达性和关闭路径。87%Design Systems Page Patternscommunity / library社区资源投稿流程
社区资源投稿流程把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
社区资源需要降低投稿门槛，同时用审核和来源说明保护质量。86%Design Systems Page Patternsaudit-log / timeline审计日志时间线
审计日志时间线把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
审计日志需要回答谁、何时、对什么、做了什么、影响是什么。86%Design Systems Page Patternssearch / filters搜索结果与分面筛选
搜索结果与分面筛选把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
搜索界面需要让用户理解结果为何出现，以及如何缩小或放宽范围。86%Design Systems Page Patternsgovernance / review组件治理审核流
组件治理审核流把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
设计系统需要记录组件为何新增、如何复用、何时弃用，而不是只维护组件清单。86%Design Systems Page Patternsai / promptPrompt 构建界面
Prompt 构建界面把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
Prompt 构建器应帮助用户表达目标、上下文、约束和输出格式，而不是只给一个大文本框。86%Design Systems Page Patternsanalytics / drilldown分析 Drill-down 工作流
分析 Drill-down 工作流把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
分析界面应从异常和问题入口深入到原因，而不是只展示图表集合。86%Design Systems Page Patternsadmin / list-detail后台列表详情模式
后台列表详情模式把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
后台管理通常从列表筛选进入详情处理，两个页面必须共享状态和操作语义。86%Interaction Responsive Motiongesture / mobile触控手势替代路径
触控手势替代路径把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
滑动、捏合和长按不能成为完成任务的唯一方式。86%Interaction Responsive Motionloading / skeleton骨架屏层级
骨架屏层级把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
骨架屏应预告真实内容结构，而不是制造额外视觉噪音。86%Interaction Responsive Motiontables / bulk-actions表格批量操作模型
表格批量操作模型把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
批量操作需要清楚表达选中数量、作用范围、风险和完成反馈。86%Interaction Responsive Motiondrag-drop / accessibility拖拽替代控件
拖拽替代控件把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
拖拽适合直接操作，但排序、移动和上传必须有非拖拽路径。86%Interaction Responsive Motiondanger / confirmation破坏性操作确认
破坏性操作确认把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
确认只应保护不可逆或高影响动作，且必须说明对象和后果。86%Interaction Responsive Motionkeyboard / navigation键盘优先导航
键盘优先导航把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
可键盘完成的界面通常也更清晰，因为焦点顺序暴露了真实任务结构。86%Typography Color Accessibilityforms / input触控键盘与输入目的
触控键盘与输入目的把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
移动端输入字段应匹配正确键盘、自动完成和输入目的，减少错误和操作成本。86%Typography Color Accessibilitymotion / reduced-motion减少动效可访问性
减少动效可访问性把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
动画和过渡需要尊重用户的减少动态偏好，并提供不依赖动效的信息路径。86%Typography Color Accessibilityforms / labels表单标签持久可见
表单标签持久可见把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
表单字段标签应在输入前后都可见，帮助用户确认字段含义和上下文。86%Typography Color Accessibilitystatus / aria状态消息公告
状态消息公告把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
状态变化只靠颜色、toast 或视觉位置变化，会让部分用户错过关键反馈。86%Typography Color Accessibilityauthentication / accessibility可访问认证流程
可访问认证流程把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
安全流程也要降低认知负担，帮助用户完成而不是考验用户。86%Typography Color Accessibilityforms / errors错误摘要模式
错误摘要模式把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
用户需要先知道有多少错误、在哪里、如何修复，而不是逐行搜索红字。86%Typography Color Accessibilitytarget-size / touch目标尺寸与间隔
目标尺寸与间隔把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
点击目标要有足够尺寸和间隔，尤其在移动端、工具栏和密集列表中。86%Typography Color Accessibilityfocus / keyboard焦点顺序与阅读顺序
焦点顺序与阅读顺序把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
可见布局和辅助技术顺序不一致，会破坏导航和理解。86%Visual Foundationsdashboard / kpiDashboard KPI 分诊
Dashboard KPI 分诊把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
指标卡不是数字展览，而是运营分诊入口。86%Design Systems Page Patternsnotifications / inbox通知中心模式
通知中心模式把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
通知中心应帮助用户分辨重要性、来源、是否已处理和下一步。85%Design Systems Page Patternsdocs / toc文档目录布局
文档目录布局把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
长文档需要同时显示当前位置、章节结构和相关下一步。85%Design Systems Page Patternsempty-state / projects空项目开始状态
空项目开始状态把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
空项目页应把用户带进第一个真实成果，而不是展示产品功能说明。85%Design Systems Page Patternspricing / comparison价格套餐比较
价格套餐比较把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
价格页的核心是帮助用户判断适合哪一档，而不是堆满营销形容词。85%Design Systems Page Patternsonboarding / setup渐进式引导设置
渐进式引导设置把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
引导不应一次性索取所有信息，而应尽快让用户看到可用结果。85%Interaction Responsive Motionmobile / actions移动端底部行动栏
移动端底部行动栏把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
移动端关键行动应靠近拇指区域，但不能遮挡内容、错误或系统导航。85%Interaction Responsive Motionfeedback / toastToast 与行内反馈选择
Toast 与行内反馈选择把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
反馈位置应匹配反馈对象；toast 适合全局短状态，行内反馈适合字段和局部修复。85%Interaction Responsive Motionwizard / progress向导步骤进度
向导步骤进度把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
向导需要让用户知道当前位置、剩余工作、可返回性和保存状态。85%Interaction Responsive Motionfilters / state筛选与查询状态保留
筛选与查询状态保留把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
筛选结果是用户构建的工作上下文，刷新、返回和分享时应尽量保留。85%Interaction Responsive Motionresponsive / navigation响应式导航折叠
响应式导航折叠把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
导航折叠不是隐藏所有入口，而是按任务频率和当前位置重新排序。85%Interaction Responsive Motionundo / editing撤销与可逆性
撤销与可逆性把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
可逆操作让用户敢于探索，减少确认弹窗和中断。85%Typography Color Accessibilitylinks / contrast链接对比与可供性
链接对比与可供性把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
链接是导航承诺，用户必须能在阅读流中快速识别可点击文本。85%Visual Foundationscomparison / layout比较布局清晰度
比较布局清晰度把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
比较的价值来自同一维度上的差异可见，而不是对象本身卡片更漂亮。85%Visual Foundationsdetail / object对象详情布局
对象详情布局把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
详情页应围绕对象身份、状态、关键属性和可执行操作组织，而不是平均展示所有字段。85%Visual Foundationsdata / charts数据墨水优先级
数据墨水优先级把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
图表和指标的视觉墨水应该先服务数据、阈值和异常，而不是装饰网格。85%Visual Foundationshierarchy / focus焦点经济
焦点经济把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
焦点越多，真正的重点越弱；视觉强调必须稀缺且服务主任务。85%Design Systems Page Patternsaccount / profile资料与账号设置
资料与账号设置把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
个人资料、登录安全、通知和计费属于不同风险等级，应分区处理。84%Design Systems Page Patternsmarketplace / browse市场浏览模式
市场浏览模式把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
市场页需要同时支持发现、比较、信任判断和安装/购买行动。84%Interaction Responsive Motionlatency / microinteraction低延迟微交互
低延迟微交互把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
微交互的目标是确认输入和状态变化，而不是让界面显得忙碌。84%Interaction Responsive Motionpagination / scroll无限滚动与分页选择
无限滚动与分页选择把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
浏览型列表可连续滚动，任务型列表通常需要定位、选择、返回和总量感。84%Interaction Responsive Motionrealtime / collaboration实时协作存在感
实时协作存在感把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
协作界面需要让用户知道谁在场、谁在编辑、冲突如何处理。84%Interaction Responsive Motionfeedback / latency乐观更新反馈
乐观更新反馈把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
乐观更新要让界面快起来，同时让失败和回滚不会让用户困惑。84%Interaction Responsive Motioncommand / shortcuts命令面板安全性
命令面板安全性把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
命令面板适合快速行动，但必须让作用对象、风险和结果足够明确。84%Typography Color Accessibilitycognitive-load / copy降低认知负担的文案
降低认知负担的文案把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
用户不应该为了完成任务记住系统状态、上一屏信息或隐含规则。84%Typography Color Accessibilitycontent / plain-language清晰语言
清晰语言把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
可理解性是可访问性的一部分，复杂文案会增加所有人的认知负担。84%Typography Color Accessibilitylocale / language语言与本地化格式
语言与本地化格式把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
日期、数字、货币、单位和语言方向要符合用户地区习惯并避免歧义。84%Typography Color Accessibilityforms / placeholder占位符不能替代标签
占位符不能替代标签把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
占位符适合展示格式示例，不适合作为唯一说明或关键指导。84%Typography Color Accessibilityicons / aria图标可访问名称
图标可访问名称把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
只有图标的按钮和状态必须有可访问名称，装饰图标则应从辅助技术中隐藏。84%Typography Color Accessibilitydark-mode / contrast深色模式对比调校
深色模式对比调校把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
深色模式不是反转颜色，需要重新检查文本、边框、状态色和阴影层级。84%Typography Color Accessibilitytypography / spacing文本间距韧性
文本间距韧性把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
界面应能承受用户调整行高、字距、字号或浏览器缩放后仍不遮挡内容。84%Typography Color Accessibilityforms / redundant-entry减少重复输入
减少重复输入把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
重复输入增加认知负担、错误率和放弃率，尤其影响辅助技术用户。84%Visual Foundationsmedia / crop媒体裁切意图
媒体裁切意图把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
图片是信息对象，不只是纹理；裁切错误会损害信任和理解。84%Visual Foundationsmap / geospatial地图与地理空间布局
地图与地理空间布局把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
地理空间界面的核心是位置、范围、对象和选择状态之间的同步。84%Visual Foundationscharts / dashboard可读 Dashboard 图表
可读 Dashboard 图表把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
运营图表经常被快速扫读，小图可读性比表现形式更重要。84%Visual Foundationsactions / context上下文操作位置
上下文操作位置把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
按钮位置会被用户理解为作用范围：行内、卡片内、区块级、全局操作不可混淆。84%Visual Foundationsdensity / content内容密度阶梯
内容密度阶梯把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
密度不是页面整体属性，而是随任务深度变化的阶梯。84%Visual Foundationsgrid / breakout网格中的突破区域
网格中的突破区域把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
少量突破网格的媒体或证明区能制造节奏，但主体信息仍要回到稳定对齐。84%Visual Foundationsmotion / hierarchy用动效表达层级
用动效表达层级把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
有用的动效让用户理解发生了什么、从哪里来、要看哪里。84%Visual Foundationslayout / container全宽与容器布局选择
全宽与容器布局选择把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
页面宽度本身就是信息架构决策，不能所有内容都塞进同一个最大宽度。84%Visual Foundationsicons / affordance图标与文字可供性平衡
图标与文字可供性平衡把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
图标不是万能语言；可供性来自图标、标签、位置和反馈共同作用。84%Visual Foundationsempty-state / onboarding空状态构图
空状态构图把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
空状态不是插画占位，而是用户进入工作流的第一步。84%Visual Foundationsdisclosure / layout空间渐进披露
空间渐进披露把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
渐进披露不只是隐藏内容，而是在空间上安排任务入口、关键结果和高级选项的先后层级。84%Visual Foundationsgrouping / labels视觉分组与标签
视觉分组与标签把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
复杂页面中的分组需要短标签、稳定位置和可扫描边界来降低理解成本。84%Visual Foundationsrhythm / sections区块节奏变化
区块节奏变化把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
长页面需要在密度、对齐、媒体比例和留白上变化，但不能换掉整个设计系统。84%Design Systems Page Patternsassets / images按页面类型选择视觉资产
视觉资产应揭示真实产品、场景、玩法或人物，而不是只提供模糊氛围。
用户需要检查对象时，图片必须具体、清楚、相关。82%Design Systems Page Patternsresponsive / stability响应式布局稳定性
固定格式 UI 元素需要稳定尺寸和响应式约束，避免内容变化引起跳动或重叠。
看板、棋盘、工具栏、计数器和按钮组都应预先定义尺寸规则。82%Design Systems Page Patternsrag / agentRAG 检索到生成的使用规则
知识库命中应转化为设计约束，而不是把知识条目原文写进页面可见文案。
RAG 的作用是提高决策质量和可追溯性，不是让页面背诵理论。82%Design Systems Page Patternspage-pattern / layout页面模式选择
先判断页面任务是营销、运营、阅读、配置、交易还是创作，再选择布局模式。
错误页面模式会让好组件也服务错目标。82%Design Systems Page Patternsecommerce / product电商产品决策流
电商页面应帮助用户判断产品、比较差异、确认信任并完成购买。
购买决策需要图片、价格、规格、库存、评价、配送和退换信息共同支持。82%Design Systems Page Patternslanding / hero落地页首屏信号
落地页首屏必须明确品牌/产品/人物/场所是什么，并露出下一段内容线索。
首屏不是只展示氛围，而是给出身份、价值和下一步探索路径。82%Design Systems Page Patternscrm / workflowCRM 工作流页面
CRM 页面应围绕线索、客户、阶段、负责人和下一步行动组织，而不是围绕装饰性区块。
CRM 的核心价值是让用户快速判断客户状态并推进下一步。82%Design Systems Page Patternsdashboard / alertsDashboard 层级与告警
Dashboard 应先显示状态总览，再显示异常、趋势、明细和行动入口。
指标不是越多越好，最重要的是帮助用户判断是否需要行动。82%Design Systems Page Patternssaas / crm运营工具密度模式
SaaS、CRM 和后台工具应优先支持重复扫描、比较和操作，而不是营销叙事。
工具首屏应显示工作对象、状态和下一步，而不是占满屏幕的宣传区。82%Design Systems Page Patternscopy / brand品牌语气与界面文案
界面文案应帮助用户行动，品牌语气要克制地嵌入按钮、状态和说明。
品牌表达不能牺牲清晰度，尤其在错误、支付、审核和危险操作中。82%Design Systems Page Patternscomponents / contract组件一致性契约
组件需要明确 props、状态、尺寸和禁止组合，才能在页面间保持一致。
组件不是视觉截图，而是一组可复用行为和约束。82%Design Systems Page Patternstokens / design-system设计 Token 治理
Token 要表达角色和约束，不只是把色值、字号和间距集中保存。
可维护 token 需要命名、范围、默认值和禁止用法，才能被人和 Agent 共同使用。82%Interaction Responsive Motioninputs / controls输入模式与控件匹配
控件类型应匹配决策方式：开关用于二元，分段用于模式，菜单用于多选项，滑杆用于连续数值。
错误控件会增加理解成本，并让用户不确定选择是否可逆。82%Interaction Responsive Motiontables / responsive响应式表格与比较
表格用于比较，响应式处理必须保留列关系、排序和关键操作。
把表格随意改成卡片会损失比较能力，需要按数据任务选择模式。82%Interaction Responsive Motionloading / performance感知性能与加载结构
加载状态应保留布局骨架，让用户知道将出现什么，而不是只显示孤立 spinner。
稳定骨架能降低等待焦虑并避免内容出现时的布局跳动。82%Interaction Responsive Motionmotion / animation克制且有目的的动效
动效应解释状态变化、空间关系或反馈，而不是单纯制造热闹。
过度动效会打断任务，尤其在高密度工具中。82%Interaction Responsive Motionbreakpoints / responsive断点重组而非缩放
响应式设计应在断点重组布局关系，而不是用 viewport 比例缩放所有元素。
缩放字号和容器会带来不可控溢出，重组结构更稳定。82%Interaction Responsive Motionmobile / responsive移动端优先堆叠
移动端不是桌面的缩小版，应按任务优先级重新堆叠内容和操作。
小屏空间有限，最重要的信息、控件和反馈需要靠前且不重叠。82%Interaction Responsive Motionprogressive-disclosure / complexity按任务风险渐进披露
低频、危险或高级设置应延后展示，高频任务保持直接可达。
渐进披露不是隐藏功能，而是按决策时机安排复杂度。82%Interaction Responsive Motionfeedback / states系统连续性的反馈状态
加载、保存、生成、审核、失败都需要可见状态，让用户知道系统仍在响应。
缺少反馈会让用户重复点击或以为数据丢失。82%Interaction Responsive Motioncards / panels卡片与面板的密度和可供性
卡片应表示对象，面板应表示工具或上下文；两者需要不同密度和交互提示。
可点击对象必须可识别，纯信息容器不应伪装成按钮。82%Interaction Responsive Motionbuttons / actions按钮优先级与操作分离
主操作、次操作、危险操作和导航链接要有清晰差异，避免用户误点。
按钮样式体现决策成本和风险，而不只是视觉偏好。82%Interaction Responsive Motionforms / workflow表单流程与校验
表单应按用户心智顺序组织字段，并在关键节点给出可恢复反馈。
好的表单把复杂任务拆成可完成步骤，而不是把所有字段平铺给用户。82%Interaction Responsive Motionnavigation / wayfinding导航地标与当前状态
用户需要知道自己在哪里、能去哪、当前筛选或页面属于哪个范围。
导航不是链接堆砌，而是产品结构和当前位置的持续提示。82%Typography Color Accessibilitytouch-target / mobile可访问交互目标
按钮、链接、菜单项和图标按钮需要足够命中区域，移动端尤其不能只看视觉尺寸。
视觉小不等于点击区域小；交互目标需要稳定尺寸和明确反馈。82%Typography Color Accessibilityaccessibility / color颜色不能单独传达含义
状态、风险、分类和选中不能只靠颜色表达，必须有文字、图标、形状或位置辅助。
色盲、低视力、打印和弱光场景都会削弱颜色语义。82%Typography Color Accessibilitysurface / color表面上的可读颜色
背景表面变化时，文字、边框、图标和状态色都要随表面重新校准。
同一个色值在不同背景上会有不同视觉强度，不应机械复用。82%Typography Color Accessibilityfocus / keyboard可见焦点状态
键盘和辅助技术用户需要清楚知道当前焦点在哪里，焦点态不能被 reset 掉。
焦点态是交互路径的一部分，不是浏览器默认样式的瑕疵。82%Typography Color Accessibilityforms / accessibility可访问表单反馈
表单反馈要靠近字段、解释原因，并在提交前后都能被用户理解。
错误信息不是惩罚，而是帮助用户完成任务的导航。82%Typography Color Accessibilitysemantic-color / state语义色与状态色
成功、警告、错误、信息、选中和待处理状态应有明确且稳定的视觉语言。
状态色是系统反馈，不应被随意用于装饰或品牌强调。82%Typography Color Accessibilitycontrast / accessibility可读性对比
文本对比必须优先服务阅读，尤其是小字号、禁用态、次级说明和按钮文字。
低对比会让精致感变成不可用，特别是在移动端和弱光环境。82%Typography Color Accessibilitycolor / tokens色彩角色系统
颜色应先定义角色，再选择具体色值，避免一个颜色承担太多含义。
主色、背景、边框、文字、状态和强调色都应有稳定职责。82%Typography Color Accessibilitytypography / font-pairing按功能配对字体
字体配对应从产品功能出发：品牌表达、长文阅读、数字比较和控件标签各有任务。
字体差异要有明确用途，避免为了风格混搭造成阅读负担。82%Typography Color Accessibilitytypography / font-weight字重强调
字重用于建立强调，而不是把每个标签都加粗。
粗体过多会失去强调能力，并让密集界面显得沉重。82%Typography Color Accessibilitytypography / readability行高与行长
长文本需要舒适行高和可读行长；密集界面也要避免文本互相压迫。
行长太宽会丢行，行高太紧会拥挤，行高太松会破坏信息密度。82%Typography Color Accessibilitytypography / hierarchy字号层级
字号层级应服务页面结构，避免在小面板里使用 hero 级标题。
清楚的字号阶梯能让标题、标签、正文、数字各司其职。82%Visual Foundationscontainer / boundary边界与容器清晰度
容器边界用于表达对象和区域，不应变成页面装饰的默认手段。
边界、底色和阴影都在传达层级，过多容器会让页面显得碎。82%Visual Foundationsmodules / rhythm模块节奏与重复
重复模块能降低认知成本，但需要用内容层级和节奏避免机械单调。
相同结构适合相同任务；变体应来自内容优先级，而不是随机样式。82%Visual Foundationsscan / layout扫描路径设计
页面应该支持用户按预期路径扫读，而不是让视线在多个焦点之间跳动。
视线通常沿标题、关键数据、分组和操作移动，布局应顺着这个路径组织。82%Visual Foundationswhitespace / structure留白作为结构
留白不是空着，而是用空气建立分隔、呼吸和注意力路径。
有效留白能减少边框、分割线和装饰，让用户自然理解区块关系。82%Visual Foundationsdensity / dashboard信息密度控制
高密度不是拥挤；低密度也不等于高级。密度要匹配用户任务频率和决策速度。
运营工具需要可扫描密度，营销页需要叙事节奏，两者不能混用。82%Visual Foundationsvisual-weight / balance视觉重量与平衡
颜色、面积、粗细、位置和阴影都会增加视觉重量，需要服务任务优先级。
视觉重量不是越大越好；它应该把注意力分配给最重要、最可操作的区域。82%Visual Foundationsalignment / layout对齐纪律
对齐让用户少花力气理解页面边界、内容归属和操作对象。
多个微小的不对齐会迅速让界面显得不专业，即使颜色和字体都正确。82%Visual Foundationsspacing / rhythm间距尺度与节奏
少量可重复的间距刻度能让页面安静、可预测，也能减少 UI 临时感。
间距应表达结构关系，而不是凭感觉逐项微调。82%Visual Foundationsgrid / layout网格作为决策系统
网格不是装饰线，而是决定内容跨度、对齐、响应式重排和密度的规则系统。
稳定网格能减少临时摆放，让复杂页面在桌面和移动端都保持结构感。82%Visual Foundationsgestalt / consistency相似性与一致性
看起来相同的元素应承担相同功能；功能不同的元素必须有清楚差异。
视觉相似性会被用户解释为功能相似性，混用样式会制造误读。82%Visual Foundationsgestalt / grouping邻近原则与分组
距离决定归属：相关元素靠近，不相关元素拉开，分组比边框更先发生。
用户会先依据空间距离判断元素是否属于同一组，边框和标题只是第二层确认。82%Visual Foundationshierarchy / layout信息层级优先
先确定用户要先看、再看和最后行动的内容，再决定字号、间距、颜色和组件强度。
有效界面不是把所有信息平均展示，而是用大小、位置、密度和对比建立清晰的阅读顺序。82%