openai/gpt-5-coding-examples：官方编码示例和演示站

OpenAI 把一批「一条提示词生成的完整前端」公开了，仓库叫 openai/gpt-5-coding-examples，在线画廊在 gpt5-coding-examples.vercel.app（gpt-examples.com 指向同一套）。里面每个 demo 都声称是 GPT-5 或 GPT-5.2 一次写完，人手没改过代码。适合拿来看模型现在能把网站、小游戏、工具页搭到什么程度，也适合抄提示词自己改一版。

仓库是 MIT 许可，定位是参考和灵感。官方明确说暂时不收 PR，想玩就 fork。

仓库里到底有什么

三层结构：

examples/*.yaml：每条 demo 的标题、zero-shot 提示词、标签，有的还标了要不要开摄像头。
apps/<slug>/：生成结果，多数是单个 index.html，少数带 _next 静态资源（比如 asteroid-game、espresso）。
front-end/：Next.js 画廊，把 YAML 读进来，弹窗里预览应用、看提示词、一键复制。

名字带 -5.2 的是同一主题用 GPT-5.2 再生成一版，比如 asteroid-game 和 asteroid-game-5.2。tiny-kanban 没有 5.2 对照，webcam-filter-playground 只此一版。对比的时候别混。

题材覆盖面很杂：CSV 出图、Tiny Kanban、webcam 滤镜、正则实验室、Markdown 转幻灯、虚拟鼓机、小行星游戏、CSA 农场落地页。共同点是「单页、能点、能看」，不是带后端的生产应用。

先在线看，再决定要不要 clone

不想装环境，直接打开托管版。点一张卡片会弹出预览，下面就是那条提示词。想 remix，把提示词拷走，改名字和功能再丢给模型。

需要摄像头的例子（webcam 滤镜这类）浏览器会要权限。YAML 里 camera: true 就是这个标记。

本机跑画廊

Node 装好之后，clone 仓库，进入 front-end 目录，执行安装依赖再启动开发服务。默认 http://localhost:3000。dev 脚本会先跑 scripts/copy-docs.mjs，把示例文件拷进 public，再用 Next 15 + Turbopack 起服务。只想看某一个 HTML，也可以直接打开 apps/<slug>/index.html，不经过画廊。

仓库地址：https://github.com/openai/gpt-5-coding-examples

bash

cd gpt-5-coding-examples/front-end
npm install
npm run dev

提示词长什么样

YAML 很短。examples/csv-to-charts.yaml 整段差不多就是：id csv-to-charts，title CSV To Charts，prompt 要求 Create a single-page app in a single HTML file，Name 是 Data Visualization Playground，Goal 是 Upload CSV and generate charts，Features 是 Chart type selector, color customization, save as image，UI should be modern with a focus on charts，tags 为 tool。

tiny-kanban 会把拖拽、WIP 上限、优先级颜色、人员指派、搜索都写进 Features。webcam-filter-playground 多一个 camera: true。格式固定：单文件 HTML、Name / Goal / Features、一句 UI 口味。没有技术栈、没有目录结构、没有测试要求。这就是他们说的 zero-shot：把产品描述写清楚，剩下交给模型。

自己改的时候，优先动这三块：Name（产品名）、Goal（一句话目的）、Features（功能清单）。UI 那句决定风格，写成「适合每日站会的字号和配色」就会和「极简、实时预览」完全两路。

yaml

id: csv-to-charts
title: CSV To Charts
prompt: |
  Create a single-page app in a single HTML file with the following requirements:
  - Name: Data Visualization Playground
  - Goal: Upload CSV and generate charts.
  - Features: Chart type selector, color customization, save as image.
  - The UI should be modern with a focus on charts.
tags:
  - tool

用 Codex CLI 照着生成一版

官方推荐开发者走 Codex CLI，模型用 GPT-5（文档也写了 GPT-5.2）。给提示词之后它会在沙箱里写文件、装依赖、给 live preview。

README 里的例子是：

bash

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

更贴近这个仓库的做法是：打开某个 YAML，把 prompt 整段贴进去，只改业务。比如把 Tiny Kanban 改成自己团队的列名。生成完把 index.html 丢进浏览器看一遍：拖拽、上传、摄像头这些交互，比看源码更快暴露问题。

--full-auto 会自己跑命令。本机试的话，先在空目录里跑，别对着已有业务代码开。没有 Codex 的话，Cursor、Claude Code、ChatGPT 里选 GPT-5 同一段提示词也能跑。结果会漂，这是单次生成的常态，不是仓库坏了。

不会写代码也可以用 ChatGPT

README 给非开发者的路径是 ChatGPT + Canvas：

复制一条 YAML 的 prompt，改成自己的产品名和功能。
选 GPT-5，让它出 HTML/CSS/JS。
在 Canvas 里预览。
下载或复制那份 HTML，本地打开就能用。

这条路适合单页小工具。一涉及登录、数据库、支付，就超出这批示例的范围了。

几个实际用法

当提示词教材。 打开 examples/，看官方怎么把「一个能用的小应用」压进十几行。Features 写到可勾选的粒度，比「帮我做一个看板」稳得多。
当前端脚手架。 需要一个 CSV 出图页、倒计时、QR 生成器，先 clone 对应 apps/ 的 HTML，再改文案和配色。比从零问模型省一轮。
当模型对比样本。 同一条 prompt 丢给 GPT-5 和 GPT-5.2，对照仓库里带 -5.2 后缀的那版，看布局、动效、边界情况差在哪。
当面试或内训材料。 让同事只看 YAML、不看 HTML，自己生成一版，再和官方结果并排。能很快暴露「提示词写全了没有」。

别当成生产模板

这些 HTML 是一次生成的展示件。没有鉴权、没有后端、没有无障碍和 i18n 的承诺，体积从几 KB 到 60KB+ 都有。asteroid-game 这类还带着 Next 的打包产物，更不宜直接嵌进自己的站点。

仓库不接受贡献。要加新例子，fork 之后在 examples/ 加 YAML、在 apps/ 放生成结果，自己的画廊就能读到。front-end/lib/code-examples.ts 会扫 YAML，缺 title 或 prompt 的条目会被跳过。

模型文档以 GPT-5 和 GPT-5.2 为准。提示词和演示站跟着仓库走即可。