夜雨聆风大家好，我是【考拉搞AI】，十年老登转型全栈 AI 的 VibeCoder。
最近一直在搞前端UI 这块的技能，因为我一致认为，VibeCoding第一关就是一个好看高效可维护的前端架构，而这套架构中重中之重又是好看且高度弹性的UI，这其中就包括——一键换肤功能。
之前做过 UI标准化/项目前端综合审计/图片icon智能生成和抓取/固定模板 以及uniapp骨架生成 等诸多SKILL，受到了很多小伙伴们得青睐，因此依然带来一个非常实用得SKILL——一键换肤。
这个SKILL，核心是针对那些以及 VibeCoding 一半的项目（完事的项目也可）。
因为可能一开始没有过多关注这块，AI 呢，由于底层机制，如果进行了长对话 或者 经常 开启会话（大型项目 开发周期长，多轮会话 和长会话 不可避免）很容易导致硬编码/emoji乱飞， 尺寸严重不统一（AI幻觉/失忆等），这个页面按钮20rpx，那个页面 按钮30rpx等等。
等到项目变大，再维护就非常繁琐了，比如 你项目才10个页面 让AI 来个一键换肤，替换硬编码，可能几十秒就搞定了，但是如果100个页面，那么就会变得很慢了，浪费大量token，还有会话溢出的风险。
这时候我们必须提前定规范，必须让AI 沿着一条 可预见得 边界去做事。
这也是我制作得这一整套 前端UI SKILL 的 核心意义。
当然一个项目 可不仅仅只有前端，后端架构&数据库/前后端对接/服务部署/运维 以及 后期的运营 和前期点子 和创意，整条线路缺一不可。
后期会继续带来更多 相关的内容，包括如何 获取创意点子，如何 完整的学习 VibeCoding，如何 设计完整的后端架构 以及部署等等。
喜欢的童鞋一定要多多点赞收藏！
所有的SKILL也不会不断迭代，小伙伴们也可以多多给出更好的意见！
废话不不多说，下面是 干货内容。
一、直接换肤
做过 uni-app 项目的同学都懂：
/* 项目中散落的硬编码 */.btn { background: #14b8a6; } /* 矿物青 */.card { background: #fff; } /* 白色 */.tag { color: #666; } /* 灰色文字 */.input { border-radius: 10rpx; } /* 圆角 */padding: 16rpx; /* 间距 */换主题时：
全局搜索替换主色 → 漏了 5 处 手动修改圆角 → 漏了 3 处 底部 tabBar 图标 → 手动 Photoshop 重做 重新编译测试 → 还是有地方颜色不对
累觉不爱。
二、功能介绍
老地址：https://github.com/jiushiwon/wg-skills/tree/main/uniapp-theme-skill
一天一个SKILL——前端最佳自动化测试 webapp-testing
一句话总结：输入主色 → 自动生成完整主题系统 → 一键换肤。
1. 动态色阶生成
给项目添加主题系统，主色 #2563EB统一的主题色 相对于 五颜六色 对人的视觉来说 更舒适 更容易抓住重点。
自动利用脚本生成 50-900 完整色阶：
--primary-50: #eff6ff;--primary-100: #dbeafe;--primary-200: #bfdbfe;--primary-300: #93c5fd;--primary-400: #60a5fa;--primary-500: #2563EB; /* 主色 */--primary-600: #1d4ed8;--primary-700: #1e40af;--primary-800: #1e3a8a;--primary-900: #172554;2. 7 种预设主题，一说就用
内置的 主题风，直接使用：
给项目添加 cute 主题切换到商务风3. 尺寸阶梯自动生成
/* 字号 */--font-xs: 24rpx;--font-sm: 26rpx;--font-md: 28rpx;--font-lg: 30rpx;--font-xl: 34rpx;/* 间距 */--space-1: 4rpx;--space-2: 8rpx;--space-4: 16rpx;--space-6: 24rpx;--space-8: 32rpx;/* 圆角 */--radius-sm: 8rpx;--radius-md: 16rpx;--radius-lg: 24rpx;--radius-full: 9999rpx;4. 强制统一硬编码
技能会扫描项目中所有硬编码，替换为 CSS 变量：
在 也有类似的功能，注意每次新增新的页面或组件时候一定让AI 用变量：
#fff | var(--white) |
#000 | var(--gray-900) |
#666 | var(--text-secondary) |
16rpx | var(--space-4) |
10rpx | var(--radius-sm) |
新增一个卡片，注意使用 变量，不要写死尺寸，铺平 高度是XX或者将这些内容写入规范（规范可能会失忆）
5. 配合 icon-forge 生成主题图标
使用技能：
https://github.com/jiushiwon/wg-skills/tree/main/icon-forge
以当前楼主的一个小程序为案例，原来主色是矿物青 #14b8a6：
执行技能后一键切换到蓝色 #2563EB：
✅ 主色按钮、渐变背景 → 蓝色 ✅ 底部 tabBar 选中态 → 蓝色图标 + 文字 ✅ 所有硬编码颜色 → CSS 变量 ✅ 换主题只需改 1 个文件
6. 配实测案例
换肤前：
疯狂换肤：
换肤后：
主题代码位置：
童鞋们生成好之后，下次写新的页面或者要修改的话，就可以直接喂给AI，或者写入规范，比如：
参考阅读styles/index.less 和 css/base.css 帮我全局检测下 是否还存在硬编码，或者没有使用变量的；另外新的组件页面必须使用此规范四、使用方式
触发词
给项目添加主题系统，主色 #6366F1给项目添加 cute 主题切换到商务风统一所有硬编码项目结构
会在项目下 创建如下文件：
项目/src/├── static/css/base.css # CSS 变量定义├── styles/index.less # Less 别名 + 公共样式└── pages.json # tabBar 配置换主题只需 3 步
修改 base.css主色修改 pages.jsontabBar 选中色重新生成图标（如需）
最后
uniapp-theme-skill 解决的问题：
❌ 全局搜索替换 → ✅ 一处配置，全局生效 ❌ 硬编码散落 → ✅ 强制统一为变量 ❌ 手动改图标 → ✅ 自动生成主题图标 ❌ 换主题花 3 小时 → ✅ 3 分钟搞定
这就是 VibeCoding 的魅力：把重复劳动交给 AI，把创意留给设计师。
小伙伴们在 VibeCoding之前一定要使用此技能来做好全局规范，当然做到一半也可以使用，这样可以避免后期换肤的烦恼。
另外，楼主做了一套 提示词&笔记记录的小程序，日常有什么灵感/网站地址/个性提示词/个性文案/日期计划 啥的 都可以记录下来！
所有的笔记内容 都可以存储在书记本地，私密性爆表！
一天一个 SKILL——前端UI模板：表单/下拉框/分页/表格主流组件 朋友圈/聊天/登录页/商品预览页 高频标准模板 一网打尽 主题尺寸一键修改