1. 从标题到落地这个项目到底在解决什么问题先把话说在前头这篇不是那种“三步教你搭网站”的速食教程。我做了十多年一线开发见过太多人卡在“装好了工具但不知道下一步干什么”这个坎上。所以这篇东西的核心目标只有一个把“从零装好一个 AI 编程助手到真正做出一个能跑、能用的网站”这条链路完整地、带坑地带你走一遍。标题里提到的 GPT-6你可以把它理解成当前这一代大模型能力的代称。它真正值钱的地方不在于“能聊天”而在于它能读懂你的项目结构、能写代码、能改代码、能帮你排查报错。而 Codex 这类工具本质上是把这种能力接到了你的编辑器里让你不用来回切浏览器复制粘贴。再往上Skill技能和插件体系是让这套能力“可复用、可定制”的关键——你可以把一套固定的工作流封装成一个技能下次一句话就能调用。这套东西适合谁三类人最该看第一类是有一定编程基础、但没系统用过 AI 辅助编程的开发者第二类是产品、运营、设计岗想自己动手做个能上线的页面或小工具第三类是老开发者想看看现在这套工具链到底成熟到什么程度了。如果你完全没碰过代码也能看懂大部分内容但实操部分需要你跟着敲。我先把整条链路拆成四个阶段后面每个阶段都会展开讲透环境准备与工具安装、核心概念理解Skill / 插件 / JSON 配置、用 AI 辅助做出一个真实网站、以及踩坑排查。这四个阶段不是并列的是递进的前一阶段没搞明白后一阶段一定卡壳。提示整篇文章里我会反复提到“先跑通最小闭环再谈优化”。这是我自己踩了无数坑之后总结的第一原则。很多人一上来就想搞个完美架构结果连环境都没配好就放弃了。2. 环境准备与工具安装别在第一步就翻车2.1 安装前你必须先想清楚的三件事很多人拿到一个工具第一反应是“赶紧下载装上”。我劝你先停三分钟想清楚三件事能帮你省下至少两小时的返工。第一件事你的主力编辑器是什么。VS Code、Cursor、WebStorm、IDEA 这几个是目前插件生态最全的。如果你平时用 VS Code那基本所有主流 AI 编程工具都有对应插件如果你用 JetBrains 全家桶IDEA、WebStorm插件也有但更新节奏偶尔会慢半拍。选编辑器这件事没有绝对优劣选你顺手的别为了追新工具换掉自己熟悉的编辑器得不偿失。第二件事你的网络环境和账号体系。这部分我不展开只说一句——确保你能正常访问你需要的服务账号提前注册好别等到装到一半才发现登录不了。第三件事你的项目放在哪。我强烈建议你专门建一个空目录用来做这次的练手项目不要在你正在维护的生产项目里折腾。原因很简单AI 改代码有时候会“手滑”在干净目录里出问题删了重来就行在生产项目里出问题那就是事故。2.2 Codex 类工具的安装实操Codex 这类工具目前的安装方式主要有两种编辑器插件形式和命令行形式。我两种都用过给你说说区别。插件形式的优点是开箱即用装完在侧边栏就能看到入口适合新手。命令行形式的优点是灵活能接进各种自动化流程适合老手。下面我按插件形式走一遍因为这是大多数人第一次接触时最顺的路径。第一步打开你的编辑器找到扩展市场Extensions。搜索关键词注意认准官方发布者现在山寨插件不少装错了轻则没用重则泄露你的代码。第二步点击安装装完后通常需要重启编辑器。重启这一步别省我见过好几次因为没重启导致插件不生效白白排查半天。第三步登录授权。一般会跳转到浏览器完成授权授权完成后回到编辑器你会看到插件状态变成已连接。第四步验证是否装好。新建一个测试文件随便写几行代码然后呼出插件的对话面板问它“帮我解释这段代码”。如果它能正常回答说明装好了。# 如果你走命令行形式大致流程是这样具体命令以官方文档为准 # 1. 确认本地运行时版本 node -v # 2. 通过包管理器全局安装 npm install -g 工具包名 # 3. 登录 工具命令 login # 4. 验证 工具命令 --version注意命令行安装最容易出问题的地方是运行时版本不匹配。我遇到过 Node 版本太低导致安装成功但运行报错的情况装之前先确认版本满足要求能省很多事。2.3 插件生态怎么挑别贪多热词里出现了大量插件名从编辑器插件到各种专业软件插件都有。我的建议是插件不是越多越好是越精准越好。装一堆插件最直接的后果是编辑器变卡、快捷键冲突、功能互相打架。我自己主力编辑器里常年只留五六个插件每个都是高频使用的。挑插件的标准就三条解决我真实痛点的、维护活跃的、口碑稳定的。具体到 AI 编程这个场景你真正需要的插件其实就几类代码补全类、对话问答类、代码审查类。其他的等你用出需求了再装别提前囤。3. 核心概念拆透Skill、插件、JSON 到底怎么理解3.1 Skill 是什么把重复劳动打包成一句话Skill 这个词最近特别火但很多人没搞明白它到底是什么。我用一个生活化的类比Skill 就像你给助理写的一份“标准作业流程”。比如你每次做周报都要经历“拉数据、做图表、写总结、排版”这四步你把这份流程写下来交给助理以后你说一句“出周报”他就按这个流程走完。在 AI 编程场景里Skill 就是把你常用的一套操作封装起来。比如“新建一个 React 组件”这件事标准流程可能是创建文件、写基础模板、引入样式、导出组件、在路由里注册。你把这套流程做成一个 Skill以后一句话就能生成不用每次重复描述。Skill 的价值在于一致性和效率。一致性是指每次执行都按同样的标准来不会这次记得写注释下次忘了效率是指你省下了重复描述的时间。3.2 Skill 怎么用从调用到自定义使用现成的 Skill 很简单通常就是在对话里直接点名调用。但真正有意思的是自定义 Skill。我拿一个真实场景举例我经常需要把一段 JSON 数据转成 TypeScript 的类型定义。这个操作我做过几百次每次都要描述一遍需求很烦。后来我把它做成了一个 Skill现在一句话搞定。自定义 Skill 的核心是把你脑子里的“隐性流程”写成“显性步骤”。写的时候注意几点步骤要具体到可执行别写“处理一下数据”这种模糊描述要说明输入和输出是什么要覆盖边界情况比如数据为空怎么办。{ skillName: json-to-typescript, description: 把 JSON 数据转换成 TypeScript 类型定义, steps: [ 解析输入的 JSON 结构, 推断每个字段的类型, 处理嵌套对象和数组, 生成带注释的 TypeScript interface, 输出结果并说明使用方式 ], input: 一段合法的 JSON 字符串, output: TypeScript 类型定义代码 }上面这个 JSON 结构是我自己常用的 Skill 描述模板。你可以看到它把技能名、描述、步骤、输入输出都定义清楚了。这种结构化的描述方式能让 AI 更准确地理解你要什么。3.3 JSON 配置AI 工具链里的“通用语言”热词里 JSON 出现频率极高这不是偶然。JSON 几乎是当前所有 AI 工具链的配置通用语言。你配置 Skill 用 JSON配置插件用 JSON工具之间传递数据也用 JSON。很多人问“JSON 用什么打开”其实 JSON 就是纯文本任何文本编辑器都能打开。但如果你要编辑复杂的 JSON建议用带语法高亮和格式化功能的编辑器能帮你快速发现括号不匹配、逗号多余这类低级错误。JSON 的核心规则就几条键值对用冒号分隔多个键值对用逗号分隔对象用花括号数组用方括号字符串用双引号。记住这几条你就能读懂绝大多数配置文件。{ name: my-project, version: 1.0.0, plugins: [ { id: code-assist, enabled: true }, { id: json-tools, enabled: true } ], settings: { autoFormat: true, theme: dark } }提示JSON 不允许注释也不允许末尾多余的逗号。这两个是新手最容易犯的错报错信息往往还很隐晦排查时优先检查这两点。3.4 插件和 Skill 的关系别搞混这两个概念经常被混用我帮你理清楚。插件是“能力载体”它给编辑器增加了某种功能Skill 是“流程封装”它定义了怎么用这些功能完成一件事。打个比方插件像是你工具箱里的各种工具螺丝刀、扳手、锤子Skill 像是你贴在墙上的“装书架流程”告诉你先干什么后干什么、用哪个工具。工具是死的流程是活的。你可以用同一套工具通过不同的 Skill 完成完全不同的事情。理解了这个关系你就明白为什么有些工具强调“插件生态”有些强调“技能市场”——它们解决的是不同层面的问题。4. 实操用 AI 辅助做出一个能用的网站4.1 先定需求一个“能用”的网站长什么样“能用”这个词很关键。我见过太多教程教你做个花里胡哨的页面但连数据都存不下来那不叫能用那叫演示。我定义的“能用”包含四条能访问、有真实功能、数据能持久化、出错有提示。这次我们做一个个人书签管理网站。功能很简单能添加书签标题 链接、能列表展示、能删除、数据存在本地。为什么选这个因为它麻雀虽小五脏俱全涵盖了前端交互、数据存储、状态管理这几个核心环节做完你对整个流程就有感觉了。技术选型上我建议用最朴素的方案HTML CSS 原生 JavaScript数据存 localStorage。别一上来就上框架框架会掩盖很多你本该理解的细节。等你把这个朴素版本做通了再换框架就是水到渠成的事。4.2 用 AI 生成第一版代码提示词怎么写这一步是很多人做不好的地方。他们给 AI 的提示词是“帮我做个书签管理网站”然后抱怨生成的东西不能用。问题出在提示词太模糊。好的提示词要包含四要素技术栈、功能清单、数据结构、约束条件。我给你看我实际用的提示词请用原生 HTML、CSS、JavaScript 实现一个书签管理页面。 功能要求 1. 顶部有输入框可以输入书签标题和链接 2. 点击添加按钮后书签显示在下方列表中 3. 每个书签右侧有删除按钮 4. 数据保存在 localStorage刷新页面不丢失 5. 链接需要校验格式不合法时给出提示 约束 - 不使用任何第三方库 - 代码写在一个 HTML 文件里 - 关键逻辑加注释你看这个提示词把要什么、不要什么、怎么存数据、怎么校验都写清楚了。AI 拿到这种提示词生成质量会高一个档次。4.3 代码逐块拆解AI 生成了什么AI 生成代码后别急着运行先读懂它。我带你过一遍关键部分。数据存储这块核心是 localStorage 的读写。localStorage 只能存字符串所以存对象要先转成 JSON 字符串读出来再转回对象。这个转换过程就是 JSON 最典型的应用场景。// 读取书签列表 function loadBookmarks() { const raw localStorage.getItem(bookmarks); // 如果没有数据返回空数组 if (!raw) return []; try { return JSON.parse(raw); } catch (e) { // 数据损坏时兜底避免整个页面崩溃 console.error(书签数据解析失败, e); return []; } } // 保存书签列表 function saveBookmarks(list) { localStorage.setItem(bookmarks, JSON.stringify(list)); }这段代码里有个细节值得说try...catch兜底。很多人写 localStorage 读写不写异常处理结果一旦数据损坏整个页面白屏。加个兜底最坏情况也就是数据丢了页面还能用。链接校验这块用 URL 构造函数是最稳的方式比正则可靠。function isValidUrl(str) { try { new URL(str); return true; } catch { return false; } }渲染列表这块注意用textContent而不是innerHTML来插入用户输入的内容。这是个安全习惯能防止用户输入的内容被当成代码执行。4.4 让 AI 帮你迭代从能跑到好用第一版跑通后别停。这时候才是 AI 辅助编程真正发挥价值的地方。你可以继续提需求加个搜索框、加个分类标签、加个导入导出功能。我实测下来迭代阶段用 AI 的效率比第一版还高因为上下文已经建立起来了AI 知道你的代码结构改起来很准。但有个前提每次只让它改一个点。你一次性提五个需求它很可能改乱。一个一个来改完验证再提下一个。导入导出功能特别值得做因为它把 JSON 的序列化和反序列化用到了极致。导出就是把数组转成 JSON 字符串下载导入就是读文件、解析 JSON、合并到现有数据。// 导出 function exportBookmarks(list) { const blob new Blob([JSON.stringify(list, null, 2)], { type: application/json }); const url URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download bookmarks.json; a.click(); URL.revokeObjectURL(url); }注意JSON.stringify的第三个参数2它让输出的 JSON 带缩进人看着舒服。这种小细节就是“能用”和“好用”的区别。5. 常见问题与排查技巧实录5.1 工具类问题速查问题现象可能原因排查方向插件装了没反应未重启编辑器完全退出编辑器再打开登录一直失败账号或网络问题检查账号状态换个时间重试命令行工具报版本错运行时版本不匹配确认 Node 等运行时版本AI 回答答非所问提示词太模糊补充技术栈、功能、约束生成的代码跑不起来缺少依赖或环境差异看控制台报错逐条解决这张表是我自己遇到问题后整理的基本覆盖了八成以上的常见故障。遇到问题先查表能省不少时间。5.2 JSON 相关的坑新手最容易栽的地方JSON 报错是最高频的问题之一。我总结了三类语法错误、类型错误、编码错误。语法错误最常见就是括号不匹配、逗号多余、引号用错。这类错误排查方法很简单把 JSON 贴到在线校验工具里它会直接告诉你第几行第几列出问题。类型错误是指你把该是字符串的值写成了数字或者该是数组的写成了对象。这类错误不会报语法错但程序逻辑会出问题。排查方法是仔细对照你的数据结构定义。编码错误相对少见但很坑。比如文件保存时用了错误的编码格式导致中文变成乱码。解决办法是统一用 UTF-8 编码保存。注意如果你从别处复制 JSON 配置一定要检查有没有隐藏的特殊字符。我遇到过从网页复制配置带进了不可见字符排查了半小时才发现。5.3 AI 改代码改坏了怎么办这是很多人担心的问题。我的应对策略是三条版本控制、小步验证、及时回滚。版本控制不用多复杂哪怕你只是每次改之前把文件复制一份加个日期后缀都比没有强。有 Git 的话更好改之前提交一次改坏了直接回滚。小步验证是指每让 AI 改一个地方你就运行一次确认没问题再改下一个。别攒一堆改动一起验证出了问题你都不知道是哪个改动导致的。及时回滚是心态问题。很多人改坏了不甘心非要在这个基础上修结果越修越乱。我的经验是如果一个改动超过十分钟还没修好直接回滚重来往往更快。5.4 性能与体验的取舍做小项目最容易犯的错是过度优化。我见过有人做个书签管理非要用虚拟列表、要做防抖节流、要上状态管理库。这些技术本身没错但用在这里就是杀鸡用牛刀。我的原则是先让它跑起来等真的卡了再优化。书签数量在一千条以内直接渲染完全没问题。等你的数据量真的到了性能瓶颈再针对性优化那时候你也更清楚瓶颈在哪。6. 我踩过的坑和几条实在建议先说几个我实际踩过的坑。第一个坑是提示词写得太随意生成一堆不能用的代码浪费了大量时间在改代码上。后来我学乖了每次提需求前先花两分钟把提示词写清楚反而整体效率高了很多。第二个坑是过度依赖 AI。有段时间我什么代码都让 AI 写结果自己对代码的理解越来越浅出了 bug 完全不知道怎么排查。后来我调整了策略核心逻辑自己写重复性代码让 AI 写AI 生成的代码必须读懂再用。第三个坑是忽略数据安全。早期我做项目不重视数据备份有一次误操作把 localStorage 清了数据全没了。从那以后凡是涉及数据的功能我都会加导出备份。最后分享一个我觉得特别有用的小技巧把 AI 当成一个知识渊博但需要明确指令的同事。你不能指望它读心你得把需求、约束、期望结果都说清楚。你越会提问它越好用。这个能力本身就是当前这个阶段最值钱的技能之一。这套流程我反复用过很多次从装工具到做出能用的东西熟练之后一个下午就能走完。关键不在于工具多先进而在于你有没有把每个环节的细节吃透。工具会一直更新但“想清楚需求、拆解成步骤、小步验证、及时回滚”这套方法论放到哪个工具上都成立。