用途：该技能管理消费方项目的 DESIGNSYSTEM.MD 文档，定义视觉语言、外壳、表面组合、状态与界面业务规则，指导 UX、UI、界面体验与 React 组件。适用于创建或审查界面、CRUD 流程、导航、表单或全局组件之前，也用于文档缺失、过时或与已设计界面冲突时。不用于编目组件、props 或本地文件，那属于 INTERFACE.md。
必读来源顺序：项目根目录的 DESIGNSYSTEM.MD（若存在）；.specsfy/templates/DESIGNSYSTEM.MD（用于补建缺失源）；INTERFACE.md；.specsfy/STACK.md、清单、路由、界面、权限与相关领域规则。源不存在时复制受管模板并只填写已确认上下文，不用通用文字掩盖空缺。
流程：识别产品、模块、表面与受影响流程；与 DESIGNSYSTEM.MD 比对并保留已生效规则；用户未给视觉方向时应用文档默认值并记录为默认方向；用户给出不同方向时记录例外、范围及被替代规则，界面例外不改变整个产品；仅当规则具有宏观范围时更新文档，具体组件与界面记入 INTERFACE.md；交付前映射表面的规范场景；返回已读文件、应用规则、已登记例外与覆盖场景。每次视觉交付在开发中即做审查，检查边框、间距、边距、内边距与系统排版，并在任务 VISUAL 项记录方法、结果与调整。
SaaS 默认模式：CRUD 列表用 PageHeader + 有用摘要 + DataGrid；详情用 PageHeader + DetailLists；创建与编辑用 PageHeader + 响应式两列表单区；表单标签在字段上方；字段错误用红色边框/背景/图标并在字段下方显示消息；多错误在开头汇总并链接到字段；界面覆盖加载、空、错误、成功、无权限、部分内容与未保存状态；面包屑必填并显示活动团队、模块与当前标题；DataGrid 整行可点击并支持键盘；CRUD 复用同一 PageHeader，列表全宽 DataGrid 显示 ID 列并提供行内编辑与删除按钮。仪表盘用 PageHeader、周期或范围、过滤器、KPI 条、趋势或分布及明细列表，每个指标声明加载、空、错误与更新状态，图表提供文本或表格替代。基础控件用 shadcn/ui primitives，CRUD 与仪表盘组合可用 ReUI 免费块，但需适配令牌、数据、权限、无障碍与产品语言，并在 INTERFACE.md 登记来源、状态与消费者。
规范场景：有记录列表、空列表、带状态与操作的详情、有效创建、有效编辑、字段错误、无权限、加载失败、未保存更改、破坏性操作结果。每个场景说明前置条件、操作、响应、视觉状态、焦点、消息与下一步。
限制与交接：UX 定义流程、信息架构与任务语言；UI 定义令牌、层级、视觉组合与状态；React 组件在阅读本源与 INTERFACE.md 后选择兼容 primitives 与组合；界面体验技能协调交付，未加载 DESIGNSYSTEM.MD 不得开始界面。反模式包括卡片墙、无分区表单、移动端两列、仅用占位符作标签、仅用图标/颜色/远处 toast 表示错误、无 PageHeader/空状态/恢复路径、无问题/周期/单位/下一步的仪表盘、未适配的 ReUI 或 shadcn/ui 块、未检查文档就新建令牌或组件、局部例外登记为全局规则、重复表头/窄 DataGrid/隐藏 ID/无行内操作的 CRUD。
验证：确认 DESIGNSYSTEM.MD 存在且含分类、策略、默认值、状态、场景与历史；列表用 DataGrid 与 PageHeader；每屏有含活动团队、模块与当前屏的面包屑；Laravel 复用现有 Breadcrumb；详情用 DetailLists；创建编辑用分区、上下文列与响应式字段面板；字段错误红色且语义关联；默认方向或例外已登记范围；INTERFACE.md 仅含本地登记；spec 与任务覆盖状态、权限、焦点、消息与返回；仪表盘有过滤器、指标上下文、无障碍替代与明细调查；shadcn/ui 与 ReUI 块已登记来源、状态与消费者；每任务在 EVIDENCE 前完成 VISUAL 项。有实现时运行栈测试与验证器；Specsfy 技能运行 quick_validate.py 与 monorepo 套件。相关技能：references/standards.md、skills/templates/DESIGNSYSTEM.MD、skills/templates/Interface.md、specsfy-specialist-interface-experience、specsfy-specialist-ux-design、specsfy-specialist-ui-design、specsfy-specialist-react-ui-components。