prototype-component-first

name	prototype-component-first
description	用于在本仓库生成或修改后台原型效果图，尤其是 04-原型效果图/后台管理 下的 HTML 页面，并要求优先复用已有公共组件。适用于“生成原型效果图”“新建原型页”“调整原型页面”“补一个页面状态”“统一原型样式”“组件化原型”“替换为公共组件”等场景。

Prototype Component First

概述

在本仓库处理后台原型页面时，执行“组件优先”工作流。

不要一开始就手写页面私有 UI。先检查现有共享组件；能复用就复用；如果当前缺少但具有通用复用价值，应先沉淀为共享组件，再接入具体页面。

必查文件

在修改任何后台原型页面之前，先检查以下文件：

1. 04-原型效果图/后台管理/DESIGN-admin.md — 设计规范（色板、字体、间距、阴影、圆角策略、Do's/Don'ts）
2. 04-原型效果图/后台管理/assets/prototype.css
3. 04-原型效果图/后台管理/assets/prototype.js
4. 04-原型效果图/后台管理/assets/README.md
5. 04-原型效果图/后台管理/后台管理-组件预览.html

如果目标页面不在 04-原型效果图/后台管理/ 下，只有当该页面也明确沿用这套原型体系时，才使用本技能。

工作顺序

严格按以下顺序执行：

1. 读取 04-原型效果图/后台管理/DESIGN-admin.md，建立视觉基线（色板、字体、间距、阴影、圆角策略、Do's/Don'ts）。
2. 识别目标页面的结构、状态和交互。
3. 将需求与现有共享组件逐一匹配。
4. 若现有组件已覆盖需求，直接复用。
5. 若现有组件不完全覆盖，但该结构具备复用价值，先扩展或新增共享组件。
6. 新增共享组件后，必须同步更新组件预览和组件说明文档。
7. 仅当内容明显是业务特化、复用价值低时，才允许页面私有实现。

复用判定标准

以下文件是共享组件的唯一主来源：

• 共享样式与布局：assets/prototype.css
• 共享交互行为：assets/prototype.js
• 组件契约说明：assets/README.md
• 可视化验收页：后台管理-组件预览.html

当现有组件通过少量结构调整就能满足需求时，不要再新写一套平行实现。

何时新增组件

满足以下任一条件时，应优先新增或扩展共享组件：

• 同类结构已经在多个页面出现。
• 该需求很可能在 项目管理、巡查管理、知识库管理、系统管理 等模块重复出现。
• 变更影响的是通用界面能力，如：布局、表单、表格、弹窗、提示、图片区、详情块、标签、状态、底部操作栏。

如果只是一次性业务块，且后续几乎不会复用，不必强行组件化。

允许页面私有实现的条件

只有同时满足以下条件，才允许页面私有实现：

• 内容强业务特化。
• 结构后续大概率不会复用。
• 如果硬套现有组件，反而会让结构更别扭或表达更差。

即使采用页面私有实现，也必须沿用当前原型体系的间距、配色、边框、字号和控件语言，不允许做出一套平行视觉体系。

最低交付要求

如果本次工作新增或扩展了共享组件，必须同步完成：

• 更新 prototype.css
• 如有交互，更新 prototype.js
• 更新 assets/README.md
• 更新 后台管理-组件预览.html
• 最后再接入业务页面

如果本次工作只是复用现有组件，则应：

• 直接按现有组件结构接入页面
• 除非有充分理由，否则不要通过页面内联样式重新改造组件

红线信号

出现以下情况时，说明偏离了本技能，应立即纠正：

• 还没检查现有组件，就直接开始写新页面块
• 看到类似结构，选择复制一份到页面里，而不是复用公共组件
• 因为“更快”就直接写页面内联样式，但其实已有共享组件可满足需求
• 新增了通用结构，却没有同步更新组件预览和 README
• 在不同后台页面里出现同一控件的多套视觉实现

快速决策表

情况	正确动作
现有组件可直接满足	直接复用
现有组件接近可用，只差一个通用变体	先扩展共享组件
需求明显具有通用复用价值	先做共享组件，再接页面
需求明显一次性、强业务特化	允许页面私有实现，但视觉必须保持统一