提取可复用组件

把现有设计中的重复模式整理成可交接的组件清单。组件化的目标是统一不变量和减少重复，而不是给每个 DOM 片段起名字。

1. 确认提取范围

确定对象是单页、多页流程还是完整项目，读取相关实现、样式和 token，建立视觉词汇与交互模式的全貌。

2. 识别候选组件

逐区块判断：

• 相同或近似模式是否重复出现？
• 即使只出现一次，它是否可能在其他位置复用？
• 是否存在有意义的变体、尺寸或状态？
• 是否拥有可独立描述的职责和边界？

满足任一条件即可列为候选，但要合并仅有微小差异的重复实现。

按层次归类：

• 基础：颜色、间距、排版、圆角、阴影和动效 token。
• 原子：按钮、输入框、选择控件、徽标、头像、图标、链接。
• 组合：表单字段、卡片、提示、弹窗、菜单、Tooltip、分页。
• 区块：导航、侧栏、表格、表单、Hero、功能网格、空状态。
• 模板：落地页、详情页、列表页、空状态页等页面骨架。

3. 记录组件契约

每个组件至少包含：名称、用途、变体与尺寸、适用状态、依赖 token、组合关系、键盘与无障碍要求，以及一条“推荐”和“避免”用法。

4. 标出系统缺口

• 多个近似实现没有权威版本。
• 缺少 hover、focus、disabled、loading 等必要状态。
• 存在业务需要但没有对应变体。
• 间距、尺寸或颜色偏离既有 token。
• 组件边界过细或过粗，仍迫使调用方理解内部细节。

不要静默修正来源；把不一致记录为需要用户确认的发现。

5. 交付

默认生成 component-inventory.md，每个组件一节。只有用户要求可视化时才额外制作组件总览页。总结组件数量、重复与缺口、输出路径和下一步建议。

示例

输入：“把这个完成的仪表盘整理成组件库交接清单。”

**输出：**生成按原子、组合和区块分组的 component-inventory.md，记录 Button、FormField、StatCard、Sidebar 和 DataTable 的变体、状态、token 与无障碍契约，并指出三套近似按钮需要收敛。

来源与许可

本 Skill 基于 Trystan Sarrade 的 claude-design-system-prompt 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 LICENSE.txt。