Vibe Coding 初体验：当AI成为前端开发的“副驾驶”与其焦虑被AI取代，不如主动拥抱变化。文章分享了从零开发浏

最近AI的发展速度着实让人瞠目结舌，几乎每周都有新模型、新工具问世。作为一名每天与代码打交道的前端“板砖工”，危机感也随之而来——会不会哪天醒来，发现自己已经被AI取代？

与其焦虑，不如主动拥抱变化。趁着这股热潮，我安装了一系列AI辅助工具，尝试用“Vibe Coding”（一种借助AI智能体进行开发的方式）来写代码。经过一段时间的摸索，我不仅完成了人生第一个从零开始的浏览器插件，还总结了一些实用的工具和提示词技巧，今天分享给大家。

一、工具推荐：让AI真正成为开发利器

如果你和我一样是VSCode的忠实用户，那么iFlow CLI绝对值得一试。它能把强大的AI能力带入终端，帮你写代码、改Bug、做分析，就像一个随时待命的编程助手。

安装与使用：

bash

# 需要 Node 22+ 
npm i -g @iflow-ai/iflow-cli@latest

然后在VSCode插件市场搜索“iFlow”并安装。安装后编辑器侧边栏会出现iFlow的图标，点击即可启动命令行交互。你可以在编辑器里边说边看AI自动生成代码，体验非常流畅。

（可惜呀，官方于26年4月17日停止了iFlow的维护，不知道他们是否裁员，大家可以使用其他大模型，操作类似）

如果你觉得配置全局代理太麻烦，或者想体验多种大模型无缝切换，可以试试字节的Trae工具。它内置了多个主流大模型（如deepseek、GML、Kimi等），几乎无限制使用，而且切换模型只需要点一下。我亲测写代码、解释概念都非常靠谱，对国内开发者尤其友好。

作为前端，我们常常需要告诉AI“用某某UI库”，但有时候也想自己设计一些独特的界面。这时候如果有一个懂设计的AI协助，就事半功倍了。GitHub上star数颇高的ui-ux-pro-max-skill就是为此而生，它支持多种设计主题，但需要依赖Python环境。

安装Python（如果还没装）：

bash

# macOS
brew install python3

# Windows
winget install Python.Python.3.12

然后进入项目目录（以Trae为例，其他编辑器请参考官方文档）：

bash

uipro init --ai trae

这条命令会在目录下生成一个.trae文件，里面包含了自动构建的上下文信息。之后你在与AI对话时，只要提及UI相关的需求，编辑器就会自动关联这个文件，让AI的产出更贴合你的设计风格——仿佛悄悄请了一位设计师在旁边指点。

当然，类似的工具层出不穷，各家模型也在激烈竞争。但工具不在多，关键是怎么用。

我横向对比了豆包、Claude、DeepSeek、GLM等几个主流大模型，直观感受是各有所长。有的模型擅长发散思考，你提一个项目想法，它能帮你分析运营、成本、风险；有的模型则更擅长深入挖掘需求，追问细节。没有哪个模型是绝对完美的，尤其是一些国外模型使用成本高，或者国内访问不便。

我的建议是：精选1-3个在不同场景下表现稳定的模型即可，不必纠结“谁更聪明”。真正决定产出质量的，往往是你如何与AI对话——也就是提示词的质量。

在开始一个新项目或新功能时，我会遵循以下结构来组织提示词：

整体描述：先一句话概括核心需求，再补充背景信息。
示例：“我需要一个浏览器插件，用于记录每日待办事项。用户希望界面简洁，能同步到云端。”
功能描述：用【目标】、【功能】、【约束】的格式，帮AI快速解析结构。
示例：
- 【目标】实现一个可离线使用的待办清单，支持增删改查。
- 【功能】任务添加、完成标记、分类标签、数据本地存储+云端同步（可选）。
- 【约束】使用React + Tailwind CSS，插件需兼容Chrome和Edge。
输出描述：明确告诉AI你希望它产出什么。
示例：“请生成项目的技术方案概要，并列出主要模块的实现步骤。”

之前我基于一个开源项目魔改过浏览器待办插件，但一直没正式发布。这次用Vibe Coding的方式，借助上述工具和提示词方法，从零开始重新设计开发了一个功能更完善的Todoist风格插件。功能比之前更丰富，但耗时却只有原来的一半——这还是在学习曲线陡峭的情况下。

我不确定未来AI是否会真的取代我们这些“打工人”，但至少现在，它已经成为了我工作中不可或缺的“副驾驶”。与其担心被替代，不如学会如何驾驭它，让AI帮我们省下时间去做更有创造性的事情。