0代码也能做产品?我用这套AI工具链,从想法到上线只用了3天

“人人都是产品经理”正在进入iPhone时刻。AI工作流让你我从”提需求的人”变成”做产品的人”。

—先说结论

我是一个不会写代码的产品经理。

上周，我用这套工具链，从一个想法到一个能跑的网站，只用了3天。

不是Demo，是前后端分离，有数据库，能在英特网用，谷歌能搜到。

工具链长这样：

想法 → 扣子PRD Skill → Stitch原型 → AI Studio前端 → OpenCode后端 →部署

每一步都有AI帮你干，你只需要做决策。

—

第一步：想法 thinking skill/plan agent等 

本质上，要做一个产品，离不开用户，价值，场景。这是一个涉及产品思维的叙事（对这一块感兴趣可以参考我的产品思维公益课），现在通过AI可以让模糊的想法快速的变得清晰具象。生成初步的方案。

第二步：通过产品文档PRD生成Skill输出PRD

什么是Skill？

Skill就是你给AI定的”人设”和”工作流程”。比如我在opencode上搭了一个PRD生成Skill，它的能力是：

> 输入一句话想法/方案，输出一份完整的PRD文档（包含架构图、功能列表、时序图、原型草图）

怎么搭建/使用？

1. 打开 扣子(https://www.coze.cn)

2. 点击技能商店，搜索「产品文档PRD生成」，我已经共享给大家，可以直接使用，你也可以根据自己需要搭建：

3. 设定角色：你是一个资深产品经理，擅长将需求转化为PRD

4. 输入模板：定义PRD的结构（背景、目标、功能列表、时序图、原型）

5. 测试效果：输入”做一个电商商城（用户XX场景XX价值XX）”，看输出是否完整

AI输出了：

– 项目背景与目标

– 用户角色（管理员、普通用户）

– 功能列表（商品管理、运营管理、订单管理、地址管理）

– 核心业务流程图

– 数据库设计草图

– 原型线框图

整个过程不到5分钟。

第二步：PRD粘贴到Stitch，AI生成高保真原型

什么是Stitch？

Stitch是Google的AI原型设计工具，你给它文字描述，它直接生成高保真UI原型。

操作步骤

1. 打开 [Stitch](https://stitch.withgoogle.com)【注：需要科学】

2. 新建项目

3. 把扣子生成的PRD内容粘贴进去

4. 点击「生成」

AI会自动识别你的需求，生成多个页面的高保真原型。也可以生成可交互的原型，分享给你的老板，同事，需求方。大大降低了沟通的成本。

生成效果

Stitch给我生成了：

商城（首页、商品列表、商品详情页、兑换确认页、我的订单页）

管理后台（商品管理、订单管理、卡密管理）

每个页面都有真实的UI组件、配色、布局，不是线框图，是能直接用的设计稿。

核对修改

生成后你需要做的：

1. 逐页检查：这个页面是不是我要的？

2. 调整布局：按钮位置不对？拖一下

3. 确认交互：点击这个按钮应该跳到哪里？

确认无误后，点击右上角「导出」，选择「AI Studio」格式。

—

第三步：导出到Google AI Studio，AI写前端代码

什么是Google AI Studio？

Google AI Studio是Google的AI开发平台，可以把设计稿直接转成前端代码。

操作步骤

1. 从Stitch导出项目，选择「AI Studio」格式

2. 打开Google AI Studio

3. 导入导出的文件

4. 点击「Build」

AI会自动生成前端代码（HTML + CSS + JavaScript）。

生成效果

AI Studio给我生成了：

– 完整的HTML页面结构

– 响应式CSS样式（手机和电脑都能用）

– 基础的JavaScript交互（点击、跳转、表单提交）

你不需要懂代码，只需要看效果对不对。

核对效果

1. 预览页面：点击「Preview」看实际效果

2. 调整样式：颜色不对？告诉AI改

3. 确认功能：点击按钮有没有反应？

确认没问题后，下载前端代码包。

—

第四步：OpenClaw/OpenCode做后端 + Vercel一键部署

什么是OpenCode？

OpenCode是一个AI编程工具，支持多Agent协作。你可以把它理解为”AI程序员团队”。也可以用openclaw（小龙虾），claudecode，codex。

地址：https://opencode.ai/

后端开发

1. 打开OpenCode

2. 把PRD和下载好的前端代码丢给它，说：”帮我规划下后端API”

3. AI会自动生成：

   – 数据库设计

   – API接口（登录、商品列表、下单、发货）

   – 业务逻辑（积分扣减、库存管理）

你只需要告诉它”这个接口要返回什么”，代码它自己写。

 前后端对接

1. 把AI Studio下载的前端代码导入项目

2. 配置API地址（指向OpenCode生成的后端）

3. 联调测试：前端点按钮 → 后端处理 → 返回结果

4.验收；使用playwright或其他自动化测试技能，完成系统测试验收

一键部署

1. 把代码推到GitHub

2. 打开 [Vercel](https://vercel.com)

3. 连接GitHub仓库

4. 点击「Deploy」

30秒后，你的网站就上线了，有一个真实的网址可以访问。

 总结：这套工具链的核心价值

传统流程	AI工具链
PRD写完 → 等排期 → 开发2周 → 测试1周 → 上线 |	PRD生成 → 原型生成 → 前端生成 → 后端生成 →自动化测试→ 一键部署
耗时：1个月+，需要：PM + 前端 + 后端 + 测试	耗时：3天，需要：1个PM

核心变化：PM从”等排期的人”变成”自己做产品的人”。

—

## 后续计划

这套工具链我还在持续优化，后续会出每个工具的详细教程：

1. 扣子PRD Skill搭建教程（手把手）

2. Stitch原型设计技巧

3. Google AI Studio前端开发实战

4. OpenCode后端开发全流程

5. Vercel部署与域名配置

点个关注，不错过后续教程。