夜雨聆风大家好，我是【考拉搞AI】，十年老登转型全栈 AI 的 VibeCoder。
前几天我制作并介绍了 uniapp-theme-skill 并使用了其基础能力——帮我建立了一套完整的主题系统，并能够实现一键换肤、动态色阶、尺寸阶梯、全局硬编码治理。
用起来效果蛮好的，基础功能都能达到，非常的丝滑。
并且我研究发现，主题系统是我所有后续技能的一个 奠基石，包括 uniapp-style-skill/uniapp-page-components-skill/uniapp-standard-skill等，都默认拥有主题系统。因此，这个技能的重要性不言而喻。
问题就出在这里，经过我几次使用，以及多轮头脑风暴，还是发现了一些问题和待升级的地方，因此，今天继续迭代。
还是那句话，一切以看得见摸得着为先，一切必须简化、规范。
一、缺陷
在正式迭代之前，我对 uniapp-theme-skill 做了一次深度审计。结果吓了一跳——这套技能存在 6 个致命缺陷，任何一个都可能导致项目出大事：
| 命名体系 | theme-generator.js--spacing-4，base.css 用 --space-4，hardcode-replace-rules.md 混合两者——AI 换肤时替换到错误的变量 | |
| Dart Sass 编译报错 | variables.scss@use 'primitive' as * 与 @use 'semantic' as * 冲突，$radius-none 等变量重复定义——整个主题系统编译不过 | |
| 微信小程序 calc() 失效 | _primitive.scsscalc() 输出无单位值——WeChat 小程序直接崩溃 | |
| 色阶算法错误 | ||
| 预设主题不完整 | --primary-500/600，50-400 和 700-950 全部是默认 teal——换主题等于只换了一半 | |
| 硬编码替换无上下文 | 20rpx 在 font-size 和 padding 中被替换成不同的变量——语义错乱 |
看到第 3 条的朋友可能已经懂了：这套技能在 WeChat 小程序上根本跑不通。这不是「优化空间」，这是「不能用」。
二、迭代原则
迭代之前，我定了严格的边界：
只做这 3 件事，也是这个技能的核心与边界：
主题色阶生成与切换系统（含多主题 primary/secondary/tertiary） 尺寸阶梯系统（字号 / 间距 / 高度 / 圆角 / 图标） 全局硬编码替换（颜色 + 尺寸，按 CSS 属性上下文分类）
不做
Dark Mode 暗色模式 Z-Index 层级系统 Motion / Transition Token JS Bridge / useTheme() CLI 工具 TypeScript 类型定义 Figma / Style Dictionary 对接 A11y 对比度校验
为什么定这个边界？ 因为一个 SKILL 的职责越聚焦，产出越稳定。UI 主题系统只负责「主题」这件事，其他的事交给其他 SKILL。
如果做大杂烩，技能过大会导致AI失忆、幻觉且技能本身也不好维护，且技能相互重叠，严重影响效率，费token。主题系统且相对独立完整，始终围绕着系统配色、尺寸去干活，既是其他技能的基石，也是前端的基石。
三、重写内容
核心变更
SKILL.md | ||
README.md | ||
references/theme-generator.js | ||
templates/src/styles/_functions.scss | ||
templates/src/styles/config/_theme-config.scss | ||
templates/src/styles/tokens/_primitive.scss | ||
templates/src/styles/tokens/_semantic.scss | ||
templates/src/styles/variables.scss | @use 冲突、多主题 CSS 变量导出、APP fallback | |
templates/src/static/css/base.css | ||
references/hardcode-replace-rules.md | ||
templates/scripts/generate-tokens.js | ||
references/color-scale.md | ||
references/size-scale.md | --space-{n} / --font-{size} |
小伙伴们也不用细看，具体在使用过程中就知道了，主要是一些修复和迭代。
四、升级
4.1 HSL 色阶算法（不再用 RGB 混合）
核心思想：在 HSL 色彩空间生成色阶，保持色相绝对稳定，仅调整明度和饱和度。
效果：无论主色是蓝色、红色还是绿色，生成的色阶色相始终一致，不会出现「蓝色主色换完变成灰紫色」的bug。
4.2 多主题子系统（新增）
有些项目 可能存在多主题，这次我加了多主题体系，妈妈再也不用担心我的系统单调了！
支持 primary / secondary / tertiary / quaternary / quinary 五级主题色阶，逻辑完全一致，命名统一：
:root {
--primary-50: #f0fdfa;
--primary-500: #14b8a6;
--secondary-500: #6366f1;
--tertiary-500: #f59e0b;
}
小伙伴们可以自行调整，比如 二级主题、三级主题等，这些关键词即可触发相关主题。
使用场景：一个项目可以同时拥有「主品牌色 + 辅助品牌色 + 状态色」，AI 换肤时只需改一个配置文件。
4.3 硬编码替换按上下文分类
不再无脑替换，而是按 CSS 属性上下文分类匹配：
20rpx | var(--font-2xs, 20rpx) | |
24rpx | var(--font-xs, 24rpx) | |
16rpx | var(--space-4, 16rpx) | |
72rpx | var(--height-btn-md, 72rpx) | |
48rpx | var(--icon-md, 48rpx) | |
8rpx | var(--radius-sm, 8rpx) | |
8px | var(--space-2, 8rpx) |
4.4 APP 端全兼容
所有 CSS 变量带 fallback：var(--x, fallback)所有 rpx 值为静态（无 calc()）移除所有 Sass 嵌套函数冲突 7 套预设主题完整覆盖（含 cute、business、fresh、cyber、retro、glass、minimal）
五、命名体系统一（全项目对齐）
这是这次迭代最「无聊」但也最重要的工作：
--spacing-xs | --space-2 | |
--font-xs | --font-2xs | |
--white | --text-inverse | |
--radius-{size} | ||
--height-{comp}-{size} | ||
--icon-{size} |
统一命名的好处：AI 在生成代码时只需要记住一套命名规则，不再需要猜测「这个组件用 --spacing-4 还是 --space-4」，而且针对维护人员也很轻松，一眼就看得出是干啥的。
小伙伴们，即使需要自己进行命名，也需要按照规范合理命名，当然最好是让AI 去命名，千万不要胡乱命名！
六、使用方式
触发词
/uniapp-theme-skill 检测当前项目是否有主题系统，有的话是否有问题，没有的话加上
/uniapp-theme-skill 给项目添加主题系统，主色 #6366F1
/uniapp-theme-skill 给项目添加 cute 主题
/uniapp-theme-skill 切换到商务风
/uniapp-theme-skill 统一所有硬编码
/uniapp-theme-skill 添加多主题支持，主色 #14b8a6 辅助色 #6366f1
/uniapp-theme-skill 添加二级主题，颜色 #14b8a6
收工
童鞋们既可以使用，使得开发更为简洁简单，更可以作为参考，将自己的一些主题方向的思考和设计加入，所谓工欲善其事必先利其器，自己觉得好才是最好的！
后期的迭代方向可能是 预设主题、主题渐变色、
喜欢的童鞋一定要多多点赞！
一天一个 SKILL—— 前端uni-app主题系统：主色/圆角/尺寸全局去硬编码&规范化&一键切换，换肤效率提升 10 倍
