每次开新项目，都要经历一遍这样的痛：建目录、配 TypeScript、装 UnoCSS、改 vite.config.ts、复制通用代码... 这些操作即使做了十遍，第十一遍依然会折腾你半天时间。
程序员都有这种意识：如果一个动作重复了三次，就该把它自动化；如果重复了十次，就该把它变成一种信仰。
这篇文章就讲讲我是如何从 0 到 1 自建小程序项目脚手架的。
第一阶段：从“成熟项目”里提取模板
我没打算从 mkdir 开始写起。更好的做法是：从一个已经迭代了很久的成熟项目中，直接提取骨架。
在现代 Agent 工具中，一句话就能搞定：
"把这个项目里所有通用的工程配置、目录结构提炼出来。移除业务逻辑，把项目名、描述等变量替换为
__PROJECT_NAME__之类的占位符。我要的是一个干净的骨架。"
因为成熟的项目已经具备了你在实战中踩过的坑和目录规范，它更适合作为你独有的脚手架模板。
比如我的小程序技术栈是这样的:
Vue 3 + TypeScript + UnoCSS + 持久化 Pinia
目录结构：
├── docs/ # 设计资源、需求文档
├── src/
│ ├── commons/ # API 请求、工具函数
│ ├── components/ # 全局复用组件
│ ├── pages/ # 页面组件
│ ├── store/ # Pinia 状态管理
│ └── static/ # 静态资源
├── unocss.config.ts # UnoCSS 配置
├── vite.config.ts # Vite 配置
└── tsconfig.json # TypeScript 配置第二阶段：设计自动化脚本
有了脚手架模板，就需要提供使用方式。
1. create 命令
前端很流行npm create xxx来初始化新项目，我们也需要提供这种方式。
如果不了解
npm create背后的原理，可以参考我之前的一篇文章。
我需要提供了一个叫做create-unimp的 npm 包，使用方式如下：
# 方式 1
npm create unimp my-project
# 方式 2
npm init unimp my-project
# 方式 3
npx create-unimp my-project是不是看起来有点那味道了！以后只需要不断完善这个脚手架模板就行了。
- 一些通用组件
- 请求封装
- 主题切换
- 工具函数
2. 直接克隆
1️⃣ 直接到 Github 上点击“Use this template”：
2️⃣ 使用命令克隆：
npx degit moohng/uni-template my-project
# 或
git clone https://github.com/moohng/uni-template克隆完成之后，还需要做一些清理工作，因为uni-template并不是一个纯模板，还包含了一些开发相关代码。
但是这种“清理操作”对用户来说应该是无感知的，最好的方式就是在执行npm install时，自动触发清理操作。
所以我在packages.json中配置了postinstall：
"scripts": {
"postinstall": "node packages/create-unimp/index.cjs ."
},这样一来，只要用户执行了npm install，就能得到一个干净的初始模板。
虽然这里的“用户”就是我自己，但作为一个脚手架的态度还是要有的。
第三阶段：面向 AI Agent 编程
现在的代码不只是给人写的，更是给 Claude Code、Cursor 这种 AI Agent 写的。
如果你的 AI Agent 老是犯同一个错误，你就可以把它放进AGENTS.md中。比如：
- 别在小程序里用
space-x：Agent 读到这一行，就会自动改用flex + gap，省去了我 Review 的时间。 - 透明度写法的特殊约束： Agent 知道
bg-primary/10会报错，必须写成bg-primary_10。
然后在你的CLAUDE.md中，引用这个AGENTS.md。
这就是“面向 Agent 编程”：你把避坑指南写进文件，AI 就会瞬间获得你积累了数年的实战经验。
你还可以把你特有的 AI Skills 也写进脚手架模板中，这样一来，你项目的 AI 一致性会大大提高。
不止如此，你甚至可以把这套初始化新项目的方式也做成一个 skill。以后，AI Agent 就会自动用你的这套模板来初始化新项目。
结语
文章只是提供思路，每个人的项目结构肯定不一样，我也不建议封装通用的脚手架，我更推荐做一个属于你自己或团队的脚手架。