ChatGPT 网站设计 Prompt：需求、预览与改版
先用 ChatGPT 把网站想法整理为明确需求，再请求当前工具能够交付的结果。这个流程分别检查输入、返回文件、浏览器表现与代码交付。
于 2026 年 10 月 9 日审阅。工具功能随账号和版本变化，请核对下方官方文档。
从可用的页面开始
先预览可用的 HTML 页面，再让编程智能体结合源码和配套 Prompt，练习这些方法。
Skills 继续免登录免费阅读和复制。模板可公开预览；源码下载和配套 Prompt 需要账户及相应购买权益或套餐。 查看源码权限和价格
给 ChatGPT 完整的网站需求
说明受众、目的、区块、已有文案与主行动，用少量具体选择描述视觉方向。保护产品事实、价格和已有链接；缺少资料时要求列出问题，不自行编造评价或功能。
请求文件，检查可用预览
要求说明文件名和打开方式。OpenAI 文档介绍了支持该功能时在文件查看器中预览 HTML；如果当前会话只返回代码，就保存后在本地打开。Sites 是独立的建站与托管流程，写一段 Prompt 本身不会发布网站。
针对一个可见问题迭代
说明视口、受影响区块与预期结果。例如，只修复 320 像素下溢出的便笺区域，保留桌面排版和链接。检查修改后的文件；解释 CSS 修改不等于在浏览器中验证通过。
把真实文件和限制交给代码工具
交付文件、需求、资源清单与未解决问题。要求代码代理先检查现有框架和路由再实现，保留鉴权、价格和后端接口约定，然后在实际项目中检查主行动、手机布局与键盘操作。
可自行改写的原创练习
以下 Neruve 原创示例保留英文，是建议输入，不是工具实测输出或付费模板 Prompt。使用前请替换虚构事实。
ChatGPT：完整网站需求
Create an original website brief for Fieldnote, a fictional research-notes app.
Audience: small product teams. Explain collect → compare → decide.
Output: one self-contained HTML/CSS file if your current tools can create files;
otherwise provide complete code and explain how to open it locally.
Use warm paper, ink text and one clearly fictional research-note specimen.
Sections: introduction, specimen, three-step workflow and a closing workflow link.
The primary action is “Explore the workflow” and targets #workflow.
Include semantic headings, a skip link, visible focus and reduced motion.
Support 1280, 390 and 320 px. Do not add signup, prices, customer logos or metrics.
List the output files and the checks actually performed.ChatGPT：一次聚焦的手机修复
Review the current Fieldnote output. At 320 px, the note specimen extends
beyond the viewport. First identify the specific element and sizing rule.
Change only the specimen layout; preserve desktop typography, all copy and links.
Use wrapping or responsive sizing instead of hiding content or clipping the page.
Return the changed file, then repeat 320, 390 and 1280 px checks.
If you cannot open the result in a browser, mark those checks as not performed.
Do not describe proposed CSS as a verified fix.真实练习：用 Codex 生成 Fieldnote
Fieldnote 保留了原创输入、未经改写的 Codex HTML，以及桌面和手机检查记录。该次运行没有提供 frontend-design Skill，也不是 ChatGPT 或 Claude Design 实测。
真实练习：用 Codex 生成 Fieldnote常见问题
这段 Prompt 会直接生成可用并上线的网站吗？
取决于当前会话启用的工具及实际完成的工作。需求、生成文件、预览与已托管网站是不同交付物。这里的示例尚未在 ChatGPT 运行；链接中的 Fieldnote 案例记录的是独立的 Codex 运行。
浏览设计与配套 Prompt
Neruve 的公开目录提供网站设计、可用的配套提示词和 Skills 目录。交互预览无需登录；配套提示词按条目与套餐权益获取。本工作流使用你自己的编程工具，无需公开的 Neruve 网站生成器。
官方参考资料
第三方工具和 Skill 属于各自作者。链接用于参考，不表示合作关系或已包含相关使用权益。