本文是 Crazyrouter Claude Code 系列第 18 篇。本文会围绕「Claude Code 接入 Crazyrouter 连载 18：AI 时代，会说话就会编程」展开，重点覆盖 AI 时代，会说话就会编程、动手：你的第一个 AI 原生应用、附录 1：我们需要前端开发知识吗？。
统一接入口径：Claude Code / Anthropic 原生客户端使用
ANTHROPIC_BASE_URL=https://cn.crazyrouter.com；OpenAI 兼容 SDK、HTTP 请求和前后端应用使用base_url=https://cn.crazyrouter.com/v1。
/v1/v1/... 问题。这是一个基于项目制学习的学习教程。可以跟随步骤一步步操作，并尝试复现结果。
很多小伙伴脑子里有一堆产品点子：一款帮自己记账的小工具、一个记录孩子成长的网页、甚至一款小游戏。但一想到要写代码、要找程序员，就直接劝退。
AI 出现之后，第一次给了非程序员一个全新的可能：你不需要会写代码，只需要学会对 AI 说清楚你想要什么。来自 GitHub Copilot 的 数据显示，超过1500万开发者正在用AI辅助编程，平均46%的代码都是AI生成的! 在Java项目中这个比例能达到61%。
接下来，我们就以贪吃蛇为例，具体看看 AI 编程目前到底能做到什么程度。
首先，请打开实验网页 z.ai，介绍其全栈开发模块的使用。
什么是【网页就能编程】的新模式？
过去，开发一个网页应用需要：
而现在，借助 AI 编程平台，你只需要：
这种「对话即编程」的模式，让编程从「写代码」变成了「描述需求」。你不需要关心底层技术细节，只需要清楚地告诉 AI 你想要什么，它就能帮你把想法变成可运行的程序。这就是 AI 时代编程的新范式——Vibe Coding（氛围式编码）。
输入我们的简单需求后点击 全栈开发 按钮，你可以实时观看网页的完整创建过程。通常只需泡一杯咖啡的时间，网页便会自动生成完毕！
生成结束后，你能看到右侧出现可浏览的网页界面。你可以上下滚动浏览页面内容，或点击页面顶部的 🧭 按钮切换至全屏模式查看效果。
其中顶部从左到右按钮的作用依次为：箭头按钮展开侧边对话历史栏，铅笔按钮用于新建一个对话，循环箭头按钮用于刷新页面，指南针按钮负责切换至全屏模式，Download 按钮用于下载项目，<> 按钮用于切换代码视图，Publish 按钮用于发布项目。
如果你想查看该网页的源代码，可以点击右上角的代码图标查看完整代码。
🌐 探索更多 AI 编程工具
除了 z.ai，还推荐尝试以下 AI 编程平台进行测试：
| 工具 | 地址 | 特点 |
|---|---|---|
| Figma Make | figma.com/make | 与设计工具深度整合，适合设计师快速实现交互原型 |
| v0.dev | v0.dev | Vercel 出品的 AI 生成 UI 工具，输入描述即可生成可运行的 React 组件代码 |
| Bolt.new | bolt.new | StackBlitz 推出的 AI 全栈开发平台，可直接生成并部署完整的 Web 应用 |
| Lovable | lovable.dev | 专注于生成高质量 React 应用，支持 GitHub 集成和一键部署 |
| Replit Agent | replit.com | 集成 AI 编程助手的在线 IDE，支持多种语言和实时协作 |
本节聚焦一个具体问题：当你只依赖对话式 AI、不写任何代码时，它究竟能把事情推进到哪一步。 在经验层面，一个较为稳定的结论是：它可以帮你完成一个“小而完整”的东西，但“做到什么程度就算够”，仍然需要你亲自决策每一步的详细步骤。
从前面的贪吃蛇示例中，你已经看到了一种典型模式： 只要你能把界面和交互说清楚，AI 通常可以在几轮对话内，拼出一个可以打开、可以点击、可以玩的完整网页。
这类任务往往具备几个共同特征：
在这个边界内，你可以把对话式 AI 看作一位执行力不错的"辅助开发者"。你只需在每一轮用自然语言细化和修正需求，就能快速得到可用的原型。
一旦超出小而清晰的范围，只指望靠几轮对话让 AI 端到端完成复杂系统，很快就会遇到上限。大型项目往往要接后端、连数据库、整合第三方服务，还牵涉权限、安全、并发和大量业务规则，目标是交付一整套与现有业务深度打通的系统，而不是一页网页。
在这种情况下，更合理的做法不是把所有需求一股脑丢给 AI，而是先梳理出清晰的整体流程：关键步骤是什么、每一步的输入输出和状态变化是什么、哪些节点对性能和安全最敏感。再基于这张流程图，把相对独立的环节拆分出来，交给对话式 AI 生成接口、模块、脚本和测试。
以目前的能力来看，AI 更擅长加速一个个小步骤，由你（或你的团队）来决定怎么拆步骤、如何串联，并负责最终的架构设计、系统集成和运维。
咋一看，AI 好像什么都能写，但这些东西到底能不能用，能用到什么程度，我们该如何划分？
一个可参考的经验是：
适用场景指南
在当下，你可以相对安心地把 AI 视作一个高效的 Demo 与自用工具搭档： 只要你愿意多测试、多迭代，多问几轮“这里不对，帮我修一下并解释原因”，在原型与内部工具这一级别，整体质量通常是足够且具备实践价值的。
让我们回到动手部分，在前一部分，我们已经用 AI 快速做出了一个可以玩的贪吃蛇原型，也大致知道了 AI 能做什么、不能做什么。接下来我们将学习如何用最基础的 vibe coding 技巧创建一个现代版的 AI 贪吃蛇游戏。我们将让蛇吃掉文字字符而不是豆子。最后让游戏根据吃掉的文字字符生成一首诗，并画一幅画。 通过这个实际案例你能够理解全新编程方式的核心理念：如何学会用自然语言清晰地表达需求。
在一开始，我们可以用最简单的方式与大模型对话，这将帮助我们快速获得产品原型。我们可以直接在聊天框中输入：
注意，在开发过程中，我们可能会遇到不尽如人意的问题，例如点击按钮没有任何反应、使用功能时报错、功能未按预期工作，或者前端页面与预期设计不符。
在这种情况下，我们需要进一步向模型提问，以帮助修复这些意外问题。
完成基本功能后，我们可以尝试给我们的程序添加一些新花样！如果你觉得蛇吃单词或字符的过程有点枯燥，你可以让蛇吃不同颜色的单词，并相应地改变蛇的颜色。
你还可以为“吃”的过程添加特效，或者引入触发特效的魔法单词——比如增加蛇的速度或大小。另一个想法是每当蛇吃一个单词时就让模型生成一首诗和一幅图，而不是等到它吃掉八个单词。
如果觉得这些有挑战性，你可以直接向语言模型求助！它可以提供创意建议，让你的游戏更有趣。试一试吧！
此外，我们还可以要求 LLM 帮你直接生成项目级的提示词。在上一节中，我们只自己写了贪吃蛇游戏的提示词。现在让我们尝试让大模型生成一个带有整体框架和实现路径的提示词（你可以直接用 z.ai 生成）。
如果你想学习如何写出更好的提示词，可以查看 提示词工程附录。
我想让 AI 生成一个网页贪吃蛇游戏，需要一个更完整的提示词，让生成结果更令人印象深刻和有趣。请生成相应的提示词。当前目标是：生成一个贪吃蛇游戏，需要实现吃不同单词生成诗歌的功能，并且应该包含图像生成模块。
z.ai 的回复将会是这样的：
我们可以使用这个提示词在全栈开发模式下重新生成项目：
除了贪吃蛇（游戏），我们可以让想象力尽情驰骋。
创造任何我们想创造的东西，甚至尝试搞砸一切！然后重头再来！
还有... 如果你喜欢玩游戏，让我们一起尝试创造游戏吧！
一句话总结
你不需要会写代码，但了解基础概念能让你更好地向 AI 描述需求。
浏览器通过三种"代码"来构建页面：
当你打开一个网页时，浏览器会按顺序处理三种代码：
前面介绍的 HTML、CSS、JavaScript 是前端开发的"三件套"，它们是所有网页的基础。但当页面变得复杂时，直接用这三件套开发会遇到挑战：代码难以维护、重复劳动多、数据同步麻烦。
现代前端框架（如 React、Vue、Angular）建立在 HTML/CSS/JS 之上，让开发更高效：
简单理解
在 AI 辅助编程时代，你不需要深入掌握框架的所有细节，只需要理解它们的基本概念，就能通过自然语言描述让 AI 帮你生成代码。
核心要点：你不需要写代码，只需要会描述。
了解前端概念后，你可以这样跟 AI 描述需求：
"用 React 做一个排行榜页面，右侧显示分数列表，点击某行在下方展示玩家详情，风格简洁现代。"
如果你想深入理解 HTML、CSS、JavaScript 等前端基础知识，可以查看 Web 基础附录。想了解前端技术的发展历程，可以查看 前端进化史附录。
💡 什么是 Vibe Coding？计算机科学家 Andrej Karpathy（OpenAI 的联合创始人之一，特斯拉前 AI 负责人）于 2025 年 2 月提出了 vibe coding 一词。这个概念指的是一种依赖于 LLM 的编码方法，允许程序员通过提供自然语言描述而不是手动编写代码来生成可工作的代码。
从字面上看，Vibe Coding 可以理解为一种“用说的方式来做开发”。它的核心变化在于：你不再需要自己一行一行写代码、查语法、调 Bug，而是直接用自然语言描述你想要的东西，例如：
“我需要一个登录页面，上面有手机号输入框和验证码输入框。” “登录成功后，跳转到首页，并在右上角显示用户名。” “给我一个简单的贪吃蛇小游戏，可以用键盘方向键控制。” 大语言模型（LLM）会把这类描述自动翻译成真正可以运行的代码，并生成对应的页面、逻辑和数据结构。你看到效果后，再用自然语言提出修改意见，例如“按钮再大一点”“背景换成深色”“得分记录下来并显示排行榜”，AI 会继续按你的要求调整实现。
在这种模式下，你不需要先学会编程语言，再去写代码；而是把主要 精力放在：说清楚要做什么、看到结果后判断“哪里不对”、再提出新的修改。AI 则负责把这些 高层的想法落成具体实现，从而显著减少机械、重复的编码工作。
你可以点击这里查看更多关于 vibe coding 的细节 ： ibe-coding
你可以点击这里查看更多关于 Karpathy 的分享内容：
实际上，在真正的 vibe coding 过程中，我们通常不会使用很多复杂的提示词。也许我们在开始时需要为整个程序提供一个具体且适度复杂的提示词，但在那之后的每一步，你可能只需要以下类型的提示词：
这听起来可能有点夸张，但实际上，这些就是我们在日常工作中可能使用的提示词。由于大语言模型的上下文长度限制，或者有时因为它们的指令遵循能力不是很强，模型可能会忘记对话早些时候讨论的内容。在 vibe coding 中，我们倾向使用长上下文的模型，并且使用指令遵循能力强的模型，我们可以通过这两者的排行或者指标来判断其是不是好模型。
或者，由于训练数据集的风格，大模型倾向于以其训练数据的风格回答。例如，有些人说话很严肃，有些人喜欢添加很多修饰，而有些大模型喜欢在代码中添加很多注释或不必要的模块。
模型上下文可以理解为 AI 的短期记忆。它指的是在当前一次对话或一次任务中，模型能够“看到”和“记住”的所有文本内容，包括你之前输入的问题、系统提供的说明、相关资料等。
正是因为有上下文，AI 才能理解你在接着前面的内容继续提问，才能进行一轮一轮、看起来连贯自然的对话。如果没有上下文，你的每一句话在模型看来都像是一次全新的提问，它无法知道你之前说过什么，也就谈不上延续对话。
每个模型都有自己的有效上下文长度（context window）。这个长度通常用 token（可以粗略理解为“字词片段”的单位）来衡量，目前主流模型大多在 32k～128k token 之间。上下文越长，模型一次能“读”的内容就越多，例如：
当你输入的内容接近或超过模型的上下文限制时，往往会出现一些常见现象：
这些现象并不是模型突然“变笨”，而是上下文容量被用满或接近用满后产生的自然结果。
在实际使用中，我们既希望上下文尽可能长，又要意识到：
因此，在设计 AI 应用时，需要在让模型看得足够多和控制成本、提升效率之间做平衡。例如：
指令遵循能力指的是：模型在理解你的指令之后，能否准确、完整地按照你的要求执行。它不仅包括能回答问题，还包括能按指定格式、风格、步骤完成任务。
例如，下面这些都是对模型有明确要求的指令：
一个指令遵循能力强的模型，通常具备以下特征：
在实际应用中，强指令遵循能力非常重要，原因包括：
因此，在选择和评估一个大语言模型时，除了关注它是否聪明、知识覆盖是否广之外，还需要特别关注它的指令遵循能力。对于工业级应用来说，能否稳定而准确地执行指令，往往比偶尔给出一次惊艳回答更重要。
/v1 用法如果你准备把 Claude Code、国产模型或自己的应用统一接入 Crazyrouter，可以按这个顺序推进：
https://cn.crazyrouter.com；OpenAI 兼容 SDK 使用：https://cn.crazyrouter.com/v1。/v1。需要评估模型成本或选择不同模型时，可以先查看 Crazyrouter 价格与模型页，再把常用模型加入 Token 白名单。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。