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 的命令行工具，也可以直接讀取規則和內容生成圖片
  • 效果稍有不同，更简单些，但是更省錢，不費次數
設置專案規則 設置專案規則