只需自然语言描述需求，AI即可生成可运行程序：先准备Claude.ai、VS Code及Claude Code插件，切换至Claude-3.5-Sonnet模型；创建项目文件夹并正确打开；用标准模板确认待办清单需求；开启Plan Mode规划原生HTML/CSS/JS实现步骤；最后生成并插入单文件index.html，用Live Server运行验证。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想用自然语言描述需求，让AI帮你写出第一个能跑起来的程序，而不是从安装Python、配置环境变量开始折腾。这个过程不需要你懂函数怎么写、API怎么调、Git怎么commit，只需要你能说清楚“我要一个什么样的东西”。
准备三个真实可用的工具
打开浏览器，访问 https://claude.ai，注册并登录；下载 VS Code（官网免费）；在 VS Code 中安装官方插件 Claude Code。这三样缺一不可——没有 Claude，AI 不理解你的需求；没有 VS Code，你没法组织文件结构；没有插件，AI 看不见你当前写的代码。
安装插件后重启 VS Code，在右下角状态栏点击模型选择器，手动切换为 Claude-3.5-Sonnet。别用默认的 Claude-3-Haiku，它对中文项目结构理解常出错，会导致后续生成的文件路径混乱。
创建项目文件夹并打开
在桌面新建一个空文件夹，命名为 my-first-vibe-app；在 VS Code 中按 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows），输入 Open Folder，选中该文件夹。
【必须确认当前窗口左上角显示的是 my-first-vibe-app 文件夹名】 否则 AI 会把代码生成到临时目录，你根本找不到文件。
用标准模板向AI提第一个需求
按下 Cmd+K（Mac）或 Ctrl+K（Windows）唤出对话框，粘贴以下内容：
我是一个没写过代码的新手，想做一个运行在浏览器里的待办清单。功能很简单：输入文字→点添加按钮→下方列出所有事项→每项右边有删除按钮。界面不用花哨，白色背景+黑色文字+圆角按钮就行。我暂时就这些想法。你帮我整理一下我的需求，如果有不确定的地方可以问我。我们先沟通项目的需求，等我确认之后再做下一步的执行。
统一LLM网关 - 一个API对接70+AI模型，使用单一API密钥即可调用GPT、Claude、Gemini、Qwen、Deepseek、Grok等主流模型。
发送后等待10秒左右，AI 会返回一份结构化的需求确认文档。不要跳过这步直接让AI写代码——它可能把“删除按钮”理解成“划掉文字”，也可能默认加了本地存储功能，而你根本没提。
开启Plan Mode并确认技术方案
点击右下角状态栏的 Plan Mode 按钮（图标是齿轮+文档），再发一条消息：“基于刚才确认的需求，帮我规划实现步骤，只用 HTML + CSS + JavaScript，不引入任何外部库。”
AI 会返回分步计划，例如：① 创建 index.html 作为主页面；② 在 body 中写输入框、按钮和空的 ul 列表；③ 给按钮绑定 click 事件；④ 写 JS 函数处理添加和删除逻辑。如果它提到 Node.js 或 React，立刻回复：“不要框架，只要原生 JS。”
这一步卡住很多人——AI 默认倾向用现代工程链，但新手第一项目必须锁定最简技术栈，否则光装依赖就能耗掉一小时。
执行第一步：生成 index.html
关闭 Plan Mode，回到普通对话模式，发送：“现在请生成完整的 index.html 文件内容，包含所有 HTML 结构、内联 CSS 样式和内联 JavaScript 逻辑，全部写在一个文件里。”
AI 返回代码后，点击它回复中的 Insert into file 按钮，选择 index.html（如果没有，就手动创建该文件）。别复制粘贴——手动复制容易漏掉换行或引号，导致页面空白。
保存文件，右键 index.html → “Open with Live Server”。浏览器自动打开，看到输入框和按钮，说明文件已正确生成并可执行。
