<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>JAMStack on Colinx Blog</title><link>/tags/jamstack/</link><description>Recent content in JAMStack on Colinx Blog</description><generator>Hugo -- gohugo.io</generator><language>en-us</language><lastBuildDate>Sun, 14 Sep 2025 00:00:00 +0000</lastBuildDate><atom:link href="/tags/jamstack/index.xml" rel="self" type="application/rss+xml"/><item><title>LLM Agent is All You Need - 让 AI 指导我完成 MVP 产品 - 「Colin's Weekend Project」</title><link>/posts/llm-agent-is-all-you-need-%E5%BD%93%E6%88%91%E7%94%A8%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%8A%A9%E6%89%8B%E6%9D%A5%E6%8C%87%E5%AF%BC%E6%88%91%E5%AE%8C%E6%88%90mvp%E4%BA%A7%E5%93%81-colins-weekend-project/</link><pubDate>Sun, 14 Sep 2025 00:00:00 +0000</pubDate><guid>/posts/llm-agent-is-all-you-need-%E5%BD%93%E6%88%91%E7%94%A8%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%8A%A9%E6%89%8B%E6%9D%A5%E6%8C%87%E5%AF%BC%E6%88%91%E5%AE%8C%E6%88%90mvp%E4%BA%A7%E5%93%81-colins-weekend-project/</guid><description>
&lt;blockquote>
&lt;p>&lt;strong>「Colin&amp;rsquo;s Weekend Project」&lt;/strong>
我个人喜欢挑一个周末在一个很短很专注的时间内，捣鼓点小玩意。这个栏目用来记录我的这些 idea、作品、创作过程以及吐槽&lt;/p>
&lt;/blockquote>
&lt;p>今天来挑战一下，在大模型的指导下，完成一个最小可行产品 (MVP)&lt;/p>
&lt;h2 id="idea">
idea
&lt;a href="#idea" class="h-anchor" aria-hidden="true">#&lt;/a>
&lt;/h2>
&lt;p>如果单纯是开发一个完整的 web 程序 or 移动端程序，其实没啥意思。我之前已经搞过很多，更别提日常在公司里面就是在开发各种功能。今天我打算以一个非专业人士的视角，探究一下：&lt;/p>
&lt;ul>
&lt;li>当下各种 AI 助手已经百花齐放，飞入寻常百姓家。但是当下的 AI 在真实世界的任务中，究竟能做到什么地步&lt;/li>
&lt;li>如果作为一名非专业人士，究竟能不能借助这些 AI 工具做出一个可用的产品&lt;/li>
&lt;li>如果真正要做一个面向 C 端的产品，把流程 Run 起来持续下去，需要考虑哪些因素&lt;/li>
&lt;/ul>
&lt;h2 id="如果一切都从-llm-开始">
如果一切都从 LLM 开始&amp;hellip;
&lt;a href="#%e5%a6%82%e6%9e%9c%e4%b8%80%e5%88%87%e9%83%bd%e4%bb%8e-llm-%e5%bc%80%e5%a7%8b" class="h-anchor" aria-hidden="true">#&lt;/a>
&lt;/h2>
&lt;p>我需要代入一个非专业开发人员的视角，来进行这次的项目。首先项目启动的第一个问题：在没有任何产品经理的知识，不懂得产品开发流程的小白的情况下，我需要如何开始？&lt;/p>
&lt;p>在没有 LLM 以前，或许我需要先各种查阅资料学习，或者各种摇人让懂行的朋友进行指导。但是现在，一切都不一样了：随便一个 LLM 都可以帮我快速入门&lt;/p>
&lt;p>一开始，我是打算接住 LLM 让我快速了解产品相关的知识。但是突然觉得，既然都用 AI 了，为什么还在遵循原有的路径，一步步自己学习、理解然后教 AI 做事呢？换个思路，我只要提供需求，AI 来拆解任务。&lt;/p>
&lt;p>于是
&lt;img src="https://blog-1301127393.file.myqcloud.com/BlogImgs/202509172249632.png" alt="image|476x415">&lt;/p>
&lt;p>&lt;img src="https://blog-1301127393.file.myqcloud.com/BlogImgs/202509172249633.png" alt="image-1|700x472">&lt;/p>
&lt;p>&lt;img src="https://blog-1301127393.file.myqcloud.com/BlogImgs/202509172249634.png" alt="image-2|700x472">&lt;/p>
&lt;p>利用 AI 生成一套提示词，来指导我如果分析我的需求、拆解任务&lt;/p>
&lt;p>不得不说，对于这些跨领域的知识，能有一个不厌其烦的 AI 助手来循序渐进地跟你交流、帮你分析，效果非常好。人类可能还真不好干这个活。&lt;/p>
&lt;h2 id="ai-教我做产品">
「AI 教我做产品」
&lt;a href="#ai-%e6%95%99%e6%88%91%e5%81%9a%e4%ba%a7%e5%93%81" class="h-anchor" aria-hidden="true">#&lt;/a>
&lt;/h2>
&lt;p>经过跟这个「MVP 导师」的 LLM Agent 反复沟通，确定了产品的主要构想和核心事项。以下是摘录的一部分&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4">&lt;code class="language-markdown" data-lang="markdown">&lt;span style="color:#75715e">#### MVP 概要（3 句话）
&lt;/span>&lt;span style="color:#75715e">&lt;/span>
&lt;span style="color:#66d9ef">-&lt;/span> **为谁**：20‑30 岁、周末感到无聊且有意愿尝试新事物的年轻人。
&lt;span style="color:#66d9ef">-&lt;/span> **解决什么痛点**：不清楚该尝试哪些活动、如何快速入门、活动是否适合自己、以及能获得什么收益。
&lt;span style="color:#66d9ef">-&lt;/span> **提供的核心功能**：活动列表页面 → 点击感兴趣的活动 → 展示入门门槛与材料推荐（入门材料按钮）并埋点上报。
&lt;/code>&lt;/pre>&lt;/div>&lt;div class="highlight">&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4">&lt;code class="language-markdown" data-lang="markdown">&lt;span style="color:#75715e">## MVP 核心功能：
&lt;/span>&lt;span style="color:#75715e">&lt;/span> &lt;span style="color:#66d9ef">1.&lt;/span> &lt;span style="font-weight:bold">**活动列表**&lt;/span>：集中展示多种可入门活动（绘画、球类、手工等）。
&lt;span style="color:#66d9ef">2.&lt;/span> &lt;span style="font-weight:bold">**入门详情**&lt;/span>：点击任意活动 → 展示入门门槛、必备材料、推荐教程链接。
&lt;span style="color:#66d9ef">3.&lt;/span> &lt;span style="font-weight:bold">**埋点追踪**&lt;/span>：记录“点击 → ≥1 min 外部阅读 → 回站”行为，用于验证假设。
&lt;/code>&lt;/pre>&lt;/div>&lt;p>这里印象深刻的是，MVP 导师让我先确保用户痛点一定要是真实的，在初期没有论证的情况下，MVP 的意义就在于基于一个假设 (假设用户的痛点是 xxx), 我们要围绕这个痛点先开发出 1-2 个核心功能，然后通过用户数据分析，来验证我们关于用户痛点的假设是否成立。如果不成立说明是伪需求，也就没有继续投入的必要了。&lt;/p>
&lt;p>这一点还是让我挺惊喜的，因为大部分人有个 idea 想做 xx 产品，大部分都是脑门一热，想要有 xxx 功能但是其实根本的需求并不是这个。花了很多精力搞出来的功能其实是伪需求。而 AI 导师专业水准还是挺在线的，能够在一开始就识别这个风险&lt;/p>
&lt;h2 id="vibe-coding">
Vibe Coding
&lt;a href="#vibe-coding" class="h-anchor" aria-hidden="true">#&lt;/a>
&lt;/h2>
&lt;p>接下来就是要进入开发的部分了。我选择的 AI 代码工具是字节的 Trae 海外版，不用验证手机号而且可以使用 Google Gemini、OpenAI GPT-4o、Anthropic Claude 4 等高级模型。&lt;/p>
&lt;p>首先让 AI 根据产品需求文档、拆解任务文档，确定了技术方案。不过这里我为了效率简化了下&amp;amp;注入了一些自己的私房调料，最终使用的方案为：&lt;/p>
&lt;ul>
&lt;li>astro + vue3 + tailwind css 来构建 web 站点&lt;/li>
&lt;li>directus cms 作为后端，省去编写后端和对接数据库的麻烦&lt;/li>
&lt;li>vercel 快速部署&lt;/li>
&lt;/ul>
&lt;p>这部分没啥好说的，简单列几个吐槽的点吧：&lt;/p>
&lt;ul>
&lt;li>astro 配置 tailwindcss, 换了一圈大模型没一个正确的。应该是跟近期大版本更新有关系。最后还是我手动跟着 astro 官方的文档搞定的&lt;/li>
&lt;li>trae 高级模型试用额度很低，没写几个功能就超限了开始排队，动不动前面几百号人基本没法用&lt;/li>
&lt;li>现阶段 AI IDE 基本都是基于 vs code 改的。所以 vscode 的缺点也都一并继承了过来，很多语言的插件需要额外手动安装、各种变量跳转用不了、各种奇怪的波浪线报错又没法快速修正&lt;/li>
&lt;/ul>
&lt;p>最后简要看下最终的成果吧&lt;/p>
&lt;p>&lt;img src="https://blog-1301127393.file.myqcloud.com/BlogImgs/202509172249635.png" alt="image-3">&lt;/p>
&lt;p>&lt;img src="https://blog-1301127393.file.myqcloud.com/BlogImgs/202509172249636.png" alt="image-4">&lt;/p>
&lt;p>后台数据：
&lt;img src="https://blog-1301127393.file.myqcloud.com/BlogImgs/202509172249637.png" alt="image-5">&lt;/p>
&lt;h2 id="埋点上报与用户行为分析">
埋点上报与用户行为分析
&lt;a href="#%e5%9f%8b%e7%82%b9%e4%b8%8a%e6%8a%a5%e4%b8%8e%e7%94%a8%e6%88%b7%e8%a1%8c%e4%b8%ba%e5%88%86%e6%9e%90" class="h-anchor" aria-hidden="true">#&lt;/a>
&lt;/h2>
&lt;p>之前做的都是玩具项目和公司内部平台，没怎么接触过 C 端用户行为分析。这块确实还是个挺陌生的领域。不过好在我们有万能的 AI. 在经过埋点需求分析、技术方案对比、任务拆解之后，最后采用了 Umami 平台来进行上报，并简单配置了下指标用于计算用户停留，辅助验证我们关于用户痛点的假设&lt;/p>
&lt;p>&lt;img src="https://blog-1301127393.file.myqcloud.com/BlogImgs/202509172249639.png" alt="image-6|0x0">&lt;/p>
&lt;p>跟 MVP 导师沟通的时候，确定了验证假设的方式为：衡量用户是否点击「查看详情」按钮&lt;/p>
&lt;ul>
&lt;li>用户点击并在外部阅读 ≥ 1  分钟后回站&lt;/li>
&lt;li>成功阈值：≥ 25 % 的访问者完成“点击 → ≥ 1 min 回站&lt;/li>
&lt;/ul>
&lt;p>为了方便统计，借助 umaimi 的统计功能快速实现，我只需要统计有多少比例的用户至少点击了一次「了解详情」. 具体到代码实现上，就是在「点击详情」按钮添加一个上报，上报内容包括用户的 session id, 后面在 umaimi 统计一段时间内，按钮点击事件里面，有多少独立的 session id 处以总的 uv 就可以。&lt;/p>
&lt;p>&lt;img src="https://blog-1301127393.file.myqcloud.com/BlogImgs/202509172249640.png" alt="image-7">&lt;/p>
&lt;h2 id="投放">
投放
&lt;a href="#%e6%8a%95%e6%94%be" class="h-anchor" aria-hidden="true">#&lt;/a>
&lt;/h2>
&lt;p>众所周知，天朝桌面端 web 用户已经约等于 0 了，技术博客都很少人看，更别提这种泛娱乐向的内容。MVP 导师提供的方案，也是路线正确，但是 web 端用户数据反馈验证的路子基本没用。不过这个 web 页面我也不指望能成为流量主力，最多算个 wiki.&lt;/p>
&lt;p>要想真的有人看，收获真实用户反馈，还是需要到各种新媒体平台去投放的。然后再收集数据进行分析，不过这个工作量就是另外一回事了。运营起来还是需要挺多时间精力的。&lt;/p>
&lt;p>尝试做了几个图投放到小红书，放几个示例图&lt;/p>
&lt;p>&lt;img src="https://blog-1301127393.file.myqcloud.com/BlogImgs/202509172249641.png" alt="image-8">&lt;/p>
&lt;p>用的搞定设计的模版调整了下，插图是用 Gemini, 效果还可以，能很好地遵循用户指令，不过美学方面跟 MidJourney 那些还是差了一截，毕竟人家专攻的方向。提示词里面限制好风格的话出图效果还是可以的，这里后续如果有必要的话，其实也可以 AI 批量生产插图。&lt;/p>
&lt;p>不过小红书账号冷启动，反响平平。这里后续有时间再研究吧&lt;/p>
&lt;h2 id="the-end">
The End
&lt;a href="#the-end" class="h-anchor" aria-hidden="true">#&lt;/a>
&lt;/h2></description></item><item><title>JAMStack 初体验 - 基于 Pocket 和 Gatsby 构建你的「网络日志」</title><link>/posts/jamstack%E5%88%9D%E4%BD%93%E9%AA%8C-%E5%9F%BA%E4%BA%8Epocket-%E5%92%8C-gatsby-%E6%9E%84%E5%BB%BA%E4%BD%A0%E7%9A%84%E7%BD%91%E7%BB%9C%E6%97%A5%E5%BF%97/</link><pubDate>Sat, 09 Jan 2021 00:00:00 +0000</pubDate><guid>/posts/jamstack%E5%88%9D%E4%BD%93%E9%AA%8C-%E5%9F%BA%E4%BA%8Epocket-%E5%92%8C-gatsby-%E6%9E%84%E5%BB%BA%E4%BD%A0%E7%9A%84%E7%BD%91%E7%BB%9C%E6%97%A5%E5%BF%97/</guid><description>
&lt;!-- # JAMStack 初体验 - 基于 Pocket 和 Gatsby 构建你的「网络日志」 -->
&lt;p>折腾了自己的专属 RSS 信息流，每天都能从那些高质量的信息源中获得不少干货知识，一般就会顺手收藏一下。有一天突然想起自己收藏的那些文章，本身不就是经过二次筛选的高质量文章吗？于是便在构想能不能通过某种方式将这个信息源也公开出来，一方面是记录，另一方面也是间接地展示自己。恰逢遇见&lt;strong>JAMStack&lt;/strong>，最近在国外非常火，国内的阿里和腾讯也在跟进，搞静态托管那一套。经多方物色，最终确定基于&lt;code>Pocket API&lt;/code>+&lt;code>Gatsby&lt;/code>来构建这样一个自己的「网络日志」。&lt;/p>
&lt;blockquote>
&lt;p>You are what you read.&lt;/p>
&lt;/blockquote>
&lt;h2 id="简谈-jamstack">
简谈 JAMStack
&lt;a href="#%e7%ae%80%e8%b0%88-jamstack" class="h-anchor" aria-hidden="true">#&lt;/a>
&lt;/h2>
&lt;blockquote>
&lt;p>JAMStack 即基于客户端 &lt;strong>J&lt;/strong>avaScript，可重用 &lt;strong>A&lt;/strong>PI 和预先构建 &lt;strong>M&lt;/strong>arkup 的现代 Web 开发架构。当我们谈论“堆栈”时，我们不再谈论操作系统，特定 Web JAMStack 与特定技术无关。这是一种构建网站和应用程序的新方法，可提供更好的性能，更高的安全性，更低的扩展成本以及更好的开发人员体验。&lt;/p>
&lt;/blockquote>
&lt;p>JAMStack 是一种新颖的网站架构，与传统的服务端渲染和近些年国内流行的前后端分离等架构不同的是，他的网页是静态的，可以托管在 CDN 上，内容是动态的，可以方便地进行修改。&lt;/p>
&lt;p>&lt;strong>JAMStack 几个显著的优势&lt;/strong>：&lt;/p>
&lt;ul>
&lt;li>页面为静态，TTFT（TimeToFirstByte）的时间可以降到非常低&lt;/li>
&lt;li>页面为静态，服务器遭受的安全风险要低得多&lt;/li>
&lt;li>不同于客户端渲染，JAMStack 对 SEO 会非常友好&lt;/li>
&lt;li>不同于传统纯静态网站，内容可以方便地动态更新&lt;/li>
&lt;/ul>
&lt;h2 id="为什么选择-gatsby">
为什么选择 Gatsby
&lt;a href="#%e4%b8%ba%e4%bb%80%e4%b9%88%e9%80%89%e6%8b%a9-gatsby" class="h-anchor" aria-hidden="true">#&lt;/a>
&lt;/h2>
&lt;p>作为一个网站生成器 Site Generator，Gastby 的入门门槛其实是较高的，相对于 Hexo、Hugo 那种简简单单配置下就是一个站点，Gatsby 的难度要更高，因为其灵活度更大，所有的配置、页面都是 Javascript 来配置的，当然你也可以使用 Typescript。其基于 React，生态丰富且灵活度高，天生&lt;code>GarphQL&lt;/code>是选择它的主要原因。&lt;/p>
&lt;h2 id="网站架构及效果">
网站架构及效果
&lt;a href="#%e7%bd%91%e7%ab%99%e6%9e%b6%e6%9e%84%e5%8f%8a%e6%95%88%e6%9e%9c" class="h-anchor" aria-hidden="true">#&lt;/a>
&lt;/h2>
&lt;p>流程：&lt;/p>
&lt;ol>
&lt;li>我在其他地方看到不错的文章，将其收藏到 Pocket&lt;/li>
&lt;li>定时任务，从&lt;code>Pocket API&lt;/code>获取文章数据，交给 Gatsby 生成站点&lt;/li>
&lt;li>自动部署，将生成的静态文件部署到 CDN&lt;/li>
&lt;li>&lt;a href="https://reading.colinx.one">reading.colinx.one&lt;/a>站点主页就会出现我收藏的文章啦&lt;/li>
&lt;/ol>
&lt;p>这其中，Gastby 充当的是&lt;strong>Site Generator&lt;/strong>的角色，而数据来源为我的&lt;code>Pocket API&lt;/code>，也就是我把 Pocket 作为&lt;strong>Headless CMS&lt;/strong>来管理我的数据，可以方便地进行更新和管理。&lt;/p>
&lt;h2 id="总结">
总结
&lt;a href="#%e6%80%bb%e7%bb%93" class="h-anchor" aria-hidden="true">#&lt;/a>
&lt;/h2>
&lt;p>项目已经开源，地址在&lt;a href="https://github.com/Colin-XKL/Colinx-Reading">https://github.com/Colin-XKL/Colinx-Reading.git&lt;/a>。你也可以去申请自己的 Pocket API 然后部署你自己的站点。&lt;/p>
&lt;p>初始尝试 JAMStack，感觉对于博客、文档这类的站点会非常友好，国外比较火的像 Shopify 这种的无头电商也不错，国内的碍于国情应该不大可能了。&lt;/p>
&lt;h2 id="链接">
链接
&lt;a href="#%e9%93%be%e6%8e%a5" class="h-anchor" aria-hidden="true">#&lt;/a>
&lt;/h2>
&lt;ul>
&lt;li>Welcome to the Gatsby Way of Building | Gatsby
&lt;a href="https://www.gatsbyjs.com/docs/">https://www.gatsbyjs.com/docs/&lt;/a>&lt;/li>
&lt;li>For fast and secure sites | Jamstack
&lt;a href="https://jamstack.org/">https://jamstack.org/&lt;/a>&lt;/li>
&lt;/ul></description></item></channel></rss>