AI 网页制作第 2 步：加入图片素材，让文字页变成图文作品

上一篇，我们完成了第一个版本：用千问把一篇公众号文章转成了一个可以直接打开的 HTML 网页。

那个版本可以称为 V1 基础版。

它最大的价值是：快、简单、能用。

但问题也很明显。

它更像一篇“被搬进网页里的文章”，而不是一个真正有作品感的网页。

这篇文章，我们进入第 2 步：

给网页加入图片素材，让它从纯文字页面，升级成一个更有视觉节奏的图文作品。

这一步我们会用到 Claude Code。

---

一、先回顾 V1：能看，但不够像作品

V1 的目标很简单：

把公众号文章转成一个单文件 HTML。

它解决的是“有没有”的问题。

比如：

• 内容能不能完整保留；

• 网页能不能直接打开；

• 手机端能不能正常阅读；

• 不会写代码的人能不能完成第一版。

这些问题，V1 已经解决了。

但当我们真正打开 V1 页面时，会发现它还有几个明显不足。

1. 页面太“干”

整页几乎都是文字。

虽然能读，但缺少画面感。

用户打开之后，很难在第一眼感受到这篇文章的主题、情绪和价值。

2. 缺少视觉停顿

一篇文章如果全是文字，读者很容易疲劳。

尤其是在手机端阅读时，如果没有图片、卡片、引用块、重点信息区，页面会显得很平。

3. 不像一个商业化作品页

如果只是自己看，V1 够用了。

但如果你想把它作为课程案例、活动介绍页、作品展示页，甚至发给别人看，V1 的质感就明显不够。

所以第二步要做的事情，不是重写文章，而是升级呈现方式。

原文内容不乱改，页面结构重新设计。

---

二、V2 的核心思路：先准备图片，再让 AI 接进网页

很多人做网页时容易犯一个错误：

一上来就让 AI “帮我做得好看一点”。

这个要求太模糊。

AI 不知道你有什么素材，也不知道哪些图片可以用，更不知道这些图片应该放在哪里。

所以 V2 的正确做法是：

先准备图片素材，再让 Claude Code 读取本地目录，把图片自然地接进网页结构里。

也就是说，我们不是让 AI 凭空生成一个页面，而是让它基于现有材料做改造。

这一步的输入包括两部分：

第一，V1 的基础 HTML 页面。

第二，本地已经准备好的图片素材。

Claude Code 要做的事情，就是把这两部分结合起来。

---

三、为什么这一篇开始用 Claude Code？

上一篇用千问，是因为它适合快速生成第一版。

但到了 V2，我们要处理本地文件和目录结构，千问就不太方便了。

这时 Claude Code 更适合。

原因有三个。

1. 它可以读懂本地目录结构

我们可以告诉 Claude Code：

图片在哪个目录，基础版网页在哪个目录，最终文件要输出到哪里。

它可以先读取素材目录，再根据文件名判断有哪些图片可以用。

这比单纯复制粘贴给网页 AI 更接近真实开发流程。

2. 它可以直接修改 HTML、CSS、JS 文件

V2 不再是一个简单的单文件 HTML。

我们希望它更接近正式网站结构：

index.html
css/style.css
js/main.js
assets/

这样后续继续升级会更清晰。

HTML 负责结构，CSS 负责视觉，JS 负责简单交互。

Claude Code 很适合做这种文件级改造。

3. 它可以和已有网页继续协作

我们不是从零开始。

我们已经有了 V1。

所以可以让 Claude Code 先读取 V1，再解析文章结构，包括标题、作者、时间、章节、小标题、正文、引用、列表和结尾。

然后在不改变原文事实的基础上，把它升级成 V2。

这也是 AI 做网页时非常关键的能力：

不是重新写一篇，而是在已有内容上做结构化升级。

---

四、准备目录结构

这一步需要先准备两个目录。

一个是 V1 基础网页目录。

public/v1-qwen-basic/

里面通常会有：

index.html

或者：

v1.html

另一个是 V2 图片素材目录。

public/v2-claude-assets/assets/

图片全部放在这个 assets 目录里。

比如：

assets/
  hero.jpg
  step-01.jpg
  step-02.jpg
  compare.jpg
  mobile-view.jpg

这里不要求图片名字一定这样写。

但建议尽量做到语义清楚。

比如：

• hero.jpg：适合做首屏封面；

• workflow.jpg：适合表现操作流程；

• compare.jpg：适合展示前后对比；

• mobile.jpg：适合展示手机端效果。

文件名越清楚，Claude Code 越容易判断图片用途。

---

五、给 Claude Code 的完整操作提示词

这一篇最重要的是提示词。

我们要让 Claude Code 严格按步骤做，而不是随便发挥。

可以把下面这段直接发给 Claude Code。

请严格按以下步骤执行：

1. 先读取并列出 assets 目录下所有图片文件名。

2. 在基础版网页目录中查找原始 HTML，优先读取 index.html，如果没有再读取 v1.html。

3. 解析基础版 HTML 的文章结构，包括：
主标题、作者 / 时间 / 来源信息、章节标题、小标题、正文段落、引用、列表、结尾内容。

4. 在不改写原文事实、数据、人名、引语和核心观点的前提下，将基础文章升级成商业化图文作品网站。

基础版网页目录：

F:\素材\趁早AI\AI2.0\网页制作\ai-web-demo-showcase\public\v1-qwen-basic

图片素材目录：

F:\素材\趁早AI\AI2.0\网页制作\ai-web-demo-showcase\public\v2-claude-assets\assets

最终输出：

F:\素材\趁早AI\AI2.0\网页制作\ai-web-demo-showcase\public\v2-claude-assets\index.html

F:\素材\趁早AI\AI2.0\网页制作\ai-web-demo-showcase\public\v2-claude-assets\css\style.css

F:\素材\趁早AI\AI2.0\网页制作\ai-web-demo-showcase\public\v2-claude-assets\js\main.js

补充要求：

页面按商业化网站标准设计，不要做普通公众号排版。

必须使用以下结构：
- Hero 首屏
- 顶部导航
- 章节目录
- 图文交替
- 重点信息卡片
- 引用块
- 阅读进度条
- 返回顶部
- 移动端菜单

允许使用 CDN、外部字体和少量原生 JS。

不要使用 Node、npm、Vue、React、构建工具。

图片全部使用相对路径：
./assets/xxx.jpg

不要复制、移动、删除素材。

移动端优先，兼容桌面端。

整体风格要求：
高级、干净、有商业展示质感。

完成后请列出：
1. 生成的文件
2. 使用到的图片路径
3. 使用的外部资源
4. V1 到 V2 的主要改动点

这段提示词的重点是：先读取、再解析、再改造、最后输出。

不要让 Claude Code 一上来就写页面。

它必须先知道有哪些图片，也必须先读懂 V1 的文章结构。

六、操作步骤拆解

第 1 步：把图片放进 assets 目录

先把图片素材统一放到：

public/v2-claude-assets/assets/

注意，不要放得太散。

不要一部分在桌面，一部分在下载目录，一部分在项目外面。

最好统一放到一个 assets 文件夹里。

这样 Claude Code 才能稳定引用。

图片路径最终应该是：

./assets/图片文件名.jpg

而不是电脑上的绝对路径。

比如网页里不应该出现：

F:\素材\xxx\hero.jpg

而应该出现：

./assets/hero.jpg

这是因为网页最终打开时，只能识别相对路径。

---

第 2 步：让 Claude Code 先列出图片清单

这一步很重要。

不要直接让它开始改页面。

先让它读取 assets 目录，并列出所有图片文件名。

这样你可以确认两件事：

第一，Claude Code 有没有读到正确目录。

第二，图片文件名是否符合预期。

如果它列出来的图片不对，说明路径可能填错了。

这一关确认无误后，再继续改造页面。

---

第 3 步：让 Claude Code 读取 V1 HTML

接下来，让 Claude Code 去基础版网页目录里查找原始 HTML。

规则是：

优先读取：

index.html

如果没有，再读取：

v1.html

这样设计是为了兼容不同人的保存习惯。

有些人上一版保存为 index.html，有些人保存为 v1.html。

只要目录里有其中一个，就可以继续。

---

第 4 步：解析文章结构

这一步不是为了改写文章，而是为了保护文章。

Claude Code 需要先识别原文结构：

这样它后面做图文设计时，就不会乱删内容，也不容易改变原意。

这里要特别强调：

V2 是表现形式升级，不是文章内容重写。

事实、数据、人名、引语、核心观点都不要乱动。

---

第 5 步：升级为商业化图文作品网站

这是 V2 的核心。

我们不再做普通公众号排版，而是把页面当成一个“作品展示网站”来设计。

可以让 Claude Code 从这些结构入手。

Hero 首屏

页面一打开，先看到一个完整的首屏区域。

Hero 的作用是让读者第一眼就知道：

这篇内容讲什么，为什么值得看。

顶部导航

顶部导航可以包含：

不需要做得复杂，但要有网站感。

章节目录

文章比较长时，目录很有用。

它可以让读者快速知道整篇文章结构，也方便跳转。

这一步会让页面从“长文章”变成“可导航内容”。

图文交替

不要把图片全部堆在开头，也不要全部放在结尾。

更好的方式是：

一段内容，一张图。

一个步骤，一张图。

一个对比，一组图。

让图片成为阅读节奏的一部分，而不是简单装饰。

重点信息卡片

文章里的关键结论，可以做成卡片。

比如：

• V1 解决“能打开”；

• V2 解决“有作品感”；

• 图片不是装饰，而是信息结构；

• 相对路径比绝对路径更适合网页交付。

卡片可以让重点信息更容易被记住。

引用块

文章里的核心观点，可以做成引用块。

比如：

V2 的重点不是重写文章，而是让同一篇文章拥有更好的网页表达。

这种内容放在引用块里，视觉上更有停顿感。

阅读进度条

阅读进度条是一个很小但很有效的细节。

用户向下滚动时，顶部进度条会跟着变化。

这会让页面更像一个完整网站，而不是静态文档。

返回顶部按钮

当页面较长时，返回顶部按钮很实用。

尤其是手机端，用户读到底部后可以快速回到顶部。

移动端菜单

既然这个页面主要面向内容阅读，就必须考虑手机端。

移动端顶部导航不要硬挤在一行。

可以做成一个简单的菜单按钮，点击后展开导航项。

---

七、V1 和 V2 的对比

完成之后，可以做一个简单对比。

对比项	V1 基础版	V2 图文作品版
页面形态	纯文字文章页	图文作品网站
视觉效果	干净但普通	更有层次和展示感
图片使用	基本没有	使用本地素材穿插
页面结构	标题 + 正文	Hero + 导航 + 目录 + 卡片 + 图文区
交互能力	几乎没有	阅读进度、返回顶部、移动端菜单
适合用途	验证内容可转网页	展示案例、作品沉淀、对外分享

V1 解决的是“能不能变成网页”。

V2 解决的是“能不能变得更像作品”。

这两个阶段的目标不一样。

所以不要拿 V1 去要求设计感，也不要拿 V2 去追求一步到位。

它们是递进关系。

---

八、V2 的最终交付物

完成后，V2 目录里应该至少有这几个文件：

public/v2-claude-assets/
  index.html
  css/
    style.css
  js/
    main.js
  assets/
    图片素材文件

其中：

index.html 负责页面结构。

css/style.css 负责页面样式。

js/main.js 负责少量交互，比如阅读进度条、返回顶部、移动端菜单。

assets/ 负责存放图片素材。

最后可以让 Claude Code 输出一份总结，包括：

生成文件：
- index.html
- css/style.css
- js/main.js

引用图片：
- ./assets/xxx.jpg
- ./assets/xxx.png

外部资源：
- Google Fonts 或其他字体 CDN
- 图标 CDN，如有使用

主要改动：
- 从纯文字页面升级为图文作品页面
- 增加 Hero 首屏
- 增加顶部导航和章节目录
- 增加图文交替布局
- 增加阅读进度条、返回顶部、移动端菜单

这份总结很重要。

它不仅方便你检查结果，也方便后面写教程、做案例展示。

十、这一版的优点和局限

V2 相比 V1，最大的提升是视觉节奏。

它不再只是文字堆叠，而是有了封面、有了图片、有了模块、有了页面层次。

读者打开之后，会更容易感受到这是一份被设计过的内容。

但 V2 也不是终点。

---