Vibe Coding：AI 全栈开发产品是“气氛组”还是“真香”？
53:25 Share

大家好欢迎收听一定海课我是 Sato 我是依夏我是龟龟最近大家时间线上出现次数最多的词汇我估计就是 webcoding 了我们国内把这个东西翻译叫氛围编程我们很多人估计都不太知道这个名词是怎么来的为此我也特意追根溯源了一下我发现最早提出 webcoding 这个概念的其实

其实是安德烈卡帕斯他是前特斯拉的 AI 总监然后也是 OpenAI 的创始成员同时安德烈还是一个 YouTuber 他的 AI 教学视频我建议每个同学反复观摩学习大家可以去 YouTube 上面搜索一下承远了安德烈他有一天在 X 上发帖说他说他发现了一种新的编程方式他把这种编程方式叫做 Vibe Coding 他是怎么编呢他说他通过 Super Whisper 跟

跟 Cursor Composer 他说他连键盘都不用打代码就写完了如果遇到报错的话就把错误复制粘贴过去通常都能解决他说这个东西不像是真的在编程你只需要看看结果然后说出需求跑一下

有问题了再复制这些然后它大体就能跑了对然后安德烈他发完这个帖子之后立刻就引起了很大的反响就带火了这个叫 webcoding 的这个概念我昨天刚去看了一下他这个帖子他这个帖子现在已经被浏览了 500 万次了现在距离安德烈提出这个概念已经过去四个月了对那现在 webcoding 究竟能做到什么程度

是不是像很多人说的说这个 webcoding 只能做项目的前端然后可维护性比较糟糕那我们今天就跟大家来好好聊一聊 webcoding 这件事那我们这期也不是瞎聊我们自己也用 webcoding 的方式做了一个产品要不然一笑先给大家分享一下成果吧就是我们在往期的节目里面也一直在说我们自己的 Podwise 的背后我们还有一块内容是做给 Podcaster 的

就是为 creator 为创作者去做了一个分层播客的修路次的这样的一个自动化的工作流但是一直也没有把这个东西给产品化掉那刚好最近 webcoding 很火了然后我自己个人也是对 Cursor 充值了

挺长的时间了但是一直也没有去发挥 Cursor 真正的一个价值因为一直都是在使用 Type 这个可能是用的人最多的不全我就想着说能不能用 Cursor 这个工具

去把我们自己做播客的修路词的自动化的工作流给它产品化掉因为我们一直说着要把它产品化但是一直也没有抽出时间去做所以说最后就在 Cursor 的基础上完全 webcoding 了一个产品叫 Customize 在讨论 webcoding 开始之前我们还是先去介绍一下 Customize 的

做了一些什么样的东西这样其实可以更好的去理解 web coding 它真正的一个能力在哪个地方可以做到一些什么样的事情对 Customize 它的核心能力反正就是叫 Worker 的音频文件根据这个音频文件就可以去自动生成各种

符合自媒体的一些推广的内容比如说播客的 show notes 的整个介绍 Podcaster 可能还需要去发公众号因为一个小时的播客可能就是上万字的长文去写公众号这个压力比你录播客的压力还大所以说我们能够自动根据播客的逐字杆帮你生成一篇很流畅的

公众号的长文的这样的一个文章对然后小红书我们可以去帮你制作小红书的这样的一些卡片的笔记之类的对也可以去发推特给你生成一些推特的 slide 的这样的一个推文的一个格式也比较符合推特的那种

一些雕雕吧但如果你也喜欢去做一些什么视频播客的话那可以帮你去制作一些字幕什么 SRT 的格式 VTT 的格式的字幕都可以给你生成也自带让 Customize 可以帮你通过 coding 的方式就生成代码的方式去给你做一个 webpage 也帮你把 webpage 给拖管掉可以直接在互联网上可以访问的这样一个 webpage 这些几乎就是我们通过 webcoding

通过 AI 的方式去完成的整个 Customize 的一个核心的功能的一个范围吧

对 上来我们还没怎么聊呢先打了个广告啊我再接着打一下我们 Customize 的访问地址是 customize.aiCustomize 这个很好记啊因为我们之前的产品叫 PodwisePodcast 嘛然后我们这个产品给播客的主理人做的所以叫 CustomizeCustomize.ai 广告的欧度到此为止了但是大家想听的还没说我先替大家问一下就是你们现在 Customize

所有的代码都是 webcoding 出来的吗对这个问题其实问得挺多的因为我们刚把 castwise 至少对外公开过后公开的时候其实我们也是强调这个产品它的背后可能都是全 AI 写的其实也有不少人会

自己这个事情觉得说你们肯定自己手工也调过很多很多从 UI 到后台很多东西可能用 Cursor 反正先写个 demo 或者写个大概然后自己再精心打磨打磨就变成今天的产品了反正有不少人认为这应该是正确的操作的方式认为我们应该是这样的其实

其实这里我也有必要确实给大家去解释一下我们做的一个范围哪些是 webcoding 实现的哪些是人做的对吧至少从今天这个产品单独只看这个产品它从前段到后台前段就是界面后台的话可能就是一些 API 逻辑之类的对吧访问数据库或者调一些三方的 API

从前端到后台这些都是全 webcoding 的全都是用 coder 做的包括从文案到文档也是 coder 做的

比如说有一些文档在工作台界面里面的时候在某些地方我会给它提供一个 help 的一个 guide 帮助手册对那这个帮助手册它其实不是我写的是因为我把功能开发完那个后 AI 帮我写了这样的一个开发手册其实我觉得它写的比我要写的好对做了整个产品的工作台过后其实我们可能要去做一个宣传用的 landing page 所以说从 landing page 到工作台其实也是

全 Costal 写的因为 Landing Page 反正是大家见的第一眼很多人都觉得说 Landing Page AI 做的还挺漂亮的

包括从 SuperPay 到 Stripe 的支付这个东西其实关心的人蛮多的因为上个周我们到另外一个活动的场子里面里面也有一些嘉宾在分享用 AI 去 coding 出来了一个小产品这个东西就有很多在场的参加的人都觉得说哎

你虽然是做了这个功能但是真正你要产品化的话其实你有很大一部分是用户管理用户的登录还有怎么去收钱的问题这一部分感觉还是挺难的用 AI 去写对尤其是很多人对这一部分是觉得说觉得是挺难的我刚开始觉得也挺难但实际上这一部分用 Costal 也是能够很顺利的去完成的其他的就是什么从三方 API 的调用到数据库的访问这些都能

都是用 Costal 做整个编码的实现这些东西这些我觉得以我自己来感受 Customize 的话我觉得没有什么地方是需要手工去写的当然 Customize 有一个非常核心的点就是我们要把音频给它解析成文字因为这个核心引擎它是我们在 Podwise 里面都已经沉淀好了这样的一个 infra 对

这其实是一个对我们来说是一个 AI 的 infra 的一个沉淀我们上次也讲了这是我们的一个资产这件事情它不在 Customize 的整个 webcoding 的范围内它其实是已经存在很久很久了我们只需要把它当成 API 的能力来雕用就好了所以说 Customize 它本身 webcoding 的只是整个产品化的部分

但是一个产品其实最关键的大家都说就是要有个 logo 一个好的 logo 你的产品就已经成功一半了当然这个是一个夸张的说法其实我们自己也用 GBT4O 其实出来过后它的画图能力其实很强很强我们自己现在它也免费给大家去使用每天可以免费使用很多次我自己也用 GBT4O 去尝试画一下 logo

但可能是我们自己对 GPT-4 的一些使用或者说理解还不是很到位一直画不出那种感觉它其实像 logo 这种图形的东西更强调的是你自己的那种感觉画不出那种想要的感觉所以最后我就

直接用 Cursor 去写 SVG 因为其实 SVG 它本身的背后是代码所以说用 Cursor 去写这种 SVG 的代码就非常的顺利成章了你就脑子里还是想着说我 Logger 长一个什么样子是要方形要圆形里面想要一个什么抽象的元素对对对还是用这种方式去告诉 Cursor 然后最后

就帮你画出一个能找到那种感觉的一个图形的一个 SVG 的一个 logo 对所以说整个下来全部在 Cursor 上完成下来就非常非常的顺利成长对我听你这个感觉你看你图标都是用 Cursor 写的 SVG 的代码产品的设计 landing page 的设计包含编码的前后端实现对除了我们以前 Podwise 语音转文字的部分可能是用的以前的对吧然后其他的感觉

听起来你这个覆盖很全面就是能干的不能干的都干了对吧搞图标本来感觉它是不能干的结果你用 Cursor 写 SVG 也给干了对因为我们自己都是后端程序员出身嘛大家都在传说 Web Coding 对于前端相关的部分特别在行甚至它能包办一部分设计就比如说像刚才一笑也提到说 Landing Page 对吧别人看到说这个东西还挺好的对那一笑能不能跟我介绍一下就是从你的经验上面来讲的话做前端部分的话你觉得效果怎么样

我个人的经验是主要都在后端并且还偏特别后的那种因为我自己其实做 Web 开发都做得挺少的哪怕是 Web 开发的后端部分

对我做的也挺少的因为我更偏 infra 的那种经验为主吧但前端也不是说一窍不通的那种只是说没有正儿八经的那种做过一个正经的产品的开发在我的印象里面我仅有的前端的开发的经历应该就是还在那种 bootstrap 的那个年代对我印象中我对前端的框架

有印象的就是什么 booststripe 了对像在这次我们去做 classifies 里面涉及到一些东西比如现在的一些 saaS 服务搭下一些主流的框架和平台比如像什么 superbase 还有支付的 stripeTarwin 的 CSS 对吧去做一些效果之类的那包括这次我们用 nextjs 对吧这个因为我们在 podwise 里面也用了所有的这些框架为主的这些 saaS 平台其实对

对我来说以前都是没有碰过的当然我知道他是干什么但只是说我从来都没有实践过这些东西那回过来你问我在前端的效果做得怎么样那我肯定是觉得说他真的挺擅长的我觉得在 AI 界今天有这样的一句话就是今天所有的人都会觉得说 AI 在你不擅长的领域你会觉得他非常的擅长太厉害了太强了你下来帮我做出来一个这种玩意儿

但是在我自己的专业擅长的领域我觉得说 AI 就是一坨屎它也只能做成这个样子大家有没有发现这个规律这个规律你可以觉得说这是 AI 的问题可能 AI 在我不懂的领域可能 AI 在我不懂的领域

因为我无法去分辨他的专业性的情况下,他可能远远超出了我的期望,但是可能碰上我的专业过后,我一检验发现他确实差点儿一失,但是也有可能是我人的问题,对,我们不能完全的去开放自己的心态,不能去归零,会觉得说我还是不太愿意去放手我自己擅长的东西嘛,对吧,因为人其实都有这样的一个人性的问题,对对,所以我觉得两方面解释都是合理的,

又取决于每个人自己愿意怎么去看待这件事了对对对之前有一个那个高晓松做了访谈节目小说嘛然后很多人就在底下评论说感觉高晓松这个哥们好屌啊感觉什么都懂直到他讲到了你懂的领域对对对跟这个感觉一样没错没错嗯

对就是这种感觉对对对这儿闲扯一句的话就是我觉得说今天我们正确的去对待 AI 的态度可能还是当然我们肯定是要充分的保持一个开放的心态对去接受一些新鲜的这样的一些一些变化这些一些新的东西对吧

但同时也还是要持续地去精进自己的专业对不能说你就忘了专业就完全丢了专业对在开放心态的情况下也要还是要去精进自己的专业然后两个结合起来可能才能够做得更好吧对这是我自己觉得说我们应该有这样的一个态度好了我们再继续回到这个

AI 对前端的因为我觉得他很擅长就是因为我无法去检验他对我只能根据最终结果去检验他对从这个角度来去讲我作为一个前端的 sensor 对

那我怎么会去使用 Costal 去完成前端开发这件事我自己的经验来说的话其实我一刚开始去做 Customize 没有想着把它做成一个完整的产品把它放出来我刚开始只是说想把我每天

要做的工作做一个网页对我刚开始只是说想做一个网页能够让我不再去手工去处理了对用命令行的方式去处理对有个网页让我点一点就好了刚开始冲上去第一把做的就是做一个上传页面就把首页直接做成的就是一个上传页面哎呀能够直接上传音频然后在后台就默默地帮我处理完那个后把结果给我我就可以复制去每周去发我们这个播客节目了对

对我只是想做这样的一件事所以这就导致了一个很大的问题是什么问题就是我在刚开始做这个项目前其实我对这个前段页面

它应该有几个页面应该有哪些页面这些页面的跳转的逻辑应该是怎么样没有一个整体的规划也就是说我在第一步其实没有做产品设计对冲上来就先做了一个内外而做了一个上传的页面所以这就会导致其实后面里会有很多很多的问题对我觉得这个经验其实是值得大家去接见的那回到我用 Costro 怎么去做一个页面那其实今天很简单我也只是告诉 Costro 说哎

我需要做一个音频的一个上传页面这个上传页面可能它的背景是什么什么样的颜色是什么什么样的风格把主色调辅色调这些告诉他然后我需要能够从本地上传音频文件能够使用一个 URL 的方式告诉他他就帮我咔吱咔吱的大家用过的都知道就帮你写了一个还差不多的接下来就是我会和他进行几轮对话然后让他去

调整这里面的一些细节风格最后做出我想要的样子基本上就是这样都可以做到一个页面当然页面里面这个地方又叫什么 API 我也会告诉他不要给他一个文档链接之类的几乎我觉得今天的准度是挺高的但是涉及到 Cursor 做前端页面我觉得其实主要有两种情况以我自己的实际来说一种的话就是我自己的脑子里其实已经有了一个我大概想要的那个页面的样子那

那还有一种其实是我对这种页面的设计完全没想法至少此时此刻可能我们不觉得说我们想要一个什么样的逻辑一个交互一个视觉使自己比较满意的情况下就是这两种可能都有那你其实脑子里大概有一个什么想要的这个我觉得很简单那你就把你想要的这个样子通过语言把它描述清楚但我觉得这个地方可能对很多人挑战挺大的因为你要能把你脑子里想要的那个视觉的样子

用语言的方式讲清楚而不是图形的方式讲清楚其实本身还挺有挑战的我觉得很多人可能在这一步会被卡得挺长因为我发现我在描述我想要的那个样子的时候其实我的打字的内容量已经很多了已经不少了这个一定是这个样子的这一步我觉得很多人都被卡在这个地方因为很多人和我交流其实我就发现他们原来想要的只是说

是不是有个什么技能能够让我说一句话告诉 Costar 他啪的一下就出来一个非常好看的一个页面很多人的理解其实是停留在这个地方但是我想说的是没有这种捷径就是你要告诉他你想要的那个样子是什么样啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪�

第一个 agent 就是一个 VS agent 能够帮我打字对吧还有一个 agent 就是今天模型其实推的时间挺长的还有一个 agent 是能够帮我去找 movie agent 就是看电影的 agent 还能够帮我刷剧一边 cursor 编程一边刷剧对吧能够帮我推荐最好是还能帮我整一个 coffee agent 能够帮我每天点咖啡对吧

对我觉得 webcoding 的配套的三个 agent 应该是这个样子的其实我开这个玩笑其实想说的就是 webcoding 没有大家想象的每个环节都是那么美好这里面有很多体力劳动在里面对但是另外一种我其实想更强调就是那种你脑子里面没有想法或者说你自己对你当前脑子里设想的这个页面比如这个 list 也好你觉得不太满意的情况下那就完全没想法的我觉得这种交给 AI 真的很好

至少或者说你对自己不满意对那你这个时候就是去告诉人家我想要的是一种什么样的感觉但是我无法去精准去描述它是什么样子对我只告诉一种氛围一种感觉对比如我想要一种很温馨的样子对吧或者是想要一种很酷的样子或者说很时尚的很科技范儿的这些其实都是感觉对但是什么是科技范儿没有人说得出来对吧

你就不断地去强调这种感觉氛围然后这个时候让它去发挥你会发现确实有时候会得到一些惊喜我觉得这个是真的很棒的我也经常觉得说它会超越我自己的一些设想对

或者说有时候一些页面我自己觉得说第一版做完那个后当我回头去看的时候觉得挺死板的反正差点灵性了回来是怎么样的我会直接告诉他我的这种感觉我说这个页面反正我看上去挺死板差点我想要的感觉我和他的对话其实很悬的就是那种他没有一些具体的东西这个时候我就说你站在你的角度你作为一个设计师你帮我

去把它重够优化一下你可以按照你自己的想法去随意发挥就是这样往往会给我带来很大的惊喜的一些东西然后基于那些东西其实往往我可以再把它微调成

一个不错的样子我觉得这一点是值得在做前端的时候大家可以去试的所以说到最后其实我觉得做前端就是我们不去看前端的架构我们只谈就是把页面做出来能正确 work 好看对吧我觉得这个更重要我们就谈这件事的话那我觉得可能最重要的真的还是审美和品味因为我们一直其实在强调

品味这个东西其实也不只有我们在强调因为最近聊 webcoding 的我看海内外的其实很多大佬

聊到 AI coding 的时候最终都会回到所谓的品味这个问题上面来你脑子里面想要的东西是什么样子你可能就只能做出什么样子对前段来说就随便只是敢说一句话说我这个页面帮我做一个表单这个表单有几个输入项有一个按钮你只是通过这种方式和他交流那你最后得到的就是一个很普通的一个页面但是我相信这个普通其实它也挺规整的了

也已经我相信超越了绝大多数后端程序员自己去做的那个页面对就是我们以前做不得 stripe 的那种效果可能就是肯定是能达到那种效果的但是如果你要想那个页面真的很 fashion 很有一些独特性的那些东西那些东西就是取决于你个人的一个审美和品味了看你自己想要一个什么样的效果对比如说我自己啊

我自己去做 Customize 的事比如以 Landing Page 为例我自己脑子里面其实一直有一个我自己的一个审美的点在那儿因为我觉得首先我喜欢的是它足够干净足够扁平如果有这样的一个基调的话我就会去去掉

那些所有元素的边框阴影用的特别少因为我不喜欢大量的阴影让它显得很脏的样子我又不想它产品看上去很实版就是比一个页面很实版的话那我觉得说可能加上一些大圆角和圆形这两种元素是可以没有那么实版的因为 AI 给的所有的组件不管是一个卡片也好一个 button 也好它给的这个圆角默认的圆角都是一个小圆角对

那如果你自己想要追求的是一种大圆角或者之类的话那你可能就是特意需要去让 AI 帮你走这样的风格去微调对我想讲这个东西就是你自己去做这些页面的时候其实你自己脑子里面已经有了自己的一个审美的

一个品位的一个基准我觉得这个基准是比较重要的但这个基准并不是说适合所有的产品对吧比如说你自己去做的是一个 B 端的产品是一个严肃场景的那你可能这种大圆角圆形它其实不是很合适的严肃的场景里面可能就是要

规规整整的该是框的是框很清晰所以说有边框就挺好但是可能这些世界端娱乐场景它就可能就不是这样子那你可以去做得很活泼或者说怎么样配色也可以更大胆之类的对对对

所以说还是要根据场景来选择可能一味的乱去释放自己的品位我觉得这个东西可能也是不太对的最后我觉得说回到文案和文档包括 Landing Page 其实 Landing Page 本身是一个文案的事情你要怎么去组织你的

文案对吧你的产品里面可能也有很多的文案我们以前是把这部分交给 PD 是产品经理的事情但我觉得说今天有 AI 过后其实也不是说这部分要完全依赖产品经理对吧作为开发你把你这个功能都已经介绍给 AI 了对其实这个时候我写文案不是说把我的文案已经写好了直接告诉 AI 说

你这儿帮我翻译成英文我不是这样去做的我其实只是给他介绍了一下我这是一个什么样的功能这个功能用户会怎么去用它我告诉他你要先理解我的场景我的用户是如何去使用它然后你再根据你的理解帮我去写一段文案帮我写一个文档

就相对来说你不是我的翻译这个很重要对我觉得这一点是很重要的对我不会告诉你这是一个确认按钮你就帮我翻译成确认那不是这样的我只是给你介绍这个产品功能的逻辑流程它的使用场景等等那些相关的相对来说我是一个主管对吧你是一个干活的人但是你要理解我的

画的意思过后你再自己把它做得更优秀的我是用这种方式去生成我所有的文案这些包括文档 landing page 你看 landing page 里面从 hello section 然后到后面的各种 section 一二三每一部分它的文案是怎么样的其实它都是

基于我现在的这个产品的功能然后我再介绍这个产品的核心功能一而算是怎么怎么样的那你基于这些帮我去写一份设计一份 Landing Page 的整个 flow 出来所以我觉得这个东西是比完成功能那部分让我觉得更有意思的一个地方所在

最后再聊一下刚才 Settle 不是重点提到了设计这件事情吗我是觉得说 Cloudy 的设计能力是强于其他的所有模型的

包括吉米莱普罗尔 2.5 就所谓的这种设计能力更多的是偏视觉它能够把你那个视觉效果给你做好要色彩 Cloudy 明显在色彩的运用上它可以更大胆一点那像吉米莱普罗尔可能会和我们自己去做一个页面一样配色上做不出那种很大胆的配色因为那种高饱和度的色彩我们都知道其实要把它做好其实很难

更难驾驭色彩我们黑白灰是最好驾驭的

所以说 Cloudy 在这方面其实相对来说会出众一点它在很多时候会给你一些大胆的配色给你大面积的用一个饱和度很高的颜色也不会显得很 node 这种东西所以我是觉得说 Cloudy 的整体设计能力会有那种挺惊艳的时刻的大家可以去做一些尝试这一部分当然在设计这部分因为我自己也不懂我只知道我想要什么样子但是如何去设计其实我也不懂对

我只是知道自己经常可能需要一些什么样的配色需要一些什么样的效果我觉得说这个地方让 AI 帮你做就是全靠你的想象力了因为我自己刚才也说了我们用 GPT-4O 去做 logo 没有做成功但是就我在一个微信群里看到别人用 GPT-4O 去画一个 logo 的东西

然后我一看他写的那一段话那确实表达的就是他的审美和想象力什么巨幅的大字体标题的字体和下面的字体要选择什么不一样的字体两种字体之间要产生一种什么冲突感之类的全都是这种语言对吧这些语言其实就是那个人的他的想象力和品味然后他做出来的那个东西那个 logo 的那就比我做得要好很多很多了对

就是这些感受吧 对啊

问一个点你刚才讲说打字打的东西要很多很多有没有一种可能是说我们从 Pinterest 找一个你想要的效果或者说就是去直接去抄别人比如说 Manus 我觉得它的设计效果很好我直接截张屏然后截完之后丢给 Cursor 让他写这样可以吗对我觉得这是一个很好的点因为我自己也用了很多这种方式我刚开始去做 Landing Page 的时候我做了一个 3D 的效果一个轮转然后你们两个都觉得说这个效果有点奇怪

其实我自己也不知道他奇怪在哪对就这种感觉他其实是感觉不出来的我也感觉不出来他在哪他反正可能就是有点什么不和谐因为每个人一看就觉得因为我自己不知道他奇怪在哪我说我干脆换一种效果吧然后我其实都想象了现在的这种

一张一张的屏幕从后到前的 3D 排列的这种方式因为我以前看到过这个东西这个设计然后我就到 Pinterest 上去搜了一下这种多图排列的 3D 效果结果就搜出了这种叠层的排列一张叠一张一张叠一张的 3D 的效果但是这个东西你让我去做我怎么做我根本做不出来我自己

其实这个东西要描述也很难因为语言描述这个东西也找不出很精准的语言去表达这件事所以说我就直接把 Pinterest 那个图给他截图复制过来发给他让他好好先去看一看这个图我说你先好好地看一看这张图看了过后你再给我分析一下这个图是一个什么样的 3D 结构他自己理解完了最后我再让他去实现

实现出来就差不多当然这上面还是做了很多的微调比如说不断地去调它的 XY 轴的一些倾斜角度之类的最终才达到了现在的这个效果虽然它还可能不太完美这个事情我想说的是你一定可以去做截图这件事

其实截图这件事不光是这种做风格上的截图平时我在做出来一个页面的时候它可能有点乱某个地方两个按键挨到一起了或者叠到一起了错位了之类的我可能也会截一张图就像我们人一样截一张图我会用个红框给它圈一下我们不是经常发给开发这个地方不对对吧我也是呀把它发给 Cosr 说你看我那个红框圈起来的地方

然后他一看这个地方好像不太对然后他就把你跟这个人赶你会发现这个过程和我们以前当主管当 team leader 的时候是吧验收产品是一样的过程

其实有挺多这种的那其实还有一种这种参考的方式就除了去 Pinterest 的找图以外比如说我去做 Customize 的时候这种黑色主题的基调我说你帮我去参考 linear 的风格对所以现在那个代码里面其实有挺多 linear 的诸事的对他觉得是对

对他在深层的都说这儿是 Linux 的什么东西这儿是 Linux 的什么东西对对对我觉得这个就是当你喜欢某一个软件的时候比如还有什么 Typeform 因为 Typeform 也是我脑子里一直觉得说设计做得挺好的当你去告诉 AI 什么 Typeform 还有什么 Linux 这样的一些著名的产品的事

他其实是知道了今天对所以说当他知道这些著名产品的时候其实也可以大胆的让他去做一些参考性的一些设计这是非常方便的一件事对我感觉你这个用法已经跟平时大团队的时候你觉得有什么设计问题然后你把这个事交给设计师然后你说设计师你帮我看一下现在 linear 是这个风格你帮我过来抄一下对就是这种感觉对

对然后找到了你那个部门里边的一个前端的实习生小兄弟说哎这里没对齐啊你帮我对齐一下对吧然后这个 landing page 长这样你先帮我看一下别人的 landing page 这个是转化率比较高的 landing page 你帮我转一下对吧人家是 linear 你帮我改成 castwise 对吧就这种感觉对吧对对对就我去做就是完全就是这样的

我觉得挺好你就找了一个给自己招聘了一个员工不止一个招聘了 N 个员工对这 20 块钱花的挺值的一个月对 龟龟有没有什么前端方面 webcoding 的一些经验等等之类的可以来分享一下我最近也差不多用纯 webcoding 的方式做了个功能就是 Portwise 刚上的这个 chat with episode 那就可以跟那个 episode 本身去聊天

然后它也不光是前端反正就是前后端全搞了吧那因为我自己其实以前是不太 vibe 的就是我不知道大家是不是这样对自己擅长的领域还是会倾向于自己去做本身 Portwise 刚开始做的时候其实也没有 vibe coding 嘛对吧没事自己做对所以我以前更多用的 cursor 就是它的这个 super type 啊我觉得这个 super type 还是挺懂我的反正它就一对 type 就还能帮我做很多事儿

我觉得在之前我是觉得够用了但是我觉得怎么说你还是要尝试一下这个 Web 到底能做到什么程度可能就是因为我不太能接受说我自己都不知道说你这个代码是做了什么东西它就能 work 的这种感觉

所以我在用 web 的时候我不喜欢就是让他说我给你一个功能我把这个功能完全描述好你把这个功能给我做出来我不喜欢这种方式我就喜欢说让这个 agent 去一步一步的来我会告诉他说你先把这个接口实现给做了然后再把这个 SDK 的封装给做了然后再把这个前后端接起来会让一步一步来

那这一步一步来我觉得有几个好处啊一个是说反正从我自己的体感来讲你一步一步来你自己的 Prompt 可以写得很随意你不需要特别强的 Prompt 的技巧当然一方面呢你本身大模型能力越来越强了嘛那另外一方面其实像 Cursor 这样的包装好的产品它本身其实就已经内置了很强大的这个 Prompt 它可能

对吧几千字的破龙破的它其实都已经内置在里面所以其实你就把你要做的事情讲清楚就好了然后另外一个好处就是说一步一步来我自己附和的过来我能够看明白他这一步做了什么就是你如果一次给我丢十几个文件我自己看都看不过来

这样的话就是我觉得它产出质量其实还挺好的虽然它每一次的产出第一次产出它都达不到我的要求因为毕竟就这方面我自己懂嘛所以我看完之后我就觉得它达不到我的要求但是基本上还大差不差

然后呢有一个问题就是其实刚刚一笑也讲到了就是如果你不管他的话他出的这个样子他其实不好看很死板一眼就是毛坯的非常的明显然后后来也是一笑说你直接给他找个设计图参考我就去 Drabble 上面的去搜一个比如说我去搜一个什么 AI chart design 的这种

我自己看得过眼了我就给他贴上去贴上去之后我跟他说你看这个图里面的这个部分就比如说他这个输入框的部分我觉得不错你帮我抄一下他就会去给你搞出来就还原的还不错然后这个时候如果你自己有这个相关的这领域的能力那你自己去改一改其实是非常快的但是

你如果说我完全自己去做的话因为你本身就是没有太想好这个设计要怎么做之类的你自己慢慢调的话其实起来就是这个打基础的动作就会比较慢但是你让他去帮你把这个基础弄好之后自己调下就很快他给我的整体的感觉就是很像一个听话的并且能力还不错的实习生

对对就是你让他干啥就干啥然后产出质量呢有时候还会超出这个实习生这个层级的这个期望效率更是比一个实习生要高出百倍不止产出的很快但是呢之所以他还是个实习生是因为他仍然需要你的关注和指导你需要去传授自己的经验然后传递你的理解和意图然后你传授经验的他也吸收的很快就是比如说你发现他这个地方做的不对你给他写个 rules

他下次就不会再犯了就确实挺爽的你知道吧对但是我感觉你们两个在用 Cursor 写前端的时候还是有挺大不一样的我的感觉是龟龟在用 Cursor 的时候他把 Cursor 当成一个 P5 的实际上刚毕业但是一笑因为一笑对于前端这块的话他不是特别懂所以他把设计也好前端也好都当 P6

对吧他给他更大的自由权你这块的话是你小心翼翼你每一块可能都要写个步骤 step by step 告诉他一二三就是有点像带一个刚毕业的一个实习生对吧然后告诉他说这一步下一步下一步一步一步带出来一笑是你来了是吧这里有一个 linear 你给我帮我抄一下你给我抄一下

对吧我觉得这个还是挺不一样的我觉得这个跟刚才讲的这个懂跟不懂还是有点关系的对吧比如说你找到一个很不懂的一个东西的话你肯定把它当成一个至少是一个半专家甚至专家来用的对吧没错你懂的一个情况下你肯定就会觉得说这地方反正我懂你按我的写我也不希望你按别的方式去写

你按我的要求去写对吧因为我们自己其实三个人都是后端出身嘛对然后一笑尤其是在后端在 infra 里面然后做过很多尤其我们自己在做后端的时候你对于架构啊扩展设计啊等等这些东西其实要求蛮高的嘛对那刚才龟龟也聊了说在懂前端的情况下它是当实习生来用的那在你懂后端的情况下你在后端的这个部分你觉得 webcoding 的表现是怎么样的是不是你其实也是把人家当实习生在用的对

对说到前端其实我也是有这种感觉因为刚才赛特的总结对因为前端反正不懂不是我写出来是交付给我的交付给我的对交付给我的功能只要是正确的对吧你的样式符合我的审美的要求我觉得就可以了我也没有什么其他的追求对吧

因为前端里面大多数的代码不就是 HTML 相关的一些 CSS 看一看不懂又臭又长对吧这些东西我也不会去看它对吧对所以说对这些要求都不是很高但是但实际上其实前端确实我觉得说在你懂的情况下其实它还是有很多和后端一样的刚才我们也提到了比如像 VICT 组件化的架构设计这些东西不用心的设计这其实和后端是一模一样的我觉得

前段也不完全说就是这种你就放手让他自己随便瞎搞我自己其实也有这样的一个体感的过程就是我在做 castwise 其实它有两个 table 也其实是一模一样的它只是要谈一个不同的弹窗当然那个弹窗的样式其实它本身是同一个组件也应该是一模一样的但是结果做出来两个弹窗它那个遮挡的后面背景的区域的面积都

不一样了一个遮挡的区域要更大一个只遮挡了一小部分那你死活 AI 怎么都看不出来他觉得他是加的对的不就是在那个区域的在那个容器上面又加了一个弹窗吗就是反反复复反反复其实搞了好久那个 AI 他也觉得说他好像没有错他自己到后面都觉得说我写的代码好像是对的没有什么问题他当时你截图给我看到这个效果好像确实不对他自己都会说这个有点奇怪了哈哈哈哈

所以最终其实我让他好好地去比较一下这两个 type 的前段的一个代码的设计究竟有什么不一样的自己好好先去梳理一下代码梳理完了然后他对比一下他这两个 type 确实在实现上不太一样他们的叠加的一些层级导致 DOM 的结构一个多了一层中间有冗余层之类的因为写了很多的冗余代码进去对导致你最后再去添加弹窗的添加的 DOM 结构的所在的层级都不一样了最后弹出来的效果就

其实它是可以被删掉的其实前端我想说的是前端其实它和后端一样的你那个页面的组织架构它其实也是有一个组织架构设计的它也有一个父子关系这样的一个东西哪个是全局哪个是局部其实这和我们去写后端的代码哪些作为一些定义一些内亚对象这些它其实本质上它们怎么交互

逻辑其实是一样的所以说并不是说前端比后端就不需要架构设计其实回来继续聊后端这一部分但是 Customize 它的后端其实更多的也是集成 API

和一些 CRUD 数据库的操作包括我们去使用 ServerBaseStrip 这些其实都是集成一些外部的 API 这些 API 相对来说可能比我们普通的调一个 HTTP 的 API 稍微复杂一点它是一个解决方案对吧有登录它是一个完整的解决方案可能涉及到前端和后端要配合协同之类的 Boss Strip 也是一样的但是我觉得在现在的

NexJS 这样的一个非常流行的框架上去实现一个后端的功能这个准确度也是非常非常的高我觉得和前端给你出一个页面来说也是差不多的当然还是那句话后端的逻辑我觉得要想准确度高不要吝啬你的打字和前端要把那个效果做到你最满意的那个最终的那个状态其实是一样的

但是后端我觉得简单的是啥呢就是因为我们懂我们去写那些业务逻辑流程其实写起来会更容易你想去描述一个前端页面长什么样子这件事通过语言通过文字其实还挺麻烦的就不通过画图的方式对它是一个更麻烦的事情所以说对我来说我觉得说后端

我去帮他把业务流程写清楚逻辑写清楚过后让他去实现一个 API 这件事其实是更简单的往往当他写了一个 API 的完整的功能过后那个 API 可能也涉及到数据库的访问还涉及到其他 API 的访问其实它本质上是有好几个逻辑联络的情况下可能我最多只需要追加一两轮对话它也能完成功能

和正确性所以这是我的一个感受吧我觉得这种外部我们说的是外部后端没有谈一些很 infra 的一些一些开发对那我的一个感受是 AI 做后端让我觉得说感受非常和前端不一样的是在心理压力不太

不太一样因为你后端去要去操作数据库把真相改查的时候还要做付款 JSJF 的逻辑的时候这个时候其实做后端的时候心理压力会大一点总会怀疑他操作的数据库是不是对的就是这件事你心里一定会就是有这个嘀咕在对吧你会犯嘀咕觉得说

我是该不该相信你的操作是对的对会不会给我表全删了是吧对的付款也是一样的对吧那这个就更严重对吧会不会给用户多扣一些钱或者给用户多充一些纸所以这件事情我觉得说心理压力是交给反而还挺大的对但是我所以说在这些逻辑上面我觉得我自己还是要去很详细的去留意这个核心逻辑了对

但我相信今天所有的人要把一个产品做一个实际的产品的时候应该在这些部分可能都是要去重点去还是要去留意自己的代码

那关于后端的话其实这儿我觉得说简单的给大家总结一些 key points 吧对吧一些关键的点可以大家在实际的使用中可以做一些参考的因为刚才贵贵都有分享到他在做一个功能的时候他会人为的去把它拆成很多个小的 step 然后自己人工再去操作慢慢去执行我自己刚开始也是这样但是约写到后面就偷懒了偷懒了过后我觉得是一个大的功能

我也想直接就扔给 AI 直接去做了对不对所以针对一些很大的功能点的时候比如说举个例子在 Customize 里面一个比较大的功能点我能够从播客直接给他生成一个网页生成一个网页过后这个网页的代码要能够被托管然后被用户直接通过互联网进行分享访问

那这其实是一个比较完整的流程那在我的这个产品里面它也属于一个还比较大的 feature 那我会让他怎么去做这件事不可能一刚开始就把这个大的功能告诉我让 AI 给我出一版详细的设计对我想做一个生成网页然后他要能够分享到互联网

生成一个唯一的 UIL 给用户去访问我就告诉他我要做这样的一个功能那你就先帮我做一个大的设计方案然后他就吭哧吭哧的觉得说这个功能应该怎么怎么去做最后你生成的代码可能传到数据库里面在 Linux 介面是怎么给你生成一个路由一个公开的路由怎么就可以访问了

但是其实我是知道我一看这个方案我就不满意了我就觉得说我说我这个 HTML 文件可能会很大以后全部塞到数据库里面这可能不是我想要的方案并且这个可能会涉及到很多的流量的问题我说这一部分我希望 HTML 代码需要放在比如说 Cloudflare RR 里面我只需要给它提醒到这儿我需要架一个对象存储去帮我专门去存这些东西借助 Cloudflare 去做这样的 webpage 的公开托管的方案

他只要在我的提款上然后就可以再给我出一版详细的设计方案这个步骤第一步做什么第二步做 Cloudflare 上要做什么样的配置设计他就会也会写出来第二版方案我觉得说就挺满意的了那这个时候我才会告诉他你开始去写你的代码一步一步的写吧对你只需要专注做这个功能不要去改其他代码就好了

这样其实往往最后做出来的整个功能我觉得就差不多了最后可能再做一点微调解决一点小的罢就比较 OK 了对所以这是我觉得说做一个大的功能我们可以用精度更高的方式对第二个 key point 的话我觉得说一定要小心你去用 Cursor 的时候因为我们在不去约束那个技术站的情况下你说要去装一个东西它可能给你装的 SDK 的版本可能就会很旧了因为它也不知道可能是哪搞的对

或者说给你推荐了一个不主流的版本它上面可能带有很多的 bug 我是遇到了 SuperBase 它一刚开始上来过装了 SuperBase 的 SDK 就是装了一个被 SuperBase 废弃的一个版本然后有很多的 bug 我觉得这一个点是要特别特别的留意的地方所以这是涉及到技术战的约束我觉得一定要约束它你希望的技术战是怎么怎么样的对你最好要知道好

第三个要留意的点是就是像 Costal AI 这种它其实很容易写出很多冗余的代码都比较严重的都可能会影响你的性能比如说它做用户验证可能在 Midware 里面做了一次用户验证其实又在 Midware 代理的后端的 API 里面又去做了一次重复的用户的是否登录这样的一个用户的验证我觉得这种两次验证你本来就是没必要的我们都知道你这种验证相关的代码大家做 Web 开发的可能都是放到一个类似于

Bitware 这样的一个中间层里面去做统一验证对吧然后再把用户的信息通过 Hedra 之类的传递给后端的 API 如果后端需要的话对大家可能都会这样去做所以说像这些地方就你不去 review 代码的话你是不会发现的关键的问题其实在这儿就是你自己要不要去 review 代码的问题对啊

下一个 key point 的话我觉得也是一样的还是那个 Cursor 它其实对后端来说能写出能 work 的代码都是没有问题的其实很多时候还是因为项目写的代码越来越多了它往往就会出现很多冗余的这样一些逻辑比如在实现这个 API 的时候它给用了一套技术方案结果在实现下一个 API 的时候又给换了一套技术方案的实现我们本来有一些公共的部分但是它可能完全都是重新启动新的方案来重新实现我觉得这些都是一些

很常见的一些问题我觉得更重要的就是客户认识他也是会偷懒的比如我们在解决 bug 的时候可能他经常采用的方案是 workaround 的方式觉得说我在这儿给你打个什么补丁给他绕一下应该就可以了他就他不太会试图去找根因你知道吗就是这件事情我觉得也是特别的就是你要解决 bug 你以为你是正确的但是他其实只是绕过了所以这个东西我觉得也是需要留意的一个点对

所以说我一般来说每次让它解决 bug 的话一定要让它去找出根因这件事如果找不出根因你就不要去修改代码对好了这样的话会好很多很多反正这是我的一个感受吧那其实做 web 应用它的前后端如果来比较的话追求就是把前端的页面做得很好视觉交互都做得很好的话那我个人真的就是那个体感我觉得说做前端比后端还是要更复杂一些

因为后端的话我觉得说逻辑其实很清晰只要梳理好了过后一步一步的执行可以非常快的就完成了但是前端你要把那个页面给它弄到一个非常满意的状态你可能需要做很多轮的对话或者说要调很久很久我觉得是相对说要更麻烦一些对吧对那这儿我其实总结一下我觉得 AI 用来完全做后端自己反正先得知的

怎么做这件事你如果连比如就像我刚才举的我去做 webpage 的托管这件事如果你连 Cloudflare 有 R2 这样的产品都不知道连 Cloudflare 是做什么的都不知道那你怎么去做这件事对吧你可能得先知道这些东西有这样的一些技术方案和架构设计可以帮助你去完成静态页面的托管这样的事情对你得先知道然后你才能让 AI

帮你做得更好对我觉得最差哪怕你自己不知道那你最差至少要能判断对吧判断 AI 的方案是否 OK 对吧那你说我的 web 页面全都 HTML 都这么大甚至有的几百 K 对吧万一大的商造你说你全都给我塞到数据库里面那你自己心里可能也会想一想这个东西是不是靠谱对吧

对你自己肯定还是得要有一定的判断能力那总结起来就是 AI 去做后端你也不能完全去当一个甩手掌柜对还是要结合你的专业的知识吧刚刚一笑说这个

AI 愿意偷懒啊特别喜欢用 walkaround 的这个我觉得我在想一个很有意思的事情是不是因为人也是这样的你知道吧所以他本身被训练的这个基础就是这样的大家遇到问题的时候先想的是我能不能瞎搞一下就把它绕过去就算了对对对所以其实我觉得就是反正前后端都一样就是还是有必要去去搞清楚 AI 到底就做了些什么事我发现就是现在这个 cursor 我现在用的是 Cloud4 嘛

我不知道是不是 Cloud4 自己的性格还是客车改过他的性格我现在每次让 Cloud4 去做点什么事他跟着跟着做完了之后都会来一句完美

就先自划自为一下完美然后给你列一堆说我现在改完之后它这个有什么什么好处什么架构更清晰了什么处理了什么边界条件其实每次都是不完美你千万别信他特别爱跟你说这个完美然后你去看一看各种地方都有问题其实像之前不是就有发生过的吗就是说有一个产品就是 Vibe 出来的那个和支付对接的这个代码

他就完全依赖前端传餐然后后端不教验就出现说用户可以通过改前端参数的方式去花最便宜的钱但是去订购最贵的那档的 plan 对他就把那个传到后端那个 plan 价格改一下或者把 plan 那个资料改一下后端是不教验的你可能你不去管他的话你 web 完了自己一测对吧一冒烟发现功能没问题但是你实际上根本不知道说他那些奇奇怪怪的边界的地方是不是藏着一堆问题

所以还是不能完全信任他然后其实包括开发效率也是一样的刚刚一下讲到说那前端可能搞起来更麻烦对吧你去调一些样式或者说去做一些交互的这个微调的时候你反复对话

其实是非常麻烦的事情而且讲也讲不清楚你可能如果你自己有专业知识的话你自己改一下要快得多得多对还是选择性的去使用吧我觉得不能完全相信它对我觉得规规则其实提了一个开发当中特别是前后端配合开发当中一个很重要的一个东西就是安全性这个问题对这个东西我觉得因为刚才我在 key points 里面

我自己觉得说需要注意的一些 key points 里面其实没有提到这个点但是我在实际里面确实觉得说安全性非常非常的重要

这里我也补充一下我自己会刻意去做的一些事情我觉得说大家去写一个方案的时候一定要把安全性这件事情让 AI 去做一遍就是让他去检查这个方案里面是否有安全性的问题这些工作我现在的一个感觉是啥呢比如重构代码以及安全性检查

这些东西其实 AI 它今天都有能力去做这件事,但是当你让它去设计一个完整的解决方案的时候,它很容易漏掉这一块,不是它不能做,是它会漏掉,它可能会遗忘掉,就像我们去找一个经验没有那么足的一个员工是一样的道理,它可能把它的核心功能做完就开跑了,但是它忽略掉了安全性,但是当你提醒它说你要注意安全性的时候,但是它去梳理它一遍,它也能梳理得出来,这里好像确实不太对,应该这样完善一下,对,

所以我想说的一个点就是今天你和 AI 去工作你还是要把自己作为一个资深的专家然后你要去提醒他要注意安全性注意代码的架构设计注意不要写容易代码这些就是要让他去注意这件事对 龟龟刚才提到的产品说透过前端改参数用最便宜的可以买最贵的我就在想说这是不是他的一种营销策略

也可以是透过把最便宜的那档的价格设置完之后能够覆盖自己的成本告诉大家说可以把最便宜的那档改成最贵的做不准这个漏洞都是他自己爆出来的没事自导自演

对时间也不早了我们已经浅聊了一个小时了对我们今天是聊了用 webcoding 做我们自己的产品叫 Castwise 在做 web 的这个过程里边我们分享了一些前后端的一些经验我觉得如果大家还有 web 的体感的话欢迎大家在评论区下方给我们留言讨论下期我们再跟大家聊一聊 webcoding 产品的可维护性大团队能不能配合然后以及有没有一些什么特殊的使用技巧等等之类的对

欢迎大家订阅硬地海课可以最快时间的收到节目的推送如果你想了解更多关于 webcoding 的深度内容跟我们探讨 CastWise webcoding 的深度细节也欢迎扫描 show notes 二维码加入我们的知识星球和微信群跟往期嘉宾一起商量好 那我们本期节目就先到这里吧大家再见拜拜再见拜拜

以上就是我们本期播客的全部内容感谢大家收听也欢迎大家踊跃留言如果你喜欢我们欢迎点赞并分享给感兴趣的朋友如果你在用苹果播客收听也希望你花几秒钟给我们一个好评这会让更多的人了解到我们要是能再点击一下订阅那就再好不过了我们下周见