frontend-design-extractor

核心用法

frontend-design-extractor 是一款框架无关的前端设计系统提取工具，支持从任意前端代码库（React/Vue/Angular/Next/Vite等）中系统化提取可复用的UI/UX设计资产。该Skill提供两种核心工作模式：

Greenfield模式：从零构建全新的设计系统基础，包括定义设计令牌（颜色、字体、间距、圆角、阴影、动效）、创建基础组件集（Button、Input、Card、Modal等）、搭建页面模板骨架，并提供工程实现建议。

Refactor模式：对现有项目进行设计资产盘点与规范化改造，通过扫描脚本识别UI源文件，归一化设计令牌，制定低风险的分阶段迁移计划，确保业务逻辑零侵入。

工具采用结构化输出规范，默认生成ui-ux-spec//目录，包含Foundation、Components、Patterns、Pages、A11y、Assets、Engineering Constraints七大模块，形成完整的设计系统文档体系。

显著优点

1. 框架零绑定：不预设技术栈，自动适配目标项目的实际框架和语言，具备极强的通用性。
2. 业务逻辑隔离：明确排除业务逻辑和领域工作流，专注UI/UX层面，降低使用门槛和风险。
3. 工程化导向：提供扫描脚本、输出骨架生成脚本等辅助工具建议，以及分阶段重构模板，可直接落地执行。
4. 可迁移性设计：Refactor模式强调最小化diff、可逆操作、渐进式替换，适合生产环境的稳妥改造。
5. 无障碍内建：将A11y作为独立输出模块，系统性捕获组件状态、焦点管理、响应式行为等细节。

潜在缺点与局限性

1. 脚本非内置：文档中提及的scan_ui_sources.sh和generate_output_skeleton.sh仅为使用建议，不包含在Skill包中，需用户自行实现，存在理解成本和落地偏差风险。
2. 无自动化执行：纯文档型Skill，不提供实际的代码解析或文件生成功能，依赖人工按流程执行，效率受限。
3. 输出格式单一：默认以Markdown文档为主，如需对接Figma、Storybook等设计工具，需额外转换开发。
4. 大型项目挑战：对于组件规模庞大、历史包袱重的遗留项目，人工盘点和映射的工作量可能极为繁重。

适合的目标群体

• 设计系统建设者：需要从零搭建或规范化团队设计系统的前端架构师
• 技术迁移负责人：负责多项目UI统一、框架升级或设计系统迁移的工程师
• 设计-开发协作团队：希望建立设计令牌与代码实现双向同步链路的产品团队
• 开源项目维护者：需要为项目生成标准化UI文档以提升社区贡献体验

使用风险

1. 信息泄露风险：扫描脚本可能读取到项目中的敏感配置（如内网API地址、密钥注释），建议在隔离环境或脱敏后使用。
2. 执行偏差风险：由于辅助脚本需自行实现，实际扫描范围、忽略规则可能与预期不符，导致设计资产遗漏或过度提取。
3. 重构回滚成本：Refactor模式虽强调低风险步骤，但大规模样式替换仍可能引入视觉回归，需配合视觉测试工具使用。
4. 维护同步成本：提取的设计规范文档与源代码存在脱节可能，需建立持续更新机制避免文档过时。