一天一个SKILL——一句话生成uniapp小程序标准化骨架

✍️ 作者：考拉搞AI | 🔗 原文：微信原文链接 | 📅 抓取时间：2026-07-10

最近在疯狂做微信小程序（个人五个小程序名额一直没做完，VibeCoding时代到来，是时候搞定了），一口气开了五六个窗口，五六个小程序同时开干。

我做小程序的流程是这样的：

先SuperPowers +BrowserAct 让AI 帮我网上搜索信息和资料；
然后综合分析选择一个好的灵感和主题；
让AI 帮我落地文档，然后开干；

一开始做的不亦乐乎，我一遍刷着手机，一遍点点确定，看着五六个不断闪烁的cmd界面，我心里美滋滋的。同时指挥五六个"超级听话的码农"给我干活，真爽呀！

但是做出第一个demo之后，我就发现了不对劲，我发现AI 开始犯傻了。主要集中在下面几点：

菜单飘忽不定各种被遮挡，胶囊按钮经常覆盖标题
组件边距忽高忽低，按钮忽大忽小，有的还跑到屏幕外面去了
emoji满天飞，一眼看上去像十年前的网页
主题颜色也是百花争鸣百花齐放，啥颜色都搬出来了，一会绿色，一会渐变色...

一口老血差点吐到键盘上。看上去都在给我干活，但实际上给我的感觉就是在"磨洋工"。你说没做吧，它可是出点子、出文档、出界面出的飞快，你说做了吧，质量奇差，后续需要一堆一堆的提示词完善修复。

于是，我停下了手中的活，去git上找找有没有类似的SKILL。

什么SKILL？就是那种能规范开发uniapp小程序的SKILL，包括设计架构、规范项目结构、自动设计icon、自动拉取图片、统一样式规范、统一背景主题以及预设一些标准的小程序模板等等。

找了半天并没有找到，也难怪，uniapp一般老外不咋用，国内人用的多。我是觉得uniapp框架很好，见效快，还能跨平台做APP。

于是，我连夜加工，凭借着多年的开发经验和实际做小程序遇到的问题，以及AI 开发的实际项目经验，制作了这个SKILL。

正所谓，工欲善其事必先利其器，如果没有合适的利器，那就自己制造。

一、由来

做了很多小程序，其实小程序开发基本步骤都差不多：

先跟 AI 解释一遍「我要用 uni-app + Vue3 + TS + Pinia」；
让它生成目录结构，结果每次都不太一样；
写到一半发现主题色、间距没统一，又回头改；
想找个 Banner 图，结果用了渐变方块凑合；
tabBar 图标直接用 emoji，上线前被设计师吐槽；
最后发现CLAUDE.md没写，换一次对话 AI 又开始放飞自我。

这些步骤本身不创造价值，但又不能跳过。跳过任何一个，后面都会还回来。

这就是 uniapp-app-generate-skill 的由来。

这不是用来写业务逻辑，而是把项目从 0 推到 60 分：结构清晰、规范到位、主题统一、图标真实、页面骨架完整。剩下的 40 分——产品细节、交互打磨、后端对接——仍然交给你自己。

二、能干啥？

这个 SKILL 把小程序开发拆成了四个阶段，每个阶段都接入了合适的工具或 Skill：

阶段	做什么	用到的能力
开发前	把模糊想法变成清晰文档	引导式提问 + spec.md
开发中	生成标准项目骨架	uni-app + Vue3 + TS + Pinia + SCSS boilerplate
开发中	主题、图标、图片、布局一次搞定	theme.json + icon-forge + Pexels + 布局预设
开发后	验证能跑、检查上线事项	lint + 构建验证 + 小程序检查清单

1. 先落地文档

很多人开头只有一句话：「我想做个健身打卡小程序」。

SKILL 不会直接开始写代码，而是先问你几个关键问题：

目标用户是谁？（健身小白 / 资深爱好者 / 教练）
核心页面有哪些？（首页、记录页、统计页、我的）
想要哪种视觉感觉？（清新 / 极简 / 活泼 / 商务）
底部 tabBar 要几个入口？

回答完后，它会生成一份 spec.md，把产品定位、页面清单、数据模型、API 轮廓写清楚。你确认没问题，它才开始写代码。

这一步看起来慢，其实最快。方向错了，后面写得越多，改得越痛苦。

2. 最新技术架构

项目基于 uni-app (Vue3) TypeScript Pinia SCSS，优先保证微信小程序语法规范，同时兼容 H5 和 App。

生成后的项目结构长这样：

my-app/
├── src/
│   ├── api/            # 接口请求
│   ├── components/     # 公共组件
│   ├── constants/      # 常量、颜色配置
│   ├── pages/          # 页面
│   ├── static/         # 图标、图片
│   ├── stores/         # Pinia 状态
│   ├── styles/         # 主题 Token、SCSS 工具
│   └── utils/          # 工具函数
├── CLAUDE.md           # 项目规范，给 AI 看
├── AGENTS.md           # AI 行为约束
├── pages.json          # 页面与 tabBar 配置
├── theme.json          # 主题配置入口
└── .env                # 环境变量

除了目录，它还会一次性创建：

可直接运行的 boilerplate 代码（首页、我的页面、主题系统、请求封装、Pinia 示例）；
CLAUDE.md+AGENTS.md，定义开发规范、主题规范、AI 行为约束；
.claudeignore，排除node_modules、dist等不需要 AI 读的文件；
.env与 Pexels 工具函数模板；
一组默认 tabBar 图标（首页、我的、商城、购物车、数据、发现、消息、设置），含激活/未激活态。

3. 主题统一

这是 SKILL 里我最花心思的部分。

传统做法是：项目里到处写 #10b981、24rpx、14rpx，后来想换一套风格，得一页一页改。

这个 SKILL 的做法是：所有主题配置集中在 theme.json 一份文件里。

你只需要改这里面的主色、间距基数、字号基数、圆角基数，然后运行 npm run theme:sync，脚本就会自动生成完整的 SCSS Token：

主色 50~900 的完整色阶；
灰阶 50~950；
间距 Token：$spacing-xs、$spacing-sm、$spacing-md……对应 4rpx、8rpx、16rpx、24rpx 等；
字号 Token：$font-caption、$font-body、$font-title……
圆角、阴影、组件级尺寸 Token。

业务代码里只写：

.card {
  padding: $spacing-md;
  background: $color-bg-secondary;
  border-radius: $radius-lg;
}

不用硬编码，换风格时改一处就行。

4. 静态资源：拒绝「渐变方块当 Banner」

SKILL 对图片和图标有明确约束：

禁止用 emoji 当图标；
tabBar 图标统一用icon-forge技能生成风格一致的 PNG；
Banner、空状态、装饰图必须用真实照片，不允许用渐变色或纯色块糊弄；
真实照片统一从Pexels获取，API Key 写入.env；
图片按用途分目录：static/icons/、static/tab-bar/、static/images/。

这些约束会写进 CLAUDE.md，后续 AI 继续写代码时也会遵守。

5. 有四种布局风格

SKILL 内置了四种常见风格预设：

清新健康风（默认）：青绿色主调，大圆角，适合健康、运动、生活方式类；
极简工具风：深灰/深蓝，小圆角，适合效率、工具、笔记类；
活泼社区风：暖橙/粉紫，大圆角+柔和阴影，适合社交、内容、UGC 类；
商务数据风：藏青主调，卡片+数据看板，适合 B2B、管理后台类。

选定后，Skill 会自动配置 pages.json、tabBar、首页和我的页面基础结构。

6. 跨平台兼容——H5/APP/小程序

SKILL 生成的模板默认遵守一套 uni-app 最佳实践：

用view/text/image/button等 uni-app 组件，不写div/span；
图片用image组件，不用 background-image: url(...)；
主题用 SCSS 变量，不用 CSS 自定义属性 var(--xxx)；
尺寸用rpx，并处理刘海屏和底部安全区；
登录、分享、图片选择等能力已抽象为 platform-auth.ts、platform-share.ts、platform-image.ts，业务代码不直接写 #ifdef。

7. 融合其他好用的SKILL

这个 SKILL 会根据阶段调用其他 Claude Skill：

frontend-design/ui-ux-pro-max：在写关键页面前先产出设计方案，避免界面有「AI 味」；
ponytail：实现时把关，删掉多余抽象，能用一行不用十行；
icon-forge：批量生成风格统一的 PNG 图标；
Pexels API：用真实照片替换掉「渐变冒充 Banner」的偷懒做法。

也就是说，你不只是拿到一个能跑的项目，而是拿到一个代码精简、界面在线、图片真实的项目起点。

8. 完成后跑校验 + 自动打包

生成完成后，SKILL 会执行：

npm run lint 检查代码规范；
npm run dev:mp-weixin 或 npm run build:mp-weixin 验证能否构建通过；
对照内置的 mini-program-checklist.md，检查登录、分享、分包、版本更新、主包体积等小程序特有事项。

有问题它会指出来，而不是假装没看见。

三、案例剖析

需求：帮我做一个记录喝水的小程序，首页显示今天喝了多少杯，底部有首页、统计、我的三个入口，风格清新一点。

SKILL 会这样执行：

1 生成spec.md：产品名「水润打卡」，核心功能「记录饮水、查看统计、个人中心」

2 初始化 uni-app 项目，安装 Pinia 和 Sass

3 复制 boilerplate 代码模板

4 询问并配置主题色、间距、字体、圆角等参数，重新生成 Token

5 创建标准目录

6 生成CLAUDE.md和AGENTS.md

7 配置主题系统，默认主色#10b981

8 用frontend-design设计首页，再用ponytail精简实现

9 用icon-forge生成 3 对 tabBar 图标

10 从 Pexels 拉取一张「健康生活方式」的真实照片当 Banner

11 生成首页、统计页、我的页面

12 跑 lint 和构建验证

下面是具体使用前和使用后的效果：

1. 渐变色，颜色不一致

❌ 颜色不一致

❌ 渐变色混乱

2. 被胶囊按钮覆盖

❌ 胶囊按钮覆盖标题

3. 完整修复

✅ 修复后的效果

4. 使用标准模板，清晰完整高效

✅ 使用标准模板，清晰完整高效

5. 大量的 emoji → 用工具生成真实 icon

❌ 大量 emoji

✅ 工具生成 icon 图标

四、设计初衷

做它的时候，我给自己定了三条规则：

一次配置，全局生效 — 主题色、间距、字号只在一个入口配置，其他地方自动派生。换肤时不用满世界改颜色。
规范先行，AI 不乱来 — CLAUDE.md 和 AGENTS.md 在写业务代码之前就位，明确告诉 AI：禁止硬编码、禁止 emoji、必须 lint、接口字段先查契约。后续迭代时，AI 会按这套规则执行。
只生成骨架，不替代思考 — SKILL 不帮你写业务逻辑，它解决的是「每次都要重新搭架子」的问题。产品决策、交互细节、后端接口设计，仍然需要人来定。

五、它和「直接让 Claude 写」有什么区别？

可能你会问：我直接跟 Claude 说「帮我做一个 uni-app 小程序」不行吗？

可以，但每次它生成的目录结构、代码风格、主题方案可能都不一样。你要花很多时间去对齐。

这个 SKILL 的价值在于标准化：

目录结构固定；
主题系统固定；
AI 行为规范固定；
验证流程固定。

你每次启动新项目，得到的是同一套「经过验证的起点」，而不是每次都要重新谈判。

六、适合谁用？

经常需要快速验证小程序想法的产品或开发者；
团队里想统一小程序项目结构和代码规范的人；
用 Claude Code 写代码，但不想每次重复讲「用 uni-app + TS + Pinia」的人。

七、总结

uniapp-app-generate-skill 当然还有很多不足的地方，比如第三方图片或icon的配置，预置模板的配置等等。

如果想做一个全栈小程序，那么关于后端的架构、技术、数据库配置也需要加入 SKILL。

第三方icon或图片配置
后端骨架生成
上下文溢出等问题
前后端统一如接口规范等问题

这些也都是我后续要继续跟进和迭代的，我的目标是做一个好用的全栈 uniapp 全栈骨架SKILL。

小伙伴们有在 uniapp 的吗？有的话不妨尝试下，喜欢的话还可以去点个赞！

我会继续分享干货，以及分享更多关于 uniapp 以及其他各种项目 VibeCoding 实战项目开发系列教程的~！