# Component Extract

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

- Skill: `onevium/component-extract` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add onevium/component-extract`
- Raw SKILL.md: https://api.skillmd.com/api/skills/onevium/component-extract/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT. See LICENSE.txt for full terms.
- Author: Onevium (https://skillmd.com/u/onevium)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/onevium/component-extract

---


# 提取可复用组件

把现有设计中的重复模式整理成可交接的组件清单。组件化的目标是统一不变量和减少重复，而不是给每个 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](https://github.com/Trystan-SA/claude-design-system-prompt) 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 [LICENSE.txt](./LICENSE.txt)。