UI 设计规范工具箱
把「帮我设计一个页面」变成一份可交付、可被挑错的出稿说明。
适用场景
以下任一情况使用本技能：
- 写规范：沉淀某个产品或某类场景的 UI/UX 规范文档。
- 出新稿：给定场景和页面任务，输出页面的布局、组件、状态与文案。
- 做走查：对已有页面挑问题，指出缺失的状态、不一致的对齐、违规的颜色用法。
核心工作流
第 1 步：锁定场景
先确认页面属于哪个场景，再读对应规则，不要凭通用感觉发挥。
| 场景 | 参考文件 | 典型页面 |
|---|---|---|
| A 移动服务 | references/场景A-移动服务.md |
App 首页、个人中心、积分商城、资讯媒体 |
| B 管理后台 | references/场景B-管理后台.md |
列表、表单、看板、云盘、活动配置后台 |
| C 商城交易 | references/场景C-商城交易.md |
首页、商品详情、购物车、订单、售后、地址 |
| D 互动活动 | references/场景D-互动活动.md |
H5 活动、抽奖、小游戏、邀请海报、排行榜 |
| E 会员认证 | references/场景E-会员认证.md |
认证流程、等级结果、权益页、分享卡、预约下订 |
| F 问卷与内容 | references/场景F-问卷与内容.md |
问卷搭建后台、移动填写页、暗色内容资料库 |
跨场景页面（如后台里配置活动）以页面所在载体定主场景，再引用另一场景的组件规则。
信息不足时只问三件事：哪个场景、页面任务是什么、主操作是什么。其余参数先用基线默认值并标注待确认，不要追问到底。
第 2 步：读基线，套用而非自创
读取 references/通用基础样式.md，取得起步数值：
- 画布：移动端 375、桌面 1440、侧栏 200—224（海报与游戏舞台单独定比例）
- 间距阶梯只用 4 / 8 / 12 / 16 / 24 / 32
- 字号：移动 18/16/14/12，后台正文 14、辅助 12
- 主按钮：移动高 40—48，桌面控件高 32—36，表格行高 44—48
- 卡片圆角 8—12
色彩按角色定义（主操作 / 强调 / 成功 / 警告 / 错误 / 禁用 / 背景层级），不散写十六进制。
第 3 步：出稿
以 assets/页面出稿模板.md 为交付骨架，逐节填完：
- 页面任务与目标用户
- 信息结构，标注必要/可选
- 布局分区
- 组件清单，注明复用来源与本页变化
- 主操作与次操作
- 状态清单（下一节的要求）
- 虚构文案示例
- 尺寸、格式、素材约定、待确认项
组件的标准构成读 references/通用组件与状态.md。
第 4 步：状态清单按四要素写完
每个状态必须写完这四项，缺一项等于没做完：
| 状态 | 触发条件 | 可见反馈 | 按钮动作 | 后续页面 |
|---|---|---|---|---|
至少覆盖：默认、加载、空数据、禁用、校验错误、处理中、成功、失败。涉及登录或权限的业务还要补未登录 / 权限拒绝。
第 5 步：交付前自检
对照检查，有问题先改掉再说「完成」：
- [ ] 成功 / 失败 / 处理中 / 禁用没有只靠颜色区分（必须另有图标、文案或位置差异）
- [ ] 页面只有一个主操作色家族，没有多个动作在争主视觉
- [ ] 间距与字号都在既定阶梯内
- [ ] 长文本（商品名、任务名、昵称）有截断规则
- [ ] 触控目标不小于 44×44，底部操作考虑平台安全区
- [ ] 示例使用虚构内容与通用占位，二维码位标「码位占位」
- [ ] 精确色值、字体、阴影未杜撰，已列入「待确认」
沉淀组件库
多次出稿后用 assets/组件登记表模板.md 逐步登记组件与变体，验证状态列用「未开始 / 待验证 / 已验证 / 已废弃」标记。同一组件在不同场景形态不同时分行登记，不合成万能组件。
边界声明
- 本套规则来自匿名化的规则提炼，不含原图、原稿尺寸与真实业务数据，用于规则学习与新稿起草。
- 本技能提供的尺寸是起步建议，不是原始标注；精确色值、字体、圆角、阴影、动效需另行核验。
- 不要用本技能去还原或复刻某个客户的真实页面，也不声称某条规则已被原稿验证。
- 遇到未覆盖的业务形态，如实说明这是建议而非规则。
