将 OpenClaw 中的信息（PhoenixClaw 日志、聊天记录、单条消息等）转换为精美排版的图片， 便于在聊天窗口（Telegram/Slack/Discord 等）中直接展示和分享。 Use when: - 用户要求将内容做成图片 ("帮我把这段话做成图片") - 用户要求生成日志可视化 ("生成今日日志分享图") - 用户要求将聊天记录可视化 ("把今天的对话做成总结图")
数据来源：ClawHub。 在 ClawSkills 查看
选择你使用的 Agent
方法一：命令行安装（推荐）
推荐（无需提前安装 clawhub）
npx clawhub@latest --dir ~/.claude/skills install openclaw-visual或使用 clawhub CLI（需提前安装）
clawhub --dir ~/.claude/skills install openclaw-visual⚠️ 需要 Node.js 18+，没有 Node？请使用下方方法二直接下载 ZIP。 安装 Node.js →
方法二：手动下载安装（无需 Node）
下载 ZIP，解压后将文件夹放到以下路径，重启 Agent 即可：
安装路径
~/.claude/skills/openclaw-visual/💡解压后将文件夹放到上方路径，重启 Agent 即可生效
--- name: openclaw-visual description: | 将 OpenClaw 中的信息（PhoenixClaw 日志、聊天记录、单条消息等）转换为精美排版的图片， 便于在聊天窗口（Telegram/Slack/Discord 等）中直接展示和分享。
Use when: - 用户要求将内容做成图片 ("帮我把这段话做成图片") - 用户要求生成日志可视化 ("生成今日日志分享图") - 用户要求将聊天记录可视化 ("把今天的对话做成总结图") depends: - node-html-to-image metadata: version: 0.0.1 ---
将 OpenClaw 中的任何信息转换为精美排版的图片，直接在聊天窗口中展示。
设计风格: 现代极简 / 瑞士风格 / 编辑排版 核心流程: 内容 → HTML 模板 → 本地生成图片 → OpenClaw 发送图片给用户
图片生成: 本地渲染，无需外部 API
node-html-to-image (轻量快速)playwright (用户要求精美/复杂效果时)用户说: "帮我把这段话做成好看的分享图"
AI 将：
用户说: "生成今天的日志分享图"
AI 将：
~/PhoenixClaw/Journal/daily/YYYY-MM-DD.md用户说: "把今天的对话做成总结图"
AI 将：
分析用户请求，识别内容类型：
| 内容类型 | 识别方式 | 示例 | |---------|---------|------| | 单条消息 | 用户直接提供文本 | "帮我把这段话做成图片" | | PhoenixClaw 日志 | 用户提及日志/日记 | "生成今日日志图" | | 聊天记录 | 用户提及对话/聊天 | "把今天的对话做成图" | | 引用/金句 | 文本包含引号或哲理内容 | 名言警句 |
根据内容类型自动选择最佳模板：
quote-card - 金句/引用卡片
moment-card - 瞬间/时刻卡片
daily-journal - 日记编辑风格
social-share - 社交媒体卡片
dashboard - 数据仪表盘
根据选定模板，填充内容生成 HTML：
assets/templates/{template-name}.html - {{TITLE}} - 标题 - {{CONTENT}} - 主要内容 - {{DATE}} - 日期 - {{MOOD}} - 心情文字 - {{ENERGY}} - 能量值 - {{IMAGE_URL}} - 图片 URL
assets/css/base-styles.css- 中文: system-ui, PingFang SC, Microsoft YaHei - 英文: system-ui, Segoe UI, Roboto
使用本地脚本生成图片：
# 调用本地生成脚本
node scripts/generate-image.js \
--template quote-card \
--content '{"QUOTE":"行动是治愈恐惧的良药","AUTHOR":"威廉·詹姆斯"}' \
--output ~/OpenClaw/Visuals/output.png渲染引擎选择:
node-html-to-image): 轻量快速，适合大多数场景playwright): 当用户要求"精美/复杂/高级"效果时自动切换脚本返回 JSON 结果：
{
"success": true,
"outputPath": "/Users/xxx/OpenClaw/Visuals/output.png",
"renderer": "nodejs",
"template": "quote-card",
"dimensions": { "width": 800, "height": 800 }
}OpenClaw 读取生成的图片文件并发送给用户。
适用场景: 名言、哲理、简短感悟
布局:
┌─────────────────────┐
│ │
│ "引用内容" │
│ │
│ —— 作者/来源 │
│ │
│ [装饰元素] [日期] │
└─────────────────────┘样式特点:
变量:
{{QUOTE}} - 引用内容{{AUTHOR}} - 作者/来源{{DATE}} - 日期 (可选){{THEME}} - 配色主题 (purple/blue/orange)---
适用场景: 单张照片 + 描述
布局:
┌─────────────────────┐
│ [照片] │
│ │
│ 🕐 时间 │
│ │
│ 描述文字... │
│ │
│ [心情 emoji] │
└─────────────────────┘样式特点:
变量:
{{IMAGE_URL}} - 照片 URL (需为公开可访问){{TIME}} - 时间{{DESCRIPTION}} - 描述{{MOOD}} - 心情 emoji---
适用场景: PhoenixClaw 完整日志
布局:
┌─────────────────────┐
│ 📅 日期 星期 │
│ 😊 心情 ⚡ 能量 │
│ ───────────────── │
│ ✨ Highlights │
│ • 成就1 │
│ • 成就2 │
│ │
│ 🖼️ Moments │
│ [照片] [照片] │
│ │
│ 💭 Reflections │
│ 反思内容... │
│ │
│ 🌱 Growth │
│ 成长笔记... │
└─────────────────────┘样式特点:
变量:
{{DATE}} - 日期{{WEEKDAY}} - 星期{{MOOD}} - 心情{{ENERGY}} - 能量{{HIGHLIGHTS}} - 亮点列表{{MOMENTS}} - 瞬间列表{{REFLECTIONS}} - 反思{{GROWTH}} - 成长笔记---
适用场景: 分享亮点/成就
布局:
┌─────────────────────────────┐
│ │
│ ✨ 今日亮点 │
│ │
│ "完成了重要里程碑" │
│ │
│ 📊 3 个任务完成 │
│ 🎯 效率 95% │
│ │
│ [Logo] │
└─────────────────────────────┘样式特点:
变量:
{{TITLE}} - 标题{{SUBTITLE}} - 副标题{{STATS}} - 统计数据{{DATE}} - 日期---
适用场景: 周/月度汇总
布局:
┌──────────────────────────────────────┐
│ 📊 本周总结 2026-W05 │
│ ─────────────────────────────────── │
│ [心情趋势图] [能量分布图] │
│ │
│ 关键指标: │
│ ✅ 完成: 15 📝 日记: 7 📸 照片: 12 │
│ │
│ 时间线: │
│ Mon → Tue → Wed → Thu → Fri │
└──────────────────────────────────────┘样式特点:
变量:
{{PERIOD}} - 周期 (本周/本月){{DATE_RANGE}} - 日期范围{{MOOD_DATA}} - 心情数据{{ENERGY_DATA}} - 能量数据{{STATS}} - 统计数据{{TIMELINE}} - 时间线事件```bash cd skills/openclaw-visual npm install ```
```bash 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)用户: "帮我把这句话做成图片: '行动是治愈恐惧的良药'"
AI:
quote-card 模板```bash node scripts/generate-image.js \ --template quote-card \ --content '{"QUOTE":"行动是治愈恐惧的良药","AUTHOR":"威廉·詹姆斯","THEME":"light"}' \ --output ~/OpenClaw/Visuals/quote-20240201.png ```
用户: "生成今天的日志分享图"
AI:
~/PhoenixClaw/Journal/daily/2026-02-01.mddaily-journal 或 social-share 模板用户: "把今天的对话做成总结图"
AI:
~/.openclaw/sessions/ 今日记录dashboard 或 social-share 模板references/templates.md - 模板设计规范references/content-parsing.md - 内容解析规则references/rendering-setup.md - 本地渲染配置assets/templates/ 创建新的 .html 文件references/templates.md 添加文档config.yaml 中的主题选项{{THEME}} 变量---
使用 Lucide 风格 SVG 图标，替代所有 emoji：
---
OpenClaw Visual - 让每一条记录都值得被看见
安装 openclaw-visual 后，可以对 AI 说这些话来触发它
Send a Slack message to the #engineering channel about the deployment
Formats and sends the message with relevant context, tagging the right people
Summarize all unread messages in my inbox from today
Reads messages across connected channels and returns a prioritized summary
Draft a reply to this customer complaint and send it for review
Writes an empathetic, professional response and routes it to the approval queue
将技能文件夹放到 ~/.claude/skills/openclaw-visual/ 目录（个人级，所有项目可用），或 .claude/skills/openclaw-visual/（项目级）。重启 AI 客户端后，用 /openclaw-visual 主动调用，或让 AI 根据上下文自动发现并使用。
openclaw-visual 支持 Claude、Cursor、OpenClaw，可与这些 AI 平台无缝集成，扩展其能力。
openclaw-visual 可免费安装使用。请查阅仓库了解许可证信息。
将 OpenClaw 中的信息（PhoenixClaw 日志、聊天记录、单条消息等）转换为精美排版的图片， 便于在聊天窗口（Telegram/Slack/Discord 等）中直接展示和分享。 Use when: - 用户要求将内容做成图片 ("帮我把这段话做成图片") - 用户要求生成日志可视化 ("生成今日日志分享图") - 用户要求将聊天记录可视化 ("把今天的对话做成总结图")
openclaw-visual 属于「Communication」分类，该分类的技能帮助 AI 智能体在此领域执行专业任务。