SuperAPI AI 工具集

skill-frontend-design-scanner

前端与建站

查看项目

更新于 10-16 06:23

技能介绍

用途:扫描前端代码库,理解其设计系统与 CSS 架构,适用于需要盘点现有样式体系、抽取设计令牌或审计一致性时。不适用于纯后端项目或仅含少量琐碎 CSS 的项目。

主要能力:检测 Tailwind CSS 版本与配置类型(v3 的 JS 配置、v4 的 CSS @theme),识别 sass、less、styled-components、Emotion、bootstrap 等;判定 BEM、Atomic Design、SMACSS、ITCSS、OOCSS、utility-first 等方法论并给出置信度;抽取字体、字号、字重、圆角、颜色(主色、辅色、语义色、暗色模式)等令牌;构建组件依赖图并识别 atoms/molecules/organisms 层级与按钮、输入框、下拉框、文本域等基础组件;还包含对 shadcn/ui、Radix UI、DaisyUI 等库及 StyleX、Material、Style Dictionary 等大厂模式的增强检测。

使用方式:扫描时使用 assets/ 下的检测脚本,而非仅靠文件检查。决策上,发现 tailwind.config.* 走 detect-tailwind.js,无 Tailwind 但有 CSS/SCSS 模块走 detect-css-architecture.js,有组件文件走 detect-component-tree.js,有 CSS/SCSS 变量走 extract-tokens.js,检测到 styled-components 或 Emotion 走 detect-css-in-js.js。分析 CSS/SCSS/JSX/Vue/Svelte 优先用 AST 解析而非正则,令牌统一归入 assets/token-schema.json 定义的 JSON 模式,并需遵守 .gitignore、跳过 node_modules、.next、dist、build。

限制:不得假设架构,必须从类命名、目录结构与配置文件实际检测;每项检测需报告高/中/低置信度;发现多种冲突方法论时需全部列出并标记潜在技术债。具体脚本参数、依赖安装命令与运行示例暂未提供。