欢迎来到涛涛聊AI
1、需求痛点
在学习当中经常遇到一些知识点，想和大家分享。但只有文本形式，很多人不愿意去阅读，也看不到重点。
如果自己去单独设计页面版式，又太浪费时间。那就想着有没有一种方法，可以把一个知识点做成卡片形式的。
当然通过扣子平台可以完成。可是每一个知识点的形式不固定。有大有小，有长有短。
让大模型生成图片又行不通。想到了让大模型生成网页形式，然后再对网页形式截图，形成卡片。
好主意，说干就干。
大模型生成网页这个已经没有难度，而且也进行了实验，完全可行。
优先解决生成图片的问题。
经过网络搜索，知道了这个wkhtmltopdf.但其实也可以生成网页。下面我们就一步一步来演示操作。
2、软件安装。
这个软件不太好找，很多的时候下载不下来。为了方便大家使用，我已经将它放置网盘。需要的同学自行获取。
更换安装路径。
为了避免后期在使用命令行调用的时候，出现莫名的错误。所以这里建议放到一个没有空格的，并且只有英文的目录当中。
3、查看帮助。
查看目录结构。
内容非常少，在bin目录有exe文件。
显示命令选项。
利用大模型进行翻译。
直接把图片丢给豆包大模型。
这是 wkhtmltoimage 工具的命令行选项说明文档 。wkhtmltoimage 是一个能将 HTML 页面转换为图片的工具。以下是对这些选项的介绍：
一般选项
- 裁剪相关
-
--crop-h <int>：设置裁剪高度。--crop-w <int>：设置裁剪宽度。--crop-x <int>：设置裁剪的 x 坐标。--crop-y <int>：设置裁剪的 y 坐标。
- 帮助信息
-
-H, --extended-help：显示更详尽的帮助信息，介绍不常见的命令开关。-h, --help：显示普通帮助信息。
- 文件格式
-
-f, --format <format>：指定输出图片的格式 。
- 屏幕尺寸相关
-
--height <int>：设置屏幕高度（默认根据页面内容计算，默认值为 0 ）。--width <int>：设置屏幕宽度，仅作为参考值，使用--disable -smart-width可使其严格生效（默认值 1024）。
- 许可与日志
-
--license：输出版本许可信息后退出。--log-level <level>：设置日志级别，可选择none（无日志）、error（错误日志）、warn（警告日志）、info（信息日志，默认值 ）。-q, --quiet：减少输出信息，等同于--log-level none，用于向后兼容。
- 图片质量与版本
-
--quality <int>：设置输出图片质量，取值范围 0 - 100（默认 94 ）。-V, --version：输出版本信息后退出。
如果使用中遇到问题或想请求新功能，可访问 <https://wkhtmltopdf.org/support.html>
4、实战演练。
使用大模型生成的相关使用。
第一次的提示词
我写的提示词如下。
请帮我生成关于 wkhtml2pdf.相关知识的介绍和使用。用html格式输出。我要将网页截成图片。方便在手机上阅读。所以生成的网页宽高比。要对手机访问友好。让大模型优化提示词。
再次和AI交互
我现在想编写一段大模型提示词，我把需求发给你，你帮我把提示词生成下，AI上道了。
我的需求
任务类型 ：创意HTML编写
核心需求：更加用户输入的主题，生成相关知识、或者使用的简述
角色设定：AI专家，技术专家
输入数据：一个主题
输出要求：html格式
约束条件：版式面向手机访问
需求参考示例：python学习路线、什么是智能体、AI绘画如何入门AI给出的模版
### 角色设定
您是兼具AI专家与技术传播者双重身份的知识架构师，擅长将复杂概念转化为移动端友好的结构化内容。
### 核心任务
基于用户提供的主题，生成符合以下要求的知识内容：
1. 核心概念解释（3个关键点）
2. 学习/实践路径（分3阶段）
3. 常见问题解析（2-3个典型问题）
4. 资源推荐（分工具/教程/社区3类）
### 背景约束
- 用户场景：手机端知识速查
- 知识深度：兼顾新手理解与进阶指引
- 风险规避：需标注前沿技术的局限性
### 输入处理
{{ 用户主题 }} 示例参考：
- Python学习路线：需包含版本选择建议、IDE对比
- 智能体技术：区分与传统AI的差异
- AI绘画入门：提示词工程基础+版权声明
### 输出要求
1. **结构规范**
- 每模块带🔑emoji引导重点
- 段落≤3行，每行≤15字
- 技术名词后括号标注英文
2. **移动端优化**
- 主标题H2+子标题H3
- 关键数据用**加粗**突出
- 避免嵌套表格/复杂列表
3. **内容控制**
- 总字数300-400字
- 每模块包含1个类比案例
- 禁用数学公式
### 生成示例（以"深度学习入门"为例）
🔑 **核心三要素**
- 神经网络（Neural Network）→ 类脑结构模拟
- 损失函数（Loss Function）→ 效果评估尺
- 反向传播（Backpropagation）→ 参数调整术
📚 **三阶段路径**
1. 基础认知：Python→线性代数→PyTorch
2. 实战进阶：Kaggle Titanic→MNIST手写识别
3. 领域深化：CV/NLP/RL任选专项突破
...做了个工作流，但格式太固定了。而且也不是html，难道是我的想法不能实现？
还是我自己分下类吧但生成的markdown，我要的是html，调整提示词。
第三次提示词
# 角色
你是一位出色的知识架构师，兼具AI专家与技术传播者的双重身份，擅长把复杂概念转化为适合移动端浏览的结构化内容。
## 技能
### 技能 1: 概念类知识内容
1. 基于用户提供的主题，生成主题的知识内容：
- 核心概念解释（3个关键点）
- 学习/实践路径（分3阶段）
- 实例（2个例子）
- 常见问题解析（2 - 3个典型问题）
- 资源推荐（分工具/教程/社区3类）
### 技能 1: 实操类技能
2. 基于用户提供的主题，生成主题的知识内容：
- 操作步骤
- 常见问题解析（2 - 3个典型问题）
2. 生成的内容需符合以下规范：
- 结构规范：
- 每模块带🔑emoji引导重点
- 段落≤3行，每行≤15字
- 移动端优化：
- 主标题H2+子标题H3
- 关键数据用加粗突出
- 避免嵌套表格/复杂列表
- 内容控制：
- 总字数300 - 400字
- 每模块包含1个类比案例
- 禁用数学公式
- 输出格式：
-输出为HTML格式
### 示例参考（以"深度学习入门"为例）
🔑 **核心三要素**
- 神经网络（Neural Network）→ 类脑结构模拟
- 损失函数（Loss Function）→ 效果评估尺
- 反向传播（Backpropagation）→ 参数调整术
📚 **三阶段路径**
1. 基础认知：Python→线性代数→PyTorch
2. 实战进阶：Kaggle Titanic→MNIST手写识别
3. 领域深化：CV/NLP/RL任选专项突破
### 输入处理
{{ 用户主题 }}示例参考：
- Python学习路线：需包含版本选择建议、IDE对比
- 智能体技术：区分与传统AI的差异
- AI绘画入门：提示词工程基础+版权声明
## 限制:
- 用户场景限定为手机端知识速查。
- 知识深度需兼顾新手理解与进阶指引。
- 需标注前沿技术的局限性。
- 生成html格式
- 所输出的内容必须按照给定的格式进行组织，不能偏离框架要求。还得慢慢优化。
wkhtmltoimage 命令行示例
自由发挥
为了兼容问题的随机性，干脆去掉过多的限定，让大模型自由发挥些。
请根据用户的主题生成相关知识的介绍和使用。
要求
1、用html格式输出，我要将网页截成图片。
2、页面版式方便在手机上阅读
3、添加emoji符合方便阅读
4、样式和内容在一起，不要分成多个文件测试下
原始网页
结果emoji表情没有了
更换为添加颜色吧
还好吧，慢慢优化。
这样可以批量用程序去生成小卡片
.\wkhtmltoimage.exe --quality 85 D:\ProgramData\wkhtmltopdf\html\mcp2.html aaa2.jpg