mirror of
https://github.com/Colin-XKL/Colinx-Blog.git
synced 2026-01-11 02:01:29 +08:00
Compare commits
7 Commits
f718df5a11
...
text-lint
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
21e826e4db | ||
| 8e0922f86f | |||
| 8f0cb1cf28 | |||
|
|
03be85005c | ||
|
|
4373e3ed64 | ||
| 93f0c2110b | |||
| 9e72f30ff4 |
@@ -0,0 +1,128 @@
|
||||
---
|
||||
title: LLM Agent is All You Need - 当我用大模型助手来指导我完成 MVP 产品 - 「Colin's Weekend Project」
|
||||
date: 2025-09-14
|
||||
description: 我个人喜欢挑一个周末在一个很短很专注的时间内,捣鼓点小玩意。这个栏目用来记录我的这些 idea、作品、创作过程以及吐槽。今天来挑战一下,在大模型的指导下,完成一个最小可行产品 (MVP)
|
||||
categories:
|
||||
- Weekend Project
|
||||
tags:
|
||||
- 技术
|
||||
- JAMStack
|
||||
- LLM
|
||||
- AI
|
||||
---
|
||||
|
||||
> **「Colin's Weekend Project」**
|
||||
> 我个人喜欢挑一个周末在一个很短很专注的时间内,捣鼓点小玩意。这个栏目用来记录我的这些 idea、作品、创作过程以及吐槽
|
||||
|
||||
今天来挑战一下,在大模型的指导下,完成一个最小可行产品 (MVP)
|
||||
|
||||
|
||||
|
||||
## idea
|
||||
|
||||
如果单纯是开发一个完整的 web 程序 or 移动端程序,其实没啥意思。我之前已经搞过很多,更别提日常在公司里面就是在开发各种功能。今天我打算以一个非专业人士的视角,探究一下:
|
||||
|
||||
- 当下各种 AI 助手已经百花齐放,飞入寻常百姓家。但是当下的 AI 在真实世界的任务中,究竟能做到什么地步
|
||||
- 如果作为一名非专业人士,究竟能不能借助这些 AI 工具做出一个可用的产品
|
||||
- 如果真正要做一个面向 C 端的产品,把流程 Run 起来持续下去,需要考虑哪些因素
|
||||
|
||||
## 如果一切都从 LLM 开始...
|
||||
|
||||
我需要代入一个非专业开发人员的视角,来进行这次的项目。首先项目启动的第一个问题:在没有任何产品经理的知识,不懂得产品开发流程的小白的情况下,我需要如何开始?
|
||||
|
||||
在没有 LLM 以前,或许我需要先各种查阅资料学习,或者各种摇人让懂行的朋友进行指导。但是现在,一切都不一样了:随便一个 LLM 都可以帮我快速入门
|
||||
|
||||
一开始,我是打算接住 LLM 让我快速了解产品相关的知识。但是突然觉得,既然都用 AI 了,为什么还在遵循原有的路径,一步步自己学习、理解然后教 AI 做事呢?换个思路,我只要提供需求,AI 来拆解任务。
|
||||
|
||||
于是
|
||||

|
||||
|
||||

|
||||
|
||||

|
||||
|
||||
利用 AI 生成一套提示词,来指导我如果分析我的需求、拆解任务
|
||||
|
||||
不得不说,对于这些跨领域的知识,能有一个不厌其烦的 AI 助手来循序渐进地跟你交流、帮你分析,效果非常好。人类可能还真不好干这个活。
|
||||
|
||||
## 「AI 教我做产品」
|
||||
|
||||
经过跟这个「MVP 导师」的 LLM Agent 反复沟通,确定了产品的主要构想和核心事项。以下是摘录的一部分
|
||||
|
||||
```markdown
|
||||
#### MVP 概要(3 句话)
|
||||
|
||||
- **为谁**:20‑30 岁、周末感到无聊且有意愿尝试新事物的年轻人。
|
||||
- **解决什么痛点**:不清楚该尝试哪些活动、如何快速入门、活动是否适合自己、以及能获得什么收益。
|
||||
- **提供的核心功能**:活动列表页面 → 点击感兴趣的活动 → 展示入门门槛与材料推荐(入门材料按钮)并埋点上报。
|
||||
```
|
||||
|
||||
```markdown
|
||||
## MVP 核心功能:
|
||||
1. **活动列表**:集中展示多种可入门活动(绘画、球类、手工等)。
|
||||
2. **入门详情**:点击任意活动 → 展示入门门槛、必备材料、推荐教程链接。
|
||||
3. **埋点追踪**:记录“点击 → ≥1 min 外部阅读 → 回站”行为,用于验证假设。
|
||||
```
|
||||
|
||||
这里印象深刻的是,MVP 导师让我先确保用户痛点一定要是真实的,在初期没有论证的情况下,MVP 的意义就在于基于一个假设 (假设用户的痛点是 xxx), 我们要围绕这个痛点先开发出 1-2 个核心功能,然后通过用户数据分析,来验证我们关于用户痛点的假设是否成立。如果不成立说明是伪需求,也就没有继续投入的必要了。
|
||||
|
||||
这一点还是让我挺惊喜的,因为大部分人有个 idea 想做 xx 产品,大部分都是脑门一热,想要有 xxx 功能但是其实根本的需求并不是这个。花了很多精力搞出来的功能其实是伪需求。而 AI 导师专业水准还是挺在线的,能够在一开始就识别这个风险
|
||||
|
||||
## Vibe Coding
|
||||
|
||||
接下来就是要进入开发的部分了。我选择的 AI 代码工具是字节的 Trae 海外版,不用验证手机号而且可以使用 Google Gemini、OpenAI GPT-4o、Anthropic Claude 4 等高级模型。
|
||||
|
||||
首先让 AI 根据产品需求文档、拆解任务文档,确定了技术方案。不过这里我为了效率简化了下&注入了一些自己的私房调料,最终使用的方案为:
|
||||
|
||||
- astro + vue3 + tailwind css 来构建 web 站点
|
||||
- directus cms 作为后端,省去编写后端和对接数据库的麻烦
|
||||
- vercel 快速部署
|
||||
|
||||
这部分没啥好说的,简单列几个吐槽的点吧:
|
||||
|
||||
- astro 配置 tailwindcss, 换了一圈大模型没一个正确的。应该是跟近期大版本更新有关系。最后还是我手动跟着 astro 官方的文档搞定的
|
||||
- trae 高级模型试用额度很低,没写几个功能就超限了开始排队,动不动前面几百号人基本没法用
|
||||
- 现阶段 AI IDE 基本都是基于 vs code 改的。所以 vscode 的缺点也都一并继承了过来,很多语言的插件需要额外手动安装、各种变量跳转用不了、各种奇怪的波浪线报错又没法快速修正
|
||||
|
||||
最后简要看下最终的成果吧
|
||||
|
||||

|
||||
|
||||

|
||||
|
||||
后台数据:
|
||||

|
||||
|
||||
## 埋点上报与用户行为分析
|
||||
|
||||
之前做的都是玩具项目和公司内部平台,没怎么接触过 C 端用户行为分析。这块确实还是个挺陌生的领域。不过好在我们有万能的 AI. 在经过埋点需求分析、技术方案对比、任务拆解之后,最后采用了 Umami 平台来进行上报,并简单配置了下指标用于计算用户停留,辅助验证我们关于用户痛点的假设
|
||||
|
||||

|
||||
|
||||
跟 MVP 导师沟通的时候,确定了验证假设的方式为:衡量用户是否点击「查看详情」按钮
|
||||
|
||||
- 用户点击并在外部阅读 ≥ 1 分钟后回站
|
||||
- 成功阈值:≥ 25 % 的访问者完成“点击 → ≥ 1 min 回站
|
||||
|
||||
为了方便统计,借助 umaimi 的统计功能快速实现,我只需要统计有多少比例的用户至少点击了一次「了解详情」. 具体到代码实现上,就是在「点击详情」按钮添加一个上报,上报内容包括用户的 session id, 后面在 umaimi 统计一段时间内,按钮点击事件里面,有多少独立的 session id 处以总的 uv 就可以。
|
||||
|
||||

|
||||
|
||||
## 投放
|
||||
|
||||
众所周知,天朝桌面端 web 用户已经约等于 0 了,技术博客都很少人看,更别提这种泛娱乐向的内容。MVP 导师提供的方案,也是路线正确,但是 web 端用户数据反馈验证的路子基本没用。不过这个 web 页面我也不指望能成为流量主力,最多算个 wiki.
|
||||
|
||||
要想真的有人看,收获真实用户反馈,还是需要到各种新媒体平台去投放的。然后再收集数据进行分析,不过这个工作量就是另外一回事了。运营起来还是需要挺多时间精力的。
|
||||
|
||||
尝试做了几个图投放到小红书,放几个示例图
|
||||
|
||||

|
||||
|
||||
用的搞定设计的模版调整了下,插图是用 Gemini, 效果还可以,能很好地遵循用户指令,不过美学方面跟 MidJourney 那些还是差了一截,毕竟人家专攻的方向。提示词里面限制好风格的话出图效果还是可以的,这里后续如果有必要的话,其实也可以 AI 批量生产插图。
|
||||
|
||||
不过小红书账号冷启动,反响平平。这里后续有时间再研究吧
|
||||
|
||||
## The End
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
title: Search-as-a-RSS! 把任何搜索查询转换为 RSS! FeedCraft 新功能速递
|
||||
date: 2025-12-22
|
||||
description: 作为 RSS 5 年忠实用户,我非常享受 RSS 主动管理信息源给我带来的掌控感。但是传统 RSS 订阅方式只能基于站点或者频道,更多时候我其实是想关注某一个特定领域信息,使用方式局限性很大。其实最理想的方式是直接把搜索引擎的结果拿来作为信息源。在 FeedCraft 新版本中,我新增了一个 Search-as-a-RSS 的功能,用户只需要使用自然语言指定好要搜索什么,接下来就可以自动根据搜索结果生成一个 RSS 了。
|
||||
categories:
|
||||
- 技术
|
||||
- 指南
|
||||
tags:
|
||||
- 技术
|
||||
- LLM
|
||||
- AI
|
||||
---
|
||||
|
||||
## 前言
|
||||
|
||||
作为 RSS 5 年忠实用户,我非常享受 RSS 主动管理信息源给我带来的掌控感。但是传统 RSS 订阅方式只能基于站点或者频道,更多时候我其实是想关注某一个特定领域信息,比如 AI 领域世界模型有什么新的新闻,或者是想订阅一个特定的信息,比如我关注的 xxx 歌手有没有新的巡演规划。
|
||||
|
||||
这些需求通过传统 RSS 方式难以实现,你只能定向的订阅某个新闻站点,然后过滤一下关键词。使用方式局限性很大。其实最理想的方式是直接把搜索引擎的结果拿来作为信息源。问题主要是噪声太多:
|
||||
|
||||
- 搜索查询一般是按照关键词来的,不够灵活
|
||||
- 垃圾内容农场泛滥
|
||||
- 高质量的信息很多时候是多种语言的网页,直接阅读会很困难
|
||||
|
||||
好在我们有了 AI, 很多问题有了新的解决方法。在 FeedCraft 新版本中,我新增了一个 Search-as-a-RSS 的功能,用户只需要使用自然语言指定好要搜索什么,接下来就可以自动根据搜索结果生成一个 RSS 了。
|
||||
|
||||
接下来简要介绍一下流程:
|
||||
|
||||
## FeedCraft 如何通过搜索结果创建 RSS
|
||||
|
||||
FeedCraft 本身是一个一站式处理 RSS 的工具,这里的搜索需要依赖第三方服务。首发支持的搜索服务是 LiteLLM Proxy(一个 AI 服务的代理转发平台,开源可自部署,可以方便对接各种第三方搜索服务比如 Exa, Tavily, Plexirity, Perplexity, Brave 等等)
|
||||
|
||||
以 Tavily 为例,这个平台提供了每月 1000credits 的额度,可以执行上百次搜索,轻度使用绰绰有余了。前往官网注册个账号,生成一个 api key 即可。
|
||||
|
||||
> [Tavily](https://www.tavily.com/) 是一个专为人工智能代理(AI Agents)设计的搜索引擎,旨在优化 AI 在执行任务时的信息检索过程。它不同于传统的面向人类用户的搜索引擎(如 Google 或 Bing),而是专门为 AI 系统“理解”和“查找”所需信息而构建,强调高效、准确和上下文相关的搜索结果。
|
||||
|
||||

|
||||
|
||||
接下来到 LiteLLM 的后台,Tool - Search Tool 里面增加一个 search tool. 这里 search tool name 可以自定义,先记下来待会在 feed craft 的设置页面需要填入。
|
||||
|
||||

|
||||
在 LiteLLM 后台生成一个 API KEY, Key Name 可以随便写主要是备注。这个生成的 api key 可以用于请求 LLM, 也可以调用刚才配置的搜索工具。确认生成后,复制 api key.
|
||||
|
||||

|
||||
|
||||
在 FeedCraft 后台,设置里面配置搜索服务,这里 API URL 是你的 LiteLLM 服务加上`/search` 后缀。
|
||||
例如你的 LiteLLM 服务部署在 `https://my-litellm.example.com`, 那么这里就填写 `https://my-litellm.example.com/search` . 工具填写刚才在 LiteLLM 后台接入 Tavily 的时候填写的 search tool name
|
||||
|
||||

|
||||
|
||||
之后在「搜索转 RSS」页面,输入你想查询的东西即可。你可以直接用自然语言描述,比如「SpaceX 的最新新闻」. 之后点击下一步即可预览搜索结果。
|
||||
|
||||

|
||||
|
||||
你可以按需调整搜索语句。确认没问题一直下一步,可以保存为自定义的配方 (Custom Recipe) , 就可以生成一个唯一的 RSS 链接,在你喜欢的任意 RSS 阅读器里面查看啦
|
||||
|
||||

|
||||
|
||||
更进一步,你可以使用 FeedCraft 的各种 Craft 来做进一步的处理。比如获取全文,添加总结、翻译文章、以及调用 AI 使用自然语言对文章进行筛选等等
|
||||
|
||||

|
||||
|
||||
总体功能就是这样啦,欢迎试用 FeedCraft 和 Star 🌟! Have fun!
|
||||
|
||||
https://github.com/Colin-XKL/FeedCraft
|
||||
|
||||
|
||||
@@ -320,6 +320,19 @@ Status for the jail: sshd
|
||||
`- Banned IP list: 154.216.19.42
|
||||
```
|
||||
|
||||
### 2.7 Git 代理
|
||||
一般在 `.bashrc`/`.zshrc` 中定义 `HTTP_PROXY` / `HTTPS_PROXY` 可以应对大部分场景。但是对于使用 ssh 协议的 git 仓库 (通过 ssh 方式,相较于 https 的不用每次输用户名和密码。一般对只有克隆公共仓库的时候才会用 https, 其他时候对于自己的仓库我都是用 ssh), 并不会走 http 代理。
|
||||
|
||||
这里需要在 ssh config 中配置转发走代理才行。使用`nc`(macOS 等默认会预装) 搭配 socks 代理最方便
|
||||
|
||||
```ini
|
||||
Host github.com
|
||||
HostName github.com
|
||||
User git
|
||||
Port 22
|
||||
ProxyCommand nc -x 192.168.100.222:8085 %h %p
|
||||
```
|
||||
|
||||
|
||||
## 3 - 进阶内容
|
||||
|
||||
|
||||
@@ -38,15 +38,15 @@
|
||||
src="{{ "assets/prism.js" | absURL }}"></script>
|
||||
|
||||
<script defer onload="tocbot_init()"
|
||||
onerror="fallbackJSloader('https://cdn.staticfile.org/tocbot/4.9.1/tocbot.min.js','tocbot_init')"
|
||||
onerror="fallbackJSloader('https://s4.zstatic.net/ajax/libs/tocbot/4.9.1/tocbot.min.js','tocbot_init')"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
|
||||
<link rel="stylesheet"
|
||||
onerror="fallbackCSSloader('https://cdn.staticfile.org/tocbot/4.9.1/tocbot.css')"
|
||||
onerror="fallbackCSSloader('https://s4.zstatic.net/ajax/libs/tocbot/4.9.1/tocbot.css')"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
|
||||
<script defer onload="init_gitalk()"
|
||||
onerror="fallbackJSloader('https://cdn.staticfile.org/gitalk/1.7.2/gitalk.min.js','init_gitalk')"
|
||||
onerror="fallbackJSloader('https://s4.zstatic.net/ajax/libs/gitalk/1.7.2/gitalk.min.js','init_gitalk')"
|
||||
src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
|
||||
<link rel="stylesheet"
|
||||
onerror="fallbackCSSloader('https://cdn.staticfile.org/gitalk/1.7.2/gitalk.css')"
|
||||
onerror="fallbackCSSloader('https://s4.zstatic.net/ajax/libs/gitalk/1.7.2/gitalk.css')"
|
||||
href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
|
||||
<!-- no min css version fallback for gitalk css -->
|
||||
@@ -20,8 +20,8 @@ onerror="fallbackJSloader('https://cdn.staticaly.com/gh/panr/hugo-theme-hello-fr
|
||||
src="{{ "assets/main.js" | absURL }}"></script>
|
||||
|
||||
<script async onload="panguSpaing()"
|
||||
onerror="fallbackJSloader('https://cdn.staticfile.org/pangu/4.0.7/pangu.min.js','panguSpaing')"
|
||||
onerror="fallbackJSloader('https://s4.zstatic.net/ajax/libs/pangu/4.0.7/pangu.min.js','panguSpaing')"
|
||||
src="https://cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js"></script>
|
||||
<script async onload="initQuickLink()"
|
||||
onerror="fallbackJSloader('https://cdn.staticfile.org/quicklink/2.3.0/quicklink.umd.js','initQuickLink')"
|
||||
onerror="fallbackJSloader('https://s4.zstatic.net/ajax/libs/quicklink/2.3.0/quicklink.umd.js','initQuickLink')"
|
||||
src="https://cdn.jsdelivr.net/npm/quicklink@2/dist/quicklink.umd.js"></script>
|
||||
@@ -1,5 +1,3 @@
|
||||
<!-- <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>
|
||||
<text y=%22.9em%22 font-size=%2290%22>👋</text></svg>"> -->
|
||||
<link rel="icon" href="/favicon.png">
|
||||
<link rel="apple-touch-icon" href="/favicon.png">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user