OpenClaw Visual - 精美图文生成器

将 OpenClaw 中的任何信息转换为精美排版的图片，直接在聊天窗口中展示。

设计风格: 现代极简 / 瑞士风格 / 编辑排版 核心流程: 内容 → HTML 模板 → 本地生成图片 → OpenClaw 发送图片给用户

图片生成: 本地渲染，无需外部 API

• 默认: node-html-to-image (轻量快速)
• 高级: playwright (用户要求精美/复杂效果时)

🎯 使用场景

1. 单条消息转图片

用户说: "帮我把这段话做成好看的分享图"

AI 将：

1. 分析内容类型（金句/引用/想法）
2. 选择合适模板（引用卡片/金句卡片）
3. 生成精美图片
4. 在聊天窗口发送图片

2. PhoenixClaw 日志可视化

用户说: "生成今天的日志分享图"

AI 将：

1. 读取 ~/PhoenixClaw/Journal/daily/YYYY-MM-DD.md
2. 解析 frontmatter 和 sections
3. 选择模板（社交卡片/手账风格）
4. 生成精美图片
5. 在聊天窗口发送图片

3. 聊天记录摘要

用户说: "把今天的对话做成总结图"

AI 将：

1. 扫描今日会话记录
2. 提取关键信息
3. 生成时间线/仪表盘风格图片
4. 在聊天窗口发送图片

🛠️ 核心工作流

步骤 1: 内容识别

分析用户请求，识别内容类型：

步骤 2: 模板选择

根据内容类型自动选择最佳模板：

quote-card - 金句/引用卡片

• 适用: 名言、哲理、简短感悟
• 尺寸: 800x800 (方形，适合 Instagram)
• 特点: 大字体编辑排版、纯色背景、无装饰引号、SVG 图标
• 主题: light / dark / accent / blue

moment-card - 瞬间/时刻卡片

• 适用: 单张照片 + 描述
• 尺寸: 800x1000 (竖版)
• 特点: 杂志风格、大图留白、时间/位置 SVG 图标

daily-journal - 日记编辑风格

• 适用: PhoenixClaw 完整日志
• 尺寸: 800x1200 (竖版)
• 特点: 瑞士网格系统、清晰层级、SVG 图标、大日期数字

social-share - 社交媒体卡片

• 适用: 分享亮点/成就
• 尺寸: 1200x630 (OG Image)
• 特点: 双栏布局、纯色/深色主题、统计数据展示

dashboard - 数据仪表盘

• 适用: 周/月度汇总、统计数据
• 尺寸: 1200x800 (横版)
• 特点: 数据可视化、单色图表、网格布局、SVG 图标

步骤 3: HTML/CSS 生成

根据选定模板，填充内容生成 HTML：

1. 读取模板文件 assets/templates/{template-name}.html
2. 替换占位符变量:
   • {{TITLE}} - 标题
   • {{CONTENT}} - 主要内容
   • {{DATE}} - 日期
   • {{MOOD}} - 心情文字
   • {{ENERGY}} - 能量值
   • {{IMAGE_URL}} - 图片 URL
3. 应用基础样式 assets/css/base-styles.css
4. 使用系统字体栈 (无需外部字体):
   • 中文: system-ui, PingFang SC, Microsoft YaHei
   • 英文: system-ui, Segoe UI, Roboto

步骤 4: 图片生成

使用本地脚本生成图片：

# 调用本地生成脚本
node scripts/generate-image.js \
  --template quote-card \
  --content '{"QUOTE":"行动是治愈恐惧的良药","AUTHOR":"威廉·詹姆斯"}' \
  --output ~/OpenClaw/Visuals/output.png

渲染引擎选择:

• 默认 (node-html-to-image): 轻量快速，适合大多数场景
• 高级 (playwright): 当用户要求"精美/复杂/高级"效果时自动切换

步骤 5: 返回结果

脚本返回 JSON 结果：

{
  "success": true,
  "outputPath": "/Users/xxx/OpenClaw/Visuals/output.png",
  "renderer": "nodejs",
  "template": "quote-card",
  "dimensions": { "width": 800, "height": 800 }
}

OpenClaw 读取生成的图片文件并发送给用户。

📋 模板详情

quote-card (金句卡片)

适用场景: 名言、哲理、简短感悟

布局:

┌─────────────────────┐
│                     │
│      "引用内容"      │
│                     │
│    —— 作者/来源      │
│                     │
│  [装饰元素]  [日期]  │
└─────────────────────┘

样式特点:

• 渐变背景 (紫→粉 / 蓝→青 / 橙→红)
• 大号衬线字体 (Playfair Display / 霞鹜文楷)
• 装饰性引号
• 底部装饰线和日期

变量:

• {{QUOTE}} - 引用内容
• {{AUTHOR}} - 作者/来源
• {{DATE}} - 日期 (可选)
• {{THEME}} - 配色主题 (purple/blue/orange)

moment-card (瞬间卡片)

适用场景: 单张照片 + 描述