Frontend Design Extractor

Frontend Design Extractor 是一款面向前端工程团队的设计系统提取工具，核心能力是将任何现有前端代码库（React、Vue、Angular、Next、Vite等）转化为结构化的、可复用的UI/UX规范文档。

核心用法涵盖三种主要模式：Greenfield（从零构建设计系统）、Refactor（从现有代码提取并规范化）、以及 Refactor from Spec（按已有规范对目标项目进行增量改造）。工具通过脚本扫描UI源文件，自动识别设计令牌、组件库、页面模板和交互模式，输出标准化的 ui-ux-spec/ 文档结构。

显著优点包括：框架无关的抽象能力，不绑定特定技术栈；强制隔离业务逻辑，确保提取结果纯粹关注UI/UX层面；提供分阶段、低风险的迁移方案，支持渐进式改造；输出结构清晰（Foundation/Components/Patterns/Pages/A11y/Assets/Engineering），便于团队协作和长期维护。

潜在局限在于：高度依赖代码库本身的组织质量，混乱的代码结构会降低扫描准确性；需要人工介入验证和补充语义化信息（如设计令克的命名意图）；对于重度耦合业务逻辑的组件，分离工作需要额外判断；暂不支持自动逆向生成Figma/Sketch等设计稿。

适合人群主要为：需要统一多项目设计系统的中大型前端团队、接手遗留项目需快速理解UI架构的开发者、以及推动设计系统从设计侧向代码侧落地的设计与工程协作场景。

常规风险包括：扫描脚本可能遗漏非常规目录结构中的UI文件；提取过程中若边界把控不严，可能误将业务逻辑纳入规范；分阶段改造时若缺乏版本控制，可能产生不可逆的中间状态；设计令克的命名冲突和覆盖问题需要人工仲裁。

功能概述

frontend-design-extractor 是一款专精于前端UI/UX设计系统提取的文档型Skill，支持从React/Vue/Angular/Next/Vite等任意前端框架项目中系统化抽取设计令牌、全局样式、组件库、交互模式和页面模板。其核心定位是纯文档化工作流程，不涉及任何代码执行或业务逻辑修改。

核心用法

Skill提供三种工作模式：

1. Greenfield（新项目）：从零构建可复用的UI/UX基础，包括设计令牌定义、基础组件集（Button/Input/Card/Modal等）、页面模板和工程约束文档。

2. Refactor Existing（现有项目重构）：通过扫描脚本(scan_ui_sources.sh)自动发现UI源文件，提取并规范化现有设计系统，制定渐进式迁移计划。

3. Apply Spec（按规范重构）：将已提取的ui-ux-spec/规范应用到目标项目，采用分阶段执行策略（令牌→组件→页面），确保变更最小化且可逆。

输出采用标准化文档结构：01_Foundation/（设计令牌）、02_Components/（组件目录）、03_Patterns/（交互模式）、04_Pages/（页面模板）等七大类别。

显著优点

• 框架无关：自适应目标项目技术栈，不预设目录结构
• 风险隔离：明确排除业务逻辑和领域工作流，专注UI/UX层面
• 工程化导向：提供扫描脚本、脚手架脚本和重构模板，降低使用门槛
• 渐进式迁移：支持包装器、主题适配器等低侵入改造方案
• 完整性覆盖：从原子级令牌到页面级模板的全链路文档化

潜在局限

• 纯文档性质：仅提供工作流程指导，需人工或配合其他工具执行实际代码变更
• T3来源：由个人开发者维护，长期更新稳定性需关注
• 无自动化验证：提取的设计系统一致性需人工审查确认
• 依赖扫描脚本准确性：scan_ui_sources.sh的启发式匹配可能遗漏非标准命名的UI文件

适合人群

• 设计系统工程师：需要快速理解和迁移现有项目UI/UX规范的开发者
• 前端架构师：负责制定团队级组件库和设计令牌标准的决策者
• 技术迁移负责人：处理框架升级或设计系统统一化的项目管理者
• 设计-开发协作 facilitator：需要结构化文档桥接设计与代码实现的角色

风险提示

• 来源可信度：T3级别（个人开发者/社区项目），建议首次使用前审查文档内容
• 范围边界：需严格遵守"UI/UX Only"约束，防止误操作影响业务逻辑
• 重构风险：尽管强调最小化变更，大规模样式迁移仍可能引入视觉回归
• 版本兼容性：Skill输出规范需与目标项目CSS架构、构建工具链匹配

安全认证摘要

经CLS-Certify v2.1.0六维深度检测：静态/动态分析100分（无可执行代码）、无外部网络请求、无敏感信息泄露、隐私合规全通过。总体评级S级（95分），仅威胁情报维度因T3来源标记90分关注。