| name | prototype-component-first |
| description | 用于在本仓库生成或修改后台原型效果图，尤其是 04-原型效果图/后台管理 下的 HTML 页面，并要求优先复用已有公共组件。适用于“生成原型效果图”“新建原型页”“调整原型页面”“补一个页面状态”“统一原型样式”“组件化原型”“替换为公共组件”等场景。 |
Prototype Component First
概述
在本仓库处理后台原型页面时，执行“组件优先”工作流。
不要一开始就手写页面私有 UI。先检查现有共享组件；能复用就复用；如果当前缺少但具有通用复用价值，应先沉淀为共享组件，再接入具体页面。
必查文件
在修改任何后台原型页面之前，先检查以下文件：
04-原型效果图/后台管理/DESIGN-admin.md — 设计规范（色板、字体、间距、阴影、圆角策略、Do's/Don'ts）04-原型效果图/后台管理/assets/prototype.css04-原型效果图/后台管理/assets/prototype.js04-原型效果图/后台管理/assets/README.md04-原型效果图/后台管理/后台管理-组件预览.html
如果目标页面不在 04-原型效果图/后台管理/ 下，只有当该页面也明确沿用这套原型体系时，才使用本技能。
工作顺序
严格按以下顺序执行：
- 读取
04-原型效果图/后台管理/DESIGN-admin.md，建立视觉基线（色板、字体、间距、阴影、圆角策略、Do's/Don'ts）。
- 识别目标页面的结构、状态和交互。
- 将需求与现有共享组件逐一匹配。
- 若现有组件已覆盖需求，直接复用。
- 若现有组件不完全覆盖，但该结构具备复用价值，先扩展或新增共享组件。
- 新增共享组件后，必须同步更新组件预览和组件说明文档。
- 仅当内容明显是业务特化、复用价值低时，才允许页面私有实现。
复用判定标准
以下文件是共享组件的唯一主来源：
- 共享样式与布局：
assets/prototype.css
- 共享交互行为：
assets/prototype.js
- 组件契约说明：
assets/README.md
- 可视化验收页：
后台管理-组件预览.html
当现有组件通过少量结构调整就能满足需求时，不要再新写一套平行实现。
何时新增组件
满足以下任一条件时，应优先新增或扩展共享组件：
- 同类结构已经在多个页面出现。
- 该需求很可能在
项目管理、巡查管理、知识库管理、系统管理 等模块重复出现。
- 变更影响的是通用界面能力，如：布局、表单、表格、弹窗、提示、图片区、详情块、标签、状态、底部操作栏。
如果只是一次性业务块，且后续几乎不会复用，不必强行组件化。
允许页面私有实现的条件
只有同时满足以下条件，才允许页面私有实现：
- 内容强业务特化。
- 结构后续大概率不会复用。
- 如果硬套现有组件，反而会让结构更别扭或表达更差。
即使采用页面私有实现，也必须沿用当前原型体系的间距、配色、边框、字号和控件语言，不允许做出一套平行视觉体系。
最低交付要求
如果本次工作新增或扩展了共享组件，必须同步完成：
- 更新
prototype.css
- 如有交互，更新
prototype.js
- 更新
assets/README.md
- 更新
后台管理-组件预览.html
- 最后再接入业务页面
如果本次工作只是复用现有组件，则应：
- 直接按现有组件结构接入页面
- 除非有充分理由，否则不要通过页面内联样式重新改造组件
红线信号
出现以下情况时，说明偏离了本技能，应立即纠正：
- 还没检查现有组件，就直接开始写新页面块
- 看到类似结构，选择复制一份到页面里，而不是复用公共组件
- 因为“更快”就直接写页面内联样式，但其实已有共享组件可满足需求
- 新增了通用结构，却没有同步更新组件预览和 README
- 在不同后台页面里出现同一控件的多套视觉实现
快速决策表
| 情况 | 正确动作 |
|---|
| 现有组件可直接满足 | 直接复用 |
| 现有组件接近可用，只差一个通用变体 | 先扩展共享组件 |
| 需求明显具有通用复用价值 | 先做共享组件，再接页面 |
| 需求明显一次性、强业务特化 | 允许页面私有实现，但视觉必须保持统一 |
