以下内容基于「用 Claude 4 把 Twitter 高赞信息图 → HTML 模板 → 可复用提示词」这一整套思路，写一份可直接收藏、照抄、落地的超详细教程。 目标：
- 让零代码基础的人也能 30 分钟做出 1200×1800 一屏信息图；
- 一次做图，终身复用，后续 2 分钟出新图；
- 所有资源、指令、踩坑点一次给齐，拿来即用。
一、先给结果：30 秒预览全流程
| 步骤 | 你要做的事 | 耗时 | 交付物 |
|---|---|---|---|
| ① 找图 | 在 X 搜“infographic”保存 3 张高赞图 | 5 min | 3 张参考图 |
| ② 图生码 | 把参考图丢给 Claude 4，让它“复刻成 HTML” | 3 min | 90% 还原的 HTML |
| ③ 微调 | 自己改颜色、字号、行高到 100% 还原 | 10 min | 母版 HTML |
| ④ 固化 | 换色/换模块顺序，做 2 个变体 | 5 min | 2-3 个模板 |
| ⑤ 提炼 | 让 Claude 4 总结“提示词” | 2 min | 一段可复用咒语 |
| ⑥ 复用 | 以后“内容 + 提示词 + 垫图”三件套给 Claude，2 min 出新图 | ∞ | 批量封面 |
二、原理：为什么一定要“先 HTML，再提示词”？
- 纯提示词出图（Midjourney、DALL·E）→ 字体乱、中文乱、尺寸乱，不可控。
- 纯代码出图（HTML+CSS）→ 100% 可控，但每次都重写太麻烦。
- 折中方案：
- 先用 Claude 4「图生 HTML」一次性拿到 90% 基准代码；
- 人工把 90%→100%，固化成模板；
- 再把“100% 效果”反向提炼成 1 段提示词 + 1 张垫图；
- 以后换内容不换壳，2 分钟一张，稳定输出。
三、前置准备：工具一次装完
| 工具 | 用途 | 价格 | 备注 |
|---|---|---|---|
| Claude 4（claude.ai） | 图生 HTML | 20 $/月 | 目前唯一支持“上传图片→返回完整 HTML”且中文不乱码 |
| Trae.AI（trae.ai） | 国内直连 Claude 4 的 IDE | 3 $/月 | 开箱即用，免翻墙 |
| Font Awesome CDN | 图标库 | 0 $ | 一行代码引入，6000+ 图标 |
| 浏览器 | 实时预览 | 0 $ | 拖入 HTML 即可看效果 |
四、Step-By-Step 手把手演示
下面用一张“浅米黄信纸+超大数字+细线图表”风格的信息图做演示，你照抄即可。
4.1 找图：3 个关键词 10 秒搞定
打开 Twitter/X，搜：
infographic (investing OR finance) lang:en min_faves:100 since:2024-01-01→ 过滤出“投资/金融”领域高赞图，保存 3 张。 （任何领域都行，核心原则：字体大、模块少、留白多，方便后续 HTML 还原。）
4.2 图生码：一句话咒语
把图下载后，打开 Claude 4，上传图片，输入：
请把这张信息图完整复刻成一份“单文件 HTML”。
要求：
1. 画布固定 1200×1800 px，一屏展示，不滚动；
2. 中文用 Noto Sans SC，英文用 Roboto；
3. 颜色、字号、行高、图标 100% 还原；
4. 只返回完整代码，无需解释。30 秒后拿到第一段 HTML，直接本地保存为 cover.html，双击浏览器打开，就能看见 90% 还原的效果。
4.3 微调：5 个高频坑一次填完
| 坑 | 症状 | 一键修复 |
|---|---|---|
| 行距挤 | 字粘在一起 | line-height: 1.8; |
| 色块跳 | 高亮条太刺眼 | background: rgba(255,179,0,0.1); |
| 图标歪 | 和文字不齐 | vertical-align: middle; |
| 英文断 | 单词被拆行 | word-break: keep-all; |
| 留白多 | 底部空一大块 | 最外层容器 height: 1800px; 再 margin: 0 auto; |
把以上 5 处改完，基本 100% 还原。
4.4 固化：2 分钟做 3 个变体
复制 cover.html → 改主色 → 保存：
cover-gold.html主色 #FFB300cover-blue.html主色 #0052D9cover-bw.html黑白极简 以后换色直接拖对应模板即可。
4.5 提炼：让 Claude 4 帮你写“咒语”
把最终版 HTML 全选 → 粘到 Claude 4 → 输入：
请把这份 HTML 的“风格特征”总结成一段 150 字以内的提示词，
以后我提供新内容，你直接按这段提示词就能复刻同风格。
要求：只返回提示词，不要代码。得到类似下面这段（可直接复用）：
Magazine Layout，浅米黄信纸背景，现代高端，中文超大粗体，英文小号，强烈反差，超大数字/标题，细线图表，Font Awesome 图标，单色 10% 透明度渐变高亮，分栏留白，1200×1800 一屏。4.6 复用：2 分钟出一张新图
以后任何新选题，只需 3 步：
- 打开 Claude 4 → 上传任意一张模板截图（垫图）；
- 粘贴上面“咒语”+ 你的新内容；
- 把返回的 HTML 保存 → 浏览器打开 → 截图发公众号。 实测：从复制文案到最终出图，全程 120 秒。
五、模板级指令库（直接抄）
下面给出 3 套已跑通的“母版咒语”，对应 3 种爆款风格，按需取用。
5.1 投资金·信纸风格
任务：用 HTML 生成一张 1200×1800 一屏信息图。
风格：Magazine Layout，浅米黄信纸背景 #F9F5EB，现代高端。
字体：中文 900 号超大粗体突出数字，英文 24 号 Roboto 点缀。
元素：超大数字 + 细线柱状图（纯 div）+ Font Awesome 图标，禁用 emoji。
颜色：主色 #FFB300，仅 10% 透明度高亮，避免高饱和。
结构：上下分栏，留白 ≥ 80 px，所有内容一屏可见。
内容：{粘贴你的内容}。
输出：只返回完整 HTML，无需解释。5.2 科技蓝·深色模式
任务：用 HTML 生成一张 1200×1800 一屏信息图。
风格：Dark Tech，深灰背景 #0F1114，霓虹蓝 #00D4FF 点缀。
字体：中文 800 号白色，英文 28 号 Roboto Mono 等宽。
元素：荧光描边柱状图（CSS border），Font Awesome 实心图标。
颜色：黑灰底 + 单色霓虹，避免渐变。
结构：左右双栏，左侧大图，右侧数字，留白 ≥ 60 px。
内容：{粘贴你的内容}。
输出：只返回完整 HTML，无需解释。5.3 黑白极简·学术风
任务：用 HTML 生成一张 1200×1800 一屏信息图。
风格：Minimal，纯白背景，纯黑文字，无彩色。
字体：中文 700 号黑体，英文 26 号 Helvetica。
元素：只有文字 + 1 px 细线 + 圆环图（CSS），无图标。
颜色：纯黑白，最多 5% 灰度辅助。
结构：居中卡片，四周留白 100 px，一屏可见。
内容：{粘贴你的内容}。
输出：只返回完整 HTML，无需解释。六、常见疑问 Q&A
Q1 不会写代码，看不懂 HTML 怎么办？ A：只管改中文文字，其余一律不动；颜色用在线调色板复制 6 位色码替换即可。
Q2 Claude 4 返回的代码中文乱码？
A：在 <head> 里加：
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700;900&display=swap" rel="external nofollow" rel="stylesheet">Q3 图表不会画？ A：纯 div 模拟即可，Claude 4 会自动生成示例，把高度百分比改成你的数据即可。
Q4 需要响应式吗？ A：公众号封面固定 900×500 区域截图，无需响应式；保证 1200×1800 一屏完整即可。
Q5 可以商用吗？ A：你自己改完内容、换完数据，模板属于“重新创作”，可商用；原始参考图如含版权素材，勿直接盗图。
七、进阶：如何批量做 100 张？
- 把母版 HTML 拆成“标题、数字、图表、结论”四段，用
{{}}做占位符； - 写 5 行 Python 脚本，读取 Excel 表格，循环替换四段变量，生成 100 份 HTML；
- 用无头浏览器（Playwright）批量打开 → 截图 → 自动命名
cover_001.png…cover_100.png； - 一晚跑完 100 张封面，直接排期发公众号。
八、总结：一句话记住
“找图 → 图生码 → 微调到 100% → 提炼咒语 → 终身复用”， 掌握这 5 步，你就拥有了一台 2 分钟/张的“封面永动机”。 立刻去保存 3 张高赞信息图，今晚就把你的第一个 HTML 模板跑通！
微信扫描下方的二维码阅读更多精彩内容
声明：本站所有文章，如无特殊说明或标注，均为橙市播客原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
