docs: update zh-cn course content for clarity and practicality
- Rewrite chapter introductions to be more conversational and focused on real-world application - Add detailed explanations of business thinking and user pain points - Include practical examples and step-by-step guidance for AI-assisted development - Structure content with clear sections and visual cues for better readability
This commit is contained in:
@@ -13,7 +13,11 @@ const duration = '约 <strong>1 天</strong>,可分多次完成'
|
|||||||
|
|
||||||
<ChapterIntroduction :duration="duration" :tags="['本地开发环境搭建', 'IDE 与 AI IDE', '高效开发技巧']" coreOutput="1 个自创小游戏" expectedOutput="使用 Trae 产出">
|
<ChapterIntroduction :duration="duration" :tags="['本地开发环境搭建', 'IDE 与 AI IDE', '高效开发技巧']" coreOutput="1 个自创小游戏" expectedOutput="使用 Trae 产出">
|
||||||
|
|
||||||
本章将围绕本地开发环境展开讲解:你将学会从 z.ai 过渡到本地的开发环境,学会在自己的电脑上搭建完整的开发环境,理解什么是 IDE、什么是 AI IDE,以及如何在日常开发中高效地使用它们。
|
前面我们在 z.ai 上体验了 AI 编程,但网页版有很多限制——不能随时保存、不好管理文件、也没法做复杂项目。这一章就是帮你把开发环境搬到自己的电脑上,让你能真正独立做东西。
|
||||||
|
|
||||||
|
我们会先搞清楚 IDE 和 AI IDE 到底有什么区别,为什么后者能让你效率翻倍;然后手把手教你用 Trae 在本地做一个贪吃蛇游戏,走完从安装到运行的完整流程;最后还会分享一些和 AI 对话的实用技巧,让你少走弯路。
|
||||||
|
|
||||||
|
学完这一章,你将会掌握和程序员相似的开发流程。
|
||||||
|
|
||||||
</ChapterIntroduction>
|
</ChapterIntroduction>
|
||||||
|
|
||||||
|
|||||||
@@ -13,8 +13,16 @@ const duration = '约 <strong>8 小时</strong>'
|
|||||||
|
|
||||||
<ChapterIntroduction :duration="duration" :tags="['业务分析', '原型设计', 'AI 辅助编程', '多页面应用']" coreOutput="1 个电商素材工作台原型" expectedOutput="可交互的 Web 原型">
|
<ChapterIntroduction :duration="duration" :tags="['业务分析', '原型设计', 'AI 辅助编程', '多页面应用']" coreOutput="1 个电商素材工作台原型" expectedOutput="可交互的 Web 原型">
|
||||||
|
|
||||||
在本节中,我们会从零开始,借助 AI IDE 搭建一个可以实际运行的「电商素材工作台」原型。
|
前面玩的是 AI 游戏,这一章却要解决一个现实问题:老板丢给你一句"用 AI 提高商品发布到电商平台的效率" —— 你怎么把它变成能用的产品原型?
|
||||||
你将体验一遍,从业务分析到多页面产品原型实现的“完整闭环”,为之后独立制作应用原型打下基础。
|
|
||||||
|
和前面做贪吃蛇、计算器不同,真实业务不能凭空想功能:
|
||||||
|
|
||||||
|
1. **明确痛点**:找运营聊聊,从模糊的"提高效率"里挖出真正的痛点
|
||||||
|
2. **挑重点做**:一堆问题里先解决最痛的那个,别想着一次性做全
|
||||||
|
3. **快速验证**:用 AI IDE 先做单页面原型,跑通了再扩展成多页面
|
||||||
|
4. **做出能用的东西**:最后交付一个能演示、能操作的电商素材工作台
|
||||||
|
|
||||||
|
我们将学会从做玩具到做应用的转变,学会共情和思考客户的真实需求。
|
||||||
|
|
||||||
</ChapterIntroduction>
|
</ChapterIntroduction>
|
||||||
|
|
||||||
@@ -65,7 +73,17 @@ const duration = '约 <strong>8 小时</strong>'
|
|||||||
包含商品描述、图片、视频等素材的生成和管理功能。
|
包含商品描述、图片、视频等素材的生成和管理功能。
|
||||||
```
|
```
|
||||||
|
|
||||||
如果你兴高采烈的直接把这个需求转换成了原型,然后发给了老板 —— 恭喜你,这个季度的奖金要取消了!因为你做的完全不符合真实场景,只是停留在 AI 的建议和自己的遐想,真正的业务需求需要开口提问,有了好问题才会有好答案。(好的点子甚至大于好的技术)
|
如果你兴高采烈的直接把这个需求转换成了原型,然后发给了老板 —— 恭喜你,这个季度的奖金要取消了!
|
||||||
|
|
||||||
|
**为什么会这样?这就是我们要解决的核心痛点:**
|
||||||
|
|
||||||
|
以前我们学 AI IDE,做的都是贪吃蛇、计算器这种**自己用的玩具项目**——功能简单、自己清楚要什么、做出来自己用就行。但**真实业务场景完全不同**:
|
||||||
|
|
||||||
|
- **你不是用户**:老板要的是"提高效率",但你不知道运营每天具体怎么工作、卡在哪里;
|
||||||
|
- **AI 也不懂业务**:你丢给 AI 一个模糊需求,它只能基于通用知识瞎猜,做出来的东西看着像那么回事,实际根本用不了;
|
||||||
|
- **好点子不等于好产品**:你以为"加个 AI 生成功能"很酷,但用户可能根本不需要,或者用起来比原来更麻烦。
|
||||||
|
|
||||||
|
**这就是为什么我们必须学会"从想到点子到理解用户"** 只有你的创意真正解决别人的问题,开口问、深入了解业务,才能做出真正意义上有价值的事情。(好的点子甚至大于好的技术)
|
||||||
|
|
||||||
### 1.1 从想象到真实:学会向业务提问
|
### 1.1 从想象到真实:学会向业务提问
|
||||||
|
|
||||||
@@ -107,71 +125,113 @@ const duration = '约 <strong>8 小时</strong>'
|
|||||||
|
|
||||||
### 1.2 从发散到收敛:锁定业务的核心痛点和功能
|
### 1.2 从发散到收敛:锁定业务的核心痛点和功能
|
||||||
|
|
||||||
通过上述简单调研或访谈,一线运营遇到的问题可以罗列出一大串: 上新节奏被活动节点打断、多店多品同时推进、在上新 / 调价 / 换素材 / 看数据之间来回切换……
|
::: info 💡 为什么要"收敛"?什么叫"痛点"?
|
||||||
如果一个产品应用一开始就试图“这些都要管”,很容易变成既要又要还要的“**大而全工具**”。
|
|
||||||
|
|
||||||
让我们进一步细化拆解(可以让 AI 帮忙),首先其大致混杂着三类问题:
|
**问题很多,但先做哪一个?**
|
||||||
|
|
||||||
1. 上新 / 调价 / 上架节奏(运营节奏问题);
|
用户可能告诉你一堆问题:A也麻烦、B也麻烦、C也麻烦……但如果你试图一次性解决所有问题,最后可能什么都做不好。所以要**收敛**——就是从一堆问题里,挑出**最痛、最急、最能解决**的那个先动手。
|
||||||
2. 多店多品整体效率(中台 / 工作台问题);
|
|
||||||
3. 为商品快速产出图片和文案(内容生产问题)。
|
|
||||||
|
|
||||||
如果我们想要把产品做得轻、做得清楚,则需要先选定一个切入点。在这三类问题中,对于课堂时间和难度而言,最适合优先下手的是**第三类:内容生产,为商品快速产出图片和文案**。然而,为商品快速产出图片和文案本身也还是很抽象的需求,我们可以咨询业务方得到更具体的困难和想实现的效果。
|
**什么是痛点?**
|
||||||
|
就是用户**最烦、最花时间、最想解决**的那个具体问题。不是"我觉得有用",而是用户**每天都在抱怨、每次做都很痛苦**的事。
|
||||||
|
|
||||||
**业务方(抖音运营):就内容生产而言,主要有两个最大的难题(痛点):**
|
:::
|
||||||
|
|
||||||
- **批量制作普通商品首版图文耗时耗力**
|
通过上面的采访,我们发现运营遇到的问题有很多:被活动打断节奏、要管多个店、在上架/改价/做图/看数据之间忙来忙去……
|
||||||
- 素材分散在网盘、聊天记录、平台后台,厂家图、历史素材、竞品截图混杂
|
|
||||||
- 上新多为批量推进,无逐个打磨条件,只能拼凑主图和标题卖点
|
|
||||||
- 核心诉求是 “能上架、不太丑” 的基础内容,而非惊艳创意
|
|
||||||
- **优质图文结构难以系统化复用**
|
|
||||||
- 手中有有效方案(高点击率标题结构、大促稳定主图排版等)
|
|
||||||
- 方案散落在大脑、聊天记录、历史商品链接中,无统一管理载体
|
|
||||||
- 复用需反复翻旧链接、复制替换参数,流程繁琐
|
|
||||||
- 本质问题是缺少可收藏、管理、直接套用的沉淀工具
|
|
||||||
|
|
||||||
基于以上两个痛点,我们将产品收敛成一个简单清晰的小应用: **给多店多品抖音运营用的「批量图文草稿机 + 个人模板库」**
|
如果我们试图"这些问题我全都要解决",最后会做出一个**大而全但不好用**的工具。
|
||||||
|
|
||||||
它只做两件事(可以让 AI 帮忙细化实现,并且在和业务方的沟通中反复修改打磨,你需要根据业务方的反馈不断删减功能):
|
让我们把这些问题分分类(可以让 AI 帮忙),大致有三类:
|
||||||
|
|
||||||
**1. 帮运营批量生成第一版图文草稿:**
|
1. **节奏问题**:什么时候上架、什么时候调价;
|
||||||
|
2. **效率问题**:怎么同时管好多个店、多个商品;
|
||||||
|
3. **内容问题**:怎么快速做出商品图片和文案。
|
||||||
|
|
||||||
- **输入(支持直接上传和批量导入素材):**
|
对于我们的课程来说,最适合先解决的是**第3类:做内容的问题**。但"快速做内容"还是有点抽象,我们再问问业务方具体卡在哪里:
|
||||||
- 商品基础信息:名称、类目、品牌、材质、尺寸、颜色、适用人群等;
|
|
||||||
- 商品图片:白底图 / 简单场景图;
|
|
||||||
- 每次生成支持上传额外上传历史爆款截图或参考链接,允许有参考物;
|
|
||||||
- 支持通过 Excel 批量导入,或在页面上在线录入 / 上传。
|
|
||||||
- 支持页面上指定是否保存商品素材到素材库,方便下次使用
|
|
||||||
- **输出(能直接拿去上架或轻改就能上架的内容):**
|
|
||||||
- 每个商品一张“看得过去、包含基础卖点”的主图草稿;
|
|
||||||
- 一条“结构合理、含核心关键词”的标题 + 1–2 句卖点文案。
|
|
||||||
- **期望的使用方式变化:**
|
|
||||||
从每批商品白手起稿变为把一批商品丢进系统,拿系统生成的草稿做筛选和微调。
|
|
||||||
|
|
||||||
**2. 把好用的输出沉淀成可复用的模板库:**
|
::: info 📋 业务方说:做内容有两个最痛苦的地方
|
||||||
|
|
||||||
- **什么可以被收藏?**
|
**痛苦1:批量做图做文案太费劲**
|
||||||
- 任意一条运营觉得“好用”的输出都可以一键收藏:
|
- 素材到处放:网盘、微信记录、平台后台……**找起来很费劲**;
|
||||||
- 可以是“主图 + 标题 + 卖点”的完整组合;
|
- 一次要上很多商品,**没时间逐个精心做**,只能随便拼一下;
|
||||||
- 也可以只收藏其中一部分,例如某个标题结构、某条卖点文案。
|
- 要求不高,**能看、能上架就行**,不需要多精美。
|
||||||
- **收藏之后能做什么?**
|
|
||||||
- **复用:**
|
|
||||||
- 用这条收藏,套一批新商品参数,重新生成图文草稿;
|
|
||||||
- 或在同一商品上,基于该模板生成多版变体做 A/B 测试。
|
|
||||||
- **编辑:**
|
|
||||||
- 直接修改标题文案 / 卖点文案;
|
|
||||||
- 如果支持图片编辑,可以微调主图中的文字、贴纸等元素。
|
|
||||||
- **管理:**
|
|
||||||
- 给收藏起名字、打标签(如“男包主图模板”“大促标题结构”)、支持按照店铺分类,方便后续检索。
|
|
||||||
- **下次上新时如何使用?**
|
|
||||||
- 导入新商品后,运营可以选择:
|
|
||||||
- 使用系统默认逻辑生成,或
|
|
||||||
- 指定“使用我收藏的某个模板来生成”;
|
|
||||||
- 系统基于新商品数据,自动套用模板的结构与风格,输出新的主图 + 标题 + 卖点草稿。
|
|
||||||
|
|
||||||
由上述可见,一线业务并不是在线性的流程中工作,而是在多重压力下被频繁打断、碎片化地解决问题。在这样的背景下,那种“功能面面俱到的大平台”往往上手成本高、落地困难;解决一两件具体麻烦的小工具更容易真正被使用。
|
**痛苦2:好用的方案没法存下来复用**
|
||||||
|
- 之前做得好的标题、排版,**下次想用却找不到了**;
|
||||||
|
- 方案散落在聊天记录、以前的商品链接里;
|
||||||
|
- 想用的时候得**翻半天、复制粘贴改半天**;
|
||||||
|
- 缺一个能**收藏、管理、直接套用**的工具。
|
||||||
|
|
||||||
这就是我们在写代码之前必须建立的产品思维:**不要被需求的表象迷惑,不要试图一口气做大做全,而是通过提问、拆解、收敛,找到那个既能解决真实痛点、又能在有限时间内落地的最小可行方案。** 基于梳理得到的两大核心功能,我们会在下一阶段真正实现这个应用。
|
:::
|
||||||
|
|
||||||
|
基于上面两个痛点,我们要做一个简单的小工具:**帮运营批量做图做文案,还能把好用的方案存下来下次直接用**。
|
||||||
|
|
||||||
|
它只做两件事(可以让 AI 帮忙细化,记得根据业务反馈不断删减功能):
|
||||||
|
|
||||||
|
::: info 功能1:批量生成电商商品图和文案
|
||||||
|
|
||||||
|
**这是做什么的?**
|
||||||
|
给系统一些商品信息,它自动帮你生成能在电商平台(如抖音、淘宝)上架用的商品图和文字。
|
||||||
|
|
||||||
|
**输入**
|
||||||
|
| 类型 | 内容 |
|
||||||
|
|------|------|
|
||||||
|
| 商品信息 | 名字、类别、品牌、材质、尺寸、颜色等 |
|
||||||
|
| 商品图片 | 白底图或简单场景图 |
|
||||||
|
| 参考图 | 以前卖得好的商品截图或参考链接 |
|
||||||
|
| 导入方式 | Excel 批量导入,或直接在页面上填写 |
|
||||||
|
|
||||||
|
**输出(生成的电商素材)**
|
||||||
|
- **商品主图**:带文字卖点的产品展示图(用户刷到时第一眼看到的图)
|
||||||
|
- **商品标题**:搜索时能搜到的关键词组合
|
||||||
|
- **卖点文案**:1-2句吸引买家的话
|
||||||
|
- 都是**改改就能上架**的成品
|
||||||
|
|
||||||
|
**效果**
|
||||||
|
- 以前:每个商品都要从零开始做图写文案
|
||||||
|
- 现在:把一批商品丢给系统,生成草稿后挑挑改改就行
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: info 功能2:把好用的方案存成模板
|
||||||
|
|
||||||
|
**输入**
|
||||||
|
| 类型 | 内容 |
|
||||||
|
|------|------|
|
||||||
|
| 一整套 | 主图 + 标题 + 文案 |
|
||||||
|
|
||||||
|
**输出**
|
||||||
|
| 功能 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| 套用 | 下次做新商品时,用模板自动生成 |
|
||||||
|
| 修改 | 直接改标题、改文案 |
|
||||||
|
| 管理 | 起名字、打标签(如"男包模板""大促标题"),方便找 |
|
||||||
|
|
||||||
|
**效果**
|
||||||
|
1. 导入新商品
|
||||||
|
2. 选择:让系统默认生成,或**用我存好的模板**
|
||||||
|
3. 系统自动套用模板风格,输出新的图和文案
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**回顾我们刚才做了什么:**
|
||||||
|
|
||||||
|
1. **先问问题**:不是直接动手做,而是先问运营"你们最烦什么";
|
||||||
|
2. **找到痛点**:发现他们最痛苦的是"做图写文案太费劲"和"好用的方案没法存";
|
||||||
|
3. **收敛范围**:不做大而全的平台,只做"批量生成图和文案 + 存模板"这两个功能。
|
||||||
|
|
||||||
|
**为什么这样做很重要?**
|
||||||
|
|
||||||
|
很多新手做产品的误区是:功能越多越好。但用户真正需要的是**解决最痛的那个问题**。做一堆功能但都不好用,不如做一两个功能但真的帮到用户。
|
||||||
|
|
||||||
|
**产品和业务思维的核心:**
|
||||||
|
- 不要自己想"我觉得用户需要什么"
|
||||||
|
- 要去问用户"你每天在做什么?哪里最痛苦?"
|
||||||
|
- 从一堆问题里**收敛**到最痛、最能解决的那个
|
||||||
|
- 先做出**最小可用**的版本,再慢慢迭代
|
||||||
|
|
||||||
|
这就是我们在写代码之前要想清楚的事。代码只是工具,**理解用户、找准问题**才是第一步。
|
||||||
|
|
||||||
<div style="margin: 50px 0;">
|
<div style="margin: 50px 0;">
|
||||||
<ClientOnly>
|
<ClientOnly>
|
||||||
@@ -190,15 +250,42 @@ Thinking 是好事,但不可 over thinking,我们就此控制过度反思,
|
|||||||
|
|
||||||
### 2.1 第一步:用大白话告诉 AI 你要什么
|
### 2.1 第一步:用大白话告诉 AI 你要什么
|
||||||
|
|
||||||
只需把上一小节整理好的业务资料作为参考资料进行对话,即可直接生成原型;或者,你也可以让 AI 给你返回推荐的 AI 提示词后进行生成:
|
刚开始不用追求完美的提示词,先从你最自然的表达开始。就像跟同事描述需求一样,用大白话告诉 AI 你想做什么,然后让 AI 帮你优化成更专业的表达。
|
||||||
|
|
||||||
#### 2.1.1 示例 1:直接让 AI 生成
|
#### 2.1.1 从口述开始(推荐新手)
|
||||||
|
|
||||||
|
先用自己的话描述想法,哪怕很粗糙也没关系:
|
||||||
|
|
||||||
```
|
```
|
||||||
帮我参考业务逻辑实现一个单页面应用,用来验证核心玩法功能,包括:
|
我想做一个工具,帮电商运营自动生成商品的主图和文案。
|
||||||
1.帮运营批量生成第一版图文草稿;
|
运营平时要一个个手动做图写文案,很麻烦。
|
||||||
2.把好用的输出沉淀成可复用的模板库。
|
我的想法是:他们上传商品信息,系统自动生成一批草稿,
|
||||||
由于第一个更重要你可以先生成第一个的内容。
|
运营挑选好用的稍微改改就能用。
|
||||||
|
|
||||||
|
先做最简单的版本:一个页面,左边填商品信息,
|
||||||
|
右边显示生成的结果。能上传图片,能填文字,
|
||||||
|
生成后显示主图预览和文案。
|
||||||
|
```
|
||||||
|
|
||||||
|
接下来,把这段话发给 AI(比如 ChatGPT、Claude 等),让它帮你扩写一下。AI 通常会帮你补充一些你没考虑到的细节,把你的想法整理得更清晰,最后生成一个适合发给 AI IDE 的提示词。
|
||||||
|
|
||||||
|
你可以这样跟 AI 说:
|
||||||
|
```
|
||||||
|
帮我把上面的想法扩写一下,整理成一份清晰的业务逻辑文档,
|
||||||
|
然后生成一个适合发给 AI IDE(比如 Cursor、Trae)的提示词,
|
||||||
|
用来生成单页面应用的原型代码。
|
||||||
|
```
|
||||||
|
|
||||||
|
AI 会返回一份结构化的需求和对应的提示词。你自己检查一遍,删减不需要的功能,确认无误后再拿去生成代码。
|
||||||
|
|
||||||
|
这样做的好处是:口述的东西是最真实的想法,可能会漏掉一些重要的细节。而 AI 帮你扩写的时候,可能会问"要不要支持批量上传?"这种没想到的问题,帮助你进一步验证。你可以根据反馈需要选择保留或删除不实际的功能,在反复修改中确定给 AI 的初版提示词。
|
||||||
|
|
||||||
|
#### 2.1.2 跳过扩写环节:直接把你整理好的业务文档丢给 AI
|
||||||
|
|
||||||
|
如果你已经在前面的章节整理好了业务逻辑文档(比如用大白话写的需求说明),可以直接套用下面的格式发给 AI IDE,省去了让 AI 扩写的中间步骤。适合需求已经很清晰、想直接动手写代码的情况:
|
||||||
|
|
||||||
|
```
|
||||||
|
帮我参考业务逻辑实现一个单页面应用,用来验证核心玩法功能。
|
||||||
|
|
||||||
业务逻辑参考如下:
|
业务逻辑参考如下:
|
||||||
1. 帮运营批量生成第一版图文草稿:
|
1. 帮运营批量生成第一版图文草稿:
|
||||||
@@ -209,82 +296,47 @@ Thinking 是好事,但不可 over thinking,我们就此控制过度反思,
|
|||||||
- 支持通过 Excel 批量导入,或在页面上在线录入 / 上传。
|
- 支持通过 Excel 批量导入,或在页面上在线录入 / 上传。
|
||||||
- 支持页面上指定是否保存商品素材到素材库,方便下次使用
|
- 支持页面上指定是否保存商品素材到素材库,方便下次使用
|
||||||
- **输出(能直接拿去上架或轻改就能上架的内容):**
|
- **输出(能直接拿去上架或轻改就能上架的内容):**
|
||||||
- 每个商品一张“看得过去、包含基础卖点”的主图草稿;
|
- 每个商品一张"看得过去、包含基础卖点"的主图草稿;
|
||||||
- 一条“结构合理、含核心关键词”的标题 + 1–2 句卖点文案。
|
- 一条"结构合理、含核心关键词"的标题 + 1–2 句卖点文案。
|
||||||
- **期望的使用方式变化:**
|
- **期望的使用方式变化:**
|
||||||
从每批商品白手起稿变为把一批商品丢进系统,拿系统生成的草稿做筛选和微调。
|
从每批商品白手起稿变为把一批商品丢进系统,拿系统生成的草稿做筛选和微调。
|
||||||
|
|
||||||
2. 把好用的输出沉淀成可复用的模板库:
|
先做第一个功能,第二个功能(模板库)后面再加。
|
||||||
- **什么可以被收藏?**
|
|
||||||
- 任意一条运营觉得“好用”的输出都可以一键收藏:
|
|
||||||
- 可以是“主图 + 标题 + 卖点”的完整组合;
|
|
||||||
- 也可以只收藏其中一部分,例如某个标题结构、某条卖点文案。
|
|
||||||
- **收藏之后能做什么?**
|
|
||||||
- **复用:**
|
|
||||||
- 用这条收藏,套一批新商品参数,重新生成图文草稿;
|
|
||||||
- 或在同一商品上,基于该模板生成多版变体做 A/B 测试。
|
|
||||||
- **编辑:**
|
|
||||||
- 直接修改标题文案 / 卖点文案;
|
|
||||||
- 如果支持图片编辑,可以微调主图中的文字、贴纸等元素。
|
|
||||||
- **管理:**
|
|
||||||
- 给收藏起名字、打标签(如“男包主图模板”“大促标题结构”)、支持按照店铺分类,方便后续检索。
|
|
||||||
- **下次上新时如何使用?**
|
|
||||||
- 导入新商品后,运营可以选择:
|
|
||||||
- 使用系统默认逻辑生成,或
|
|
||||||
- 指定“使用我收藏的某个模板来生成”;
|
|
||||||
- 系统基于新商品数据,自动套用模板的结构与风格,输出新的主图 + 标题 + 卖点草稿。
|
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 2.1.2 示例 2:让 AI 基于需求生成 “生成程序” 的提示词后再生成
|
#### 2.1.3 程序员的做法(进阶):让 AI 帮你写 "提示词的提示词"
|
||||||
|
|
||||||
|
如果你想更精细地控制代码生成过程,可以先让 AI(如 ChatGPT)基于你的需求,生成一份专门给 AI IDE 的提示词:
|
||||||
|
|
||||||
```
|
```
|
||||||
基于下面的想法和内容,帮我写一个发给 coding Agent 的写代码用的提示词,我需要用这个提示词来生成代码。
|
基于下面的想法,帮我写一个发给 coding Agent 的写代码用的提示词,
|
||||||
|
我需要用这个提示词来生成代码。
|
||||||
|
|
||||||
我想参考业务逻辑实现一个单页面应用,用来验证核心玩法功能,包括:
|
[把你的业务逻辑描述贴在这里]
|
||||||
1.帮运营批量生成第一版图文草稿;
|
|
||||||
2.把好用的输出沉淀成可复用的模板库。
|
|
||||||
由于第一个更重要你可以先生成第一个的内容。
|
|
||||||
|
|
||||||
业务逻辑参考如下:
|
要求:
|
||||||
1. 帮运营批量生成第一版图文草稿:
|
1. 提示词要包含清晰的页面布局描述
|
||||||
- **输入(支持直接上传和批量导入素材):**
|
2. 明确数据结构和交互逻辑
|
||||||
- 商品基础信息:名称、类目、品牌、材质、尺寸、颜色、适用人群等;
|
3. 指定技术栈(如 React + Tailwind)
|
||||||
- 商品图片:白底图 / 简单场景图;
|
4. 列出需要实现的核心功能点
|
||||||
- 每次生成支持上传额外上传历史爆款截图或参考链接,允许有参考物;
|
|
||||||
- 支持通过 Excel 批量导入,或在页面上在线录入 / 上传。
|
|
||||||
- 支持页面上指定是否保存商品素材到素材库,方便下次使用
|
|
||||||
- **输出(能直接拿去上架或轻改就能上架的内容):**
|
|
||||||
- 每个商品一张“看得过去、包含基础卖点”的主图草稿;
|
|
||||||
- 一条“结构合理、含核心关键词”的标题 + 1–2 句卖点文案。
|
|
||||||
- **期望的使用方式变化:**
|
|
||||||
从每批商品白手起稿变为把一批商品丢进系统,拿系统生成的草稿做筛选和微调。
|
|
||||||
|
|
||||||
2. 把好用的输出沉淀成可复用的模板库:
|
|
||||||
- **什么可以被收藏?**
|
|
||||||
- 任意一条运营觉得“好用”的输出都可以一键收藏:
|
|
||||||
- 可以是“主图 + 标题 + 卖点”的完整组合;
|
|
||||||
- 也可以只收藏其中一部分,例如某个标题结构、某条卖点文案。
|
|
||||||
- **收藏之后能做什么?**
|
|
||||||
- **复用:**
|
|
||||||
- 用这条收藏,套一批新商品参数,重新生成图文草稿;
|
|
||||||
- 或在同一商品上,基于该模板生成多版变体做 A/B 测试。
|
|
||||||
- **编辑:**
|
|
||||||
- 直接修改标题文案 / 卖点文案;
|
|
||||||
- 如果支持图片编辑,可以微调主图中的文字、贴纸等元素。
|
|
||||||
- **管理:**
|
|
||||||
- 给收藏起名字、打标签(如“男包主图模板”“大促标题结构”)、支持按照店铺分类,方便后续检索。
|
|
||||||
- **下次上新时如何使用?**
|
|
||||||
- 导入新商品后,运营可以选择:
|
|
||||||
- 使用系统默认逻辑生成,或
|
|
||||||
- 指定“使用我收藏的某个模板来生成”;
|
|
||||||
- 系统基于新商品数据,自动套用模板的结构与风格,输出新的主图 + 标题 + 卖点草稿。
|
|
||||||
```
|
```
|
||||||
|
|
||||||
通常 AI 会生成类似下列的结果,你可以尝试将 AI 生成的提示词用于之后的程序生成:
|
通常 AI 会生成类似下面的结构化提示词:
|
||||||

|

|
||||||
|
|
||||||
|
你可以把这份提示词稍作修改后,发给 AI IDE 生成代码。
|
||||||
|
|
||||||
### 2.2 第二步:让 AI IDE 直接生成代码
|
### 2.2 第二步:让 AI IDE 直接生成代码
|
||||||
|
|
||||||
|
#### 2.2.1 准备工作:了解 AI IDE 的基本操作
|
||||||
|
|
||||||
|
如果你还不熟悉 AI IDE(如 Cursor、Trae、Windsurf 等)的基本使用方式,建议先看附录中的[可视化教程](http://localhost:5173/easy-vibe/zh-cn/appendix/ide-intro/),了解如何:
|
||||||
|
- 创建新项目
|
||||||
|
- 与 AI Agent 对话
|
||||||
|
- 理解 AI 的代码生成过程
|
||||||
|
|
||||||
|
#### 2.2.2 开始生成代码
|
||||||
|
|
||||||
此时你已经获得了初始提示词,我们以第一种提示词风格为例,让 AI 协助我们生成代码。首先创建一个窗口和对应的文件夹,打开文件夹(在你喜欢的文件夹地址下初始化一个新项目):
|
此时你已经获得了初始提示词,我们以第一种提示词风格为例,让 AI 协助我们生成代码。首先创建一个窗口和对应的文件夹,打开文件夹(在你喜欢的文件夹地址下初始化一个新项目):
|
||||||

|

|
||||||

|

|
||||||
@@ -292,7 +344,18 @@ Thinking 是好事,但不可 over thinking,我们就此控制过度反思,
|
|||||||
在侧边栏中选择一个你喜欢的模型(推荐 gemini、gpt、glm、kimi、minimax 等),输入第一步中得到的提示词:
|
在侧边栏中选择一个你喜欢的模型(推荐 gemini、gpt、glm、kimi、minimax 等),输入第一步中得到的提示词:
|
||||||

|

|
||||||
|
|
||||||
点击生成后,我们会看到熟悉的环节,AI 会根据提示词,规划出项目的目录结构、必要的文件,并给出每个文件的初始内容。此时同样别忘记按回车确认信息(否则会陷入等待,有些 AI IDE 不会陷入这个问题):
|
点击生成后,我们会看到熟悉的环节,AI 会根据提示词,规划出项目的目录结构、必要的文件,并给出每个文件的初始内容。
|
||||||
|
|
||||||
|
::: warning ⚠️ 特别注意:AI 可能会停下来等你确认
|
||||||
|
在生成过程中,AI Agent 经常会**停下来等待你的输入或确认**,比如:
|
||||||
|
- 询问你是否继续下一步
|
||||||
|
- 让你按回车确认某个操作
|
||||||
|
- 询问你某个技术细节的选择
|
||||||
|
|
||||||
|
**如果看到 AI 不动了,先检查一下对话界面,看看是不是在等你回复。** 很多新手以为 AI 在思考,其实它早就停在那等你了。主动回复或按回车,AI 就会继续工作。
|
||||||
|
:::
|
||||||
|
|
||||||
|
此时同样别忘记按回车确认信息(否则会陷入等待,有些 AI IDE 不会陷入这个问题):
|
||||||

|

|
||||||
|
|
||||||
如果遇到如下场景,这个意思是已经在本地启动了一个服务,你需要点击跳过,否则会停留在这个界面(如果代码生成完没有东西出下,你就需要主动说“帮我启动这个项目”):
|
如果遇到如下场景,这个意思是已经在本地启动了一个服务,你需要点击跳过,否则会停留在这个界面(如果代码生成完没有东西出下,你就需要主动说“帮我启动这个项目”):
|
||||||
|
|||||||
@@ -13,7 +13,11 @@ const duration = '约 <strong>1 天</strong>'
|
|||||||
|
|
||||||
<ChapterIntroduction :duration="duration" :tags="['API', '文本模型', '文生图', '原型集成']" coreOutput="原型接入 1 个文本模型 + 1 个图像模型(可选)" expectedOutput="可调用真实 API 的 AI 原型">
|
<ChapterIntroduction :duration="duration" :tags="['API', '文本模型', '文生图', '原型集成']" coreOutput="原型接入 1 个文本模型 + 1 个图像模型(可选)" expectedOutput="可调用真实 API 的 AI 原型">
|
||||||
|
|
||||||
上一节搭好的原型目前还只是静态页面。本章**接入真实 AI 能力**:拿到 API Key、读懂官方示例、让 AI IDE 帮你集成到代码里。以 DeepSeek 文本模型为例,并可选接入图像生成服务。
|
前面两章我们学会了用 AI IDE 搭建原型,也掌握了从业务需求到产品设计的完整流程。但现在的原型还不能真正运行——点击按钮不会真的生成内容,页面上的文字都是写死的。
|
||||||
|
|
||||||
|
这一章要让原型"活"起来:我们会接入真实的 AI 能力,从拿到 API Key 开始,到读懂官方文档、让 AI IDE 帮你把接口集成进代码里。你会以 DeepSeek 文本模型为例,学会怎么让应用真正调用大模型生成内容;如果感兴趣,还可以选做图像生成的接入。
|
||||||
|
|
||||||
|
学完这章,你的原型就不再是静态页面,而是能调用真实 AI 能力的应用。
|
||||||
|
|
||||||
</ChapterIntroduction>
|
</ChapterIntroduction>
|
||||||
|
|
||||||
@@ -699,7 +703,7 @@ Artificial Analysis 更适合把“效果 / 价格 / 速度”放在同一张表
|
|||||||
|
|
||||||
剩下的工作,IDE 和现代化的开发工具会帮你完成。专注于你的业务逻辑,底层调用的事交给这些成熟的 SDK 和工具链。
|
剩下的工作,IDE 和现代化的开发工具会帮你完成。专注于你的业务逻辑,底层调用的事交给这些成熟的 SDK 和工具链。
|
||||||
|
|
||||||
## 5. 📚 作业:集成你的第一个 AI 能力
|
# 5. 📚 作业:集成你的第一个 AI 能力
|
||||||
|
|
||||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||||
<template #header>
|
<template #header>
|
||||||
|
|||||||
@@ -13,9 +13,11 @@ const duration = '约 <strong>3 天</strong>'
|
|||||||
|
|
||||||
<ChapterIntroduction :duration="duration" :tags="['产品思维', '模拟数据', '交互完善', 'LocalStorage']" coreOutput="1 个功能完备的 AI 产品原型" expectedOutput="包含完整链路与真实数据的 Web 应用">
|
<ChapterIntroduction :duration="duration" :tags="['产品思维', '模拟数据', '交互完善', 'LocalStorage']" coreOutput="1 个功能完备的 AI 产品原型" expectedOutput="包含完整链路与真实数据的 Web 应用">
|
||||||
|
|
||||||
接入 AI 后的 Demo 已经可以调用真实能力,但离真正的"产品"还差几步:页面刷新数据丢失、报错直接白屏、列表只有测试数据、用户操作无法撤销...
|
上一章接入了 AI 能力,Demo 能跑起来了,但离真正的"产品"还差得远:页面一刷新数据就没了,报错就白屏,列表里只有"测试数据 1、测试数据 2",用户点错了也没法撤销...
|
||||||
|
|
||||||
本章将帮你补全这些缺失的链路,用 AI 生成逼真的模拟数据,把 Demo 打磨成**拿得出手的完整原型**。
|
这一章要把这些坑都填上:我们会补全产品的完整链路,用 AI 生成逼真的业务数据替代假数据,加上错误处理和用户反馈,最后打磨出一个拿得出手、能给别人演示的完整原型。
|
||||||
|
|
||||||
|
这是初级阶段的最后一章,走完这一步,你就完成了从"完全不会编程"到"能独立做出 AI 产品原型"的蜕变。
|
||||||
|
|
||||||
</ChapterIntroduction>
|
</ChapterIntroduction>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user