GPT-5* 编码示例

本仓库包含一系列精选的演示应用，完全由一条 GPT-5 或 GPT-5.2 提示词生成，无需手动编写任何代码。

这些示例旨在展示模型在编码方面的强大能力——尤其是能够根据自然语言描述快速搭建网站、前端应用、游戏以及交互式 UI。它们希望能为你自己的创意提供灵感。

探索示例

你可以通过克隆本仓库并在本地运行来体验这些演示：

cd front-end
npm install
npm run dev

应用将在 localhost:3000 上可用。

你也可以访问托管版本。

在那里，你可以查看任意示例、了解生成代码的零样本提示，并将其改造以实现自己的想法。

使用 GPT-5 进行开发

如果你想尝试类似的提示，可以在你喜欢的开发环境中使用 GPT-5：

• Codex CLI — 一个轻量级的编码助手，可在终端中运行。
• 你最喜欢的 IDE 或编码工具 — 在现有工作流中使用 GPT-5 来生成和优化代码。
• ChatGPT — 打开 ChatGPT 并选择 GPT-5，即可在浏览器中生成并预览代码。

选择一个示例，复制其提示作为灵感，并根据自身需求进行调整。让 GPT-5 帮你构建想法，然后不断迭代提示或代码，探索不同的可能性。

针对开发者：Codex CLI

我们推荐使用带有 GPT-5 的 Codex CLI（GitHub 地址），以获得流畅的编码体验。

Codex CLI 直接在终端中运行：只需提供一个提示，它就会生成代码、在沙盒环境中执行，并实时预览结果。

示例：

codex --model gpt-5 --full-auto "用单个 HTML 文件构建一个具有摄像头访问权限的简单照相亭应用"

GPT-5 将搭建应用框架、编写文件、按需安装依赖，并显示实时预览。对于希望快速启动项目或添加功能的开发者来说，这无疑是首选方案。

你也可以将 GPT-5 与其他支持该模型的 AI 编码工具结合使用。

针对非开发者：ChatGPT

如果你没有编程环境，可以使用 ChatGPT（配备 GPT-5）在浏览器中完全构建并预览应用：

1. 复制某个示例的提示作为灵感，并根据需要自定义。
2. 让 GPT-5 生成代码（HTML/CSS/JavaScript）。
3. 在“画布”预览中打开，即可看到应用实时运行。
4. 下载或复制生成的 HTML，用于实际部署。

通过这种方法，任何人都可以创建一个可用的单页应用，无需本地设置。

[!注意] 目前我们暂不接受贡献。
本仓库仅用于参考和启发。如果你希望在此基础上进一步开发，请先 fork 本仓库进行实验。

GPT-5 编程示例快速上手指南

本指南旨在帮助开发者快速体验由 GPT-5 或 GPT-5.2 模型通过单条提示词（Zero-shot）生成的前端应用示例。这些示例展示了模型在快速搭建网站、游戏及交互式 UI 方面的能力。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：Windows, macOS 或 Linux
• Node.js：建议安装 LTS 版本（v18 或更高），用于运行前端演示项目。
  • 国内用户推荐使用 Node.js 淘宝镜像 下载。
• Git：用于克隆代码仓库。
• 包管理器：npm (随 Node.js 安装) 或 pnpm/yarn。
  • 推荐：国内开发者可配置 npm 镜像源以加速依赖安装：

  npm config set registry https://registry.npmmirror.com
  

安装步骤

1. 克隆仓库 将示例代码库克隆到本地：

   git clone https://github.com/openai/gpt-5-coding-examples.git
   cd gpt-5-coding-examples
   

2. 进入前端目录并安装依赖 进入 front-end 目录并安装项目所需的 Node.js 依赖：

   cd front-end
   npm install
   

3. 启动开发服务器 运行以下命令启动本地开发服务：

   npm run dev
   

基本使用

安装完成后，您可以通过以下两种方式体验 GPT-5 的编程能力：

方式一：本地浏览示例库

启动服务后，在浏览器中访问：

http://localhost:3000

• 功能：您可以查看各个演示应用，阅读生成该代码的原始提示词（Prompt），并基于此进行二次创作。
• 在线预览：若不想本地运行，也可直接访问托管版本：https://gpt5-coding-examples.vercel.app/

方式二：使用 Codex CLI 快速构建（推荐开发者）

如果您希望在终端直接让 GPT-5 生成并运行新应用，推荐使用 OpenAI 的 Codex CLI。

1. 执行命令 在终端中运行以下命令（需已安装 codex 并配置好 API Key）：

   codex --model gpt-5 --full-auto "Build a simple photobooth application with camera access in a single HTML file"
   

2. 效果 GPT-5 将自动搭建项目结构、编写代码、安装依赖，并在沙箱环境中提供实时预览。这是快速引导新项目或添加功能的首选方案。

方式三：使用 ChatGPT 浏览器构建（无需本地环境）

如果您没有本地开发环境，可以直接使用 ChatGPT (选择 GPT-5 模型)：

1. 从示例库中复制一个 Prompt 作为灵感并进行修改。
2. 让 GPT-5 生成完整的 HTML/CSS/JS 代码。
3. 点击 Canvas 预览窗口实时查看运行效果。
4. 下载生成的 HTML 文件即可直接使用。