Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub · Communication & Collaboration
openclaw-visual
将 OpenClaw 中的信息（PhoenixClaw 日志、聊天记录、单条消息等）转换为精美排版的图片， 便于在聊天窗口（Telegram/Slack/Discord 等）中直接展示和分享。 Use when: - 用户要求将内容做成图片 ("帮我把这段话做成图片") - 用户要求生成日志可视化 ("生成今日日志分享图") - 用户要求将聊天记录可视化 ("把今天的对话做成总结图")
skill openclawclawhub Free
将 OpenClaw 中的信息（PhoenixClaw 日志、聊天记录、单条消息等）转换为精美排版的图片， 便于在聊天窗口（Telegram/Slack/Discord 等）中直接展示和分享。 Use when: - 用户要求将内容做成图片 ("帮我把这段话做成图片") - 用户要求生成日志可视化 ("生成今日日志分享图") - 用户要求将聊天记录可视化 ("把今天的对话做成总结图")
⬇ 0 downloads ★ 0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- package-lock.json, package.json, SKILL.md, assets/templates/moment-card.html, assets/templates/social-share.html, assets/templates/dashboard.html
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 0.0.1
Provenance
- Publisher
- goforu
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
OpenClaw Visual - 精美图文生成器
将 OpenClaw 中的任何信息转换为精美排版的图片，直接在聊天窗口中展示。 设计风格: 现代极简 / 瑞士风格 / 编辑排版 核心流程: 内容 → HTML 模板 → 本地生成图片 → OpenClaw 发送图片给用户 图片生成: 本地渲染，无需外部 API 默认: node-html-to-image (轻量快速) 高级: playwright (用户要求精美/复杂效果时)
1. 单条消息转图片
用户说: "帮我把这段话做成好看的分享图" AI 将： 分析内容类型（金句/引用/想法） 选择合适模板（引用卡片/金句卡片） 生成精美图片 在聊天窗口发送图片
2. PhoenixClaw 日志可视化
用户说: "生成今天的日志分享图" AI 将： 读取 ~/PhoenixClaw/Journal/daily/YYYY-MM-DD.md 解析 frontmatter 和 sections 选择模板（社交卡片/手账风格） 生成精美图片 在聊天窗口发送图片
3. 聊天记录摘要
用户说: "把今天的对话做成总结图" AI 将： 扫描今日会话记录 提取关键信息 生成时间线/仪表盘风格图片 在聊天窗口发送图片
步骤 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： 读取模板文件 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
步骤 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}} - 时间线事件
前置要求
安装依赖: cd skills/openclaw-visual npm install (可选) 安装 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: 识别为金句类型 选择 quote-card 模板 生成 HTML 内容 调用本地生成脚本: node scripts/generate-image.js \ --template quote-card \ --content '{"QUOTE":"行动是治愈恐惧的良药","AUTHOR":"威廉·詹姆斯","THEME":"light"}' \ --output ~/OpenClaw/Visuals/quote-20240201.png 读取生成的图片文件，在聊天窗口发送给用户
示例 2: 日志可视化
用户: "生成今天的日志分享图" AI: 读取 ~/PhoenixClaw/Journal/daily/2026-02-01.md 解析内容 选择 daily-journal 或 social-share 模板 生成并发送图片
示例 3: 聊天记录总结
用户: "把今天的对话做成总结图" AI: 扫描 ~/.openclaw/sessions/ 今日记录 提取关键话题和决策 选择 dashboard 或 social-share 模板 生成并发送图片
📚 参考文档
references/templates.md - 模板设计规范 references/content-parsing.md - 内容解析规则 references/rendering-setup.md - 本地渲染配置
添加新模板
在 assets/templates/ 创建新的 .html 文件 定义模板变量占位符 在 references/templates.md 添加文档 更新模板选择逻辑
添加新主题
在 CSS 中定义新的配色方案 更新 config.yaml 中的主题选项 在模板选择时传入 {{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 - 让每一条记录都值得被看见
Category context
Messaging, meetings, inboxes, CRM, and teammate communication surfaces.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
3 Assets2 Config1 Docs
- SKILL.md
- package-lock.json
- package.json
- assets/templates/dashboard.html
- assets/templates/moment-card.html
- assets/templates/social-share.html