SuperAPI AI 工具集

frontend-design-extractor

前端与建站

查看项目

更新于 10-15 17:26

技能介绍

用途:从现有前端代码库中提取可复用的 UI/UX 设计规范,包括设计令牌、全局样式、组件、交互模式和页面模板,并排除业务逻辑与领域工作流。框架无关,按目标仓库实际技术栈适配。

主要能力与两种模式: 一是新建(Greenfield),从零创建不含业务逻辑的 UI/UX 基础与起始 UI,包括设计令牌(颜色/排版/间距/圆角/阴影/动效)、全局样式、断点与布局外壳,基础组件(Button、Input、Select、Card、Modal、Table/List、Tabs、Toast、EmptyState)以及列表/详情/表单/仪表盘页面模板;二是重构现有项目,盘点 UI 来源、归一化令牌、映射现有样式,识别第一批高影响组件与模式,规划最小改动的迁移路径并记录行为与无障碍缺口。

使用方式:先确认模式与范围,明确业务逻辑不在范围内。若为现有仓库,执行 scripts/scan_ui_sources.sh 扫描仓库根目录,不做固定目录结构假设;可选用 scripts/scan_ui_sources.sh <repo_root> [out_file] [extra_glob ...] 或 --root/--out/--ignore 适配非标准布局。用 scripts/generate_output_skeleton.sh 创建输出文件夹(默认 ./ui-ux-spec),所有结果写入其中。默认输出结构为 01_Foundation、02_Components、03_Patterns、04_Pages、05_A11y、06_Assets、07_Engineering_Constraints,该结构仅为建议文档布局,可与目标项目目录结构不同或改名迁移。重构时须先产出分阶段计划,经确认后再逐阶段执行,保持最小且可回滚的改动,不移动或重构文件夹,就地更新;每阶段后对照规范复查,最后给出变更清单与剩余缺口。资料另附三套重构提示词模板(标准重构、分阶段重构、组件级重构)。

适用场景:需要沉淀设计系统、归一化现有样式、为新项目搭建 UI 基础,或按规范渐进式重构前端界面。

限制:仅覆盖 UI/UX(令牌、样式、组件、布局),不涉及业务逻辑、API 与路由;不假设特定前端框架、语言或目录结构;采用 Markdown 输出(默认)与既定输出结构,未提供具体收费、平台支持或效果数据。