1. 从标题拆解到落地路径这个项目到底在做什么“GPT-6 来了教你从安装到做出一个能用的网站实操案例”这个标题乍一看像是蹭热点的标题党但拆开来看它其实指向了一条非常具体的技术链路用新一代大模型能力配合 Codex 这类代码智能体从零把一个可访问、可交互的网站做出来。核心关键词里出现的 GPT-6、Codex、Skill、插件、JSON基本勾勒出了这条链路的全貌——模型负责理解与生成Codex 负责把自然语言转成可执行代码Skill 负责把重复性任务封装成可复用能力插件负责扩展工具边界JSON 负责数据交换与配置。我先把结论放前面这套流程真正有价值的地方不是“GPT-6”这个名字本身而是它背后代表的智能体驱动开发范式。过去做一个网站你得先学 HTML、CSS、JavaScript再学框架、部署、域名解析门槛不低。现在你只要能把需求描述清楚把数据结构用 JSON 定义好剩下的代码生成、调试、部署很大一部分可以交给 Codex 这类工具去完成。这不是说人不用懂技术了而是说人的角色从“写代码的人”变成了“定义问题的人”。适合谁来参考这篇内容三类人最合适。第一类是有一点编程基础但没做过完整项目的开发者想借这个机会跑通一个端到端的案例第二类是完全不懂代码但逻辑清晰的运营、产品、设计岗想自己动手做一个展示页或工具站第三类是老手想看看新一代工具链到底能省多少事值不值得纳入自己的工作流。不管你是哪一类下面的内容都会从安装配置讲到最终上线每一步都给出可复现的操作和踩坑提示。需要提前说明的是文中涉及的具体模型版本、工具名称我会基于当前常见的实践来写如果你手上的版本有差异按同样的逻辑调整即可。核心方法论是不变的定义需求 → 准备环境 → 生成代码 → 调试修复 → 部署上线。2. 环境准备Codex 安装与基础配置全流程2.1 为什么选 Codex 而不是纯聊天式生成很多人第一反应是我直接开个对话框让模型写代码不就行了为什么还要装 Codex这里面的差别很大。纯聊天式生成的问题是上下文容易断你让它写一个页面它给你一段 HTML你再让它加个交互它可能忘了前面的结构来回粘贴几次就乱了。Codex 这类代码智能体的核心优势在于它能直接读写你本地的项目文件它知道你的目录结构、知道你已经写了什么、知道你引用了哪些依赖生成的代码能直接落到文件里而不是让你手动复制粘贴。另一个关键点是可迭代性。网站开发不是一次生成就完事的你需要不断调整样式、修 bug、加功能。Codex 能记住项目上下文你让它改一个按钮颜色它不会把整个页面重写一遍。这种“增量修改”的能力是纯对话式工具给不了的。所以如果你是真想做出一个能用的网站而不是玩一玩装 Codex 是值得的。2.2 安装前的环境检查清单在动手装之前先确认你的机器满足基本条件。我踩过的坑里有一半是因为环境没准备好装到一半报错回头排查浪费大量时间。下面这张表是我整理的最低要求和推荐配置项目最低要求推荐配置说明操作系统Windows 10 / macOS 12 / 主流 LinuxWindows 11 / macOS 14版本太老可能缺依赖内存8GB16GB 以上模型调用本身不吃内存但本地开发服务器和编辑器吃磁盘空间5GB 可用20GB 可用依赖包和缓存会占空间Node.js18.x20.x LTS前端项目几乎都依赖它包管理器npm 9pnpm 或 yarnpnpm 装依赖更快、更省空间网络能正常访问包仓库稳定的宽带装依赖时断网是最常见的失败原因检查 Node.js 版本很简单打开终端输入node -v npm -v如果版本低于 18建议先去 Node.js 官网下载 LTS 版本覆盖安装。这里有个细节不要用系统自带的包管理器装 Node比如某些 Linux 发行版自带的版本往往很旧后面装依赖会各种报错。直接去官网下安装包或者用 nvm 这类版本管理工具省心得多。2.3 Codex 安装的两种路径与选择逻辑Codex 的安装通常有两种方式一种是作为编辑器插件安装比如在 VS Code 或 WebStorm 里装扩展另一种是作为独立的命令行工具安装。这两种方式各有适用场景我建议两个都装因为它们互补。插件方式的优势是和编辑器深度集成你在写代码的时候它能实时看到你打开的文件你选中一段代码让它解释或修改响应非常快。适合日常开发中的小修小改。命令行方式的优势是能处理跨文件的大任务比如“帮我把整个项目的所有按钮样式统一改成圆角”这种需求插件处理起来会力不从心命令行工具能扫描整个项目目录一次性完成。插件安装的步骤以 VS Code 为例打开扩展面板搜索对应的 Codex 扩展点击安装然后按提示登录授权。这里要注意授权时用的账号要和你在网页端用的是同一个否则可能出现额度不同步的问题。安装完成后编辑器侧边栏会出现一个对话面板这就是你的操作入口。命令行工具的安装通常是通过包管理器npm install -g codex/cli装完之后输入codex --version验证。如果提示命令找不到大概率是全局安装路径没加到环境变量里。Windows 上这种情况比较多解决办法是找到 npm 的全局目录用npm config get prefix查把它加到系统 PATH 里重启终端即可。提示安装过程中如果遇到权限报错Windows 上尝试用管理员身份打开终端macOS 和 Linux 上在命令前加 sudo。但不要养成所有命令都加 sudo 的习惯容易把文件权限搞乱。2.4 首次配置把模型和工具接起来装好之后第一次运行通常需要配置模型接入。这一步是很多人卡住的地方。配置的核心是三个东西接口地址、密钥、模型名称。这三个信息一般在你使用的服务商后台都能找到。配置文件通常是一个 JSON 文件放在用户目录下的隐藏文件夹里。用 JSON 来存配置是有道理的——结构清晰、易于程序解析、方便版本管理。一个典型的配置长这样{ provider: default, apiKey: 你的密钥, baseUrl: 接口地址, model: 模型名称, maxTokens: 4096, temperature: 0.7 }这里重点说两个参数。temperature控制生成的随机性做代码生成建议设在 0.2 到 0.5 之间太高了代码会飘太低了大同小异没惊喜。maxTokens控制单次生成的最大长度做网站项目建议设大一点4096 起步否则生成到一半被截断还得手动拼接很烦。配置改完记得重启工具很多配置是启动时加载的不重启不生效。验证配置是否成功最简单的办法是问它一个简单问题比如“用一句话解释什么是 JSON”能正常回复就说明通了。3. 核心概念拆解Skill、插件与 JSON 到底怎么配合3.1 Skill 是什么为什么它比提示词更值钱Skill 这个词最近很热但很多人没搞明白它和普通提示词的区别。打个比方提示词是你每次点菜时跟厨师口头描述想吃什么Skill 是你把常点的菜写成一张标准菜单以后直接报菜名就行。Skill 的本质是把一套经过验证的操作流程固化下来变成可复用、可分享的能力单元。在网站开发场景里Skill 能帮你做什么举个例子你每次新建一个页面都要做这几件事创建 HTML 文件、引入样式表、写好基础结构、加上响应式 meta 标签。这套动作重复十次就是浪费十次时间。你可以把它写成一个 Skill下次直接说“用标准页面模板创建一个关于页”它就把这一整套动作一次性完成。Skill 的载体通常是一个结构化的文件里面定义了触发条件、执行步骤、输入输出格式。用 JSON 来描述 Skill 是很常见的做法因为 JSON 天然适合表达结构化的指令。一个简化的 Skill 定义大概是这样{ name: create-page, description: 创建一个标准页面, trigger: 创建页面, steps: [ 生成 HTML 基础结构, 引入全局样式, 添加响应式配置 ], output: 页面文件路径 }这里的关键在于trigger字段它决定了你用什么话能唤起这个 Skill。写得越自然越好别搞成机器指令否则你自己都记不住。3.2 插件生态别重复造轮子插件的作用是扩展工具的原生能力。Codex 本身能读写文件、能执行命令但它不一定能直接操作数据库、不一定能调用某个特定平台的接口。这时候插件就派上用场了。热词里出现的“Figma 汉化插件”“VS Code 插件”“WebStorm 插件”其实指向同一个逻辑每个工具都有自己的插件体系插件让工具从通用变专用。做网站项目时我常用的插件类型有这么几类代码格式化插件保证团队风格统一、实时预览插件改完立刻看效果、接口调试插件测试后端接口、资源压缩插件上线前优化体积。选插件有个原则优先选维护活跃、下载量高、最近有更新的。一个两年没更新的插件很可能和新版本的工具不兼容装上去反而添乱。装之前看一眼更新日志和 issue 区能避开不少坑。3.3 JSON被低估的“万能胶水”JSON 在这套流程里的地位被严重低估了。很多人觉得它就是个数据格式没什么好讲的。但实际上JSON 是整个工具链的通用语言。配置文件是 JSONSkill 定义是 JSON前后端数据交换是 JSON甚至很多插件的参数也是 JSON。为什么是 JSON 而不是别的格式因为它同时满足三个条件人看得懂、机器好解析、跨语言通用。XML 太啰嗦YAML 缩进容易出错二进制格式人看不懂。JSON 刚好卡在中间那个甜点上。做网站时JSON 最常见的用途是模拟数据。前端页面还没接后端的时候你可以先写一个 JSON 文件放假数据页面照样能跑起来。等后端好了把请求地址一换就行。这种“前后端分离开发”的模式能让你在等待后端的时间里不闲着。一个典型的模拟数据文件长这样{ articles: [ { id: 1, title: 第一篇文章, summary: 这是摘要, date: 2026-01-01 } ] }写 JSON 有个铁律最后一个元素后面不能有逗号。这个错误极其常见而且报错信息往往不直观新手经常在这里卡半天。用编辑器的时候装个 JSON 校验插件能实时标红省很多事。4. 实操从零做出一个能用的网站4.1 需求定义先想清楚做什么再动手我见过太多人一上来就让模型“帮我做个网站”结果生成出来的东西四不像。问题不在模型在于需求太模糊。模型不是读心术你描述得越具体产出越接近你想要的东西。我的做法是先写一份“需求卡片”用最朴素的语言回答四个问题这个网站给谁看他们来干什么需要几个页面每个页面放什么内容比如我要做一个个人作品展示站需求卡片就是给潜在客户看他们来了解我的能力和作品需要首页、作品列表页、关于页三个页面首页放简介和精选作品列表页放全部作品关于页放联系方式和经历。这份卡片不需要多正式写在便签里都行但一定要写。写的过程就是逼自己把模糊想法变清晰的过程。写完之后把这份卡片直接丢给 Codex让它基于这个生成项目结构效果比空口描述好十倍。4.2 项目初始化让工具帮你搭骨架需求明确后第一步是初始化项目。这一步不用自己手动建文件夹、写配置文件直接让 Codex 来做。你可以这样下指令“基于我的需求卡片初始化一个静态网站项目用原生 HTML、CSS、JavaScript不要用框架目录结构要清晰。”它会帮你生成类似这样的结构my-site/ ├── index.html ├── works.html ├── about.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── data/ └── works.json这里我特意让它把作品数据单独放在data/works.json里而不是硬编码在 HTML 中。这样做的好处是数据和展示分离以后加作品只需要改 JSON 文件不用动页面代码。这是很多新手容易忽略的点一开始图省事把数据写死在页面里后面维护起来痛苦不堪。初始化完成后先别急着改代码先在本地跑起来看看。用编辑器自带的预览功能或者起一个简单的本地服务器npx serve .浏览器打开提示的地址能看到页面就说明骨架没问题。这一步很重要先确认基础环境通了再往上加东西出问题容易定位。4.3 页面开发一个页面一个页面啃骨架有了接下来是填充内容。我的习惯是先做首页做完一个完整的再做下一个而不是所有页面同时开工。因为第一个页面会暴露很多问题——样式怎么组织、数据怎么读取、交互怎么写——这些问题解决了后面的页面就是复制粘贴加微调。首页开发时我会让 Codex 先写 HTML 结构再写 CSS 样式最后加 JavaScript 交互。分三步走的原因是每一步都能单独验证。结构写完先看内容对不对样式写完看排版顺不顺眼交互写完看点击有没有反应。如果一次性全生成出了问题你不知道是哪一层的问题。读取 JSON 数据这块用原生的 fetch 就够了fetch(./data/works.json) .then(response response.json()) .then(data { // 把数据渲染到页面上 renderWorks(data.works); }) .catch(error console.error(加载失败:, error));这里有个坑要提醒用 fetch 读本地文件时必须通过服务器访问直接双击打开 HTML 文件会报跨域错误。这就是为什么前面要起本地服务器。很多人卡在这里以为是代码写错了其实是打开方式不对。4.4 样式打磨让页面从“能用”到“好看”功能跑通之后就到了最考验审美的环节——调样式。这一步模型能帮的忙有限因为“好看”是很主观的东西。但有一些通用的原则可以让页面立刻上一个档次。第一是留白。新手做的页面往往元素挤在一起看着就累。给内容周围留出足够的空间呼吸感马上就出来了。第二是层级。标题要大、正文要适中、辅助信息要小通过字号和颜色深浅拉开层次。第三是一致性。按钮的圆角、间距、颜色全站统一不要这个页面圆角那个页面直角。我通常会让 Codex 先给一套基础样式然后自己在这个基础上微调。调的时候用浏览器的开发者工具实时改改到满意了再把值抄回 CSS 文件。这个“先在浏览器里试再写回代码”的流程比反复改代码刷新页面快得多。4.5 部署上线让别人也能访问本地跑通了最后一步是部署让这个网站有个公开地址。静态网站的部署现在非常简单有好几个平台提供免费托管。基本流程是把代码传到代码托管平台然后在托管服务里关联这个仓库它会自动构建并分配一个地址。部署前有几个检查项所有资源路径要用相对路径别用本地绝对路径否则线上找不到文件图片要压缩不然加载慢控制台不能有报错有报错先修完再部署。这几项检查完部署上去基本就能正常访问了。部署完成后用手机也打开看看。移动端适配是很多人的盲区电脑上看着好好的手机上排版全乱。如果发现移动端有问题回去补上响应式样式主要就是媒体查询那几行代码的事。5. 常见问题与排查技巧实录5.1 安装与配置阶段的典型故障这个阶段的问题最集中我整理了一张速查表现象可能原因解决办法命令找不到全局路径没进环境变量查 npm 全局目录手动加 PATH授权失败账号不一致或网络问题确认账号统一检查网络连接配置不生效没重启工具改完配置重启一次模型无响应密钥错误或额度用尽核对密钥查看用量生成被截断maxTokens 设太小调大到 4096 以上这里重点说“生成被截断”这个问题。表现是代码写到一半突然停了或者结尾莫名其妙。很多人以为是模型能力问题其实是输出长度限制。代码这种内容很占 token一个完整的页面动辄上千 token限制设小了自然写不完。解决办法就是把上限调大或者让它分文件生成。5.2 开发过程中的高频报错开发阶段最常见的报错有三类。第一类是语法错误比如少个括号、多个逗号。这类错误编辑器一般会标红跟着提示改就行。第二类是路径错误文件明明在就是加载不到。这时候检查路径大小写有些系统区分大小写Style.css和style.css是两个文件。第三类是跨域错误前面提过用服务器打开就能解决。还有一类比较隐蔽的是缓存问题。你明明改了代码页面还是旧的。这时候强制刷新CtrlShiftR 或 CmdShiftR一下或者清一下浏览器缓存。开发时建议开着开发者工具的“禁用缓存”选项省得反复手动清。5.3 让模型输出更靠谱的几个技巧用久了会发现同样的工具不同人用出来的效果差很多。差别就在提问的方式。我总结了几个实用技巧。第一给例子比给描述管用。你说“做个好看的按钮”不如说“做个像某某网站那样的按钮”或者直接贴一段你喜欢的代码让它参考。第二分步骤下指令。一次让它做太多事它容易顾此失彼。拆成小步骤一步一验证。第三让它先解释再动手。对于复杂改动先让它说说打算怎么做你觉得思路对了再让它执行能避免很多返工。第四也是最重要的一点别完全信任它的输出。模型生成的代码可能有安全漏洞、可能有性能问题、可能用了过时的写法。你要做的是理解它在写什么而不是无脑接受。这也是为什么我一直强调用这类工具的前提是你得懂基本原理否则出了问题你连排查的方向都没有。5.4 关于“去 AI 味”的一点经验热词里有个“去 AI 味的 Skill”这个挺有意思。所谓 AI 味就是那种一看就是机器生成的痕迹——用词过于工整、结构过于对称、缺少个人化的表达。做网站时AI 味主要体现在文案和设计上。文案方面模型生成的文字往往很“正确”但很无聊。解决办法是自己改一遍把书面语改成口语把长句拆成短句加一点只有你会说的表达。设计方面模型倾向于用最安全的配色和布局结果就是千篇一律。解决办法是找一个你喜欢的参考站把它的配色和排版风格描述给模型让它照着那个感觉来。说到底工具是放大器放大的是你自己的判断力和审美。你脑子里有东西它帮你快速实现你脑子里没东西它给你的也就是个平庸的模板。6. 我在这套流程里踩过的坑和攒下的经验先说一个最实在的体会别追求一次做完美。我刚开始用这套流程时总想着一次性把需求描述得天衣无缝让模型一把生成到位。结果就是花大量时间在写需求上生成出来还是不满意。后来我想通了先出一个能跑的粗糙版本然后在这个版本上迭代效率反而高得多。因为看到实物之后你才知道自己真正想要什么这时候再改方向就准了。第二个体会是版本控制要趁早。哪怕你是一个人做也用 Git 管起来。每次让模型做大改动之前先提交一次。这样改坏了随时能回退心里有底敢放手让它改。我吃过亏有一次让它重构样式结果把整个布局搞乱了又没存旧版本只能从头再来。第三个是数据一定要和代码分开。前面提过 JSON 存数据这里再强调一遍。网站的内容是会变的代码是相对稳定的。把内容抽到 JSON 里改内容不用碰代码风险小很多。而且 JSON 文件可以交给不懂代码的人维护协作起来方便。最后一个经验是关于学习心态的。这类工具确实降低了做网站的门槛但降低的是“动手”的门槛不是“理解”的门槛。你可以不手写每一行代码但你得知道 HTML 是结构、CSS 是样式、JavaScript 是行为得知道数据从哪来到哪去。这些底层认知才是你用好工具的真正底气。工具会更新换代今天叫 Codex明天可能叫别的名字但底层的东西是不变的。把底层搞扎实换什么工具你都能快速上手。这套流程我前后跑过好几个项目从最简单的单页展示到带交互的小工具站都能走通。快的半天慢的两三天取决于你对需求的清晰程度和调试的耐心。如果你也想试试建议从一个特别小的项目开始比如就做一个个人简介页把整个流程走一遍比看十篇教程都管用。