name: knowledge-card description: Generate beautiful knowledge concept cards (知識概念卡片) from book summaries, notes, or topics. Creates visually appealing infographic-style cards with core concepts, quotes, and branding. Use when user asks to "生成知識卡片", "做成知識圖解", "create a knowledge card", or provides content that should be visualized as a concept card.

Knowledge Card Generator

Generate beautiful knowledge concept cards (知識概念卡片) from any content: book summaries, course notes, meeting insights, or topic overviews.

When to Use

Trigger this skill when the user: - Asks to "生成知識卡片" / "做成知識圖解" / "create a knowledge card" - Provides book/course content and wants a visual summary - Says "把這個做成卡片" / "幫我視覺化這些概念" - Mentions "KnowledgeCard:" followed by content

What It Does

1. Extracts 4-5 core concepts from the input (book/notes/topic)
2. Generates a high-quality PNG card (2400px width, 3x DPI) with:
3. Gradient top bar + title + subtitle
4. Each concept: icon + title + tag + quote + explanation
5. Bottom quote block (optional)
6. Brand footer
7. Sends the image directly to the current chat

Workflow

Step 1: Analyze Input

If user provides raw content (book summary, notes, transcript), extract: - Main title (book name or topic) - Subtitle (optional tagline or author) - 4-5 core concepts, each with: - Title (concept name) - Tag (1-2 word label) - Quote (original quote or distilled insight) - Description (2-3 sentences explaining the concept)

If user provides structured data (JSON), use it directly.

Step 2: Choose Theme

Pick a theme color based on content tone: - blue — default, knowledge/wisdom - green — growth/health/sustainability - orange — wealth/energy/action - red — passion/urgency/relationships - purple — creativity/spirituality - teal — technology/innovation

Step 3: Generate Card

Run the script:

node scripts/generate.js \
  --title "書名或主題" \
  --subtitle "副標題（可選）" \
  --badge "標籤（如：核心概念）" \
  --theme "blue" \
  --concepts '[
    {
      "icon": "💡",
      "color": "#3B82F6",
      "bg": "#DBEAFE",
      "title": "概念名稱",
      "tag": "標籤",
      "quote": "金句或原文引用",
      "desc": "2-3句解讀，用<b>加粗</b>強調關鍵詞"
    },
    ...
  ]' \
  --quote "底部金句（可選）" \
  --quote-author "—— 作者" \
  --brand "心光年覺醒讀書會" \
  --vol "Vol.01 · 系列名" \
  --output /tmp/output.png

The script prints the output path on success.

Step 4: Send to User

⚠️ 發圖方式按渠道不同，必須分支處理：

飛書渠道（channel=feishu）

直接調飛書 API 上傳圖片再發送，不要用 message(filePath=...)（會失敗）：

# Step 4a: 獲取 token
APP_ID="your_feishu_app_id"        # 替換成你的飛書 App ID
APP_SECRET="your_feishu_app_secret"  # 替換成你的飛書 App Secret
TOKEN=$(curl -s -X POST "https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal" \
  -H "Content-Type: application/json" \
  -d "{\"app_id\":\"$APP_ID\",\"app_secret\":\"$APP_SECRET\"}" \
  | python3 -c "import sys,json; print(json.load(sys.stdin)['tenant_access_token'])")

# Step 4b: 上傳圖片，獲取 image_key
IMAGE_KEY=$(curl -s -X POST "https://open.feishu.cn/open-apis/im/v1/images" \
  -H "Authorization: Bearer $TOKEN" \
  -F "image_type=message" \
  -F "image=@/path/to/output.png" \
  | python3 -c "import sys,json; print(json.load(sys.stdin)['data']['image_key'])")

# Step 4c: 傳送圖片訊息
# receive_id 是目標使用者的 open_id 或群的 chat_id
# receive_id_type: open_id（私聊）或 chat_id（群聊）
curl -s -X POST "https://open.feishu.cn/open-apis/im/v1/messages?receive_id_type=open_id" \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d "{\"receive_id\":\"$RECEIVE_ID\",\"msg_type\":\"image\",\"content\":\"{\\\"image_key\\\":\\\"$IMAGE_KEY\\\"}\"}"
本技能來自小蔥技能站7w4.net。

然後用 message 工具發一條文字訊息作為說明（可選）。

QQ 渠道（channel=qqbot）

使用 qqbot-media skill 的 <qqmedia> 標籤傳送圖片： 先讀取 ~/.openclaw/workspace/skills/qqbot-media/SKILL.md 獲取詳細用法。

其他渠道（Discord、Telegram、WeChat 等）

使用 message 工具：

message(action=send, filePath=/path/to/output.png, message="簡短介紹文字")

Concept Structure Guidelines

Good concept:

{
  "icon": "🧬",
  "color": "#E11D48",
  "bg": "#FFE4E6",
  "title": "專屬知識",
  "tag": "不可替代性",
  "quote": "如果可以培訓，就可以被AI或他人取代",
  "desc": "專屬知識不是課程能教的技能，而是你<b>天賦 × 好奇心 × 熱愛</b>的獨特組合。別人學你，感覺像在上班；你做它，感覺像在玩。"
}

Tips: - Use bold (<b>) for key terms in desc - Keep quote under 30 characters (Chinese) or 60 (English) - desc should be 2-3 sentences, ~80-120 characters - Pick contrasting color and bg for readability

Theme Colors Reference

blue:   { accent: '#2563EB', light: '#EFF6FF', border: '#BFDBFE' }
green:  { accent: '#059669', light: '#F0FDF4', border: '#BBF7D0' }
orange: { accent: '#D97706', light: '#FFFBEB', border: '#FDE68A' }
red:    { accent: '#E11D48', light: '#FFF1F2', border: '#FECDD3' }
purple: { accent: '#7C3AED', light: '#F5F3FF', border: '#DDD6FE' }
teal:   { accent: '#0284C7', light: '#F0F9FF', border: '#BAE6FD' }

Example Usage

User input:

"幫我生成一張《納瓦爾寶典》的知識卡片，主題是財富創造"

Your response: 1. Extract 4-5 concepts from Naval's wealth philosophy 2. Run scripts/generate.js with structured data 3. Send the PNG with message tool 4. Reply with brief context (e.g., "《納瓦爾寶典》財富創造核心概念卡片 👆")

Notes

• Default brand: "心光年覺醒讀書會" (can be overridden with --brand)
• Output is always 800px × auto height, 3x DPI (2400px actual width)
• Script requires Playwright (already installed in this environment)
• Fonts: Noto Serif SC (titles) + Noto Sans SC (body), loaded from Google Fonts

這是一款製作精美的知識卡片生成工具，輸出效果專業好看，文件說明詳細易懂，多種主題可選。但缺少實際案例展示，讓人難以判斷最終效果；飛書等平臺的配置過程較繁瑣，需要手動填寫引數；沒有測試保障，存在執行失敗的風險。總體質量良好，適合有耐心配置的使用者使用。