openclaw-visual

将 OpenClaw 中的信息（PhoenixClaw 日志、聊天记录、单条消息等）转换为精美排版的图片， 便于在聊天窗口（Telegram/Slack/Discord 等）中直接展示和分享。 Use when: - 用户要求将内容做成图片 ("帮我把这段话做成图片") - 用户要求生成日志可视化 ("生成今日日志分享图") - 用户要求将聊天记录可视化 ("把今天的对话做成总结图")

Security Scan

The skill generally does what it claims (generate images from OpenClaw content) but its runtime instructions read user files in home directories and reference config paths that are not declared in the skill metadata — a mismatch that has privacy implications and should be reviewed before install.

Purpose & Capability

The name/description (convert OpenClaw logs/chats/messages into images) matches the included templates and the image-generation script. However the SKILL metadata declares no required config paths or credentials while the README/instructions explicitly expect access to local paths (e.g. ~/PhoenixClaw/Journal/daily/YYYY-MM-DD.md and ~/.openclaw/sessions/*.jsonl and ~/.openclaw/visual/config.yaml). The filesystem access is coherent with the feature but is not declared in the metadata (mismatch).

Instruction Scope

SKILL.md and references explicitly instruct the agent to read local user files (journal markdown files and session JSONL chat logs), parse frontmatter and session data, and then generate images. That behavior is expected for the stated purpose, but it gives the skill broad read access to potentially sensitive local data. The instructions also suggest auto-switching to Playwright for '精美/复杂' renders and to install dependencies — these steps are explicit and require care. The metadata does not declare these config paths, so the agent/user may not realize the extent of local data access.

Install Mechanism

This is an instruction-only skill (no platform install spec) but includes package.json and a package-lock, so it expects an npm install in the skill folder. Dependencies (node-html-to-image, optional playwright) are from the public npm registry — typical but you should review package-lock and be aware that optional Playwright installation downloads a Chromium binary. No remote/personal URLs or extract-from-arbitrary-host behavior was observed in the included files.

Credentials

The skill requests no environment variables or credentials, which is reasonable. However it references and expects local config at ~/.openclaw/visual/config.yaml and direct access to user home files; those file-path requirements were not listed in the declared metadata. Also the SKILL.md encourages reading ~/.openclaw/sessions/*.jsonl (chat history), which can contain sensitive data — this is functionally necessary but sensitive, so treat it as a privacy concern.

Persistence & Privilege

always is false (no forced global inclusion). disable-model-invocation is false (the skill may be invoked autonomously, which is standard). There is no evidence the skill modifies other skills or system-wide settings. Note: autonomous invocation combined with the ability to read local chat logs increases blast radius, but that is a platform-wide default and not unique to this skill.

What to consider before installing

What to consider before installing: - Privacy: The skill's instructions explicitly read local files (~/PhoenixClaw/Journal/... and ~/.openclaw/sessions/*.jsonl). Those files may contain sensitive messages or personal data. If you don't want the skill to access those locations, avoid giving it filesystem access and instead pass content explicitly in the request. - Metadata mismatch: The skill metadata declares no required config paths, but the SKILL.md and docs expect specific files in your home directory. Treat that as a red flag — ask the author or inspect the code to confirm what will be read. - Dependencies: Installation uses npm packages from the public registry and optionally Playwright (large download + Chromium). Review package.json/package-lock and consider running npm install in a sandboxed environment (container/VM) and run npm audit before use. - Runtime flags: The renderer runs Chromium/Playwright with --no-sandbox which reduces process isolation; run in a controlled environment if you plan to generate untrusted HTML. - Minimizing risk: Instead of letting the skill auto-scan your session files, provide only the content you want rendered (JSON) to the script. If you must allow local file reads, inspect the code (scripts/generate-image.js and templates) yourself — there are no hidden network exfiltration endpoints in the included files, but npm packages execute code during install so verify them. - If unsure: run the skill in an isolated environment, avoid installing Playwright unless needed, and review or restrict access to ~/.openclaw and PhoenixClaw folders before enabling autonomous invocation.

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: 内容识别

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

内容类型	识别方式	示例
单条消息	用户直接提供文本	"帮我把这段话做成图片"
PhoenixClaw 日志	用户提及日志/日记	"生成今日日志图"
聊天记录	用户提及对话/聊天	"把今天的对话做成图"
引用/金句	文本包含引号或哲理内容	名言警句

步骤 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 (瞬间卡片)

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

布局:

┌─────────────────────┐
│  [照片]             │
│                     │
│  🕐 时间            │
│                     │
│  描述文字...        │
│                     │
│  [心情 emoji]       │
└─────────────────────┘

样式特点:

• 照片占 60% 高度
• 圆角设计
• 时间戳带图标
• 心情 emoji 装饰

变量:

• {{IMAGE_URL}} - 照片 URL (需为公开可访问)
• {{TIME}} - 时间
• {{DESCRIPTION}} - 描述
• {{MOOD}} - 心情 emoji

---

daily-journal (日记手账)

适用场景: PhoenixClaw 完整日志

布局:

┌─────────────────────┐
│  📅 日期  星期       │
│  😊 心情  ⚡ 能量    │
│  ─────────────────  │
│  ✨ Highlights      │
│  • 成就1            │
│  • 成就2            │
│                     │
│  🖼️ Moments         │
│  [照片] [照片]      │
│                     │
│  💭 Reflections     │
│  反思内容...        │
│                     │
│  🌱 Growth          │
│  成长笔记...        │
└─────────────────────┘

样式特点:

• 米黄色纸质背景
• 手绘风格边框
• 贴纸式 emoji
• 分栏布局

变量:

• {{DATE}} - 日期
• {{WEEKDAY}} - 星期
• {{MOOD}} - 心情
• {{ENERGY}} - 能量
• {{HIGHLIGHTS}} - 亮点列表
• {{MOMENTS}} - 瞬间列表
• {{REFLECTIONS}} - 反思
• {{GROWTH}} - 成长笔记

---

social-share (社交分享)

适用场景: 分享亮点/成就

布局:

┌─────────────────────────────┐
│                             │
│        ✨ 今日亮点          │
│                             │
│    "完成了重要里程碑"       │
│                             │
│    📊 3 个任务完成          │
│    🎯 效率 95%              │
│                             │
│         [Logo]              │
└─────────────────────────────┘

样式特点:

• 1200x630 横向布局
• 渐变背景
• 大标题 + 统计数据
• 底部品牌标识

变量:

• {{TITLE}} - 标题
• {{SUBTITLE}} - 副标题
• {{STATS}} - 统计数据
• {{DATE}} - 日期

---

dashboard (数据仪表盘)

适用场景: 周/月度汇总

布局:

┌──────────────────────────────────────┐
│  📊 本周总结          2026-W05       │
│  ─────────────────────────────────── │
│  [心情趋势图]  [能量分布图]           │
│                                      │
│  关键指标:                           │
│  ✅ 完成: 15  📝 日记: 7  📸 照片: 12 │
│                                      │
│  时间线:                             │
│  Mon → Tue → Wed → Thu → Fri         │
└──────────────────────────────────────┘

样式特点:

• 深色背景
• 数据可视化
• 时间线展示
• 关键指标卡片

变量:

• {{PERIOD}} - 周期 (本周/本月)
• {{DATE_RANGE}} - 日期范围
• {{MOOD_DATA}} - 心情数据
• {{ENERGY_DATA}} - 能量数据
• {{STATS}} - 统计数据
• {{TIMELINE}} - 时间线事件

🔧 配置说明

前置要求

1. 安装依赖:

   cd skills/openclaw-visual
   npm install
   

2. (可选) 安装 Playwright - 用于高级渲染:

   npm install playwright
   npx playwright install chromium
   

可选配置

在 ~/.openclaw/visual/config.yaml 中可配置：

# 默认模板
default_template: "quote-card"

# 默认配色主题
default_theme: "light"  # light/dark/accent/blue

# 渲染引擎
renderer: auto  # auto | nodejs | playwright
# auto 模式: 默认 nodejs, 用户要求"精美/复杂"时自动切换 playwright

# 输出设置
output:
  path: "~/OpenClaw/Visuals/"
  format: "png"  # png | jpeg
  quality: 90    # JPEG 质量 (1-100)

💡 使用示例

示例 1: 金句卡片

用户: "帮我把这句话做成图片: '行动是治愈恐惧的良药'"

AI:

1. 识别为金句类型
2. 选择 quote-card 模板
3. 生成 HTML 内容
4. 调用本地生成脚本:

   node scripts/generate-image.js \
     --template quote-card \
     --content '{"QUOTE":"行动是治愈恐惧的良药","AUTHOR":"威廉·詹姆斯","THEME":"light"}' \
     --output ~/OpenClaw/Visuals/quote-20240201.png
   

5. 读取生成的图片文件，在聊天窗口发送给用户

示例 2: 日志可视化

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

AI:

1. 读取 ~/PhoenixClaw/Journal/daily/2026-02-01.md
2. 解析内容
3. 选择 daily-journal 或 social-share 模板
4. 生成并发送图片

示例 3: 聊天记录总结

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

AI:

1. 扫描 ~/.openclaw/sessions/ 今日记录
2. 提取关键话题和决策
3. 选择 dashboard 或 social-share 模板
4. 生成并发送图片

📚 参考文档

• references/templates.md - 模板设计规范
• references/content-parsing.md - 内容解析规则
• references/rendering-setup.md - 本地渲染配置

🎨 扩展开发

添加新模板

1. 在 assets/templates/ 创建新的 .html 文件
2. 定义模板变量占位符
3. 在 references/templates.md 添加文档
4. 更新模板选择逻辑

添加新主题

1. 在 CSS 中定义新的配色方案
2. 更新 config.yaml 中的主题选项
3. 在模板选择时传入 {{THEME}} 变量

---

设计原则

视觉风格

• 极简主义: 去除多余装饰，留白充足
• 瑞士风格: 网格系统，清晰层级
• 编辑排版: 大字号标题，精致细节

配色方案

• 主色: #1a1a1a (深灰)
• 辅色: #525252, #737373, #a3a3a3 (灰度)
• 背景: #fafafa, #f5f5f5 (米白)
• 强调: #ea580c (橙红), #4f46e5 (靛蓝)

图标系统

使用 Lucide 风格 SVG 图标，替代所有 emoji：

• 所有图标内联在 HTML 中
• 统一 stroke-width: 1.5
• 支持通过 CSS 控制大小: .icon-sm, .icon-md, .icon-lg

字体策略

• 使用系统字体栈，无需加载外部字体
• 中文: system-ui, PingFang SC, Microsoft YaHei
• 英文: system-ui, Segoe UI, Roboto, Helvetica Neue

---

OpenClaw Visual - 让每一条记录都值得被看见