Component Extract

从已完成的页面、流程或界面实现中提取可复用组件清单,记录组件用途、变体、尺寸、状态、token、组合关系和无障碍要求。用户提出“把页面做成组件库”“提取组件”“沉淀设计系统”或需要结构化开发交接时使用;不要在没有来源证据时凭空补齐组件。

Onevium afe267c 2 files · 4.0 KB Updated

File contents

提取可复用组件

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

1. 确认提取范围

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

2. 识别候选组件

逐区块判断:

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

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

按层次归类:

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

3. 记录组件契约

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

4. 标出系统缺口

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

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

5. 交付

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

示例

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

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

来源与许可

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

Onevium/skills/tree/main/skills/design/component-extract commit afe267c37a

Frequently asked questions

npx skillmds@latest add onevium/component-extract