0代码小白用WorkBuddy做小程序:先设计再写码,3步不返工

一个指令直接让 AI 出小程序，看着很爽。但需求没想清楚就生成，出来的东西结构不对、风格不对，改代码比改文字贵十倍，最后跑半天还不如意。

正确姿势是分步走：先用 WorkBuddy 写 PRD 把需求钉死，再出设计稿确认长什么样，最后才写码跑起来。分步做，最贵的改动发生在最便宜的阶段。

这两份文档到底叫啥

🔹 PRD（Product Requirements Document，产品需求文档）：小项目也叫「产品方案 / 需求文档」。它回答四件事——给谁用、解决什么、有哪些页面、每页干啥、关键流程怎么走。

🔹 设计稿：这步叫原型 / 线框图（wireframe），先确认布局和模块；视觉规范确认颜色和质感。

把这两步先用 WorkBuddy 跑通，等于先把「做什么、长啥样」定下来，再写码，返工最少。

第 1 步：用 WorkBuddy 写 PRD（定需求）

打开 WorkBuddy，切 Craft 模式。你甚至不需要会写提示词：先像聊天一样把想法打进去，再点输入框里的「增强提示词」，让 AI 自动帮你把大白话扩展成结构化指令。

比如你先写一句：「我想做一个校园二手书互助小程序」，点击「增强提示词」后，它会自动补出角色、场景、产出要求。你也可以直接抄这段完整版（括号里改成你的想法）：

帮我把下面这个想法整理成一份微信小程序 PRD（产品需求文档），用大白话写，零基础也能看懂。

【我想做的】一个校园二手书互助小程序
【给谁用】同校大学生，想便宜买二手教材、卖掉闲置书
【解决啥】教材贵、信息不对称、交易怕被坑

请产出：
1. 一句话定位
2. 核心用户场景（3个）
3. 页面清单（每页叫啥、干啥）
4. 每页要有哪些功能点
5. 关键流程（比如"发布一本书"从点到完成几步）
6. 视觉风格建议（主色、感觉）

WorkBuddy 会给你一份结构化 PRD。重点在这：这时候改需求只是改文字，动动嘴就成，零成本。

如果你连 PRD 怎么写都不确定，可以在 WorkBuddy 的专家库里搜「小程序」或「产品设计」，召唤「微信小程序开发者」「产品管理专家」等专家帮你把需求拆清楚。

第 2 步：出设计稿，先确认"长啥样"

把 PRD 喂回去，让它出线框 + 视觉规范：

基于上面的 PRD，帮我出每个页面的线框描述（用文字描述布局，不用真画图）：
每页顶部导航写什么、中间放什么模块、底部有什么按钮。
再给一套视觉规范：主色十六进制、卡片圆角、字号层级、留白节奏。
我要先确认布局和风格满意，再让你写代码。

这步你对着文字稿就能判断：布局顺不顺、风格喜不喜欢。在文字阶段改，比代码出来再改省十倍力气。 满意了再进下一步。

设计稿阶段也可以召唤「UI 设计师」「设计系统架构师」「设计转代码专家」等专家，帮你把视觉规范直接变成可落地的描述，后面写码更少返工。

第 3 步：才让 WorkBuddy 写码跑起来

确认 PRD 和设计稿都满意，把两份一起贴给它：

下面是 PRD 和线框设计，请据此生成微信小程序原生项目（数据先 mock）：
[粘贴 PRD + 线框]
要求：app.json 路由完整，每页对应 js/wxml/wxss/json 四文件，注释清楚，我能直接导入微信开发者工具。生成后告诉我项目路径和 app.json 位置。

WorkBuddy 跑完（通常 2-5 分钟），找到包含 app.json 的那个子文件夹（整包项目根目录微信开发者工具不认）。打开微信开发者工具 → 点「导入项目」→ 目录选那个文件夹 → AppID 填刚才复制的 wx 开头字符串 → 编译。左侧模拟器一亮，跑起来了。

为什么分步更省事

🔹 早期（PRD / 设计阶段）改的是文字和图片，动动嘴就行。

🔹 后期（代码阶段）改的是逻辑和文件，牵一发动全身。

先设计再写码，本质是帮你在最便宜的阶段就把最贵的改动做了，时间反而省下来。

顺手学编程：看懂前端三件套

别只把生成结果当黑盒。WorkBuddy 给你的每个页面由 4 个文件组成，正好对应前端三件套：

🔹 WXML = 骨架（类似 HTML）。决定页面上有什么：按钮、列表、图片。

🔹 WXSS = 样式（类似 CSS）。决定长什么样：颜色、圆角、间距。

🔹 JS = 逻辑。决定点了按钮干啥、数据从哪来。

看一眼它生成的 app.json，你就懂了「路由」是什么：

json
{
  "pages": [
    "pages/index/index",
    "pages/publish/publish"
  ],
  "window": {
    "navigationBarTitleText": "校园二手书",
    "navigationBarBackgroundColor": "#3A7BF9"
  }
}

pages 数组就是小程序的页面清单，想加新页面就往这里加一行；window 是顶部导航栏的标题和背景色。就这么简单——你已经在学编程了。

调好之后：上线

改满意了，在微信开发者工具点「上传」→ 进微信公众平台「版本管理」提交审核 → 通常 1-7 天通过 → 发布。审核前准备好：logo、简介、类目、隐私协议。

适合做什么 / 不适合做什么

🔹 适合：工具类（笔记、待办、计时）、展示类（相册、产品目录）、表单收集类（问卷、预约）。3-5 个页面的轻量应用最稳。

🔹 不适合：复杂 3D 游戏、实时多人协作、重度依赖硬件传感器——这些还是得专业团队上。

*大发AI编程社 · 每天 30 分钟，用 AI 学编程*