3.1 国内路线：用 Coze 编程做出第一个产品
本节任务：用 Coze 编程完成一个可以公开访问的个人介绍网站，走完“明确需求、生成产品、修改验收、发布验证”的完整流程。
本节目标
完成这一节后，你应该能够：
- 区分 Coze 编程与传统的 Coze Bot 搭建平台
- 在生成代码前，把模糊想法整理成一份简短的产品说明
- 使用问答模式和 Agent 模式完成网站
- 通过预览、标注和版本记录修改结果
- 检查移动端显示并发布公开链接
这一节和下一节会做同一个项目。区别在于：本节使用在线生成环境，下一节使用 Codex App 操作本地代码。这样你可以比较两种工作方式，而不是重复学习两个不相关的案例。
先分清两个 Coze
Coze 生态中既有用于 Bot、工作流和知识库的搭建平台，也有面向网站与应用开发的 Coze 编程。本节使用后者。
| 工具 | 主要用途 | 本节是否使用 |
|---|---|---|
| Coze Bot 平台 | 创建机器人、工作流、插件和知识库应用 | 否 |
| Coze 编程 | 通过对话生成、修改和发布网站或应用 | 是 |
产品界面和入口可能随版本调整，请从 Coze 编程 官方入口进入，并以当前页面显示为准。不要把按钮名称背下来，真正需要掌握的是下面这条工作流程。
为什么先做个人介绍网站
第一个项目不需要追求复杂。个人介绍网站有三个优势：
- 不依赖数据库、支付或登录系统，失败点少。
- 内容来自你自己，容易判断生成结果是否准确。
- 完成后可以真实使用，而不只是一次演示。
网站至少包含：
- 姓名或公开称呼
- 一句话定位
- 简短自我介绍
- 2 至 3 个经历、作品或项目
- 一个有效的联系方式
第一步：准备真实材料
先新建一份 Markdown 文档，写下准备公开的信息。不要让 AI 编造你的经历，也不要一开始就堆很多内容。
# 张明
AI 产品实践者，正在帮助普通人用 AI 完成第一个数字产品。
## 关于我
我关注 AI 编程、内容产品和个人效率，持续记录从想法到上线的实践过程。
## 项目
### AI 编程学习笔记
把学习过程整理成适合新手阅读的教程。
### 个人知识库
用 Markdown 和 AI 管理项目、文章与行动计划。
## 联系我
- 邮箱：hello@example.com
- GitHub：https://github.com/example
把示例替换成你自己的真实资料。暂时不想公开的手机号、住址和私人账号不要上传。
第二步：先澄清需求，不急着生成
进入 Coze 编程后，先使用问答或对话模式。第一轮不要直接说“做个高级网站”，而要告诉 AI 项目的目的、读者和限制。
可以从下面这段开始：
我想做一个可以公开分享的个人介绍网站。目标读者是第一次认识我的潜在合作伙伴。
请先不要生成网站。先通过提问帮我确认：
1. 网站最重要的目标
2. 需要展示的内容
3. 页面结构
4. 视觉方向
5. 移动端要求
6. 哪些功能这次不做
信息确认后，请整理成一份简短的产品需求文档。
这一阶段的关键不是写出更长的提示词，而是消除歧义。如果 AI 对你的职业、项目或目标用户做了错误假设，立即纠正。
第三步：形成一份可验收的 Spec
需求沟通结束后，让 AI 输出一份简短 Spec。至少应包含以下五部分：
| 部分 | 需要回答的问题 |
|---|---|
| Problem Statement | 为什么要做这个网站 |
| Proposed Solution | 准备做成什么样 |
| Content Structure | 页面包含哪些区块 |
| Non-goals | 这次明确不做什么 |
| Success Criteria | 做到什么程度算完成 |
本项目可以采用下面的验收标准：
- 首页打开后能在 5 秒内看懂“我是谁、我做什么”
- 所有文字均来自提供的真实材料
- 项目和联系方式可以正常点击
- 手机与桌面端均无横向滚动和内容遮挡
- 页面刷新后内容仍能正常显示
- 可以通过公开链接访问
重要：PRD 或 Spec 不是仪式。它的作用是让你在生成前有判断标准，避免只能凭“看起来还行”反复修改。
第四步：切换 Agent 模式生成网站
确认 Spec 后，再让 Agent 开始生成：
请按照刚才确认的 Spec 生成网站。
要求：
- 使用我提供的真实资料，不补写不存在的经历
- 信息层级清楚，首屏先说明我是谁、能提供什么价值
- 使用克制、易读的视觉设计，不添加无意义的装饰
- 同时适配桌面端和手机端
- 完成后说明页面结构，以及我应该重点检查的地方
生成过程中先等待当前任务完成。不要连续发送互相冲突的要求，否则 Agent 很难判断哪一条优先。
第五步：按优先级检查结果
第一次生成后，按以下顺序验收：
- 内容正确：姓名、定位、项目和链接是否真实。
- 结构清楚：首屏能否快速说明网站用途。
- 功能有效：按钮和链接是否可以点击。
- 响应式正常：桌面、平板和手机预览是否完整。
- 视觉一致：字号、间距、颜色是否统一。
先改内容和结构，再改颜色、阴影等细节。如果基础方向错了，继续打磨视觉只会浪费时间。
第六步：用具体反馈修改
“不好看”“高级一点”很难执行。反馈应指出位置、问题和预期结果。
请只修改下面三个问题，其他内容保持不变：
1. 首屏没有清楚展示我的职业定位，把一句话定位放到姓名下方。
2. 项目区文字太密，每个项目只保留名称、两句说明和一个链接。
3. 手机端联系按钮超出屏幕，改为纵向排列并占满可用宽度。
修改完成后重新检查桌面端和手机端。
如果平台支持截图标注，可以直接圈出需要修改的位置。小范围问题直接交给 Agent 修改；如果页面结构或目标已经变化，应回到问答模式重新确认 Spec。
| 情况 | 合适的处理方式 |
|---|---|
| 改一个标题、颜色或间距 | 直接让 Agent 修改 |
| 替换个人资料 | 上传或粘贴真实内容后替换 |
| 页面结构整体不对 | 回到需求讨论，更新 Spec |
| 修改后效果更差 | 使用版本记录回到稳定版本 |
| 预览异常或没有更新 | 先刷新，必要时重启预览 |
第七步：完成发布前验收
至少执行下面这份清单：
- 姓名、简介和项目资料准确
- 没有 AI 编造的经历、数据和客户评价
- 所有外部链接都能打开
- 手机端没有横向滚动、文字截断或按钮重叠
- 页面没有“示例内容”“稍后补充”等占位文字
- 标题和描述能说明网站是谁的、用于什么
- 公开链接在退出登录后仍能访问
不要只看平台内部预览。发布后，用浏览器无痕窗口和手机各打开一次公开链接。
第八步：把链接发给一个真实用户
上线不是结束。把链接发给一位不了解这个项目的人，只问三个问题：
- 你能否快速看懂我是谁、在做什么？
- 哪部分内容让你困惑或不信任？
- 看完后，你知道下一步应该联系我还是查看项目吗？
记录反馈，只修复反复出现或明显影响理解的问题。不要因为一个人的审美偏好重做整个网站。
Coze 编程适合什么，不适合什么
| 适合 | 暂不适合 |
|---|---|
| 快速验证页面和产品想法 | 需要完全控制底层工程结构的项目 |
| 制作个人页、活动页和简单工具 | 复杂权限、支付和高可靠数据系统 |
| 非开发者完成第一个可访问版本 | 需要长期多人维护的大型代码库 |
Coze 编程可以帮你更快得到第一个版本，但平台生成不等于产品已经可靠。涉及用户账号、隐私数据、支付或关键业务时，还需要进一步的工程和安全检查。
练习
基础练习
- 用真实资料完成个人介绍网站并发布。
- 在桌面和手机上分别完成一次验收。
- 邀请一位真实用户试用，并记录一条有效反馈。
进阶练习
在不改变主要结构的前提下，增加一个“最近更新”区块。要求内容仍来自你提供的 Markdown 文件，并为新增功能补充验收标准。
本节回顾
你在这一节学到的重点不是某个按钮的位置，而是一个可以迁移到其他工具的产品流程。下一节会使用 Codex App 重做同一个项目，并进一步学习本地文件、代码审查、测试和 Git 提交。