extract

概览

什么是 extract Skill？

extract 技能旨在帮助团队和开发者识别、提取并整合可复用的 UI 组件、设计令牌和模式，构建一个统一的设计系统。通过发现重复的模式和硬编码的数值，extract 简化了构建或重构组件库的流程，实现可扩展且易维护的 UI 设计。

谁适合使用 extract？

• 构建或维护设计系统的产品团队
• 希望减少重复工作的 UI/UX 设计师和前端开发者
• 致力于在用户界面中保持一致性的组织

extract 解决的问题

• 识别重复的 UI 组件和硬编码的设计数值
• 指导提取设计令牌（颜色、间距、排版）以便复用
• 帮助将不一致的 UI 模式迁移到统一系统中
• 支持从现有代码库创建或完善设计系统

使用方法

安装步骤

1. 使用以下命令安装 extract 技能：

   npx skills add https://github.com/pbakaus/impeccable --skill extract

2. 从 SKILL.md 文件开始，了解详细的工作流程概览。

3. 查看 README.md、AGENTS.md 和 metadata.json 等相关文件，获取更多背景信息。

4. 探索 rules/、resources/、references/ 或 scripts/ 目录中的辅助资料。

典型工作流程

1. 发现

• 在代码库中定位设计系统或组件库。
• 分析结构、命名规范和文档模式。
• 识别重复组件、硬编码数值和不一致的变体。

2. 提取规划

• 根据频率和复用潜力优先确定要提取的组件和令牌。
• 如果尚无设计系统，先与团队确认后再创建。

3. 提取与完善

• 将重复的 UI 模式重构为可复用组件。
• 整合颜色、间距和排版的设计令牌。
• 为新组件和令牌编写文档，便于后续使用。

4. 迁移

• 用新的系统化组件和令牌替换代码库中的旧模式。
• 确保一致性并根据需要更新文档。

何时使用 extract

• 启动或扩展设计系统时
• 进行 UI 重构或现代化项目时
• 需要在前端代码中强化一致性、减少技术债务时

常见问题

extract 实际做什么？

extract 会分析你的代码库，发现重复的 UI 模式和硬编码设计数值，帮助你将它们重构为可复用的组件和设计令牌，构建设计系统。

extract 只适用于新设计系统吗？

不是。extract 既适合创建新的设计系统，也能通过整合和丰富组件库来改进现有系统。

我应该先查看哪些文件？

建议先从 SKILL.md 了解核心工作流程，再查看 README.md 和相关元数据文件获取更多指导。

extract 可以用于任何前端框架吗？

extract 侧重于工作流程，能适配大多数前端框架或代码库。你可以根据具体工具和项目结构调整流程。

哪里可以查看所有相关文件？

访问仓库的 Files 标签页，浏览完整文件树，包括参考资料和辅助脚本。