GPT-6+Codex实战：从零搭建可运行网站全流程

1. 从零到一：为什么我决定用 GPT-6 搭一个真实可用的网站

GPT-6 发布那天，我盯着更新日志看了很久。作为一个写了十几年代码、也带过不少新人的老博主，我对“新模型发布”这件事早就脱敏了——参数涨了多少、榜单刷了多高，这些跟我日常干活的关系其实没那么大。真正让我坐不住的是这次 Codex 和 Skill 体系的打通：模型不再只是“你问我答”，而是能直接读项目、改文件、跑命令、调插件，把一整条开发链路串起来。换句话说，以前你得在编辑器、终端、浏览器之间来回切，现在一个对话窗口就能把大部分脏活累活干掉。

这篇东西不是官方文档的复读机，也不是那种“三步教你用 AI 改变世界”的爽文。我想干的事情很具体：从安装配置开始，一路走到做出一个真正能跑、能看、能用的网站，中间所有踩过的坑、绕过的弯、试出来的参数，我都摊开讲。适合谁看？如果你是会一点前端或者完全零基础但愿意动手的人，这篇能让你少走至少两天的弯路；如果你已经在用 Codex 或者类似工具，里面关于 Skill 编排、JSON 配置、插件选型的部分应该也能给你一些新思路。

先说清楚一个前提：GPT-6 本身是个模型，它不会凭空帮你把网站部署上线。真正让它“能用”的，是围绕它建立起来的那套工具链——Codex 负责代码生成与修改，Skill 负责把重复流程固化下来，插件负责补齐模型本身不擅长的领域（比如画电路图、处理特定格式文件），JSON 则是这些组件之间沟通的通用语言。把这四样东西的关系理清楚，后面操作起来才不会晕。

我自己的环境是 macOS，但下面涉及的步骤在 Windows 和 Linux 上基本通用，遇到平台差异我会单独标出来。整个流程我前前后后重装了三次，第一次卡在环境变量，第二次卡在 Skill 加载顺序，第三次才把网站完整跑通。这些教训我都会写进去，你照着做的时候可以跳过那些坑。

2. 安装与配置：把 GPT-6 和 Codex 装进你的工作流

2.1 安装前的环境检查与依赖梳理

很多人一上来就急着下载安装包，结果装到一半报错才发现系统缺东西。我建议你先花五分钟做一轮检查，后面能省下大量排查时间。GPT-6 相关的工具链目前主要依赖 Node.js 运行时和 Python 环境，因为 Codex 的很多 Skill 是用 JavaScript 或 Python 写的，插件体系也大量使用 npm 包管理。

你需要确认的东西不多，但每一样都别跳过：

• Node.js 版本：建议 20.x LTS 或更高。我试过 18.x，部分 Skill 加载时会报ERR_REQUIRE_ESM，升级到 20 之后问题消失。用node -v查看，如果版本太低，去官网下 LTS 包覆盖安装即可。
• Python 版本：3.10 以上。有些 Skill 涉及数据处理或调用本地模型，依赖较新的语法特性。用python3 --version确认。
• 包管理器：npm 随 Node 自带，但如果你习惯 pnpm 或 yarn，也可以，只是部分 Skill 的安装脚本默认调 npm，混用可能出小问题。我统一用 npm，省心。
• 磁盘空间：至少留 5GB。模型缓存、依赖包、项目文件加起来比你想的占地方。
• 网络环境：安装过程需要拉取依赖，确保网络稳定。如果公司网络有代理限制，提前配好 npm 的 registry 或者用镜像源。

提示：不要用系统自带的旧版 Node。macOS 上通过 brew 装的 Node 有时候版本管理混乱，建议用 nvm 统一管理，切换版本方便，出问题也好回滚。

检查完这些，你就可以开始正式安装了。我下面给的命令都是经过实测的，但如果你遇到报错，先别慌，大概率是版本或权限问题，对照后面的排查章节处理。

2.2 Codex 安装的完整步骤与参数说明

Codex 的安装方式有好几种，官方推荐的是通过 npm 全局安装。我试过直接下安装包和用 npm，最后发现 npm 方式最干净，升级也方便。具体命令如下：

npm install -g @openai/codex-cli

装完之后用codex --version验证。如果提示命令找不到，说明全局 bin 目录没在 PATH 里。macOS 和 Linux 下通常是/usr/local/bin或~/.npm-global/bin，Windows 下是%APPDATA%\npm。你可以用npm config get prefix看全局路径，然后手动加进环境变量。

接下来是初始化配置。Codex 第一次运行会引导你登录并生成配置文件，默认放在~/.codex/config.json。这个 JSON 文件非常关键，后面 Skill 和插件的加载都靠它。我贴一个我实际在用的配置结构，你可以对照修改：

{ "model": "gpt-6", "apiKey": "你的密钥", "workspace": "/Users/yourname/projects", "skills": { "enabled": true, "path": "./skills", "autoLoad": ["web-builder", "json-helper"] }, "plugins": { "registry": "https://registry.example.com", "installed": ["figma-helper", "json-viewer"] }, "codex": { "endpoint": "/responses", "timeout": 30000, "retry": 2 } }

这里有几个参数我要单独解释，因为很多人配错了导致后面 Skill 加载失败：

• workspace：Codex 默认操作的项目根目录。一定要设成你实际放代码的文件夹，否则它读写文件时会跑到奇怪的地方。
• skills.path：Skill 存放路径，支持相对和绝对路径。我建议用绝对路径，避免因为工作目录变化导致找不到。
• autoLoad：启动时自动加载的 Skill 列表。不要贪多，先加载一两个核心的，跑通了再加。
• codex.endpoint：这个对应热搜里提到的/responses端点。如果你遇到local proxy failed while handling codex endpoint /responses这类报错，八成是这个地址配错了，或者本地代理没起来。后面排查章节会细说。
• timeout 和 retry：网络不稳的时候把 timeout 调大、retry 设成 2 到 3，能显著减少中断。

注意：apiKey 不要直接提交到 Git 仓库。我习惯用环境变量注入，配置文件里写"apiKey": "${CODEX_API_KEY}"，然后在 shell 里 export。这样即使配置文件泄露也不至于出大事。

2.3 Skill 体系入门：从“skill 怎么用”到写出第一个自定义 Skill

Skill 是这套体系里最容易被低估、也最能提升效率的部分。简单说，Skill 就是一段可复用的指令加逻辑封装，你告诉 Codex“以后遇到这类任务就按这个流程走”，它就会自动执行。热搜里出现的codex skill、agent skill、skill 插件、skill 怎么用，本质上都是在问同一件事：这东西到底怎么落地。

我拿一个最实用的场景举例：每次新建网站项目，都要创建目录结构、初始化 package.json、配好基础 HTML 和 CSS。这些动作重复且无聊，完全可以固化成一个 Skill。下面是我写的web-builderSkill 的核心逻辑（用 JavaScript 描述，实际可以是任意 Codex 支持的格式）：

export default { name: "web-builder", description: "快速搭建静态网站项目骨架", triggers: ["新建网站", "create website", "初始化项目"], async run(context) { const { projectName, workspace } = context; const target = `${workspace}/${projectName}`; await context.fs.mkdir(target, { recursive: true }); await context.fs.writeFile(`${target}/index.html`, baseHtml); await context.fs.writeFile(`${target}/style.css`, baseCss); await context.fs.writeFile(`${target}/package.json`, basePkg); return `项目 ${projectName} 已创建于 ${target}`; } };

写好之后放进skills目录，在 config.json 的 autoLoad 里加上名字，重启 Codex 就能用。你只需要说一句“帮我新建一个叫 my-site 的网站”，它就会把骨架搭好。

这里有个经验：Skill 的 triggers 不要写得太宽泛。我一开始把 trigger 设成“网站”，结果每次聊到网站相关话题它都触发，烦得不行。后来改成“新建网站”“初始化项目”这种明确动作词，准确率高了很多。另外，Skill 之间可以互相调用，比如web-builder可以调用json-helper来生成配置文件，这种组合玩法后面做完整网站时会用到。

2.4 插件选型：哪些插件值得装，哪些是坑

插件和 Skill 的区别在于，Skill 是你自己写的流程，插件通常是别人做好的功能扩展。热搜里提到的figma 汉化插件、vscode 插件、idea 插件开发、blender 插件下载，说明大家对插件生态很关注。但在 GPT-6 + Codex 这套体系里，插件要精挑细选，装多了反而拖慢启动、增加冲突概率。

我实际装且觉得有用的插件就三个：

json-viewer几乎是必装的，因为整套体系的配置文件全是 JSON，没有可视化工具很容易改错。热搜里json 用什么打开、json 查询函数、json 格式这些问题，装了这个插件基本就解决了。figma-helper适合有设计稿的情况，能省去手动量尺寸的功夫。web-preview让你不用切到浏览器就能看效果，调试时很顺手。

至于那些名字花哨的插件，比如热搜里出现的各种“去水印”“音乐源”类插件，跟建站没关系，别装。插件装多了最直接的后果是 Codex 启动变慢，而且插件之间可能抢同一个触发词，导致行为不可预测。我的原则是：装之前先问自己，这个功能我一周内会用超过三次吗？不会就不装。

3. 核心实操：用 GPT-6 做出一个能用的网站

3.1 项目需求拆解与整体设计思路

我给自己定的目标是做一个个人作品展示站，包含首页、项目列表、详情页三个页面，有响应式布局，能本地跑起来，代码结构清晰方便后续改。为什么选这个？因为它足够典型——涉及 HTML 结构、CSS 样式、少量 JavaScript 交互，又不至于复杂到需要后端和数据库。对新手来说，这是检验工具链是否跑通的最佳练手项目。

整体设计思路是这样的：先让 Codex 根据我的描述生成项目骨架，然后用 Skill 批量处理重复的页面结构，接着用插件预览效果，最后根据预览结果迭代修改。整个过程我不需要手写大量代码，但关键决策必须自己把控——比如页面结构怎么分、样式用什么方案、交互逻辑放哪里。模型再强，它也不知道你心里想要什么风格，你得把需求说清楚。

这里有个很多人忽略的点：给 Codex 的指令要具体到可执行。不要说“帮我做个好看的网站”，而要说“做一个三页面的作品展示站，首页有导航栏和项目卡片网格，卡片点击进入详情页，配色用深色背景加亮色强调，字体用系统默认无衬线”。后者模型能直接落地，前者它只能猜，猜出来的东西大概率要返工。

3.2 用 Codex 生成项目骨架的完整对话流程

我实际的操作是这样的。打开 Codex，确认工作目录正确，然后输入第一段指令：

在当前工作目录下新建一个名为 portfolio 的项目，包含 index.html、projects.html、detail.html 三个页面，以及一个共享的 style.css 和一个 main.js。首页要有顶部导航、hero 区域、项目卡片网格。先只生成结构和基础样式，不要加复杂交互。

Codex 会调用web-builderSkill（如果你配了的话），几秒钟后目录就出来了。我检查了一下，结构没问题，但样式比较简陋。这时候不要急着让它重写，而是分步迭代。第二步我让它优化首页：

把首页的 hero 区域改成深色背景，标题用大号字体，下面加一句副标题。项目卡片网格改成三列布局，小屏幕自动变一列。卡片要有圆角和轻微阴影。

这一步它会修改 style.css 和 index.html。改完之后我用web-preview插件起本地服务看效果。这里有个细节：每次修改后都要预览，不要攒一堆改动再看，否则出了问题你不知道是哪一步引入的。

第三步处理项目列表页和详情页。因为结构类似，我直接说：

参照首页的卡片样式，把 projects.html 做成完整的项目列表，每个项目有缩略图、标题、简介。detail.html 做成单个项目的详情展示，包含大图、描述、返回按钮。

到这一步，三个页面基本成型。整个过程大概花了二十分钟，其中大部分时间是我在描述需求和检查效果，真正等模型生成的时间很短。

3.3 JSON 配置在项目中的实际应用

热搜里json 数组、json 转换、json 文件、spark 中读取 json这些词出现频率很高，说明 JSON 是很多人的痛点。在这个项目里，JSON 主要用在两个地方：一是 Codex 自身的配置文件，二是项目数据。

我把项目列表的数据抽成了一个projects.json，这样以后加项目不用改 HTML：

{ "projects": [ { "id": "p1", "title": "智能家居控制面板", "summary": "基于 Web 的设备管理界面", "image": "assets/p1.jpg", "tags": ["前端", "物联网"] }, { "id": "p2", "title": "数据可视化仪表盘", "summary": "实时展示业务指标", "image": "assets/p2.jpg", "tags": ["可视化", "数据分析"] } ] }

然后在 main.js 里读取这个文件，动态渲染卡片。这样做的好处是数据和结构分离，改内容不用碰 HTML。Codex 生成这段读取逻辑时，我特意让它加了错误处理——如果 JSON 格式不对或者文件缺失，页面要显示友好提示而不是白屏。

提示：JSON 对格式极其严格，多一个逗号、少一个引号都会解析失败。我建议用json-viewer插件边写边校验，或者写完用在线工具过一遍。热搜里问json 查询函数的，其实在 JavaScript 里就是JSON.parse()和JSON.stringify()两个方法，配合数组的filter、map就能满足大部分需求。

3.4 本地运行与效果验证

代码写完之后，用web-preview插件或者直接npx serve起一个本地服务。我习惯用后者，命令简单：

npx serve portfolio

然后在浏览器打开提示的地址，通常是http://localhost:3000。检查几个关键点：导航能不能跳转、卡片布局在不同窗口宽度下是否正常、详情页能不能正确显示对应项目、控制台有没有报错。

我第一次跑的时候详情页一直显示第一个项目，排查发现是 URL 参数读取逻辑写错了。把问题描述给 Codex，它很快就定位到URLSearchParams那行，改完就好了。这就是迭代的价值——不要指望一次生成完美代码，而是建立快速反馈循环。

验证通过后，这个网站就算“能用”了。你可以继续加功能，比如暗色模式切换、项目筛选、联系表单，每加一个都用同样的流程：描述需求、生成、预览、修正。

4. 常见问题与排查技巧实录

4.1 Codex 端点报错与代理问题排查

热搜里有一条很具体的报错：cc switch local proxy failed while handling codex endpoint /responses。这个我遇到过，原因是 Codex 配置里的 endpoint 地址和实际服务不匹配，或者本地代理进程没启动。排查顺序是这样的：

先确认 config.json 里的codex.endpoint是不是/responses，注意前面有没有多余的斜杠或者拼写错误。然后检查本地是否有服务在监听对应端口，用lsof -i :端口号查看。如果代理没起来，重启 Codex 通常能解决。如果还不行，把 timeout 调大到 60000，有些网络环境下首次请求握手较慢，超时会导致这个报错。

还有一个容易忽略的点：多个工具同时占用同一个端口。比如你之前跑过别的本地服务没关干净，新服务起不来。换个端口或者杀掉旧进程即可。

4.2 Skill 加载失败与顺序冲突

Skill 加载失败最常见的表现是：你说了触发词，Codex 没反应，或者报“skill not found”。原因通常有三个：路径配错、文件名和 config 里写的不一致、Skill 之间有依赖但加载顺序不对。

我的排查清单：

我踩过最坑的一次是两个 Skill 都监听了“生成”这个词，结果互相抢执行权，行为完全乱套。后来给每个 Skill 的 triggers 加上领域限定词，问题就没了。Skill 不是越多越好，精而准才是王道。

4.3 JSON 解析错误的快速定位方法

JSON 报错信息通常很具体，会告诉你第几行第几个字符有问题。但如果你面对的是一个几百行的配置文件，光看行号也头疼。我的做法是：先用json-viewer插件打开，它会直接标红错误位置；如果没有插件，用命令行工具jq校验：

jq . config.json

如果格式正确，它会格式化输出；如果有错，会提示具体位置。常见错误就三类：多余的逗号、用了单引号、注释没删干净。JSON 标准不支持注释，很多人从 JavaScript 对象直接复制过来就报错，记得把//开头的行删掉。

4.4 插件冲突与性能问题的处理经验

插件装多了之后，Codex 启动时间从两秒变成十几秒，而且偶尔卡死。我逐个禁用排查，发现是某个预览类插件和另一个格式化插件抢资源。解决办法很简单：只保留当前项目必需的插件，做完这个项目再换回来。

另外，插件版本也要注意。有些插件更新后和当前 Codex 版本不兼容，表现是功能失效或者报奇怪的错。遇到这种情况，回退到上一个稳定版本通常能解决。我现在的习惯是，插件能用就不随便升级，等社区反馈稳定了再动。

5. 一些让我少走弯路的实操心得

先说一个关于指令的体会。我一开始总想把所有需求一次性说完，结果模型顾此失彼，生成的东西哪哪都不对。后来改成小步快跑：一次只提一个明确改动，生成后立刻预览，确认没问题再进行下一步。这样虽然对话轮次多了，但返工率大幅下降，总体反而更快。

再就是关于 Skill 的积累。不要等“有空了再整理”，而是在每次做完一个重复动作后就顺手封装成 Skill。我现在有十几个自用 Skill，覆盖建站、数据处理、文件整理等场景，每次新项目启动能省下大量重复劳动。Skill 写多了你会发现，真正难的不是写代码，而是把流程想清楚——你得先知道自己每一步在干什么，才能把它固化下来。

最后分享一个关于 JSON 的小技巧。如果你经常需要手动改配置文件，装一个支持 JSON Schema 的编辑器插件，它能根据你定义的结构自动补全和校验，比裸写靠谱得多。热搜里那些关于 JSON 的问题，本质上都是工具没选对。工具对了，JSON 一点都不难。

这个网站做完之后，我又用同样的流程加了几个页面，整个过程越来越顺。工具链的价值不在于它替你写了多少代码，而在于它让你能把精力集中在真正需要判断的地方——结构怎么设计、体验怎么优化、内容怎么组织。这些才是做出一个“能用”的网站的关键。