实践 AI 编程丨黑客松进决赛丨约稿丨粥o丨新奇体验 - 筷筷月报#22

2025年10月9日 - 34 min read

月度复盘

1 实践 AI 编程

这两个月中强度使用了 Claude Code,期间也看了一些使用 Claude Code 的优秀实践文章来学习,已经完全习惯在终端中和 AI Agent 进行交互了😄。过去一年,我从使用 Github Copilot 做简单的代码补全,到使用 cursor 这类 AI IDE 做范围更大的事情,再到用 Claude Code 这类终端 Agent,这个过程,让我从古法手搓代码渐进式地转换到了 AI 辅助编程。总体来说,在使用 AI Agent 后,我的产出效率相比手搓高出很多,粗略预估能有 70% 代码由 AI 生成,效率提升 30% 左右吧。

我把 AI 编程的场景分为两类,一类是最近很火的 Vibe Coding,一类是 AI 结对编程。它们最主要的区别在于,Vibe Coding 只需关注最终呈现效果是否符合预期,而 AI 结对编程不仅关注效果,还需要对 AI 生成的代码负责,确保代码编排合理,不会引入 Bug 和技术债。

类型定义使用场景
Vibe Coding氛围编程,只关心最终实现效果,不关心具体代码实现。

举个例子:
1. 搭建一个语音识别功能,只要能够正确识别语音,就ok
2. 构建一个纯函数,只要同样的输入能给出符合预期的输出,就ok
1. 搭建原型、Demo
2. 一次性活动页、落地页搭建
3. 跨领域去做一些简单的事情
4. ……
AI 结对编程(或者叫 Vibe Engineering需要对 AI 生成的代码负责,关心具体的代码实现。1. 理解代码库,开源项目学习
2. 模版代码生成
3. 修复Bug
4. 模块重构
5. Figma 2 Code
6. 文档生成
7. ……

在使用 AI 协助编程的过程中,我有了一些新的思考:

AI时代拉高了人在不同领域的能力下限

假设A在不同领域内的专精程度如下柱状图所示,当 AI Agent 在该领域的能力大于A时,会拉高A的能力下限。

img_v3_02qr_b2bd0440-748c-48a1-8256-98aecba1768g.jpg

这说明什么?

现在一个人可以做的事情更广了,验证想法比以往更容易。例如PM可以自己开发一个APP、博客,前端可以快速搭建BFF层作为服务端。

同一领域不同能力水平的人,使用AI产生的效果亦有区别

img_v3_02qr_0bbf74cb-e142-44dd-9b5d-d0aae00df91g.jpg

这说明了什么?

同一领域下,想要最大化的发挥 AI 的能力,一方面需要在该领域专精,另一方面还要去学习 AI 相关的一些知识,去改变自己的使用习惯。高手+AI 会发挥更大的效果,例如在编程领域:

  • 需要懂代码、懂架构:知道实现需求的解决方式是什么,且知道如何控制AI去写出符合最佳实践的代码。设计模式、算法与数据结构的思想依然重要。
  • 需要会对复杂任务分解拆分,管控AI执行任务的过程。
  • 准确的上下文输入:能把想要 AI 实现的功能或者解决的问题描述清楚。
  • 代码和架构是 AI 友好的:详细的架构文档和代码风格文档可以让AI更好地理解项目,使用广泛采用的编程语言、框架和库也会提升AI生成效果。

AI 编程注意事项:

0 明确 AI 编程边界

要使用AI编程,得先知道什么是AI擅长的,什么是AI不擅长的。

AI擅长的地方:

  • 快速生成大量样板代码。例如样板组件、CRUD。
  • 自动化重复、枯燥的任务。
  • 尝试多种不同的实现方式。
  • 借助快速迭代,迅速验证想法。
  • 在需求清晰的前提下,快速交付功能。

AI不擅长的地方:

  • 代码审查:

AI在代码审查方面做的不太行,容易漏掉 corner case。

  • 不好的指令:

垃圾问题产生垃圾回答,好问题才能产生好回答。

  • 架构设计:

没有扎实的架构,软件很快就会充满技术债,导致维护迭代困难。当前AI并不擅长设计优秀架构。

  • 代码质量:

选择恰当的抽象层次、正确运用设计模式、保持代码的干净清晰,这些都是AI目前的短板。

  • 安全性:

经验不足的人搭配AI的组合更容易出现漏洞。

1 拆分任务、规划边界

在实现某个需求时,对任务进行拆分,规划TODOLIST,分步骤让AI依次实现。

2 上下文管理

给 AI 精准的上下文,思考你在做这个功能的时候需要哪些背景信息,将这些背景信息给到AI。

例如:

  • 直接需要Agent修改的文件
  • 强依赖文件
  • 接口文档
  • 指定使用某个库的某个功能
  • ……

3 使用记忆

使用记忆可以让Agent更好的理解项目背景,代码规范等信息。

Claude.md(赋予人格,添加项目架构总体信息等)

4 使用 AI 友好的框架和库

  • 选择被广泛采用的框架和库,能够获得更好的输出效果。
  • 把库的源码暴露给Agent,让Agent获得完整的上下文,有助于提升输出效果。例如前端组件库中的预制菜 shadcn。
  • 消耗更少的Token。例如 tailwind css。

5 善用 Git

使用 git 来检查和对比每次 Agent 输出的内容,或者验证输出的效果。在发现不对时可及时回滚。

6 集成 MCP 工具

用 MCP 工具来提供给 Agent 更好的上下文,从而提高输出的质量。

对于前端来说:

  • context7 获取最新的文档
  • Firecrawl 抓取网页内容、结构和截图提供给模型
  • shadcn 获取shadcn某个组件的源码
  • F2C类 设计稿转代码
  • ……

2 黑客松进入决赛12强

去年看到别人一起组队参与黑客松就觉得很向往,今年在同组校招朋友的组织下一起组队去黑客松玩也算是圆了我一个小目标🥺。队友都非常给力👍,我们最后进了决赛12强,拿了黑马奖:

img_v3_02qt_b1e15e35-f618-4de8-8bf8-ffdfe469830g.jpg

🎉解锁成就「第一次参加黑客松,进入决赛12强」

简单来说,我们做了一个 AI + 播客的产品「圆桌话廊」,我们和市场上同类型产品最大的不同之处在于:用户在听其感兴趣主题播客的同时也可以参与其中,引导话题走向,是一种圆桌讨论的形式。我负责产品前端 APP 的开发,使用了我不熟悉的技术栈 React Native,好在在 AI 时代,我可以很快的干中学,最后成功完成 Demo,可以在安卓上跑通~

img_v3_02qt_6d74c434-36a9-4e48-bf95-410197349a6g.jpgimg_v3_02qt_3c324598-96e1-44f7-a01d-6450e58af66g.jpgimg_v3_02qt_926cf10e-3474-49e5-9b20-ded55ed9256g.jpgimg_v3_02qt_407aec5f-8c25-4b62-918e-e12d7972cd3g.jpg

虽然是 Demo,整体页面和功能的完成度已经很不错了,能做到这样的效果 AI 功不可没。我想简单分享下我在开发 APP 的过程中结合 AI 的一些实践。

项目使用 Expo 框架——开发 RN 应用几乎绕不开的选择——进行开发。在项目前期搭建环境环节,我主要使用 ChatGPT 和官方文档来帮助我快速了解框架,快速搭建环境和跑通开发->调试->上线包的环节;在架构设计环节,我负责设计路由,ChatGPT 负责协助我调研路由库,最后选择了 expo-router,然后让 Github Copilot 根据我的设计来应用路由;

image.png

我们组有一位很牛的 PM 兼 UI,得益于此,在还原设计稿环节效率很高😇。我主要使用 Copilot 结合 F2C 的 MCP 快速搭建界面,大部分时候效果不错,我只需要在此基础上再指出不足让 Copilot 修复就好。

在搭好主要的框架后,我就全权交给 Coding Agent 去完成任务了,也就是从 AI 结对编程(或者说 Vibe Engineering)转换到了 Vibe Coding,这时我大部分时间在描述我对某功能的预期,然后让 Copilot 和 Claude Code 去实现,只要测试后符合预期我就认为该功能完成。

以上就是我在开发圆桌话廊时使用 AI 的一些实践,更具体的我放在了「实践 AI 编程」这一标题下,也许你已经看过了,里面有我对 AI 协助编程的思考,如果没看过那我可要生气了!

3 我最坚定的信念是什么,我需要什么才能改变我的想法?

“人生的意义在于体验”。我会觉得相比娶妻生子、买房买车这种世俗意义上的成功路径,我更倾向于体验更多有趣的事情,比如 coffee chat 和不同的人聊天、想要学习游泳、浮潜,之后还想去试试滑雪,去更多的地方旅游(主要是日本)。我正慢慢变得自爱(或者叫自私?),会优先考虑自己的需求,其次是他人。

什么才能改变我的想法?可能是随着我的年龄成长,来自社会对一个男人的期待越来越具象化成周围喋喋不休的人时,我可能会改变吧,也许更可能是无所谓的态度,我希望那时我已经有了稳定的内核和支持体系,让我能够更好的做自己。

4 第一次约稿

马上粥o又要到了,我想做飞出小人风格的阿米娅无料,于是在米画师找了擅长画色块且印大量无料不加钱的美术老师。第一次约稿比我预想的简单,一开始想要做成飞出小人风格,但和老师讨论后觉得那样太简陋了,于是决定按照老师自己的风格来画。我给了三种皮肤的阿米娅立绘和姿势参考,老师就可以画出草稿,我再对草稿做一些修改意见,改完没问题就可以美美等待老师交稿了🥰。

兔兔草稿

🎉解锁成就「第一次约稿」

由于我的拖延症,我在粥o的半个月前才开始约稿,然后我发现如果老师正常画的话完全来不及制作后续的无料😭,赶快找老师加钱加急画,好在老师非常给力五天就画好了🥺🥺!

制作后续的制品时又踩了一些坑,我定做了方卡和亚克力挂件:

方卡和亚克力挂件

珠光方卡背景是白色的,兔兔们也有大面积白色的色块导致肉眼看起来边界不是很清晰(特别是宇宙兔)😭;亚克力定做的太小了只有5cm,且厂家的工艺水平不行,遇到很多瑕疵亚克力,特别是宇宙兔穿孔那里有着明显的错切痕迹😡!

这次由于时间紧急无料都是滑铲出来的,来不及重新定做了,下次一定要早一个月去一些好评如潮的店铺定做🥺

5 叒去粥o

来北京后第三次去粥only,我感觉我已经轻车熟路了(?)上次偶然的机会让我知道还有「无料互换」这样的形式,这次试着做了无料交换条,有很多老师找我互换很开心😇

无料交换.png

🎉解锁成就「第一次做无料交换条」

之前去漫展总是会看到很多痛包,趁着这次去粥o,我打算也做一个痛包。为了有舟味,我想尝试搭配成机能风的感觉,同时我想痛阿米娅,于是把主题色定位了罗德岛蓝。搜了很多攻略并粗浅恶补了下机能圈的知识,最后成果😋:

阿米娅痛包

🎉解锁成就「第一次组痛包(其实也不是很痛?)」

因为不是很痛,以后背着上班也挺好🧐

搓无料真的太需要耐心了,并且家里椅子很逆天,无法支撑腰部,导致搓完后腰酸背痛躺在床上休息了好久才好一点😭,不过一想到可以去粥o购买喜欢的制品、互换无料、与coser集邮就感觉动力满满😇下面是一些搓无料和包装无料的过程记录:

img_v3_02qs_bf62acf1-a824-41ff-979f-cfe5afaf649g.jpgimg_v3_02qs_8deb8fc1-c4ac-4238-98d2-e34a3103b14g.jpg
img_v3_02qs_29d4628f-6e37-44f4-b0d4-45c702927dbg.jpgimg_v3_02qs_54a94d2e-ba9a-464c-8216-d1d84c2eae1g.jpg

和上一次一样,这次带着满满的无料去,载着满满的无料回。不同的是,我更加沉浸其中,感受热爱、感受笑容、感受感动、感受幸福。并且这次还和一位我关注很久喜欢很久的老师约换和扩列了🥺,希望后续可以成为朋友。最后放上结算图:

圆满结束结算图

6 新奇体验

我有一个想法:在年度总结时,把今年做过的各种「第一次」和「新奇体验」来个汇总,感觉会很有意思!

这两个月的新奇体验有:

  • 第一次和不认识的人合租两居室
  • 买了二手电动车,第一次有了自己的车
  • 因为银行卡限额导致房租付不出去😅
  • 和零度突破认识的朋友一起聚餐😄
  • 第一次参加黑客松,进入决赛12强
  • 第一次到公司发现忘带电脑
  • 第一次约稿
  • 第一次做无料交换条
  • 第一次组痛包(其实也不是很痛?)
  • 第一次被人约 coffee chat
  • 第一次和朋友们聚餐喝了点小酒,感觉喝完酒后头痛,身体发热,思维跳跃,睡不太着,下次不喝了😅😅
  • 第一次到科技园顶楼看日落
  • 某年某月某日和朋友吃完必胜客去看了罗小黑战记2,很爽😄

开源动态

1 Streamdown

react-markdown 的即插即用替代品,专为AI驱动的流式传输而设计。

它内置了对不完整 Markdown 解析的支持,这意味着即使 Markdown 正由AI模型生成,它也能进行渲染。它还具备诸如 URL 前缀限制等安全功能,以及针对流式环境的更优性能优化。

2 React 19.2

React 19.2 版本发布,本次更新引入了 <Activity />,它允许你隐藏和恢复其后代的用户界面及内部状态,类似于 Vue 中的 <KeepAlive> 组件。

还有 useEffectEvent 等新功能。

3 2025 年 JavaScript 现状调查现已开启

4 2025 年最受欢迎的前端框架

根据该网站的数据,全球前10名是:

image.png

中国前10名是:

image.png


工具推荐

1 Chrome DevTools MCP

谷歌浏览器官方出的MCP,可以给 Coding Agent 控制和检查谷歌浏览器。

特点:

  • 获取性能洞察:使用 Chrome DevTools 记录跟踪信息并提取可行的性能洞察。
  • 高级浏览器调试:分析网络请求、截取屏幕截图并查看浏览器控制台。
  • 可靠的自动化:使用 Puppeteer 在 Chrome 中自动执行操作,并自动等待操作结果。

视频

1 最讨厌写测试的程序员,为何拒绝TDD

但我感觉在 AI Coding 已成趋势的当下,TDD 或许变得重要起来了。

2 polebug的vlog

太好啦,又有 vlog 看了😇

vlog#98|断更了两个月,都发生了什么|更新桌搭|入职新公司之前的悠闲生活记录|在读《西西弗神话》|学习画画中

vlog|上班前早起一小时能有多快乐|在读《做难而正确的事》|保持记录与思考

vlog|我居然拍了 100 期 study vlog,以后也要好好加油!🎉

vlog|在泉州散步的快乐片段 🚶‍♀️|在老城区逛吃和海边发呆的两天

3 程序员都喜欢重构代码,但领导不喜欢【让编程再次伟大#45】

在工作中,所有行为都围绕着如何更好更高效的赚到钱,重构作为用短期时间换取长期收益的行为在这个环境不受待见,如果想要促成重构,需要和商业价值挂钩,但要挂钩不太可能。

不过随着技术债的积累,重构是有必要的,要尽可能找到可以挂钩的指标,让重构后的收益惠及更多人,给重构项目上价值。

4 尤雨溪 2025 年访谈:谷歌、Vue、Vite、Nuxt、Next、Vercel 与 VoidZero

5 曾经死过的互联网,能给我们什么启示【让编程再次伟大#46】


文章

1 虹线丨记录一下 AI 在医疗领域应用的实际体验

记录了作者对 AI + 医疗的思考:作为患者如何解读报告、初步诊断病情;作为医生如何获取患者更详细的背景信息,从而更好进行诊断。

2 深入思考主题化与颜色命名(英)

节选:

这些库和框架提供的调色板可以作为很好的起点,但我认为你几乎永远都不想使用它们。因为颜色能带来差异;差异能造就独特;独特能塑造个性。

即使我不告诉你,你可能也知道这是真的。

  • 使用 Bootstrap 的网站,看起来就像 Bootstrap 风格。
  • 使用 Tailwind 的网站,看起来就是 Tailwind 风格。
  • 使用 shadcn 的网站看起来也那样……

所以,如果你不想淹没在千篇一律的海洋中——和其他人看起来一样——那么创建自己的调色板是迈出的第一步。

3 Big O(英)

理解大O表示法的入门交互式教程。

4 谈谈 AI 编程工具的进化与 Vibe Coding

节选:

在短期内,Vibe Coding 会引入缺陷和安全漏洞,长期来看 Vibe Coding 会导致代码难以维护,技术债务堆积,整体系统的可理解性和稳定性大幅降低。

我看过最形象的一个解释是,让一个非程序员通过 Vibe Coding 来编写一个他们打算维护的大型项目,就相当于在没有先解释债务概念的情况下就给孩子一张信用卡

在构建新功能的时候,就犹如挥舞这张小小的塑料卡,想买什么就买什么,想要编写什么新功能都能很快实现。只有当你需要维护它时,它才会变成债务。

如果你尝试通过 Vibe Coding 去修复另一个 Vibe Coding 导致的问题,这就像用另一张信用卡偿还信用卡债务一样。

5 培养好品味

现在真正决定一个产品能否脱颖而出的,是它的品牌、设计、直观程度,以及整体使用体验。换句话说,就是产品是否有品味(Taste)。

6 浏览器中的液态玻璃:使用 CSS 和 SVG 实现折射效果(英)

只使用 CSS 和 SVG 文件模拟苹果的液态玻璃效果,还能学习到物理知识,并把知识转换为实际应用🐮

20250915113124.gif

7 你并不需要动画效果(英)

交互式地告诉大家如何进行动画设计以提升用户体验。

8 AI 辅助编程的质量,关键在于如何管理“工作单元”

将任务分解成“大小合适”的工作单元,并为每个单元提供恰到好处的细节,这或许是改善上下文窗口、进而提升生成代码正确性和质量的最强杠杆。

9 AI本该助力新人,为何反而让高手更强?

AI出问题的地方:

• 代码审查(Code review):

AI无法真正“理解”代码。审查时可能有些帮助,但一旦涉及边缘情况(edge cases)——而AI生成的代码通常有更多边缘情况——最终还是需要资深工程师出马。

• 不好的指令(Bad prompts):

能写出高质量提示词的人,必须是那些真正懂得自己要做什么的人。如果使用者缺乏深入理解,即使AI看起来产出还行,实际也只是给项目埋下了无数隐患。

• 架构设计(Architecture):

没有扎实的架构,软件很快就会失去价值。当前AI并不擅长设计优秀架构,虽然表面上看起来似乎可以,但实际上,这种复杂推理仍然依赖人类。许多以弱架构起步的项目,最终深陷技术债(technical debt)泥潭

• 代码质量(Code quality):

选择恰当的抽象层次、正确运用设计模式、保持代码的干净清晰,这些都是AI目前的短板。

• 安全性(Security):

新手搭配AI的组合更容易出现漏洞,就像盖一座房子忘了装门锁。虽说漏洞无处不在,但高级工程师至少能提高警觉和谨慎。

• 错误学习(Wrong learning):

新人如果不能正确判断AI产出的代码好坏,就会潜移默化地吸收错误知识。在公司里,这意味着制造的是损害而非价值。

以上这些问题,概括起来就是:AI暂时对高级工程师并没有威胁,甚至反而让他们更加强大。这里不是在批评新人,而是强调不应对他们抱有不切实际的期望,把他们扔到充满风险的环境中。

10 2025 年的 React 状态管理:你真正需要的是什么(英)

在技术选型时,不要无脑选择最热门的库,也许你甚至可能都不需要一个状态管理库。应该明确项目对状态管理的需求,然后找到最贴合你们项目的状态管理解决方案。

11 你的图片(可能)尺寸过大(英)

通过设置 <img> 标签中的 sizessrcset 属性来应用响应式图像以获得更好的用户体验。


播客

1 硬地骇客丨写 Vue 代码比尤雨溪还多的男人,四年两百万的商业化之路| 对谈 金州:Ant Design Vue 作者

Ant Design Vue,每周 NPM 下载量接近 14 万次的明星项目,金州是如何靠它开启自己的“硬地骇客”生涯的?在这次对话中,你将了解到:

  • 开源项目商业化的可行路径:卖模板、卖组件、广告赞助,哪种模式更适合你?
  • 如何平衡开源与盈利:如何在维护开源项目的同时,找到可持续的商业模式,实现技术理想与经济回报的双赢?
  • 独立开发者的生存之道:如何高效工作,平衡工作与生活,在享受自由的同时,持续创造价值?

2 硬地骇客丨量子位 「AI 100」 访谈:10 倍效率 AI 播客工具 Podwise

3 跨国串门儿计划丨产品愉悦感的秘密:谷歌、Spotify前产品负责人揭秘如何打造让用户上瘾的体验

4 Event Loop丨“理想主义,我还年轻”

本期采访了SkyWT,一起聊聊他的大学成长、个人博客创作、兴趣爱好和作为刚毕业的校招生踏入职场后的点滴感悟。

里面有关大学学习的对话我很有感触:如果不考虑考研的话,没有必要遵循学校的评价体系,尽可能的找到感兴趣的领域学习钻研,多接触该领域的人。


句子

1 每个阶段只专注做一件事

「总是有人问我:“为什么不两者兼顾?”,答案很简单:专注。一家初创公司想要成功,需要在每一个阶段做对一件事,而且只能做对一件事。

为了增加这样做的可能性,需要对其他所有事情说不。专注不仅仅是我们在做什么,还包括我们不做什么!这些不做什么的决定都是很难拒绝的。」

我发现专注的本质其实是“选择与放弃”,选择把精力放在某件事情上,以及对不重要的事情说不。

有的时候“拒绝”会更加困难,可能会处于患得患失的心理,担心自己拒绝掉那些更有潜力的机会。

「这种直接专注于目标的做法被称为“分阶段运营”。首先要决定专注于什么,这意味着首先要决定最重要事项。如果你不明白这一点,你就不能进入下一阶段。」

每一阶段,都只能有一个“最重要的目标”。如果试图“同时扩张、同时变现、同时探索新业务”,就等于没有目标。

——polebug23 读《做难而正确的事》的记录与思考

2 FIGMA 的产品理念与设计哲学

即使 AI 降低了软件构建的门槛,但真正打动人心的产品,仍依赖于有温度、有立场的设计

精致的工艺、独特的视角和对细节的执着,是产品脱颖而出的关键。

3

“我们越是允许男性和女性进入对方的领域,允许他们表现出通常被定义为‘男性化’或‘女性化’的言行,我们就越不会把刻板印象视为理所当然,并将重新定义对性别的理解。”

——《语言恶女》P199 邦妮 · 麦克尔希尼

4 用户是不一样的,他们不会以同样的方式使用产品

我们习惯以某种方式做事,但别人有他们自己的方式。没有对错之分,只是方式不同。当涉及其他用户时,面临的挑战是我们本能地将自己当成完美的例子,然而我们只是众多用户里的一个样本。对产品开发者来说,想出一种不同的做事方式几乎是不可能的。因此,了解不同类型的用户,捕捉他们的思维方式、尤其是了解首次使用用户和重复使用用户之间的巨大思维差异非常重要。

——《做难而正确的事》P190