由社区维护、审核后发布,并在 Agent 页面创作前被 RAG 检索为设计约束。
AI 生成进度模式把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
AI 生成需要让用户知道系统正在做什么、还能做什么、失败后如何恢复。88%Design Systems Page Patternstokens / editorToken 编辑器模式把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
Token 编辑器需要让设计决策、引用关系和影响范围可见。87%Design Systems Page Patternsdocumentation / design-system设计系统文档页把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
设计系统文档要同时支持查找、理解、复制和判断是否适用。87%Design Systems Page Patternssettings / ia设置页信息架构把一个高频界面判断转成可执行约束,帮助 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 构建界面把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
Prompt 构建器应帮助用户表达目标、上下文、约束和输出格式,而不是只给一个大文本框。86%Design Systems Page Patternsanalytics / drilldown分析 Drill-down 工作流把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
分析界面应从异常和问题入口深入到原因,而不是只展示图表集合。86%Design Systems Page Patternsadmin / list-detail后台列表详情模式把一个高频界面判断转成可执行约束,帮助 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%Design Systems Page Patternsaccount / profile资料与账号设置把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
个人资料、登录安全、通知和计费属于不同风险等级,应分区处理。84%Design Systems Page Patternsmarketplace / browse市场浏览模式把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。
市场页需要同时支持发现、比较、信任判断和安装/购买行动。84%Design Systems Page Patternsassets / images视觉资产应揭示真实产品、场景、玩法或人物,而不是只提供模糊氛围。
用户需要检查对象时,图片必须具体、清楚、相关。82%Design Systems Page Patternsresponsive / stability固定格式 UI 元素需要稳定尺寸和响应式约束,避免内容变化引起跳动或重叠。
看板、棋盘、工具栏、计数器和按钮组都应预先定义尺寸规则。82%Design Systems Page Patternsrag / agent知识库命中应转化为设计约束,而不是把知识条目原文写进页面可见文案。
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 的核心价值是让用户快速判断客户状态并推进下一步。82%Design Systems Page Patternsdashboard / alertsDashboard 应先显示状态总览,再显示异常、趋势、明细和行动入口。
指标不是越多越好,最重要的是帮助用户判断是否需要行动。82%Design Systems Page Patternssaas / crmSaaS、CRM 和后台工具应优先支持重复扫描、比较和操作,而不是营销叙事。
工具首屏应显示工作对象、状态和下一步,而不是占满屏幕的宣传区。82%Design Systems Page Patternscopy / brand界面文案应帮助用户行动,品牌语气要克制地嵌入按钮、状态和说明。
品牌表达不能牺牲清晰度,尤其在错误、支付、审核和危险操作中。82%Design Systems Page Patternscomponents / contract组件需要明确 props、状态、尺寸和禁止组合,才能在页面间保持一致。
组件不是视觉截图,而是一组可复用行为和约束。82%Design Systems Page Patternstokens / design-systemToken 要表达角色和约束,不只是把色值、字号和间距集中保存。
可维护 token 需要命名、范围、默认值和禁止用法,才能被人和 Agent 共同使用。82%