1. 从零到一为什么我决定用 GPT-6 搭一个真实可用的网站GPT-6 发布那天我朋友圈里一半人在转发新闻另一半人在问“这玩意儿到底能干啥”。说实话我一开始也没太当回事——大模型迭代太快了每隔几个月就有一个“颠覆性”的版本出来但真正落到日常开发里能让我把活儿干完、干好的工具其实没几个。直到我花了一个周末用 GPT-6 配合 Codex 和几个 Skill 插件从安装环境到部署出一个能正常访问、有前后端交互、能查数据库的网站我才意识到这次确实不太一样。这篇文章不是那种“五分钟教你用 AI 改变世界”的爽文。我会把整个实操过程拆开包括我踩过的坑、选型时的纠结、参数怎么调、JSON 数据怎么组织、Skill 插件怎么装、Codex 怎么接入、网站怎么从一堆零散文件变成一个能跑起来的完整项目。如果你是一个有点编程基础但没怎么接触过 AI 辅助开发的开发者或者你已经在用 Cursor、VS Code 插件但总觉得“差点意思”那这篇内容应该能帮你省下不少试错时间。核心关键词我先摆出来GPT-6、Codex、Skill、插件、JSON。这五个词贯穿了整个流程——GPT-6 是大脑Codex 是手脚Skill 是工具箱插件是扩展接口JSON 是数据流转的通用语言。理解它们之间的关系比单纯学会某个命令重要得多。我搭建的这个网站功能不复杂一个电影资源展示页支持分类筛选、关键词搜索、详情弹窗数据从本地 JSON 文件读取前端用原生 HTMLCSSJS后端用 Node.js 写了一个极简的静态服务加 API 路由。选这个场景是因为它足够典型——有数据、有交互、有部署环节但又不会复杂到让初学者望而却步。下面我从环境准备开始一步步还原整个过程。2. 环境准备与工具选型别急着装 GPT-6先把地基打好2.1 硬件与系统的最低要求很多人一上来就问“GPT-6 怎么安装”但忽略了最基础的问题你的机器能不能跑得动。我实测下来如果你只是通过 API 调用 GPT-6 的能力那对本地硬件几乎没要求一台能跑浏览器的电脑就行。但如果你想用 Codex 做本地代码生成和补全或者跑一些 Skill 脚本那配置就不能太寒碜。我的开发机是 32GB 内存、RTX 4070 显卡、1TB SSD 的 Windows 11 台式机同时开 VS Code、浏览器、Node 服务和几个插件内存占用稳定在 18-22GB。如果你只有 16GB 内存建议把浏览器标签控制在 10 个以内否则 Codex 的响应会明显变慢。显卡方面Codex 的本地推理对显存有一定要求8GB 显存是起步线6GB 会频繁触发内存交换体验很差。系统层面Windows 10 22H2 及以上、macOS 13 以上、Ubuntu 22.04 以上都可以。我主力用 Windows但也在 MacBook Air M2 上跑过同样的流程除了 Codex 的本地补全速度稍慢之外其他环节基本一致。如果你用 Linux注意某些 Skill 插件的依赖库需要手动装后面会细说。提示不要为了跑 GPT-6 相关工具去租云服务器除非你需要 24 小时在线服务。本地开发用 API 调用模式完全够用成本更低调试也更方便。2.2 必装软件清单与安装顺序我把整个流程需要的软件分成三类基础运行时、AI 辅助工具、项目依赖。安装顺序很重要因为有些工具之间存在依赖关系。基础运行时Node.js 20 LTS 版本不要用 22某些 Skill 插件的原生模块还没适配Python 3.11Codex 的某些脚本依赖 Python 环境Git 2.40用于拉取插件仓库和版本管理AI 辅助工具VS Code 最新稳定版我试过 WebStorm但 Codex 插件在 VS Code 上的兼容性更好Codex 插件从 VS Code 扩展市场直接搜索安装GPT-6 API 密钥需要提前在对应平台申请这里不展开项目依赖一个轻量 HTTP 服务器我用的是serve也可以用http-serverJSON 格式化工具推荐 VS Code 自带的格式化功能或者jq命令行工具安装 Node.js 的时候有个细节Windows 用户务必勾选“Automatically install the necessary tools”选项否则后面装某些 npm 包时会报node-gyp相关的错误。Mac 用户如果用 Homebrew直接brew install node20就行但记得把node20的路径加到 PATH 里不然默认还是系统自带的旧版本。Python 环境我建议用venv建一个独立虚拟环境不要直接装在系统 Python 里。Codex 的某些 Skill 脚本会安装特定版本的依赖库污染全局环境后很难清理。命令很简单python -m venv gpt6-env # Windows gpt6-env\Scripts\activate # macOS/Linux source gpt6-env/bin/activate2.3 Codex 插件的安装与配置要点Codex 是我整个流程里用得最顺手的工具但它也是安装环节最容易出问题的。VS Code 扩展市场里搜“Codex”会出来好几个同名或相似名字的插件认准下载量最高、发布者认证的那个。安装完成后VS Code 左下角会出现一个 Codex 图标点击后需要登录并填入 API 密钥。这里有个坑Codex 默认走的是云端推理但如果你网络环境不稳定会出现“Codex endpoint /responses 处理失败”的报错。我的解决办法是在设置里把codex.localFallback设为true这样当云端请求超时它会自动切换到本地轻量模型做补全。虽然本地模型的代码质量不如云端但至少不会打断你的编码节奏。另一个常见问题是“Codex 无法加载组织设置”。这个通常是因为 API 密钥的权限配置不对或者账号没有加入对应的组织。如果你是自己个人使用在申请密钥时选择“个人开发者”类型不要选“组织成员”能避开大部分权限问题。配置完成后建议在 VS Code 的settings.json里加几行{ codex.autoSuggest: true, codex.suggestionDelay: 300, codex.maxTokens: 2048, codex.localFallback: true }suggestionDelay设为 300 毫秒是我反复测试后的经验值。设得太短你打字时补全弹窗会疯狂闪烁设得太长又感觉不到 AI 在帮你。2048 的 token 上限对于大多数函数级补全够用了设太高反而会让响应变慢。3. 核心细节解析Skill、插件与 JSON 数据流的协同逻辑3.1 Skill 到底是什么为什么它比插件更重要很多人把 Skill 和插件混为一谈其实两者定位完全不同。插件是宿主环境的扩展比如 VS Code 插件、浏览器插件它们依附于某个具体软件。而 Skill 是一段可复用的能力脚本它不依赖特定宿主可以在 Codex 里调用也可以在命令行里单独跑甚至可以嵌入到你的项目代码里作为工具函数。我这次用到的 Skill 主要有三类数据获取类、格式转换类、代码生成类。数据获取类的 Skill 负责从 JSON 文件或 API 接口拉取数据格式转换类的 Skill 把原始数据整理成前端需要的结构代码生成类的 Skill 根据数据结构和页面需求自动生成 HTML 模板和 JS 交互逻辑。举个例子我写了一个叫json-query的 Skill功能很简单传入一个 JSON 文件路径和一个查询表达式返回匹配的数据数组。这个 Skill 用 Python 写的核心逻辑不到 30 行但它在整个项目里被调用了十几次。前端搜索功能、分类筛选、详情页数据填充全都靠它。# json-query Skill 的核心逻辑 import json import sys def query_json(file_path, field, value): with open(file_path, r, encodingutf-8) as f: data json.load(f) if isinstance(data, list): return [item for item in data if str(item.get(field, )) str(value)] return [] if __name__ __main__: result query_json(sys.argv[1], sys.argv[2], sys.argv[3]) print(json.dumps(result, ensure_asciiFalse, indent2))这个 Skill 的好处是我可以在 Codex 的对话里直接说“帮我查一下 category 为‘科幻’的所有电影”Codex 会自动调用这个 Skill 并返回结果。不需要我手动打开 JSON 文件去翻也不需要写重复的查询代码。注意Skill 脚本的命名要规范建议用“动词-名词”的格式比如query-json、format-date、generate-html。这样在 Codex 里调用时语义清晰不容易搞混。3.2 插件生态的取舍不是装得越多越好VS Code 插件市场里跟 AI 辅助开发相关的插件至少有上百个但我实际留下来的只有四个Codex、JSON 格式化工具、Live Server、GitLens。其他像“AI 代码审查”“智能重构”之类的插件要么跟 Codex 功能重叠要么会拖慢编辑器响应速度。我踩过最大的坑是装了一个“全能 AI 编程助手”插件结果它跟 Codex 抢快捷键每次按 Tab 键补全的时候两个插件同时弹窗整个编辑器卡死。后来我把那个插件禁用只留 Codex世界立刻清净了。插件的选择原则很简单一个核心功能只留一个插件。代码补全用 CodexJSON 格式化用内置的本地预览用 Live Server版本管理用 GitLens。其他的除非有不可替代的功能否则一律不装。另外有些插件会偷偷在后台跑进程占用 CPU 和内存。你可以在 VS Code 的“进程资源管理器”里看到每个插件的资源占用情况。如果某个插件长期占用超过 5% 的 CPU建议禁用或卸载。3.3 JSON 数据格式的设计与优化JSON 是整个项目的数据骨架设计得好不好直接决定了后续开发顺不顺畅。我一开始图省事把电影数据写成了一个扁平数组每个对象里塞了十几个字段。结果前端做筛选的时候每次都要遍历整个数组数据量一上来就卡。后来我重新设计了 JSON 结构分成三个文件movies.json— 主数据文件只保留核心字段[ { id: 1, title: 银翼杀手2049, category: 科幻, year: 2017, rating: 8.3, cover: images/blade-runner-2049.jpg, summary: 一名新一代银翼杀手展开调查... } ]categories.json— 分类索引用于快速筛选{ 科幻: [1, 5, 12, 23], 剧情: [2, 7, 9, 15], 动画: [3, 8, 11, 19] }search-index.json— 搜索关键词映射用于模糊匹配{ 银翼: [1], 杀手: [1, 5], 2049: [1] }这样拆分之后前端筛选只需要查categories.json拿到 ID 列表再去movies.json里按 ID 取详情搜索则直接查search-index.json。实测下来即使数据量增加到几千条页面响应时间也能控制在 100 毫秒以内。提示JSON 文件不要用中文键名虽然语法上允许但在某些解析器里会出现编码问题。用英文键名值可以用中文这样最稳妥。4. 实操过程从空文件夹到一个能跑的网站4.1 项目初始化与目录结构规划我在 D 盘建了一个gpt6-movie-site文件夹然后按以下结构组织文件gpt6-movie-site/ ├── data/ │ ├── movies.json │ ├── categories.json │ └── search-index.json ├── public/ │ ├── index.html │ ├── style.css │ └── app.js ├── skills/ │ ├── json-query.py │ └── generate-html.py ├── server.js └── package.json这个结构的好处是职责分明data放数据public放前端资源skills放 Skill 脚本server.js是后端入口。后面不管加多少功能都不会乱。初始化项目用npm init -y生成package.json然后安装两个依赖npm install express serveExpress 用来写 API 路由serve 用来做本地静态文件服务。虽然可以用 Express 同时处理静态文件和 API但分开更清晰调试也方便。4.2 用 Codex 生成前端骨架的完整过程前端部分我基本没手写全靠 Codex 生成。具体操作是在 VS Code 里打开public/index.html然后按CtrlShiftP调出命令面板输入“Codex: Generate”在对话框里描述需求生成一个电影展示页面的 HTML 骨架包含顶部导航栏、搜索框、分类筛选按钮组、电影卡片网格、详情弹窗。使用语义化标签CSS 类名用 BEM 命名规范。Codex 大概花了 8 秒钟生成了完整的 HTML 结构包括header里的导航和搜索nav里的分类按钮main里的卡片网格容器dialog元素做详情弹窗生成的代码质量出乎意料地好BEM 命名规范执行得很到位比如.movie-card__title、.movie-card__cover、.filter-bar__btn--active。我只需要微调几个地方把搜索框的placeholder改成中文给分类按钮加上>// 加载 JSON 数据 async function loadData() { const [movies, categories] await Promise.all([ fetch(/data/movies.json).then(r r.json()), fetch(/data/categories.json).then(r r.json()) ]); return { movies, categories }; } // 渲染电影卡片 function renderCards(movies, container) { container.innerHTML movies.map(movie article classmovie-card>function escapeHtml(str) { const div document.createElement(div); div.textContent str; return div.innerHTML; }然后把所有插值都包上escapeHtml()。这个习惯建议大家养成不管项目大小安全底线要有。4.3 后端 API 路由的极简实现后端我用 Express 写了三个路由const express require(express); const fs require(fs); const path require(path); const app express(); app.use(express.static(public)); app.use(/data, express.static(data)); // 获取所有电影 app.get(/api/movies, (req, res) { const data JSON.parse(fs.readFileSync(path.join(__dirname, data/movies.json), utf-8)); res.json(data); }); // 按分类获取电影 app.get(/api/movies/:category, (req, res) { const movies JSON.parse(fs.readFileSync(path.join(__dirname, data/movies.json), utf-8)); const categories JSON.parse(fs.readFileSync(path.join(__dirname, data/categories.json), utf-8)); const ids categories[req.params.category] || []; res.json(movies.filter(m ids.includes(m.id))); }); // 搜索 app.get(/api/search, (req, res) { const keyword req.query.q || ; const index JSON.parse(fs.readFileSync(path.join(__dirname, data/search-index.json), utf-8)); const ids index[keyword] || []; const movies JSON.parse(fs.readFileSync(path.join(__dirname, data/movies.json), utf-8)); res.json(movies.filter(m ids.includes(m.id))); }); app.listen(3000, () console.log(Server running on http://localhost:3000));代码很直白没有用数据库所有数据从 JSON 文件读。对于小型项目来说这种方案足够快也足够简单。如果你要上生产环境把fs.readFileSync换成异步读取再加一层内存缓存就行。启动服务node server.js浏览器打开http://localhost:3000应该能看到电影卡片网格。点击分类按钮卡片会实时筛选在搜索框输入关键词按回车后显示匹配结果点击卡片弹出详情窗口。4.4 用 Skill 脚本自动化数据整理手动往 JSON 文件里塞数据太慢了我写了一个generate-html.py的 Skill功能是从一个 CSV 文件读取电影数据自动生成三个 JSON 文件。CSV 的格式很简单title,category,year,rating,cover,summary 银翼杀手2049,科幻,2017,8.3,images/blade-runner-2049.jpg,一名新一代银翼杀手展开调查Skill 脚本的核心逻辑import csv import json def csv_to_json(csv_path): movies [] categories {} search_index {} with open(csv_path, r, encodingutf-8) as f: reader csv.DictReader(f) for idx, row in enumerate(reader, start1): movie { id: idx, title: row[title], category: row[category], year: int(row[year]), rating: float(row[rating]), cover: row[cover], summary: row[summary] } movies.append(movie) # 更新分类索引 categories.setdefault(row[category], []).append(idx) # 更新搜索索引 for char in row[title]: search_index.setdefault(char, []).append(idx) with open(data/movies.json, w, encodingutf-8) as f: json.dump(movies, f, ensure_asciiFalse, indent2) with open(data/categories.json, w, encodingutf-8) as f: json.dump(categories, f, ensure_asciiFalse, indent2) with open(data/search-index.json, w, encodingutf-8) as f: json.dump(search_index, f, ensure_asciiFalse, indent2) if __name__ __main__: csv_to_json(movies.csv)这个 Skill 跑一次三个 JSON 文件全部生成。后面加新电影只需要往 CSV 里加一行重新跑一次脚本就行。比手动改 JSON 高效太多而且不容易出错。提示搜索索引按单字拆分虽然简单但会产生大量冗余数据。如果数据量大建议用分词库比如 jieba做关键词提取只索引有意义的词能减少 70% 以上的索引体积。5. 常见问题与排查技巧实录5.1 Codex 相关报错的快速定位问题一Codex 插件安装后不显示图标。这个通常是因为 VS Code 版本太低。Codex 要求 VS Code 1.85 以上如果你用的是旧版本要么升级 VS Code要么装 Codex 的历史版本。我建议直接升级 VS Code新版本对 AI 插件的支持更好。问题二Codex 补全延迟超过 5 秒。先检查网络Codex 的云端推理需要稳定的网络连接。如果网络没问题打开 VS Code 的“输出”面板选择“Codex”频道看日志里有没有timeout或retry字样。如果有把codex.localFallback设为true让它在云端超时后自动切本地。问题三Codex 生成的代码包含乱码或中文注释变问号。这是编码问题。在 VS Code 设置里搜“files.encoding”确保设为utf-8。另外在settings.json里加一行codex.outputEncoding: utf-8强制 Codex 用 UTF-8 输出。5.2 JSON 解析与格式化的避坑指南JSON 格式对新手来说最容易出错的地方有三个尾随逗号、单引号、注释。标准 JSON 不支持这三样但很多人从 JavaScript 对象字面量直接复制过来就会报错。我常用的排查方法是把 JSON 内容粘贴到 VS Code 里按ShiftAltF格式化。如果格式失败VS Code 会在问题面板里标出具体行号。另一个工具是命令行jqjq . data/movies.json如果 JSON 合法jq会输出格式化后的内容如果不合法它会报出具体的语法错误位置。还有一个隐蔽的坑JSON 文件里如果包含 BOM 头某些解析器会报“Unexpected token”。用 VS Code 打开文件右下角如果显示“UTF-8 with BOM”点击它改成“UTF-8”就行。5.3 网站部署后无法访问的排查清单本地跑得好好的一部署就出问题这是最常见的情况。我整理了一个排查清单按顺序检查检查项常见问题解决方法端口占用3000 端口被其他程序占用换端口或netstat -ano找到占用进程杀掉静态路径public目录路径写错用path.join(__dirname, public)确保绝对路径JSON 路径部署后工作目录变了所有文件读取都用path.join(__dirname, ...)跨域问题前端和后端不同端口加cors中间件或把前端打包后由后端统一服务文件权限Linux 下 JSON 文件不可读chmod 644 data/*.json我遇到最诡异的一次是部署到 Linux 服务器后网站能打开但数据加载不出来。排查了半天发现是 JSON 文件里有一个中文引号“在 Windows 上解析正常在 Linux 上直接报错。把中文引号改成英文引号后问题解决。所以 JSON 文件里的标点符号一定要用英文半角。5.4 Skill 脚本执行失败的典型原因Skill 脚本跑不起来九成是环境问题。我总结了几种情况Python 版本不对某些库只支持 Python 3.10用 3.8 会报SyntaxError。用python --version确认版本。依赖库缺失ModuleNotFoundError说明缺库用pip install -r requirements.txt补上。路径问题脚本里用了相对路径但从不同目录执行时找不到文件。统一用os.path.dirname(os.path.abspath(__file__))获取脚本所在目录。编码问题Windows 默认 GBK 编码读 UTF-8 文件会乱码。在脚本开头加# -*- coding: utf-8 -*-并且所有open()都指定encodingutf-8。提示Skill 脚本建议加一个--debug参数开启后打印详细日志。排查问题时日志比猜测快十倍。6. 我个人的经验总结与后续扩展思路这个项目从零到跑起来我实际花了大概 6 个小时其中 2 个小时在装环境和排查 Codex 的配置问题1 个小时在调 JSON 数据结构真正写代码的时间不到 3 小时。Codex 生成的代码大概占了 70%我手动改的主要是样式细节和业务逻辑的边界情况。有几个体会比较深。第一Skill 脚本的复用价值远高于一次性代码。我写的json-query和generate-html两个 Skill后面做其他项目时直接复制过去就能用省了大量重复劳动。第二JSON 结构设计要提前想清楚。我一开始的扁平结构导致后面重构花了额外时间如果一开始就按“主数据索引”的方式拆分能少走弯路。第三Codex 不是万能的但它是很好的起点。它生成的代码框架质量不错但细节需要你把关尤其是安全性和性能相关的部分。后续我打算在这个基础上加两个功能一是用 Skill 脚本自动从公开数据源抓取电影信息定期更新 JSON 文件二是加一个简单的用户收藏功能用 localStorage 存收藏列表不需要后端数据库。这两个功能都不复杂但能让网站更实用。如果你也在用 GPT-6 和 Codex 做类似的事情我的建议是先把最小可运行版本跑通再逐步加功能。不要一上来就设计一个庞大的架构那样很容易在配置环节就卡住最后失去耐心。从一个 HTML 页面、一个 JSON 文件、一个 Skill 脚本开始跑通了再扩展这是最稳妥的路径。