核心功能
Frontend Design Extractor 是一套用于从前端代码库中提取、文档化并迁移UI/UX设计资产的系统化技能。它覆盖两大核心场景：Greenfield（新建项目） 与 Refactor（存量重构），通过结构化流程帮助团队建立可复用的设计规范。
显著优点
1. 框架无关性：自适应React、Vue、Angular、Next.js、Vite等主流技术栈，不预设目录结构
2. 系统化扫描：提供scan_ui_sources.sh脚本，自动识别设计令牌、主题、组件库、Storybook等UI相关源文件
3. 标准化输出：默认生成ui-ux-spec/目录，包含7大模块（Foundation、Components、Patterns、Pages、A11y、Assets、Engineering Constraints）
4. 低风险迁移：重构模式采用分阶段计划（Token → 基础组件 → 页面），强调最小变更、可逆操作，明确排除业务逻辑干扰
5. 模板化协作：提供3种重构指令模板（Standard/Phased/Component-level），确保人机协作的精确性与可追溯性
潜在局限
- 工具链依赖：扫描脚本为Shell脚本，Windows环境需额外适配
- 设计深度边界：专注UI/UX表层提取，不介入设计决策合理性或用户体验研究
- 自动化程度有限：组件识别依赖关键字匹配与glob模式，复杂动态组件需人工补全
- 无视觉回归能力：不包含截图对比或像素级校验，需配合外部工具
适合人群
- 设计系统工程师与前端架构师
- 负责技术债务清理或品牌升级的开发团队
- 需要跨项目复用UI资产的中大型组织
常规风险
| 风险类型 | 说明 | 缓解策略 |
|---------|------|---------|
| 范围蔓延 | 误将业务逻辑纳入重构 | 严格遵循"UI/UX only"约束，使用模板明确边界 |
| 破坏性变更 | 全局样式覆盖导致回归 | 分阶段交付，每阶段验证后推进 |
| 令牌碎片化 | 历史项目存在多套主题 | 优先建立令牌映射表，渐进式收敛 |
| 无障碍遗漏 | 提取时忽略a11y实现细节 | 专设`05_A11y/`模块强制审计 |
该技能通过"计划先行、阶段执行、验证闭环"的流程设计，将主观的设计重构转化为可工程化管理的任务。