提取可复用组件
把现有设计中的重复模式整理成可交接的组件清单。组件化的目标是统一不变量和减少重复,而不是给每个 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。