首页 > 教程攻略 > ai资讯 >vibe coding零基础入门的打开方式推荐

vibe coding零基础入门的打开方式推荐

来源:互联网 时间:2026-06-10 13:09:04

零基础想用自然语言让AI帮你写代码,最怕的是什么?不是逻辑难,不是需求复杂,而是还没开始写就被环境配置、API密钥、命令行报错卡住一整天。选对第一个打开方式极其关键——它必须能跳过所有前置门槛,让你三分钟内看到第一行可运行的代码。下面直接推荐三个梯度的方案,从零配置到完全掌控,按自己的时间和耐心来选就行。

vibe coding零基础入门的打开方式推荐

新手最顺的第一步:用Trea直接开网页写

打开浏览器,访问 treacode.com,不用注册、不用下载、不弹权限请求,页面加载完就能直接打字。

在中央对话框输入:“帮我写一个带深色模式切换按钮的计时器网页,点击开始就倒数60秒,结束时弹提示。”

按回车,等5~8秒,右侧面板自动出现预览效果,左侧面板同步显示HTML+CSS+JS三块代码,全部可编辑、可复制、可一键下载为.zip包。

这一步不需要你理解任何标签含义,也不用担心Node版本或依赖冲突——

所有运行环境已由Trea托管,你只负责说人话

进阶但依然零配置:用AiPy走完整闭环

方法一:网页版免安装(推荐)


打开 aipy.dev → 点击“Start Free” → 用邮箱快速登录(支持微信扫码)→ 进入工作台后,直接粘贴需求文档或一句话描述。

方法二:桌面端更稳(适合后续迭代)


正式下载AiPy桌面版 → 安装时勾选“自动配置Python与Node运行时” → 首次启动会自动联网拉取最新模型缓存 → 完成后打开空白项目,Ctrl+K呼出指令栏,输入:“我要做一个简历PDF生成器,用户填姓名/岗位/经历,点按钮就下载PDF。”

AiPy会立刻创建三个文件:form.html、generate.js、styles.css,并自动注入PDF生成库(pdfmake),你连npm install都不用敲。

注意:首次生成后别急着改代码,先点右上角绿色“Run”按钮——

它会自动起本地服务并打开浏览器预览,不是让你手动开http-server

有耐心且想长期用:Cursor + Claude 3.5本地化配置

第一步:

去 cursor.sh 下载安装包,双击安装,全程默认选项即可。

第二步:

安装完成后打开Cursor → 按Ctrl+Shift+P → 输入“Settings: Open Settings (JSON)” → 在右侧JSON编辑器末尾加一行:
"claude.apiKey": "your-api-key-here"

第三步:

获取Claude 3.5 API Key → 访问 anthropic.com/claude/console → 登录 → 进入“API Keys” → 点击“Create Key”,命名填“vibe-dev” → 复制密钥,粘贴进上一步的JSON里,保存。

第四步:

新建空文件夹 → 在Cursor中用“File → Open Folder”打开它 → 按Ctrl+I进入Composer界面 → 输入:“写一个带搜索框和结果列表的本地知识库网页,数据从data.json读,支持中文模糊匹配。” → 等AI列出文件清单 → 全部点“Apply”。

做完这一步,项目已含完整前后端结构,data.json自动生成示例数据,连本地开发服务器都已监听在 http://localhost:3000。