前端设计系统智能提取专家

纯文档型前端设计提取工具，帮助开发者从React/Vue/Angular等代码库中系统化提取UI/UX设计规范，实现设计资产的标准化沉淀与跨项目复用。

基本信息

• 技能名称?frontend-design-extractor
• 中文名称?前端设计系统智能提取专家
• 作者?Xsir0
• 分类?其他
• 版本?未标注
• 标签?frontend, design, productivity, docs, development-engineering

使用方法

使用说明
核心用法
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作为独立输出模块，系统性捕获组件状态、焦点管理、响应式行为等细节。
   潜在缺点与局限性
6. 脚本非内置 ：文档中提及的 scan_ui_sources.sh 和 generate_output_skeleton.sh 仅为使用建议，不包含在Skill包中，需用户自行实现，存在理解成本和落地偏差风险。
7. 无自动化执行 ：纯文档型Skill，不提供实际的代码解析或文件生成功能，依赖人工按流程执行，效率受限。
8. 输出格式单一 ：默认以Markdown文档为主，如需对接Figma、Storybook等设计工具，需额外转换开发。
9. 大型项目挑战 ：对于组件规模庞大、历史包袱重的遗留项目，人工盘点和映射的工作量可能极为繁重。
   适合的目标群体
   设计系统建设者 ：需要从零搭建或规范化团队设计系统的前端架构师
   技术迁移负责人 ：负责多项目UI统一、框架升级或设计系统迁移的工程师
   设计-开发协作团队 ：希望建立设计令牌与代码实现双向同步链路的产品团队
   开源项目维护者 ：需要为项目生成标准化UI文档以提升社区贡献体验
   使用风险
10. 信息泄露风险 ：扫描脚本可能读取到项目中的敏感配置（如内网API地址、密钥注释），建议在隔离环境或脱敏后使用。
11. 执行偏差风险 ：由于辅助脚本需自行实现，实际扫描范围、忽略规则可能与预期不符，导致设计资产遗漏或过度提取。
12. 重构回滚成本 ：Refactor模式虽强调低风险步骤，但大规模样式替换仍可能引入视觉回归，需配合视觉测试工具使用。
13. 维护同步成本 ：提取的设计规范文档与源代码存在脱节可能，需建立持续更新机制避免文档过时。