Cursor实践项目-12-AI生成的配图很丑？因为你从第一步就错了！Cursor生成SVG知识卡片

项目说明

cursor项目实践-12-AI生成的配图很丑？因为你从第一步就错了！Cursor生成SVG知识卡片

耗费时间：约1.5小时

Cursor使用次数：2次左右

很多时候我们使用AI工具直接生成图片，效果往往不尽人意。本项目针对使用Cursor生成知识卡片进行了探索，通过指定提示词(规则文件)，针对输入的内容，提炼总结转化为专业、美观、风格统一的SVG知识卡片。

而且更重要的是——这个方法不只是做图，几乎所有内容输出（文章、方案、PPT、营销页），都能用同样的方法快速完成。

所以今天我不仅分享这个图是怎么做的，还教会大家底层的方法，以后所有风格的图都可以用类似的方法来实现。

成果展示

最终生成了一个HTML文件，内嵌了4个SVG知识卡片，展示了AI配图方法论的核心步骤。卡片具有科技感、专业化的视觉风格，包含了标题、核心要点、视觉元素和金句。

成果展示1 成果展示2

前置准备

  • Cursor
    • 版本：1.2.4
    • cursor rules : Cursor Rules
    • agent: claude-4-sonnet
  • Gemini CLI 集成

问题记录

  1. AI生成的svg图标，具体的位置会有问题，容易和字体交叉或者错位
    • 还是需要手动对svg的代码进行修改，调整位置
    • 可以考虑做一个小工具针对svg里面的块级元素进行调整(仅位置和大小调整)

使用心得

  1. 范例是最好的输入: 与其用模糊的语言描述“漂亮”，不如给AI一个明确的优秀范例，让它“反向分析”，这是获得高质量、稳定输出的关键。
  2. 内容优先，视觉其次: 好的视觉呈现依赖于清晰的内容结构。先用AI把内容逻辑拆解清楚，再进行视觉化，图自然好看。
  3. AI要“组团打怪”: 利用不同AI的优势进行流水线作业。例如，使用Claude进行文本分析和结构化，使用Gemini/Dalle进行视觉生成，效率和效果都更高。
  4. 提示词模板是复利资产: 将一次成功的提示词结构化、模板化，就可以在未来无数次地复用，极大地提高了内容创作的效率和一致性。
  5. cursor项目应用: 使用cursor项目，可以固化规则，设置输入和输出，不用每次都找提示词。同时也方便微调图片

项目详细步骤

第一步：找到优秀范例，让AI“反向拆解”

  1. 找到对标范例: 首先，找到一张你认为视觉风格非常出色的知识卡片图片。

  2. 向Cursor(Claude)提问: 发送这张图片给Cursor，并使用类似以下的提示词，让它分析并生成一个可复用的提示词模板。

    你是一个专业的UI 设计师，我现在想让AI帮我生成类似于这样的一个知识卡片，我发送一段内容，AI 帮我拆解生成这样风格的卡片，我需要你帮我逆向这个风格，并且生成一段通用的提示词，用 Markdown 格式给到我

反向拆解范例
  1. 获取提示词模板: AI会返回一个详细的Markdown格式的提示词模板，包含设计规范、内容结构、视觉元素、输出格式等。这成为了后续所有卡片生成的基础。
# AI知识卡片生成提示词

请根据以下要求，为我提供的内容生成知识卡片设计：

## 设计规范

-**整体风格**：科技感、专业化、现代简约
-**配色方案**：深色背景（#1a1a1a）+ 青绿色高亮（#00d4aa）+ 白色文字
-**卡片尺寸**：16:9横版比例，适合PPT展示

## 单卡片要求
### 标题设计

- 主标题：中文，字体加粗，居左上角- 副标题：英文大写，小号字体，主标题下方- 标题颜色：白色或青绿色

### 内容结构
- 核心观点：1-3个关键信息点，用bullet point展示
- 数据支撑：如有数据，用简洁的可视化图表呈现（线图、柱状图、趋势图等）
- 补充说明：简短的解释性文字或金句总结

### 视觉元素
- 背景装饰：点阵图案、几何线条或网格纹理
- 数据图表：简约风格的可视化元素
- 高亮元素：用青绿色突出重点信息
- 留白处理：保持适当留白，信息层次清晰

### 文字规范-
主要文字：白色，清晰易读
- 强调文字：青绿色高亮
-字体层级：标题>重点>正文>注释
- 中英文混排：保持统一的视觉节奏

## 内容处理流程
1.**内容分析**：首先分析提供的内容，识别核心主题数量
2.**询问确认**：询问用户希望生成几张卡片（建议范围：3-8张）
3.**主题提炼**：将内容拆解为对应数量的核心主题
4.**要点归纳**：每个主题提炼2-3个关键要点
5.**视觉设计**：为每个主题设计对应的视觉元素

## 输出格式对于每张卡片提供：
-**卡片标题**（中英文）
-**核心要点**（2-3条bullet points）
-**视觉元素建议**（图表类型、装饰元素等）
-**重点文字**（需要青绿色高亮的关键词）
-**底部金句**（如适用）

## 使用步骤
1. 用户提供要转换的内容
2. AI分析内容并询问："根据您的内容，我建议生成X张卡片，您希望生成几张？"
3. 用户确认数量后，AI按规范生成对应的卡片设计
  1. 设置cursor的项目规则:将这个模版设置为项目规则 .cursor/rules/project-rules.mdc中
设置项目规则

第二步：用模板快速输出结构化内容

  1. 新开对话窗口: 为了避免上下文干扰，新开一个对话窗口。
  2. 给出内容: 附上你需要进行视觉化呈现的原始文章或内容，提出具体的图片要求
根据项目规则，帮我总结 @XXXXX.md（具体文章，也可以是链接，图片等）。然后编写知识卡片。生成4张对应的svg图片，并整合成一个html，输出英文版和中文版两个版本。放到output目录下。
  1. AI结构化内容: AI会根据模板的要求，将你的长文内容自动拆解、提炼，并整理成多张卡片的结构化大纲。每张卡片都包含中英标题、核心要点、视觉建议和高亮关键词等。
设置项目规则

第三步：让AI自动生成视觉化输出 (SVG)

  1. AI输出效果图: 基于第二步生成的结构化内容，cursor会自动生成视觉化代码。
设置项目规则
  1. 生成并微调: AI会生成包含SVG代码的图片和最终的HTML文件。你可以在Cursor中直接预览和修改代码，进行细节微调，直到满意为止。
设置项目规则
  1. 最终输出: 最终得到了一个html和4张对应的svg图片文件，完美地将文章内容转化为了高质量的视觉知识卡片。

额外的尝试，直接用GeminiCLI读取规则生成图片

  • GeminiCLI 是 Gemini 的命令行工具，也可以直接读取规则和内容生成图片
  • 效果稍有不同，更简单些，但是更省钱，不费次数
设置项目规则 设置项目规则