生成单文件网站的最佳 AI 提示词
在任何网站提示词中，最有用的一句话是：“输出为一个自包含的 HTML 文件，CSS 和 JavaScript 内联，不使用任何外部依赖。”这一句话决定了你拿到的是可以立即粘贴发布的代码，还是被拆成多个文件、需要构建步骤的代码。
为什么措辞很重要
ChatGPT、Claude 和 Gemini 都能根据简单描述生成网站，但它们有时会默认你在做一个正式项目：拆分的 HTML、CSS 和 JavaScript 文件，或类似框架的结构。这并没有错，但如果你只是想把页面直接粘贴到托管服务并分享出去，这就是多余的麻烦。明确告诉模型你想要的输出形式，就能提前避免这些麻烦。
提示词公式
把任何网站提示词分成三部分：
- 页面是什么：具体说明目的和内容，而不只是主题。
- 格式要求：“输出为一个 HTML 文件，CSS 和 JavaScript 内联，不使用外部依赖。”
- 风格方向：颜色、氛围或参照（“简洁极简”、“深色主题”、“像现代 SaaS 落地页”）。
现成的提示词
把下面任意一条复制到 ChatGPT、Claude 或 Gemini 中，再调整细节：
作品集：“为一位自由设计师的作品集创建一个 HTML 文件（CSS 和 JS 内联，无外部依赖）。包含带姓名和职业的首屏、4 个项目卡片组成的网格，以及联系区。深色主题，简洁的无衬线字体。”
落地页：“为一款名为 Focus 的效率应用编写单文件 HTML 落地页。包含标题、三张功能卡片、两档价格方案和邮箱订阅表单。所有 CSS 和 JS 内联，无外部依赖，适配手机。”
候补名单页：“为一家早期创业公司制作候补名单页面，输出为一个 HTML 文件。包含标题、一句话介绍、带提交按钮的邮箱输入框，以及显示‘已有 500+ 人加入’的小计数器。仅使用内联 CSS 和 JS。”
活动页：“为一个一日工作坊创建单文件 HTML 活动页面。包含日期、地点、简短议程和报名按钮。暖色调，无外部依赖。”
小游戏：“在一个自包含的 HTML 文件中制作一个小型浏览器游戏，即 [游戏名] 的简化版。只使用原生 JavaScript 和内联 CSS，可用方向键操作，不使用外部库。”
让输出保持干净的三个习惯
如果页面需要在手机上使用，一定要加上“适配手机”，模型默认不会这样做。修改需求时用后续消息提出，而不是重写整个提示词：模型更擅长处理“把按钮改成蓝色并加一个页脚”，而不是第二个超长提示词。如果模型仍然输出了多个文件，只需一句话即可解决：“把这些合并成一个所有内容都内联的 HTML 文件。”
常见问题
网站提示词中最重要的一条指令是什么？
明确要求输出为一个自包含的 HTML 文件，CSS 和 JavaScript 内联，且没有外部依赖。这一条指令决定了结果能否直接粘贴到托管服务上。
在 ChatGPT、Claude 和 Gemini 中效果一样吗？
一样。这三款 AI 助手都能按要求写出完整的单文件 HTML 网站，本文的提示词结构适用于所有三者。
如果 AI 还是把代码拆成了多个文件怎么办？
直接要求它把所有内容合并为一个 CSS 和 JavaScript 内联的 HTML 文件。即使事后补充要求也能稳定生效。
这些提示词能做交互内容，而不只是静态页面吗？
可以。单个 HTML 文件可以包含完整的 JavaScript 逻辑，因此游戏、计算器和交互工具的做法与静态落地页相同。
