页面模板工具箱
把「给我来个页面」变成一份能直接打开、能点、能改的 HTML，而不是一段描述。
适用场景
- 起新页面：需要一个列表页、表单页、活动页、小程序首页的起步骨架。
- 先看效果：在写正式规范前，先把页面跑起来看布局与流程对不对。
- 照模板改造：拿到模板后替换成自己的业务内容与主题。
只想要规范文档、不要页面时，用 ui-design-spec-kit；两者可配合：先出页面，再补出稿说明。
第 1 步：选端
| 端 | 判断依据 | 模板文件 |
|---|---|---|
| 小程序 | 有 tabbar、有导航栏与胶囊位、在 App 内打开 | assets/miniprogram-template.html |
| H5 | 移动端浏览器/分享链路打开、活动或落地页、底部固定主操作 | assets/h5-template.html |
| 后台 | 桌面浏览器、侧栏导航、表格与筛选为主 | assets/admin-template.html |
信息不足时只问三件事：哪一端、页面要完成什么任务、主操作是什么。其余先用模板默认值，不要追问到底。
第 2 步：复制模板
把对应 HTML 复制到目标路径并改名。模板是单文件，直接改即可：
- 小程序：首页 / 服务 / 消息 / 我的 四个 tab，含搜索、轮播、金刚区、列表、二级页
- H5：KV 主视觉、任务进度、九宫格抽奖、我的奖品、规则折叠、底部固定条、分享浮层
- 后台：列表页 / 表单页 / 详情页 / 空白页 / 看板 / 成员 / 无权限 / 设置 八个页面
第 3 步：按正确顺序改
顺序错了会越改越乱，照这个来：
- 换内容 —— 只替换文案与数据数组，不动结构样式。
- 换主题 —— 只改 CSS 变量（
--brand家族、--bg/--panel/--line），不动间距字号。 - 加减区块 —— 整块增删，不为了塞内容改间距阶梯或新造字号档位。
- 补状态 —— 把八种状态接进真实逻辑，不能只在页面里摆一个演示按钮。
- 去占位 —— 交付前把「图位占位 / 码位占位 / 头像占位」换成真实素材，或明确标注待补。
第 4 步：状态按四要素写完
每个状态必须写完这四项，缺一项等于没做完：
| 状态 | 触发条件 | 可见反馈 | 按钮动作 | 后续页面 |
|---|---|---|---|---|
至少覆盖：默认、加载、空数据、禁用、校验错误、处理中、成功、失败。涉及登录或权限的再补未登录 / 权限拒绝。
模板里已经把这八种做成了可点示例，照着接到自己的数据上即可。
第 5 步：交付前自检
- [ ] 成功 / 失败 / 处理中 / 禁用没有只靠颜色区分（必须另有图标、文案或位置差异）
- [ ] 页面只有一个主操作色家族
- [ ] 间距与字号都在既定阶梯内，没有凭空新增的数值
- [ ] 长文本（标题、名称、昵称）有截断规则
- [ ] 触控目标不小于 44×44；移动端底部留了安全区
- [ ] 交互是真的生效（筛选、排序、分页、提交都改数据），不是摆样子
- [ ] 占位已替换或已明确标注待补
- [ ] 精确色值、字体、阴影、动效未杜撰，已列入「待确认」
配套说明
references/三端模板说明.md：三端对照表、通用 token 阶梯、各端骨架清单、状态四要素表、改造顺序与禁止事项。不确定某个尺寸或状态该怎么取时读它。
边界声明
- 模板内容是虚构示例，用于版式与交互演示，不是真实业务数据。
- 尺寸是起步建议，精确色值、字体、圆角、阴影、动效需另行核验。
- 不要用模板去还原或复刻某个具体产品的真实页面。
- 遇到模板未覆盖的业务形态，如实说明这是建议而非规则。
