一、基础概念什么是 Web‑CodingWeb‑Coding 本质就是借助大语言模型LLMLarge Language Model辅助程序员完成代码开发。国内有人译作「范围式编程」讲师更倾向理解为享受式编程程序员指挥AI来写代码解放重复编码工作。从2025年下半年开始企业已经逐步将Web‑Coding作为主流开发方式程序员工作重心发生转变指明AI开发方向、给出清晰需求审核、校验、修改AI生成出来的代码该能力已经成为程序员求职的一项加分必备技能。与之相对传统一行一行手动敲代码的方式被戏称为古法式编程。技术演进历史打孔纸带 → 汇编语言 → C语言等高级语言 → Python/JS等高抽象语言 → AI辅助Web‑Coding。二、背景知识大语言模型 LLM1. 什么是大语言模型使用海量各行各业文本资料网页、书籍、专业文档训练出来的AI模型可以理解多领域知识相当于一位全科博士。现实人类博士大多只精通单一领域而大模型可以跨多个领域输出专业内容。因此它天然具备理解、生成代码的能力可以听懂人类自然语言指令完成编码任务。2. 交互核心提示词(Prompt)你发给大模型的对话内容就叫做提示词是人和大模型交互最核心的手段。3. 大模型存在明显局限性 —— 幻觉问题AI有可能编造虚假、不存在的事实幻觉。案例演示提问比特授课老师信息AI虚构了后勤主管讲课的错误信息。 结论AI输出结果不能直接全盘采信需要程序员人工辨别、校验对错。4. 当前主流大模型生态1国际「御三家」T1梯队ChatGPTOpenAI、ClaudeAnthropic、GeminiGoogle缺点国内用户访问受限。2国内主流国产大模型豆包、通义千问、文心一言、混元、DeepSeek、Kimi、MiniMax等。国产模型整体能力和国际头部差距不大足够支撑日常开发工作访问便捷。5. 灵魂拷问程序员会不会被AI取代不会被取代。 大模型更像一个能力放大器类似七龙珠界王拳使用者本身技术功底越强AI带来的提升就越大如果使用者完全不懂技术就无法发现AI代码中隐藏的BUG、逻辑错误。核心结论底层计算机知识、编程基本功仍然必须学习掌握。三、三类AI代码开发工具第一类VS‑Code发行版图形界面IDE本质就是基于VS Code内核改造额外内置AI对话侧边栏。市场现状VS Code占据约75.9%开发者市场份额生态强大、极易扩展。代表产品Cursor、豆包Trae、Amazon CodeWhisperer、Github Copilot、腾讯Code、阿里Qwen‑Coder优点上手简单熟悉VS Code即可快速使用图形交互直观。第二类终端CLI命令行工具课程重点学习方向CLICommand‑Line Interface命令行界面和图形GUI相对。代表Claude Code、Codex、Open‑Code市场案例Claude Code上线半年市场份额达到9.7%增长迅猛背后依靠Claude大模型强大能力。国内方案限制原版Claude‑Code等海外工具国内直接访问困难因此课程选用**Open‑Code开源替代版**作为教学工具。第三类一句话生成应用的在线网站工具代表Devin、秒搭、马上飞等特点纯网页在线使用不需要本地搭建开发环境代码托管在服务商服务器。定位面向非技术零基础人群快速生成Demo。企业开发缺点业务代码、核心数据存在泄露风险功能自由度受限深度修改、精细化调优不方便适用场景课程设计、毕业设计快速做演示Demo不适合商业项目开发。企业正式开发优先选择第一类IDE发行版、第二类CLI终端工具。四、Open‑Code 的安装部署Ubuntu‑24.04 Linux为例Windows安装步骤基本一致前置知识Node.js NPMOpen‑Code以及大部分同类CLI AI工具底层由TypeScript Node.js开发实现。JavaScript原本仅能运行于浏览器V8引擎Chrome浏览器JS解释器被剥离出来封装成独立运行环境就是Node.js。Node.js让JS/TS可以开发后端服务、桌面程序、终端工具。TypeScriptJavaScript的超集升级版适合大型工程项目。NPMNode生态的包管理器作用等价于 Linux apt、Java Maven、Python pip用于一键下载安装开源程序包。完整安装步骤不使用官网一键脚本容易网络失败选择NPM方式安装系统自带的Node.js版本过低先导入第三方软件源安装新版本Node.jsNode.js安装成功之后npm会随之一起安装使用npm全局命令安装Open‑Code终端输入open‑code验证安装CtrlC退出Open‑Codesudo su - curl -sL https://deb.nodesource.com/setup_24.x | bash - apt install -y nodejs npm i -g opencode-ai #启动opencode-ai opencode五、Open‑Code基础操作命令启动终端输入open‑code退出Ctrl C工作目录规则在哪一个文件夹启动Open‑Code该文件夹就是它的工作目录默认只能访问修改该目录下文件访问外部目录需要用户手动授权。/theme修改软件主题/models切换、选择接入的大模型自带少量免费额度模型适合初期试用CtrlP唤出完整命令控制面板可以切换模型、配置模型供应商、新建对话、打开编辑器、切换智能体Agent、安装插件等六、核心概念Agent智能体智能体就是被添加了人设、行为约束、任务定位的大模型通过系统提示词限制它的能力范围。 Open‑Code内置4种AgentAgent名称作用Plan只读模式只分析回答问题绝不修改任何代码适合阅读、理解已有项目源码Build主力开发模式既可以回答问题也能够新建、修改代码开发最常使用Tab快捷键可在Build / Plan之间快速切换General独立子智能体新开一条不受历史上下文影响的对话分支一般由Open‑Code自动调度很少手动调用Explorer项目解析智能体用来快速阅读、理解别人遗留的大型项目梳理项目整体架构与模块关系额外支持自定义Agent课程不作讲解。七、实战演示案例C编写打砖块在项目目录启动Open‑Code发送提示词使用C编写控制台打砖块AI自动生成代码尝试编译运行AI修改代码闪烁问题修复游戏正常运行开发关键点多轮对话迭代纠错。AI可以记住前面开发的全部上下文你只需要描述新出现的问题即可不需要每次都完整重述全部需求。八、大模型「记忆」实现原理非常重要1. 真相大模型本身没有记忆能力记忆效果是Open‑Code这类客户端工具实现维护的。 工作原理工具保存你和AI所有的聊天记录每一轮新提问的时候工具会把【全部历史对话 新问题】一起打包发给大模型。2. 发给大模型的消息三部分组成系统提示词工具内置定义AI人设、能力、约束规则用户提示词你输入的指令、需求AI提示词上一轮大模型返回给你的回答内容3. 上下文窗口Context Window大模型单次请求能够接收、处理的最大Token数据上限就是上下文窗口。Token交互文本的计量单位你发的文字、AI返回文字都消耗Token按Token计费的模型收发双向都扣费。窗口有上限对话不断累加历史记录迟早会耗尽窗口空间引发AI丢失上下文焦点、回答跑偏。4. 三种上下文管理解决方案开启新对话/new开启全新空白上下文适合开发完全无关的新项目隔断历史。上下文压缩/summary/ compact让AI把冗长的历史对话总结成简短摘要节省窗口空间适合同一个项目还没有开发完毕不想丢掉项目信息的场景。持久记忆文件 agent.md项目关键约束、全局需求写入该Markdown文档Open‑Code每次启动都会读取不受上下文窗口限制。九、Open‑Code其他版本 使用注意事项Open‑Code不止终端CLI一种版本Web版本启动本地服务器浏览器网页操作IDE插件版本VS Code等编辑器插件集成桌面图形版独立GUI程序当前图形化版本BUG较多课程优先推荐稳定的终端CLI版本。⚠️ 重要风险提醒慎用undo撤销功能undo撤销修改功能存在BUG有可能无法完整回退文件改动。最佳替代方案全程使用Git版本管理代码变更依靠Git来回滚安全稳妥。Web‑Coding时代熟练使用Git是程序员必备技能。十、接入付费模型MiniMax Coding‑Plan 购买与配置教程免费模型额度有限重度开发推荐包月套餐。课程选用MiniMax作为示例。1. 套餐两种计费模式按Token计费用多少扣多少适合偶尔少量使用Coding‑Plan包月套餐课程首选固定月费有每5小时、每周调用上限整体性价比更高适合高频开发最低29元/月。2. 购买步骤搜索进入MiniMax官网进入【API开放平台】手机号注册登录账号找到Token‑PlanCoding‑Plan套餐选择包月不推荐年付不建议年付原因大模型迭代速度极快后续会出现更好更便宜的新模型月付可以灵活切换规避沉没成本。扫码支付购买成功获取核心凭证API‑Key身份密钥安全警告API‑Key一旦泄露别人可以消耗你的套餐额度务必保密。3. Open‑Code中配置MiniMax/models→ 查看全部供应商供应商选择minimax.com国服.io是国际服国内网络慢选择Coding‑Plan版本的供应商选项粘贴你的API‑Key完成绑定在模型列表选择2.7基础模型不要选择high‑speed极速版需要额外付费4. 使用体验说明高峰期白天下午排队延迟高低峰期深夜响应速度很快上手建议顺序免费模型试用 → 熟练工具之后按需购买包月套餐优先选购最低档位套餐额度不够再升级