（12061期）Frontend Design Extractor – 代码级设计系统提取与迁移专家

代码级设计系统提取与迁移专家 从前端代码库中提取可复用的UI/UX设计系统，包括设计令牌、全局样式、组件、交互模式和页面模板，专注纯UI层，完全隔离业务逻辑，支持React/Vue/Angular等多框架场景。 使用说明 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文件；提取过程中若边界把控不严，可能误将业务逻辑纳入规范；分阶段改造时若缺乏版本控制，可能产生不可逆的中间状态；设计令克的命名冲突和覆盖问题需要人工仲裁。 原始说明 Extract reusable UI/UX design systems from frontend codebases: design tokens, global styles, components, interaction patterns, and page templates. Use when analyzing any frontend repo (React/Vue/Angular/Next/Vite/etc.) to document or migrate UI/UX for reuse across projects. Focus on UI/UX only; explicitly ignore business logic and domain workflows.