工具推荐

在开始这次作业之前，我先给大家推荐几个工具，你也可以找类似的替代：

1. Stitch：通过 AI 助力迭代将您的想法转化为设计。无论您是构建网络应用程序、移动体验还是原型，都可以从这里开始。（需翻墙，国内暂时没有合适的替代产品）

2. AI studio：一站式AI 平台是面向机器学习开发者，提供开发机、任务等功能的企业级开发平台，支持从数据托管、代码开发、模型训练、模型部署的全生命周期工作流。（需翻墙，可以用 Enter 替代）

3. CloudFlare：无服务器计算平台，可在边缘网络运行代码处理 API、缓存等任务；Cloudflare Pages 是静态网站托管服务，支持自动部署和 CDN 加速。两者结合可实现前端展示与后端逻辑的协同工作。

4. Supabase：是一个基于PostgreSQL的开源后端即服务平台，特别适合用来做个人项目或快速验证想法。让开发者能够在无需付费的情况下构建和测试完整应用。

5. Google Analytics：是由Google提供的网站流量统计服务。它可以帮助网站管理员了解网站的访问量、用户行为、来源等信息，从而优化网站内容和提升用户体验。GA还可以进行数据分析和报告生成。

6. 我做的产品思维技能：产品思维顾问是一个帮助你的产品想法落地、或诊断已有产品问题的 AI 助手。

通过七大思维工具进行系统性分析，输出可执行的产品策略文档。（需翻墙，github，需要的小伙伴可以加我要文件）

1. 云舒老师的生图技能：云舒老师的生图技能还需要 api，我自己下载做了本地化改造，使其只出提示词，然后我再通过 gemini 生图。以下我的作业配图便有部分是使用提示词生图～（需翻墙，github，需要的小伙伴可以加我要文件）

你是不是还没有头绪？不知道自己做什么产品？又或者不知道自己的产品合不合适推出来？那我认为你可以和产品思维顾问先聊一下。先从一句简单的话开始聊起。

我是怎么将产品落地的

需求分析

我之前曾经写过日记，但是其实大部分时候每天的生活都是重复单调的，于是乎时间一长我就没有记录的习惯了。

于是乎，我想通过 AI 打造一个可以对话、陪伴式的日记产品。说到这里，我就决定先通过跟 AI 分析一下我的产品如何。

我：你好，我想打造一款 AI 对话记录的日记，名字叫做回响

(EchoMind)，“念念不忘必有回响”。强调日记不再是石沉大海的自言自语，每一句倾诉都会得到 AI 的理解与“回响”

AI：好的！这是一个非常有温度的产品想法。让我先用灵魂三问快速评估一下，然后为你设计一个系统的分析框架。……

然后在几轮对话后，我让 AI生成了一个参考文档。我也把生成的文档发上来供大家参考一下。

EchoMind_产品分析报告

先看样子后编程

在这里我们就要引入前面提到的 Stitch 工具来了，为什么？因为当我们想好一个产品的时候，可能你对细节是有自己的一些想法的，但是如果直接让 AI 来执行，会很容易在编程的过程中逐渐偏离你的构思。所以我会更加建议你先打造出对应的效果图/前端代码。

如何使用Stitch

这里是链接：stitch.withgoogle.com

当我们打开页面的时候应该是会提醒我们登录，我们只要跟着指引走就可以了，这里不赘述。（过程中如果因为有英语而有点不同的地方可以通过沉浸式翻译这个浏览器插件进行翻译）

为我们的前端页面生成对应提示词

还记得我刚刚生成的产品分析报告吗？这个时候要注意，不是直接丢进去哈，我们可以打开 DeepSeek 或者豆包之类的免费对话 AI，然后告诉他：

请你把这个产品分析报告，转为页面的 AI生成提示词。应该要包括：项目的简单介绍，项目的示意图尺寸大小（常见手机 app的页面大小为390*900）页面应该包含常见的 APP 页面：

生成出来后，我们只要点击复制按钮即可。

回到 Stitch 我们继续设计页面

把刚刚得到的提示词复制进对话框，然后点击右下角的回车键。

可以看到生成结束之后，还有一个页面是用的英文。没关系，我们可以点击页面，然后点击Edit——添加到聊天

然后告诉他：

日记时间轴用的还是英文，请你进行修改。

他就会帮你重新生成一个新的中文页面，这个时候把上面的删掉就可以了。

审查生成的页面符不符合我们的需求

大家是不是很想直接干了？别急，我们还需要微调一下。你把你对画面不满意的地方通通告诉他先。

例如我对 LOGO 不满意，那么同样的，我点击图片，然后点击 Edit-Annotate：

然后框选你认为不满意的地方，告诉他。

他就会给你重新生成。同样的，你也可以用来调整其他地方：

生成原型

当你把这一切都弄好了之后，Stitch 有一个很棒的功能就是快速生成原型。我们可以点击Generate-原型：

因为这里放不了视频，我们就简单的描述一下，当你点击左上角的 Interact，你会发现你的页面动了起来，你可以看看你的交互逻辑是否是正确的。如果不是正确的话还可以对他进行新一轮的修改。

最终我们的成品应该是这样的：

下一步我们就可以通过导入 AI studio（或者导出成.zip 文件然后在 enter 打开）:

从产品原型到可交互的页面

使用 AI Studio

在上一节中，我们点击了使用 AI Studio 构建，就会跳转到以下的页面，然后我们点击 Build 就可以了：

接着我们等待片刻。就可以看到这样的界面：

很好，现在已经生成了对应的可交互的前端界面。但我们肯定不满足于此，因此我们还需要为他设计网页端（桌面）的界面。

生成网页端页面

同样的，告诉它，让他生成对应的网页端，就会给到你对应的链接了：

我们需要设计对应的网页端界面

生成对应的后端处理的脚本

接下来我们会用到Cloudflare里的 Worker 和 Pages，前者你可以理解成我们的服务器，后者是我们展示的页面。

我们可以直接告诉 AI studio：

我打算部署在 cloudflare的 worker页面作为我们的后端，同时使用智谱的 API（https://docs.bigmodel.cn/cn/guide/develop/http/introduction）（这里换任何 API 都可以，例如阿里的都行。但是一定要把对应的 API 参考文档发给 AI，让他知道怎么构建）来处理我们的请求。

就这样，我们就准备好了cloudflare_worker.js这个后端脚本。接下来让我们放进 Cloudflare。

去 Cloudflare创建对应的后端

这个时候我们再去Cloudflare 选择创建应用。

点击从 Hello world!开始：

他会给我们生成一个随机域名。我们可以选择修改或者是保持这个域名都可以，因为是在后端而不是在前端访问的页面：

点击部署并稍等片刻，然后点击右上角的编辑代码：

看到这个界面了吗？

然后我们切换到 AI Studio，把对应脚本代码复制过来：

切换到Cloudflare，把代码复制好后，点击部署：

完成之后，我们还需要设置一个环境变量，用来存放我们的 AI 的 API，点击变量和机密——添加：

小贴士：为什么不直接放在代码里，反而要额外放呢？因为如果直接放在代码里，别人访问你的网页的同时，只要开控制台就能知道你的 API，所以一定要通过环境变量的形式来放 API。这样，你的 API 才是安全的。

这里大家要注意一下，变量名是要看你 AI在代码里怎么写的，如果不知道你可以这样问它：

请问我存放API 的变量名应该叫什么？你刚刚是怎么设计的？

然后确认变量名称和值（API）无误后，就可以点击部署了。

OK！当你完成这一步之后，你已经离成功很近了！我们把配置好的域名重新告诉 AI Studio:

你可以试着和它对话：

然后再去后台看看是否有访问请求，如果有！恭喜你，你已经把 AI嵌套进来啦！：

让数据可以保存

创建数据库（New project）

这个时候请我们请出大名鼎鼎的Supabase，我们需要用它来存储我们的数据，同样的创建一个项目：

如果这个过程中你不确定需要怎么配置，你也可以学习我和AI Studio 问一句：

遇事不决问 AI，毕竟它才是干活的那一个，我们不需要想太多哈，我们只是内容的搬运工～

包括，他也会给你对应的 SQL 代码，你先保存下来，然后一会我们就会用到：

初始化数据库

我们创建好之后进入到 SQL Editor（SQL 编辑器）：

输入刚刚我们获得的代码，然后点击 Run（运行）：

等待他提示 Success. No rows returned（成功。没有返回任何行）：

至此，我们的数据库就创建完毕了。

接入数据库

接下来，我们需要让应用接入到 Supabase 数据库，个时候我们可以问 AI Studio 我们需要提供什么内容给他：

它告诉我们，还需要回去刚刚的 worker 页面继续添加变量，同时还需要修改代码，那我们就再过去修改。因为之前已经演示过了就不再赘述。那么这两个变量可以在哪里找呢？

只要往下面滚动我们就能看到对应的网址和 API 啦，然后我们填写到 Worker 的变量即可，记得页面的代码也需要修改，因为现在接入了 API。

接入Google Analytics做数据分析

创建Google Analytics项目

同样的，我们告诉 AI Studio，我们想要接入 GA，那么他就会给到我们对应的操作指引：

点击创建，然后选择网站：

然后我们是不是要一个地址？别急，我们又可以通过 Cloudflare 来获得一个：

点击下方的开始使用，这里的话部署的是静态页面，也刚好够我们用了：

选择拖放文件或者导入 Git 存储库都可以，简单一点的话，就是在 AI studio 下载源代码后，选择拖放文件：

这里还需要注意一点，AI Studio 一般生成的网站会比较高级，所以服务器不一定可以直接识别，你要问他要用到什么构建工具不。可以这样问：

你好，请问我如果部署到 Cloudflare（或者别的），需要构建工具吗？

例如我这个项目，那么我会这样选择：

然后部署之后会给到我们一个域名，反手填到 GA 里面，然后获得我们的 G-代码：

然后去到对应的位置进行修改：

然后重新上传，我们就会发现已经可以配置成功啦：

结语

到这里我们的旅程就差不多结束了，因为我们的主要功能都已实现，接下来更多的就是通过微调来实现我们的具体功能。所以我这里直接上链接吧，https://echomind-2my.pages.dev/  但是由于API 并发限制，所以不一定能够及时响应哈～