title: AI 网页制作第 1 步：把公众号文章直接变成网页 sidebarTitle: 01 千问生成基础网页
AI 网页制作第 1 步：把公众号文章直接变成网页
很多人第一次听到“用 AI 做网页”，第一反应往往是：
我不会写代码，能做吗？
答案是：可以。
但我不建议一上来就追求什么高级动效、复杂布局、炫酷设计。对于普通内容创作者来说，第一步最重要的不是“做得多漂亮”，而是先验证一件事：
一篇现成的公众号文章，能不能不改内容，直接变成一个能打开的网页？
这篇文章，就是整个系列的第 1 步。
我们先用千问，把一篇公众号文章快速转成一个单文件 HTML 网页。这个版本可以理解为 V1 基线版：不追求设计感，只追求内容完整、能打开、手机端能读。
一、为什么要把公众号文章变成网页？
公众号文章当然可以直接发布。
但如果你做过一段时间内容，就会慢慢发现几个限制：
第一，样式受平台控制。
公众号排版虽然也能调整字体、颜色、分隔线，但整体还是在平台框架里。你很难把一篇文章做成一个真正有“作品感”的页面。
第二，内容不方便沉淀成独立作品。
一篇公众号文章发出去之后，更多像是一条内容流里的文章。它可以被阅读、转发，但不太像一个可以长期展示、反复优化、单独传播的网页作品。
第三，很多创意无法表达。
比如你想做一个活动介绍页、课程展示页、个人作品页、产品说明页，公众号本身不太适合承载这些形式。
所以我们可以换一个思路：
先把同一篇文章转成网页，再慢慢优化它。
不要一开始就想着做成商业官网。第一步很简单：把文字内容完整地搬到网页里，让它变成一个可以双击打开的 HTML 文件。
二、为什么第一步选择千问？
这一步我选择从千问开始，不是因为它一定是最强的网页设计工具，而是因为它足够轻。
对于完全没有代码基础的人来说，第一步要尽量降低门槛。
千问这类对话式 AI 工具，适合做这个起点实验，原因有三个。 https://www.qianwen.com/
1. 入口简单
你不需要安装开发工具，也不需要配置环境。
打开网页，进入对话，把文章正文和提示词发进去，就可以开始。
2. 速度快
如果只是生成一个基础 HTML 页面，通常几分钟内就能看到结果。
这对新手非常重要。因为一开始最怕的不是做得不好，而是迟迟看不到东西。
只要能快速看到一个网页，后面就有了继续优化的动力。
3. 输出容易保存
我们这一步要求 AI 输出的是 单文件 HTML。
也就是说，所有 HTML 和 CSS 都写在一个文件里。你只需要复制出来，保存成 v1.html，然后双击打开，就能在浏览器里看到效果。
不用安装框架，不用打包，也不用部署。
三、我们这一步要做成什么效果？
这一步的目标非常明确：
把一篇现成的公众号文章，变成一个可以打开的网页。
它不是最终版本。
它只是起点。
所以这一版不要求很惊艳，只要满足几个基础标准就可以：
- 内容完整，没有明显丢段落；
- 标题、小标题、正文层次清楚；
- 手机端阅读不费劲；
- 保存成 HTML 后可以直接打开；
- 不依赖外部 CSS 或 JS 文件。
换句话说，V1 的价值不是“好看”，而是“能用”。
四、准备工作
你需要准备两样东西。
第一，一篇已经写好的公众号文章。
可以是你之前发布过的文章，也可以是还没有发布的草稿。只要正文内容相对完整即可。
比如趁早这篇文章
你也可以先不用管文件名，直接把下面这种要求告诉 AI：
你是一名顶级中文内容网页设计师和前端视觉设计师，请将我粘贴的公众号长文，改造成一个可直接保存运行的高质量单文件 HTML 页面。页面要完整保留原文标题、作者、时间、章节顺序、核心观点、段落层次和关键信息，不删减、不虚构。
设计目标：不要做普通文章排版，而要做成一篇精心设计的手机端深度阅读网页，审美高级、信息清晰、阅读舒服、交互自然。
页面要求：移动端优先，重点适配 375px-414px 手机屏幕，同时兼容桌面端。允许使用外链 CSS/JS 框架、图标库、动画库、图片资源、背景纹理、封面图、插画、渐变、卡片、目录导航、阅读进度条、返回顶部、章节淡入、重点高亮、引用卡片、信息卡片、分割线、悬浮按钮等视觉与交互元素。
视觉风格：浅色高级背景，正文深色，标题有层次，段落留白充足，行距舒适，卡片细腻，整体具有公众号长文、知识付费文章、精品专题页的质感。图片可以作为封面、章节氛围图或装饰背景，但不能影响阅读，也不要制造原文没有的事实。
技术要求：输出完整 HTML，从 开始。CSS 和 JS 可以内联，也可以引用稳定 CDN。代码结构清晰，注释适量。不要输出解释，不要输出 Markdown，只输出最终 HTML。
【公众号文章正文如下】
{在这里粘贴公众号文章全文}这段提示词的核心意思很简单：
不要让 AI 自由发挥太多，先让它忠实地把文章变成网页。
第一步不要追求复杂设计，先保证内容不丢、结构不乱。
五、具体操作步骤
下面是完整流程。
第 1 步：复制公众号正文
先打开你的公众号文章，复制正文内容。
如果是还没发布的草稿，也可以直接复制你的 Markdown 文档或纯文本内容。
这一步不用太纠结格式，只要正文内容完整即可。
第 2 步：把文章和提示词发给千问
打开千问，把提示词和文章正文一起发进去。 
第 3 步：复制 AI 生成的 HTML
千问生成完成后，你会看到一大段 HTML 代码。
你要做的事情很简单：
从
<!DOCTYPE html>开始，一直复制到最后的</html>。
注意，不要只复制中间一部分。
如果少了开头或结尾，网页可能无法正常显示。
第 4 步：保存为 v1.html
接下来，新建一个文本文件，把复制的 HTML 粘贴进去。
文件名建议保存为：
v1.html这里要注意，后缀一定是 .html，不要保存成 .txt。
如果你用的是 Windows，建议打开文件扩展名显示，确认文件真正叫：
v1.html而不是：
v1.html.txt保存好之后，直接双击这个文件。
它会自动用浏览器打开。
第 5 步：检查网页效果
打开之后，先不要急着优化。
先检查几个基础问题。
第一，看内容有没有丢。
标题、小标题、正文段落、列表、引用，是否都还在。
第二，看阅读是否顺畅。
段落之间有没有挤在一起？字号会不会太小？手机上是否容易阅读？
第三，看页面是否能独立打开。
如果你把这个 v1.html 发给别人，对方也能打开，那就说明这个基础版本已经成立。
这一步做到这里，就完成了。
