看看普通人到底都在vibe coding啥！？第一期 这期开始做一个新栏目：粉丝 Vibe Coding 作品大赏。 Case 1 视觉灵感采集：截取网页区域、自动提取风格提示词、历史记录和原图对应关系。 Case 2 英语复习工具：词汇自测、笔记保存、闪卡、听力填写、错题集训。 Case 3 HTML转 PPT Skill： HTML 页面转成可编辑 PPT”。 Case 4 冰块壁纸：按机型找苹果原生壁纸。 Case 5 慢燃线组团减肥：小组打卡、黄牌红牌、体重数据公开、表格导出。 感谢本期2群的粉丝投稿！！！！欢迎大家继续给我投稿呀！！@抖音科技 #vibecoding大赏 #ai新星计划 #抖音科技 #vibecoding #AI

小众又有趣的Web Coding大赏。从今天开始，我们会把粉丝群里给我们投稿的所有有意思的Web Coding案例，在视频里和大家分享。那第一个case，是来自我们粉丝二群的卷网直卷。大家现在看到的，就是卷哥做的浏览器插件。它的用法，我觉得最大的亮点就是可以复刻很多好看的网页。点击截取区域，我们直接把网页截下来，它就会自动根据网页内容的配色，提取对应的提示词，我直接把它当灵感收集器用。最近我们要做线下大课，我想做一些创意海报，就看了很多别人做的海报，每遇到我喜欢的类型，我就把它存下来，你看这里能看到过往的历史记录，所有我看中的海报都存在这里，旁边自动生成提示词。等我后面要用的时候，直接把提示词复制出来，就能生成我自己的图了。而且它设计得很友好，会把你当时截的图也保留下来，这样我就知道哪个提示词对应哪个作品，不会只存提示词找不到参考。所以如果你有设计或者UI的灵感收集需求，可以像我们一样用卷哥的这个工具收集灵感。 收集到的提示词要怎么用？你复制之后，可以找任意一个AI聊天软件，跟它说，要根据这个提示词的风格生成你需要的内容，让它帮你优化调整提示词，AI聊天软件就会把你的需求和这个提示词结合起来，你再把生成的新提示词拿去用就行。比如你要做Web Coding，就把提示词给对应的AI；你要生成图片，就给文生图的AI帮你做图就可以了。它的核心差异点，我和卷哥聊过，他本身是做设计的，所以这个工具里的提示词语义结构化做得很好，你把自己的需求和它生成的提示词发给AI，AI可以很好地完成嵌入和匹配，这是它的另一大优势。而且这个产品完全免费，你只需要自己配置对应的模型就可以。我会把今天所有产品的获取渠道打在屏幕上，大家可以直接使用。 我们的第二个case，来自华侨大学设计专业研一的阿瑜同学，也是我们粉丝群的老朋友。他做的这个case很简单，是一个帮自己复习英语考试的项目。因为他找不到完全适配自己考点的工具，就干脆自己整合所有考点做了一个专属工具。这个工具里覆盖了英语学习的全场景，阅读理解、单词、完形填空、听力这些模块都有。我们可以看一下，里面有很多巧思，比如词汇自测板块，你在选词填空的过程中，可以随时把自己不确定的生词添加进去。在整个学习过程里，你随时都可以给自己做笔记，这些笔记都会同步记录到你的学习记录里。所有你标记的生词，他还做了闪卡功能，你可以用闪卡复习：这个单词你记不记得？不记得就自动归入你的单词本，认识就可以进入下一个，完全是给自己定制的英语学习工具。比如你点对应按钮，它就可以播放听力，听完直接在页面上作答。还有错题本功能，你做错的题可以直接归入错题，错题积累到一定次数，就会自动进入错题集训板块。这个工具完全针对他自己的考试内容，他自己用代码写出来之后，已经分享给身边的同学用了。很多老玩家可能会觉得这个功能很简单，但它是真的在解决自己学习的核心问题，用来突击备考效果特别好。我觉得这是非常好的Web Coding思路：直接给自己造工具。如果你做Web Coding是为了赚钱，你会发现这条路非常难走，但如果你只是想做一些方便自己使用的小工具，过程会非常有意思。他目前只做了一批页面，后续可能会优化成完整的工程化工具。对，他现在自己一直在用，感兴趣的朋友，如果后续想把它做成更完善的系统，我们也很乐意帮你分享。好，这是第二个case。 第三个是一个技巧，教你怎么把好看的HTML转成可编辑的PPT格式。我之前用Zara打酷拉的那个case做了一个介绍我们课程的HTML页面，用这个技巧直接就转成了完全可编辑的PPT格式，里面所有的细节都可以修改调整。它解决了很多传统公司还在用PPT做汇报的场景需求，像我写完页面要给领导看，领导改完再发给他的领导，现在HTML的页面可以做得非常精美，但手动把内容搬到PPT里排版特别麻烦，用这个技巧就能解决很大的问题，排版这些都自动处理好了，你只需要改里面的文字就行。这个技巧还可以和之前卷哥的提示词工具搭配起来用，效果更好。这个工具也是开源的，我把它的开源仓库地址打在屏幕上，作者在小破站也有自己的频道，感兴趣的朋友可以去关注一下。 第四个case来自我们的粉丝“记忆小冰块”，他做了一款叫“冰块壁纸”的小程序。这个作者很有意思，他说自己特别喜欢苹果的原生壁纸，但找了一圈发现没有产品把所有不同型号的苹果原生壁纸都收集全，所以他就自己做了这个小程序，在这里你可以找到对应自己设备型号的所有原生壁纸。后续他还会加入其他系列的壁纸，整个产品的核心就是出于自己的爱好，做了一个个人壁纸收集器，完全免费，我自己现在用的就是他提供的原生壁纸。大家如果想找对应型号的苹果原生壁纸，可以去搜这个小程序，后续他还会更新很多新内容。 下一个case来自我们的毛同学，他做的产品叫“慢燃线”，也就是2% Two Percent慢燃线，氛围感特别强。它的理念是，每个月的目标只需要减掉体重的2%，慢慢减肥。但慢慢减肥很容易坚持不下去，市面上很多减肥工具都是做餐饮记录的，这个产品专门做体重记录，核心功能是组队打卡，做减肥小组。我跟你说，这个小组的压力特别大，特别适合我这种完全没有毅力坚持的人，我自己都建了一个小组，大家可以加入我们的小组一起减肥。它有明确的群规，有对应的底线，什么时候给黄牌，什么时候给红牌，里面支持请假，但请假次数超过上限你就会出局，变成旁听状态，不过旁听期间如果你持续坚持，后续还能回归。在里面你可以看到所有人的体重数据，所有内容都是完全公开的，你可以看到别人今天减了多少，完成率是多少。它还有非常好用的统计页面，可以一键导出所有数据表格，功能做得特别细，你可以把团队里所有人每天的体重数据全部导出来。这是目前我们分享的功能最完整的一个产品，它有完整的后端服务，部署了独立服务器，前后端分离，还和微信生态打通了。我看完之后觉得它特别适合健身教练用，健身教练可以把自己的所有会员都导入进来管理，随时看到所有人的变化，学员之间互相有竞争感，教练也可以督促大家，数据还能直接导出。这个是小程序，不是开源的，大家直接去微信小程序搜就能用，完全免费，大家可以在里面自己组队，功能特别多特别细，很有意思。后续可能还会加入AI分析之类的