SuperAPI AI 工具集

web-css

前端与建站

查看项目

更新于 10-15 16:47

技能介绍

用途:为不使用预处理器或工具类框架的项目提供原生 CSS 架构标准,解决 AI 生成 CSS 在不同会话间出现的内边距、颜色、圆角等值漂移问题。核心思路是把设计值集中为 CSS 变量(令牌),一次修改全局生效。

主要能力:设计令牌实现(:root 中的 CSS 变量),涵盖颜色、字体、间距、边框、阴影、动画、z-index 等类别;通过 [data-theme="dark"] 覆盖语义颜色令牌实现暗色模式;CSS 文件组织与导入顺序;简化 BEM 命名;移动优先断点(640/768/1024/1280px);Grid 负责结构、Flexbox 负责流;组件交互状态;属性排序(定位、盒模型、排版、视觉、动画);常见反模式清单。

使用方式:采用 5 文件架构,按级联顺序加载 reset.css、global.css、layouts.css、components.css、overrides.css。可用 node scaffold-css.js <target-directory> 从模板创建全部 5 个文件,不覆盖已有文件。写 CSS 前先查 global.css 是否已有令牌,复用已有类,重复属性应抽取为单一类。

适用场景:需要建立统一 CSS 规范、落地设计令牌或将硬编码值重构为令牌的前端项目。

限制:明确不使用 Tailwind、PostCSS 等构建工具与预处理器;若项目已在用 Tailwind/PostCSS,需逐步将工具类抽取为引用令牌的语义类,不回退旧模式。check.js 规则仅用于检查,资源信息中未提供其安装与运行方式的细节;官方文档与收费情况暂未提供。