10 分钟生出一个网站！来认识一下 ChatGPT Sites（🤔 我想复刻它）

综述

9 月 8 日，OpenAI 的 ChatGPT Sites 正式公测。它的卖点一句话就能说清：像创建一个 Google Doc 一样制作网站。据 Fast Company 的 Jeremy Caplan 实测，用户用几句话描述愿景（目标受众、网站类型）、上传参考素材（网页截图、手绘草图）、提出功能要求（按钮、嵌入、交互元素），10-15 分钟就能得到一个完整的专业网站。

与市面上套模板的建站工具不同，它的产品哲学是「真正的 Vibe Coding，不是模板拼装」：不是选模板改文案，而是从零生成贴合描述的页面。迭代方式是「注释工具」——直接在网页上画圈批注，"改按钮颜色""换字体""替换图片"，模型照批注改。它又接进了 ChatGPT Project 生态，能自动读取项目里的品牌风格指南与 Logo 库，生成物自带品牌 DNA。

已展示的产出包括：媒体套件赞助页、旧金山活动指南、支持拖拽购物篮的野餐用品商店，以及艺术家 Drue Kataoka 的 GoalFlow——选国旗后在流体模拟画布上用国旗配色"绘画"，颜料像水中色素旋转漂移，这类交互此前需要高级前端工程师数周。

专业分析

拆开看，ChatGPT Sites 真正的护城河不是"会写代码"——写代码各家都会——而是生态与交互闭环：

• 画布即注释的迭代协议：在渲染结果上画圈，把"所见即所得"从设计层下沉到修改指令层。这一步把非程序员与前端工程之间的鸿沟，从"描述→想象"变成了"看→指→改"。
• Project 生态的上下文注入：风格指南、Logo、既有设计资产被自动读进生成上下文，相当于每个网站都带着一套"企业设计系统"开工，这是单次对话式 AI 建站给不了的连续性。
• 长会话产物管理：网站不是一次性输出，而是可反复圈改的"活文档"，会话即工作台。

要泼冷水的地方也很明确：演示集里偏游戏与艺术交互类（GoalFlow、Jenga 式物理游戏、纸飞机街机），这类页面边界清晰、无需后端；而真实业务站的难点从来不在首页长什么样，而在权限、表单、支付、内容管理、数据迁移——这些在公开演示里着墨不多。AI 建站的上限取决于"页面"之外的那部分工程，而这部分恰恰不是一句话能说清的。

关联信息与影响

这条产品线对现有格局的冲击按层排：

• 模板 SaaS（Wix / Squarespace / Tilda）首当其冲——它们卖的就是"不会写代码也能建站"，如今生成式路径更便宜、更个性。月费模式在"一次性生成 + 按量迭代"面前显得笨重。
• AI 建站同行（Lovable / Bolt）仍保有灵活性与开发者向能力，但正如评测所指，ChatGPT Sites 赢在生态与用户基数。
• Claude 系产品（Artifacts 的交互 UI、Claude Design）在单页交互原型上很强，与 Sites 的差异在"项目管理与发布闭环"。
• 前端工程师的叙事从"写页面的人"滑向"提示词产品经理 + 交互评审人"——这句话对个人开发者刺耳，但方向上部分属实：重复性页面劳动正在被挤压，越靠近业务逻辑与架构的人越安全。

未来展望

短期：建站的门槛会继续下探，"从文档到部署"的链路会被 OpenAI 与竞品轮番加码，注释式迭代会成为标配交互。中期：竞争的胜负手会从"生成质量"转向"跑通真实业务"——表单提交、支付、CMS、域名绑定、数据看板这些脏活，谁先做出低门槛闭环谁就赢。长期：ChatGPT Sites 只是"环境即产品"的一个样本——AI 不再只回答问题，而是直接操作数字环境（网页、桌面、手机）替你交付结果，这与 Qwen-UI-Agent、手机端 Agent 是同一条潮水的不同分支。

对个人与小团队的现实意义：建一个"展示型网站"的成本正趋近于零，这反而是独立开发者做垂直工具的好时机——因为通用生成越强，围绕特定行业的数据、流程与集成越值钱。

信号强度

• 大模型厂商：把模型能力接进真实产品环境（而非聊天框）成为新战场，产品工程能力与模型能力同等重要。
• 研究者："从自然语言到可运行产物"的评估需要新基准：不止代码正确性，还有产物美观度、交互可用性与迭代收敛性。
• 开发者：与其焦虑被替代，不如把技能栈向"业务理解 + 架构 + 集成 + AI 提效"迁移；个人站点类需求将明显减少外包。
• 内容创作者：个人品牌站、作品集、活动页可自助产出，省下建站预算；但域名、备案、发布合规仍需自己处理。
• 产业链成员：模板建站、低代码外包、基础前端外包的生意模式需要重估；而支付、合规、托管、数据服务等"生成器不擅长的部分"价值上升。

复刻拆解：如果我们也做一个

顺着"能不能复刻"问下去，答案不是"做一个 ChatGPT Sites"，而是"做一个够用的、跑得起来的版本"——这取决于把它拆成几层看。

目标与边界

先收窄：复刻对象不应该是 OpenAI 的全套（多模态生成 + 自有基座 + Project 生态），而是单页/展示型网站的"描述 → 生成 → 圈改 → 预览/导出"闭环。这个边界内，主流开源栈完全够用。以下方案是推断与规划，不是官方技术细节。

分层架构

1. 生成层：前端代码由代码大模型产出。选型：DeepSeek-V4 / Qwen-Coder 级模型（OpenAI 兼容接口即可），prompt 约束输出单文件 HTML（内联 CSS/JS）或"HTML + 独立 CSS + JS"三件套，便于预览与部署。
2. 预览层：沙箱 iframe + srcdoc 或 blob URL 渲染产物，禁止脚本访问父窗口（sandbox 属性），这是整个系统的安全底线——让用户生成的代码跑在自己页面上，等于开放 XSS，必须隔离。
3. 截图回流：后端用无头浏览器（Playwright/Puppeteer）对产物截图，返回给用户"所见"；注释迭代的坐标也是在这张截图坐标系上采集的。
4. 迭代层：用户在前端画圈/打字批注 → 把"截图区域 + 批注文字 + 上一版代码"一起作为新上下文喂给模型，要求输出完整新版代码（而非 diff，模型 diff 容易碎）。
5. 上下文层：维护一个"项目记忆"（风格要求、参考图描述、品牌色、已用组件），每轮拼进 system prompt——对应 ChatGPT 的 Project 风格指南，是我们能复刻的部分。
6. 资产层：用户上传的参考图/草图，先经视觉模型总结成描述文本存入项目记忆，避免每轮重传大图。

复刻流程可行性（按里程碑排）

• M0（半天）：一条 prompt → 单文件 HTML → iframe 沙箱预览 + 下载按钮。验证模型出码质量够不够。
• M1（1-2 天）：加 Playwright 截图回流 + 画圈注释 → 带图重生成。此时已是"能用的 MVP"。
• M2（2-3 天）：项目记忆（多轮对话保持风格一致）、参考图视觉总结、历史版本回滚。
• M3（按需）：部署发布——产物打包上传对象存储/静态托管、绑定域名；多页站点生成（首页/关于/案例/联系）+ 简单导航；表单用第三方服务（Formspree 类）先不碰后端。
• 五天内可以走到 M2，"能演示、能自用、能接小单"；全套含发布与多页是两到三周的量级，质量上限取决于所选代码模型。

关键难点（按风险排序）

1. 代码正确性之外的"成品感"：模型常产出"看起来对"但交互有 bug 的页面。解法：对常用交互（导航、表单、轮播、购物篮）做确定性模板校验 + 截图给视觉模型打分发回重试，本质是给生成加质检闸——参考公众号封面视觉闸的同一思路。
2. 多轮迭代的上下文坍缩：改到第 N 轮，模型容易忘记早期要求或把代码改坏。解法：项目记忆显式沉淀关键约束 + 每轮完整重生成 + 版本快照可回滚。
3. 安全与资源：用户代码沙箱隔离是硬门槛；渲染/截图要吃 CPU，需要排队与超时控制。
4. "圈改坐标"的准确性：截图与真实 DOM 的坐标系换算、高分屏缩放，都是细节坑，需统一用同一视口尺寸截图再换算。
5. 业务闭环：表单/支付/数据存储没有"一句话方案"，MVP 阶段用第三方托管服务过渡，长期需自建——这也是所有 AI 建站共同的硬骨头。

结论

复刻的"可行性"很高——技术栈全部开源可及，MVP 几天可出；复刻的"难点"不在生成，而在产品闭环（迭代稳定性、安全、业务集成）。对我们而言更现实的问题是：通用建站已是巨头战场，复刻练兵的价值大于产品价值；真要落地，应该选一个垂直切口（行业模板 + 数据接入），而不是正面打通用。

信息局限说明：本文基于情报库收录的新智元报道与公开演示；复刻方案为架构推断与规划，未经实测验证；ChatGPT Sites 具体技术实现（模型、渲染、存储）未见官方细节，均以"能复刻的等价方案"表述。

SIGNAL FILE · 情报档案

OpenAI ChatGPT Sites 公测：非程序员一句话/草图 10-15 分钟生成完整专业网站，可注释迭代

本文基于 AI 情报库收录的条目展开深析；事实性信息以原始报道为准，分析与展望为编辑观点。

原始报道：https://mp.weixin.qq.com/s/8rHoP7bekjysCvvYeY-M7g（新智元）

查看原始报道 ↗返回首页