夜雨聆风不会代码，也能跟着 AI 把一个微信小程序做出来吗？
我自己试了一遍，答案是：真的可以。
先说结果
我做出了一个微信小程序。
它叫 AI 创作喵。
这是一个 AI 提示词资料库小程序，用户打开以后，可以在里面搜索、查看、复制和收藏各种 AI 提示词。
比如：
小红书标题提示词 短视频脚本提示词 AI 生图提示词 AI 副业资料 自媒体起号资料 AI 工具和工作流资料
这个小程序不是一个空壳。
它已经有首页、资料页、搜索页、详情页、生成页、收藏页，也做了底部导航、列表样式、提示词详情、一键复制、本地收藏和远程内容更新。
更重要的是：
我不是靠自己硬写代码完成的，而是一步步让 AI 帮我完成。
为什么我想做这个小程序
我一开始的想法很简单：
现在大家都在用 AI，但很多人最大的问题不是没有工具，而是不知道怎么问。
同一个 AI 工具，有的人问出来的结果很普通，有的人问出来的结果就很能用。
差别往往就在提示词。
所以我想做一个小程序，把常用的 AI 提示词、AI 学习资料、AI 副业资料都整理起来。
用户需要的时候，直接打开小程序搜索，复制就能用。
这就是我做 AI 创作喵 的原因。
我一开始也不懂小程序
说实话，我刚开始看到微信小程序项目的时候，也有点懵。
因为里面有很多文件：
app.json
app.wxss
pages/index/index.wxml
pages/index/index.wxss
pages/index/index.js
data/prompts.js
utils/content.js
一堆后缀名，看起来像完全不同的东西。
后来我慢慢搞明白了，其实小程序没有那么复杂。
我用大白话总结就是：
WXML：页面上有什么
WXSS：页面长什么样
JS：点了以后做什么
JSON：页面怎么配置
data：内容放在哪里
assets：图片和图标放在哪里
理解了这几句话，我就不慌了。
我是怎么让 AI 帮我做的
我的方式不是直接跟 AI 说：
“帮我做一个小程序。”
这样太空了。
我会把需求拆开，一步一步让 AI 做。
比如我会这样说：
帮我做一个 AI 提示词资料库小程序。
首页要有搜索框、热门提示词列表、资料包入口。
底部要有：首页、资料、生成、收藏。
提示词详情页要支持一键复制和收藏。
然后 AI 会帮我搭出基础项目。
基础能跑起来以后，我再继续细化。
比如：
首页参考这张图重新设计。
字体不够高级，帮我重新调整。
底部 icon 太普通，重新设计一套。
首页列表不要只显示 10 条，改成不限数量。
删除错误数据，不要再显示乱码和问号。
这就是我真实的开发方式：
不是一次性把所有事情说完，而是边看效果边调整。
我做出来的小程序包含哪些功能
目前这个小程序主要有 6 个页面。
1. 首页
首页是用户打开后看到的第一个页面。
我做了：
顶部产品名 蓝色搜索卡片 内容统计 今日爆款提示词 热门提示词列表
首页最重要的是让用户快速找到内容。
所以我把搜索入口做得很明显。
2. 资料页
资料页用来展示不同资料包。
比如：
自媒体起号包 AI 短视频爆款提示词包 AI 工具与工作流资料包 AI 副业实战资料包
3. 搜索页
用户输入关键词，就可以搜索相关提示词。
搜索会匹配标题、摘要、标签和提示词正文。
4. 详情页
详情页用来看完整提示词。
我重点做了两个动作：
一键复制 收藏
因为用户最核心的需求就是：看到好提示词，马上复制去用。
5. 生成页
生成页可以根据用户输入的主题、平台、任务，拼出一段提示词。
6. 收藏页
收藏页保存用户常用的提示词。
我一开始没有做登录系统，而是先用微信本地缓存。
这样开发成本低，也适合第一版 MVP。
我最关键的一步：内容不要写死在页面里
这是我做完以后觉得最重要的一点。
如果我把所有提示词都写死在页面里，那以后每次更新内容都很麻烦。
所以我把内容统一放到了数据文件里。
本地内容放在：
data/prompts.js
远程内容放在：
content.json
这样我以后想新增提示词，只要改数据，不用每次都重新设计页面。
一条提示词大概长这样：
{
id: "douyin-hook-3s",
category: "douyin",
title: "3秒爆点钩子模板",
summary: "适合抖音和小红书短视频前3秒开场。",
prompt: "请帮我生成10个短视频开头钩子...",
tags: ["短视频", "开头", "爆款"],
hot: 98
}
我只要保证：
id不重复category对得上title简洁summary清楚prompt内容完整hot数字合理
这条内容就能被小程序读取和展示。
我为什么做远程 JSON 更新
内容型小程序最麻烦的地方是：内容经常要改。
如果我每新增一条提示词，都要重新提交微信审核，那效率太低了。
所以我做了一个远程内容更新流程。
简单说就是：
我先在本地整理内容
然后生成 content.json
再上传到远程地址
小程序打开后自动读取最新内容
我本地运行这个命令：
node scripts/export-content-json.js
它会生成：
dist/content.json
然后我把这个文件上传到 HTTPS 地址。
小程序里配置远程地址：
const REMOTE_CONTENT_URL = "https://你的域名/content.json"
这样以后内容更新就方便很多。
我踩过的几个坑
做这个小程序的时候，我也踩了不少坑。
这些坑对小白特别有参考价值。
坑 1：页面出现一堆问号
比如页面显示：
AI??????
?????????
这种一般是中文编码出问题了。
我的处理方式是：
找到乱码所在文件 用 UTF-8 查看 把乱码内容替换成正常中文 重新编译
坑 2：我删了内容，但页面还在显示
这个问题我真的遇到过。
原因可能是：
本地数据还没删 dist/content.json还是旧的远程 content.json还是旧的微信开发者工具有缓存
正确流程是：
删本地数据
重新生成 content.json
上传远程
清缓存
重新编译
坑 3：底部图标换了但不生效
我的解决方式是：
确认图标文件真的覆盖了 确认 app.json路径没写错清缓存 重新编译
坑 4：首页只显示固定条数
这个一般是代码里写了类似：
slice(0, 10)
我想让首页不限数量，就把固定限制去掉。
我总结出来的开发流程
如果让我重新从 0 做一次，我会按这个顺序来。
1. 先确定小程序要解决什么问题
2. 让 AI 搭出基础页面
3. 先跑起来，不追求完美
4. 再调整首页和底部导航
5. 把内容放进数据文件
6. 做搜索、详情、复制、收藏
7. 接入远程 content.json
8. 清理错误数据和乱码
9. 手机真机预览
10. 上传并提交审核
这条路线对小白特别友好。
因为它不是一上来就写复杂功能，而是先把产品跑起来。
最适合小白记住的 8 句话
我做完以后，觉得新手只要先记住这 8 句话，就能少走很多弯路。
页面有什么，看 wxml
页面好不好看，看 wxss
点了以后做什么，看 js
底部导航怎么配，看 app.json
内容在哪里，看 data/prompts.js
远程内容在哪里，看 content.json
图标在哪里，看 assets/tab
页面显示旧内容，先怀疑远程 JSON 和缓存
最后
我做这个小程序最大的感受是：
不会代码并不代表不能做产品。
以前做小程序，可能真的需要自己懂很多开发知识。
但现在有 AI 辅助以后，普通人也可以把一个想法拆成步骤，然后一点点做出来。
我的路线很简单：
先跑起来
再看懂结构
再改页面
再改数据
再做远程更新
再优化 UI
最后上线发布
这次我用 AI 从 0 做出了一个 AI 小程序。
它不是一个完美产品，但它已经是一个能运行、能更新、能继续迭代的真实项目。
对我来说，这就是从 0 到 1 最重要的一步。
完整教程里我整理了什么
我把整个过程整理成了一份更完整的实战教程，里面包括：
项目目录讲解 首页改版过程 底部 TabBar 修改 提示词数据结构 新增和删除内容流程 远程 JSON 更新方法 搜索、详情、复制、收藏逻辑 乱码、缓存、旧数据排查 上线发布检查表
如果你也想用 AI 做一个自己的小程序，可以从这个流程开始。
