网站设计师证书软文文章

欢迎来到涛涛聊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