目前前端 Vibe Coding两种主流方案
- -目前前端 Vibe Coding有两种主流方案：. 一种是通过专注于前端编写的AI来编写，此类选择有v0、same、bolt、21st等在线网站Agent. 一种是通过 Claude、Codex、Gemini 等 CLI 终端来编写. 第三种方案是通过 AIStuidio build 编写前端，完全免费.
目前前端 Vibe Coding两种主流方案
标签：
| 发表时间：2025-12-10 11:34 | 作者：
出处：https://x.com
目前前端 Vibe Coding有两种主流方案：
一种是通过专注于前端编写的AI来编写，此类选择有v0、same、bolt、21st等在线网站Agent。详细网址见评论区
一种是通过 Claude、Codex、Gemini 等 CLI 终端来编写
第三种方案是通过 AIStuidio build 编写前端，完全免费。 但通过这种方式编写的前端不好迭代。 我的使用场景为用AIStudio编写内容展示卡片。
1. 诸如v0、same、bolt此类AI，此处以每个月赠送5$额度的v0为例。 最佳使用方式为从主页面选择想要的前端模板，然后点击模板进入编辑模式，通过自然语言 Vibe Coding 进行修改。
此类方案存在的问题为价格昂贵并且与CLI相比，不易进行迭代。
所以最佳实践方式为从如上网站中寻找前端模板。 然后下载前端模板，使用 Gemini CLI 进行修改
2. 第二种方案是使用 Claude 、Gemini 、Cursor 等工具来编写前端。
这里目前的 T0 就是 Gemini ，白嫖方式为从 AIStudio 注册领取 300$ 赠金，然后 注册 API Key，导入 Gemini CLI，直接使用终端来写前端或者修改我们之前下载的模板
一种是通过专注于前端编写的AI来编写，此类选择有v0、same、bolt、21st等在线网站Agent。详细网址见评论区
一种是通过 Claude、Codex、Gemini 等 CLI 终端来编写
第三种方案是通过 AIStuidio build 编写前端，完全免费。 但通过这种方式编写的前端不好迭代。 我的使用场景为用AIStudio编写内容展示卡片。
1. 诸如v0、same、bolt此类AI，此处以每个月赠送5$额度的v0为例。 最佳使用方式为从主页面选择想要的前端模板，然后点击模板进入编辑模式，通过自然语言 Vibe Coding 进行修改。
此类方案存在的问题为价格昂贵并且与CLI相比，不易进行迭代。
所以最佳实践方式为从如上网站中寻找前端模板。 然后下载前端模板，使用 Gemini CLI 进行修改
2. 第二种方案是使用 Claude 、Gemini 、Cursor 等工具来编写前端。
这里目前的 T0 就是 Gemini ，白嫖方式为从 AIStudio 注册领取 300$ 赠金，然后 注册 API Key，导入 Gemini CLI，直接使用终端来写前端或者修改我们之前下载的模板
相关 [目前 前端 vibe] 推荐：
Beyond Vibe Coding - AI 辅助开发指南
- -Beyond Vibe Coding - AI 辅助开发指南. 的新书，目的是纠正当前流行的 “Vibe Coding” 误区，为构建生产级软件提供一套严谨的 AI 辅助工程学框架. 这本书我是在 Oreilly 在线阅读的，应该也能找到 PDF 版本. 核心论点：从“氛围编码”到“AI 辅助工程”
1.
ViBe 讓Android手機也有 iPhone iOS5 來電自定震動模式
- 雪 - 電腦玩物前一陣子的iOS 5系統更新，除了我在「iOS 5 更新之後，對我來說的10個最佳新功能與使用心得」裡提到的一些改變外，在iPhone上也新增了一個「自定震動模式」功能，可以為每個不同聯絡人自訂不同的來電震動感應，例如來自情人的電話是心跳般的震動，而來自公司的電話是急促的震動. 這樣的小功能，除了好玩之外，也可以增加接聽來電前的辨認速度（尤其針對重點來電），而像是不方便開啟手機鈴聲時就可以透過特殊震動來認出重要電話，對於聽力不好的朋友來說不同震動模式也有助於更快辨認來電.
大型项目前端架构浅谈（8000字原创）
- - 掘金架构update：2019.06.17更新2.4文章链接. 2.1、自建Gitlab. 2.3、自动编译发布Jenkins. 3.2、以应用为单位划分前端项目. 3.3、基础组件库的建设. 3.8、登录系统设计（单点登录）. 3.11、多端共用一套接口. 我在2年之前，写过一篇中小型项目的前端架构浅谈.
前端技术
- - CSDN博客综合推荐文章随着互联网产业的爆炸式增长，与之伴生的Web前端技术也在历经洗礼和蜕变. 尤其是近几年随着移动终端的发展，越来越多的人开始投身或转行至新领域，这更为当今的IT产业注入了新的活力. 尽管Web前端技术诞生至今时日并不长，但随着Web技术的逐渐深入，今后将会在以下几方面发力. JavaScript的兄弟们.
Web前端优化
- - JavaScript - Web前端 - ITeye博客优点：直接使用浏览器内存的缓存数据，减少网站后台压力，用户体验（速度）好. 缺点：对于时时变化的动态页面，这种情况就不能容忍了，因为每次访问的都是第一次访问的内容，这样即使所请求的页面已经变化了，用户也不可能知道，所以此场景必须要消除这种缓存的影响. 延迟加载，将资源延迟到需要的时候的加载，例如detail页面，相关产品推荐，当用户浏览更多的信息往下拉动滚动时，才进行加载，异步加载可以大幅减少对后端资源的使用，在需要的时候加载，是资源合理使用常用的方式，但是也带来一个问题，当往下拉才去加载，如果性能不够好，用户的体验其实是不好的，“菊花”转动的时间会比较长，同时异步加载对前端性能的作用也是非常明显的，渲染的节点数量大幅减少.
Web 前端测试
- - Web前端 - ITeye博客Web 网站测试流程和方法（转载）. 进行正式测试之前，应先确定如何开展测试，不可盲目的测试. 一般网站的测试，应按以下流程来进行：. 1）使用HTML Link Validator将网站中的错误链接找出来；. 2）测试的顺序为：自顶向下、从左到右；. 3）查看页面title是否正确. （不只首页，所有页面都要查看）；.
前端xss攻击
- - SegmentFault 最新的文章实习的时候在项目中有接触过关于xss攻击的内容，并且使用了项目组中推荐的一些常用的防xss攻击的方法对项目进行了防攻击的完善. 但一直没有时间深入了解这东西，在此，做一个简单的梳理. xss跨站脚本攻击(Cross Site Scripting)，是一种经常出现在web应用中的计算机安全漏洞，它指的是恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入的恶意html代码会被执行，从而达到恶意用户的特殊目的.
初识前端模板
- slackware - 百度泛用户体验“模板”这个词，可能很多人第一印象是后端的技术（Smarty，Velocity等），但本文要讲的却不是后端的概念，而是前端开发中所使用到的一种技术，也就是“前端模板”技术. 模板的工作原理可以简单地分成两个步骤：模板解析（翻译）和数据渲染. 这两个步骤可分别部署在前端或后端来执行. 如果都放在后端执行，则是像Smarty这样的后端模板，而如果都放在前端来执行，则是我们要探讨的前端模板.
前端的横向发展
- Oasis - 崔凯,前端开发今天的交流会上，提到了“横向发展”这个词，意指推荐大家学习与前端打交道的相关技术，如：php. 其实“前端”这个词，是2005年才逐渐在国内兴起的. 那之前，国内的网站，通常是TABLE+ASP搞定一切. 做这份工作的人，通称“程序员”. 那是个孤军奋战就能赢得天下的年代. 一个网站丢过来，一个人就全拿了：“写需求==>出设计稿==>做模板==>写程序==>运营.