{ "schemaVersion": "1.0", "item": { "slug": "openclaw-visual", "name": "openclaw-visual", "source": "tencent", "type": "skill", "category": "通讯协作", "sourceUrl": "https://clawhub.ai/goforu/openclaw-visual", "canonicalUrl": "https://clawhub.ai/goforu/openclaw-visual", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/openclaw-visual", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=openclaw-visual", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "package-lock.json", "package.json", "SKILL.md", "assets/templates/moment-card.html", "assets/templates/social-share.html", "assets/templates/dashboard.html" ], "primaryDoc": "SKILL.md", "quickSetup": [ "Download the package from Yavira.", "Extract the archive and review SKILL.md first.", "Import or place the package into your OpenClaw setup." ], "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "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." ], "prompts": [ { "label": "New install", "body": "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." }, { "label": "Upgrade existing", "body": "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." } ] }, "sourceHealth": { "source": "tencent", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-30T16:55:25.780Z", "expiresAt": "2026-05-07T16:55:25.780Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network", "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null }, "scope": "source", "summary": "Source download looks usable.", "detail": "Yavira can redirect you to the upstream package for this source.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/openclaw-visual" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] }, "downloadPageUrl": "https://openagent3.xyz/downloads/openclaw-visual", "agentPageUrl": "https://openagent3.xyz/skills/openclaw-visual/agent", "manifestUrl": "https://openagent3.xyz/skills/openclaw-visual/agent.json", "briefUrl": "https://openagent3.xyz/skills/openclaw-visual/agent.md" }, "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "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." ], "prompts": [ { "label": "New install", "body": "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." }, { "label": "Upgrade existing", "body": "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." } ] }, "documentation": { "source": "clawhub", "primaryDoc": "SKILL.md", "sections": [ { "title": "OpenClaw Visual - 精美图文生成器", "body": "将 OpenClaw 中的任何信息转换为精美排版的图片，直接在聊天窗口中展示。\n\n设计风格: 现代极简 / 瑞士风格 / 编辑排版\n核心流程: 内容 → HTML 模板 → 本地生成图片 → OpenClaw 发送图片给用户\n\n图片生成: 本地渲染，无需外部 API\n\n默认: node-html-to-image (轻量快速)\n高级: playwright (用户要求精美/复杂效果时)" }, { "title": "1. 单条消息转图片", "body": "用户说: \"帮我把这段话做成好看的分享图\"\n\nAI 将：\n\n分析内容类型（金句/引用/想法）\n选择合适模板（引用卡片/金句卡片）\n生成精美图片\n在聊天窗口发送图片" }, { "title": "2. PhoenixClaw 日志可视化", "body": "用户说: \"生成今天的日志分享图\"\n\nAI 将：\n\n读取 ~/PhoenixClaw/Journal/daily/YYYY-MM-DD.md\n解析 frontmatter 和 sections\n选择模板（社交卡片/手账风格）\n生成精美图片\n在聊天窗口发送图片" }, { "title": "3. 聊天记录摘要", "body": "用户说: \"把今天的对话做成总结图\"\n\nAI 将：\n\n扫描今日会话记录\n提取关键信息\n生成时间线/仪表盘风格图片\n在聊天窗口发送图片" }, { "title": "步骤 1: 内容识别", "body": "分析用户请求，识别内容类型：\n\n内容类型识别方式示例单条消息用户直接提供文本\"帮我把这段话做成图片\"PhoenixClaw 日志用户提及日志/日记\"生成今日日志图\"聊天记录用户提及对话/聊天\"把今天的对话做成图\"引用/金句文本包含引号或哲理内容名言警句" }, { "title": "步骤 2: 模板选择", "body": "根据内容类型自动选择最佳模板：\n\nquote-card - 金句/引用卡片\n\n适用: 名言、哲理、简短感悟\n尺寸: 800x800 (方形，适合 Instagram)\n特点: 大字体编辑排版、纯色背景、无装饰引号、SVG 图标\n主题: light / dark / accent / blue\n\nmoment-card - 瞬间/时刻卡片\n\n适用: 单张照片 + 描述\n尺寸: 800x1000 (竖版)\n特点: 杂志风格、大图留白、时间/位置 SVG 图标\n\ndaily-journal - 日记编辑风格\n\n适用: PhoenixClaw 完整日志\n尺寸: 800x1200 (竖版)\n特点: 瑞士网格系统、清晰层级、SVG 图标、大日期数字\n\nsocial-share - 社交媒体卡片\n\n适用: 分享亮点/成就\n尺寸: 1200x630 (OG Image)\n特点: 双栏布局、纯色/深色主题、统计数据展示\n\ndashboard - 数据仪表盘\n\n适用: 周/月度汇总、统计数据\n尺寸: 1200x800 (横版)\n特点: 数据可视化、单色图表、网格布局、SVG 图标" }, { "title": "步骤 3: HTML/CSS 生成", "body": "根据选定模板，填充内容生成 HTML：\n\n读取模板文件 assets/templates/{template-name}.html\n替换占位符变量:\n\n{{TITLE}} - 标题\n{{CONTENT}} - 主要内容\n{{DATE}} - 日期\n{{MOOD}} - 心情文字\n{{ENERGY}} - 能量值\n{{IMAGE_URL}} - 图片 URL\n\n\n应用基础样式 assets/css/base-styles.css\n使用系统字体栈 (无需外部字体):\n\n中文: system-ui, PingFang SC, Microsoft YaHei\n英文: system-ui, Segoe UI, Roboto" }, { "title": "步骤 4: 图片生成", "body": "使用本地脚本生成图片：\n\n# 调用本地生成脚本\nnode scripts/generate-image.js \\\n --template quote-card \\\n --content '{\"QUOTE\":\"行动是治愈恐惧的良药\",\"AUTHOR\":\"威廉·詹姆斯\"}' \\\n --output ~/OpenClaw/Visuals/output.png\n\n渲染引擎选择:\n\n默认 (node-html-to-image): 轻量快速，适合大多数场景\n高级 (playwright): 当用户要求\"精美/复杂/高级\"效果时自动切换" }, { "title": "步骤 5: 返回结果", "body": "脚本返回 JSON 结果：\n\n{\n \"success\": true,\n \"outputPath\": \"/Users/xxx/OpenClaw/Visuals/output.png\",\n \"renderer\": \"nodejs\",\n \"template\": \"quote-card\",\n \"dimensions\": { \"width\": 800, \"height\": 800 }\n}\n\nOpenClaw 读取生成的图片文件并发送给用户。" }, { "title": "quote-card (金句卡片)", "body": "适用场景: 名言、哲理、简短感悟\n\n布局:\n\n┌─────────────────────┐\n│ │\n│ \"引用内容\" │\n│ │\n│ —— 作者/来源 │\n│ │\n│ [装饰元素] [日期] │\n└─────────────────────┘\n\n样式特点:\n\n渐变背景 (紫→粉 / 蓝→青 / 橙→红)\n大号衬线字体 (Playfair Display / 霞鹜文楷)\n装饰性引号\n底部装饰线和日期\n\n变量:\n\n{{QUOTE}} - 引用内容\n{{AUTHOR}} - 作者/来源\n{{DATE}} - 日期 (可选)\n{{THEME}} - 配色主题 (purple/blue/orange)" }, { "title": "moment-card (瞬间卡片)", "body": "适用场景: 单张照片 + 描述\n\n布局:\n\n┌─────────────────────┐\n│ [照片] │\n│ │\n│ 🕐 时间 │\n│ │\n│ 描述文字... │\n│ │\n│ [心情 emoji] │\n└─────────────────────┘\n\n样式特点:\n\n照片占 60% 高度\n圆角设计\n时间戳带图标\n心情 emoji 装饰\n\n变量:\n\n{{IMAGE_URL}} - 照片 URL (需为公开可访问)\n{{TIME}} - 时间\n{{DESCRIPTION}} - 描述\n{{MOOD}} - 心情 emoji" }, { "title": "daily-journal (日记手账)", "body": "适用场景: PhoenixClaw 完整日志\n\n布局:\n\n┌─────────────────────┐\n│ 📅 日期 星期 │\n│ 😊 心情 ⚡ 能量 │\n│ ───────────────── │\n│ ✨ Highlights │\n│ • 成就1 │\n│ • 成就2 │\n│ │\n│ 🖼️ Moments │\n│ [照片] [照片] │\n│ │\n│ 💭 Reflections │\n│ 反思内容... │\n│ │\n│ 🌱 Growth │\n│ 成长笔记... │\n└─────────────────────┘\n\n样式特点:\n\n米黄色纸质背景\n手绘风格边框\n贴纸式 emoji\n分栏布局\n\n变量:\n\n{{DATE}} - 日期\n{{WEEKDAY}} - 星期\n{{MOOD}} - 心情\n{{ENERGY}} - 能量\n{{HIGHLIGHTS}} - 亮点列表\n{{MOMENTS}} - 瞬间列表\n{{REFLECTIONS}} - 反思\n{{GROWTH}} - 成长笔记" }, { "title": "social-share (社交分享)", "body": "适用场景: 分享亮点/成就\n\n布局:\n\n┌─────────────────────────────┐\n│ │\n│ ✨ 今日亮点 │\n│ │\n│ \"完成了重要里程碑\" │\n│ │\n│ 📊 3 个任务完成 │\n│ 🎯 效率 95% │\n│ │\n│ [Logo] │\n└─────────────────────────────┘\n\n样式特点:\n\n1200x630 横向布局\n渐变背景\n大标题 + 统计数据\n底部品牌标识\n\n变量:\n\n{{TITLE}} - 标题\n{{SUBTITLE}} - 副标题\n{{STATS}} - 统计数据\n{{DATE}} - 日期" }, { "title": "dashboard (数据仪表盘)", "body": "适用场景: 周/月度汇总\n\n布局:\n\n┌──────────────────────────────────────┐\n│ 📊 本周总结 2026-W05 │\n│ ─────────────────────────────────── │\n│ [心情趋势图] [能量分布图] │\n│ │\n│ 关键指标: │\n│ ✅ 完成: 15 📝 日记: 7 📸 照片: 12 │\n│ │\n│ 时间线: │\n│ Mon → Tue → Wed → Thu → Fri │\n└──────────────────────────────────────┘\n\n样式特点:\n\n深色背景\n数据可视化\n时间线展示\n关键指标卡片\n\n变量:\n\n{{PERIOD}} - 周期 (本周/本月)\n{{DATE_RANGE}} - 日期范围\n{{MOOD_DATA}} - 心情数据\n{{ENERGY_DATA}} - 能量数据\n{{STATS}} - 统计数据\n{{TIMELINE}} - 时间线事件" }, { "title": "前置要求", "body": "安装依赖:\ncd skills/openclaw-visual\nnpm install\n\n\n\n(可选) 安装 Playwright - 用于高级渲染:\nnpm install playwright\nnpx playwright install chromium" }, { "title": "可选配置", "body": "在 ~/.openclaw/visual/config.yaml 中可配置：\n\n# 默认模板\ndefault_template: \"quote-card\"\n\n# 默认配色主题\ndefault_theme: \"light\" # light/dark/accent/blue\n\n# 渲染引擎\nrenderer: auto # auto | nodejs | playwright\n# auto 模式: 默认 nodejs, 用户要求\"精美/复杂\"时自动切换 playwright\n\n# 输出设置\noutput:\n path: \"~/OpenClaw/Visuals/\"\n format: \"png\" # png | jpeg\n quality: 90 # JPEG 质量 (1-100)" }, { "title": "示例 1: 金句卡片", "body": "用户: \"帮我把这句话做成图片: '行动是治愈恐惧的良药'\"\n\nAI:\n\n识别为金句类型\n选择 quote-card 模板\n生成 HTML 内容\n调用本地生成脚本:\nnode scripts/generate-image.js \\\n --template quote-card \\\n --content '{\"QUOTE\":\"行动是治愈恐惧的良药\",\"AUTHOR\":\"威廉·詹姆斯\",\"THEME\":\"light\"}' \\\n --output ~/OpenClaw/Visuals/quote-20240201.png\n\n\n读取生成的图片文件，在聊天窗口发送给用户" }, { "title": "示例 2: 日志可视化", "body": "用户: \"生成今天的日志分享图\"\n\nAI:\n\n读取 ~/PhoenixClaw/Journal/daily/2026-02-01.md\n解析内容\n选择 daily-journal 或 social-share 模板\n生成并发送图片" }, { "title": "示例 3: 聊天记录总结", "body": "用户: \"把今天的对话做成总结图\"\n\nAI:\n\n扫描 ~/.openclaw/sessions/ 今日记录\n提取关键话题和决策\n选择 dashboard 或 social-share 模板\n生成并发送图片" }, { "title": "📚 参考文档", "body": "references/templates.md - 模板设计规范\nreferences/content-parsing.md - 内容解析规则\nreferences/rendering-setup.md - 本地渲染配置" }, { "title": "添加新模板", "body": "在 assets/templates/ 创建新的 .html 文件\n定义模板变量占位符\n在 references/templates.md 添加文档\n更新模板选择逻辑" }, { "title": "添加新主题", "body": "在 CSS 中定义新的配色方案\n更新 config.yaml 中的主题选项\n在模板选择时传入 {{THEME}} 变量" }, { "title": "视觉风格", "body": "极简主义: 去除多余装饰，留白充足\n瑞士风格: 网格系统，清晰层级\n编辑排版: 大字号标题，精致细节" }, { "title": "配色方案", "body": "主色: #1a1a1a (深灰)\n辅色: #525252, #737373, #a3a3a3 (灰度)\n背景: #fafafa, #f5f5f5 (米白)\n强调: #ea580c (橙红), #4f46e5 (靛蓝)" }, { "title": "图标系统", "body": "使用 Lucide 风格 SVG 图标，替代所有 emoji：\n\n所有图标内联在 HTML 中\n统一 stroke-width: 1.5\n支持通过 CSS 控制大小: .icon-sm, .icon-md, .icon-lg" }, { "title": "字体策略", "body": "使用系统字体栈，无需加载外部字体\n中文: system-ui, PingFang SC, Microsoft YaHei\n英文: system-ui, Segoe UI, Roboto, Helvetica Neue\n\nOpenClaw Visual - 让每一条记录都值得被看见" } ], "body": "OpenClaw Visual - 精美图文生成器\n\n将 OpenClaw 中的任何信息转换为精美排版的图片，直接在聊天窗口中展示。\n\n设计风格: 现代极简 / 瑞士风格 / 编辑排版 核心流程: 内容 → HTML 模板 → 本地生成图片 → OpenClaw 发送图片给用户\n\n图片生成: 本地渲染，无需外部 API\n\n默认: node-html-to-image (轻量快速)\n高级: playwright (用户要求精美/复杂效果时)\n🎯 使用场景\n1. 单条消息转图片\n\n用户说: \"帮我把这段话做成好看的分享图\"\n\nAI 将：\n\n分析内容类型（金句/引用/想法）\n选择合适模板（引用卡片/金句卡片）\n生成精美图片\n在聊天窗口发送图片\n2. PhoenixClaw 日志可视化\n\n用户说: \"生成今天的日志分享图\"\n\nAI 将：\n\n读取 ~/PhoenixClaw/Journal/daily/YYYY-MM-DD.md\n解析 frontmatter 和 sections\n选择模板（社交卡片/手账风格）\n生成精美图片\n在聊天窗口发送图片\n3. 聊天记录摘要\n\n用户说: \"把今天的对话做成总结图\"\n\nAI 将：\n\n扫描今日会话记录\n提取关键信息\n生成时间线/仪表盘风格图片\n在聊天窗口发送图片\n🛠️ 核心工作流\n步骤 1: 内容识别\n\n分析用户请求，识别内容类型：\n\n内容类型\t识别方式\t示例\n单条消息\t用户直接提供文本\t\"帮我把这段话做成图片\"\nPhoenixClaw 日志\t用户提及日志/日记\t\"生成今日日志图\"\n聊天记录\t用户提及对话/聊天\t\"把今天的对话做成图\"\n引用/金句\t文本包含引号或哲理内容\t名言警句\n步骤 2: 模板选择\n\n根据内容类型自动选择最佳模板：\n\nquote-card - 金句/引用卡片\n\n适用: 名言、哲理、简短感悟\n尺寸: 800x800 (方形，适合 Instagram)\n特点: 大字体编辑排版、纯色背景、无装饰引号、SVG 图标\n主题: light / dark / accent / blue\n\nmoment-card - 瞬间/时刻卡片\n\n适用: 单张照片 + 描述\n尺寸: 800x1000 (竖版)\n特点: 杂志风格、大图留白、时间/位置 SVG 图标\n\ndaily-journal - 日记编辑风格\n\n适用: PhoenixClaw 完整日志\n尺寸: 800x1200 (竖版)\n特点: 瑞士网格系统、清晰层级、SVG 图标、大日期数字\n\nsocial-share - 社交媒体卡片\n\n适用: 分享亮点/成就\n尺寸: 1200x630 (OG Image)\n特点: 双栏布局、纯色/深色主题、统计数据展示\n\ndashboard - 数据仪表盘\n\n适用: 周/月度汇总、统计数据\n尺寸: 1200x800 (横版)\n特点: 数据可视化、单色图表、网格布局、SVG 图标\n步骤 3: HTML/CSS 生成\n\n根据选定模板，填充内容生成 HTML：\n\n读取模板文件 assets/templates/{template-name}.html\n替换占位符变量:\n{{TITLE}} - 标题\n{{CONTENT}} - 主要内容\n{{DATE}} - 日期\n{{MOOD}} - 心情文字\n{{ENERGY}} - 能量值\n{{IMAGE_URL}} - 图片 URL\n应用基础样式 assets/css/base-styles.css\n使用系统字体栈 (无需外部字体):\n中文: system-ui, PingFang SC, Microsoft YaHei\n英文: system-ui, Segoe UI, Roboto\n步骤 4: 图片生成\n\n使用本地脚本生成图片：\n\n# 调用本地生成脚本\nnode scripts/generate-image.js \\\n --template quote-card \\\n --content '{\"QUOTE\":\"行动是治愈恐惧的良药\",\"AUTHOR\":\"威廉·詹姆斯\"}' \\\n --output ~/OpenClaw/Visuals/output.png\n\n\n渲染引擎选择:\n\n默认 (node-html-to-image): 轻量快速，适合大多数场景\n高级 (playwright): 当用户要求\"精美/复杂/高级\"效果时自动切换\n步骤 5: 返回结果\n\n脚本返回 JSON 结果：\n\n{\n \"success\": true,\n \"outputPath\": \"/Users/xxx/OpenClaw/Visuals/output.png\",\n \"renderer\": \"nodejs\",\n \"template\": \"quote-card\",\n \"dimensions\": { \"width\": 800, \"height\": 800 }\n}\n\n\nOpenClaw 读取生成的图片文件并发送给用户。\n\n📋 模板详情\nquote-card (金句卡片)\n\n适用场景: 名言、哲理、简短感悟\n\n布局:\n\n┌─────────────────────┐\n│ │\n│ \"引用内容\" │\n│ │\n│ —— 作者/来源 │\n│ │\n│ [装饰元素] [日期] │\n└─────────────────────┘\n\n\n样式特点:\n\n渐变背景 (紫→粉 / 蓝→青 / 橙→红)\n大号衬线字体 (Playfair Display / 霞鹜文楷)\n装饰性引号\n底部装饰线和日期\n\n变量:\n\n{{QUOTE}} - 引用内容\n{{AUTHOR}} - 作者/来源\n{{DATE}} - 日期 (可选)\n{{THEME}} - 配色主题 (purple/blue/orange)\nmoment-card (瞬间卡片)\n\n适用场景: 单张照片 + 描述\n\n布局:\n\n┌─────────────────────┐\n│ [照片] │\n│ │\n│ 🕐 时间 │\n│ │\n│ 描述文字... │\n│ │\n│ [心情 emoji] │\n└─────────────────────┘\n\n\n样式特点:\n\n照片占 60% 高度\n圆角设计\n时间戳带图标\n心情 emoji 装饰\n\n变量:\n\n{{IMAGE_URL}} - 照片 URL (需为公开可访问)\n{{TIME}} - 时间\n{{DESCRIPTION}} - 描述\n{{MOOD}} - 心情 emoji\ndaily-journal (日记手账)\n\n适用场景: PhoenixClaw 完整日志\n\n布局:\n\n┌─────────────────────┐\n│ 📅 日期 星期 │\n│ 😊 心情 ⚡ 能量 │\n│ ───────────────── │\n│ ✨ Highlights │\n│ • 成就1 │\n│ • 成就2 │\n│ │\n│ 🖼️ Moments │\n│ [照片] [照片] │\n│ │\n│ 💭 Reflections │\n│ 反思内容... │\n│ │\n│ 🌱 Growth │\n│ 成长笔记... │\n└─────────────────────┘\n\n\n样式特点:\n\n米黄色纸质背景\n手绘风格边框\n贴纸式 emoji\n分栏布局\n\n变量:\n\n{{DATE}} - 日期\n{{WEEKDAY}} - 星期\n{{MOOD}} - 心情\n{{ENERGY}} - 能量\n{{HIGHLIGHTS}} - 亮点列表\n{{MOMENTS}} - 瞬间列表\n{{REFLECTIONS}} - 反思\n{{GROWTH}} - 成长笔记\nsocial-share (社交分享)\n\n适用场景: 分享亮点/成就\n\n布局:\n\n┌─────────────────────────────┐\n│ │\n│ ✨ 今日亮点 │\n│ │\n│ \"完成了重要里程碑\" │\n│ │\n│ 📊 3 个任务完成 │\n│ 🎯 效率 95% │\n│ │\n│ [Logo] │\n└─────────────────────────────┘\n\n\n样式特点:\n\n1200x630 横向布局\n渐变背景\n大标题 + 统计数据\n底部品牌标识\n\n变量:\n\n{{TITLE}} - 标题\n{{SUBTITLE}} - 副标题\n{{STATS}} - 统计数据\n{{DATE}} - 日期\ndashboard (数据仪表盘)\n\n适用场景: 周/月度汇总\n\n布局:\n\n┌──────────────────────────────────────┐\n│ 📊 本周总结 2026-W05 │\n│ ─────────────────────────────────── │\n│ [心情趋势图] [能量分布图] │\n│ │\n│ 关键指标: │\n│ ✅ 完成: 15 📝 日记: 7 📸 照片: 12 │\n│ │\n│ 时间线: │\n│ Mon → Tue → Wed → Thu → Fri │\n└──────────────────────────────────────┘\n\n\n样式特点:\n\n深色背景\n数据可视化\n时间线展示\n关键指标卡片\n\n变量:\n\n{{PERIOD}} - 周期 (本周/本月)\n{{DATE_RANGE}} - 日期范围\n{{MOOD_DATA}} - 心情数据\n{{ENERGY_DATA}} - 能量数据\n{{STATS}} - 统计数据\n{{TIMELINE}} - 时间线事件\n🔧 配置说明\n前置要求\n\n安装依赖:\n\ncd skills/openclaw-visual\nnpm install\n\n\n(可选) 安装 Playwright - 用于高级渲染:\n\nnpm install playwright\nnpx playwright install chromium\n\n可选配置\n\n在 ~/.openclaw/visual/config.yaml 中可配置：\n\n# 默认模板\ndefault_template: \"quote-card\"\n\n# 默认配色主题\ndefault_theme: \"light\" # light/dark/accent/blue\n\n# 渲染引擎\nrenderer: auto # auto | nodejs | playwright\n# auto 模式: 默认 nodejs, 用户要求\"精美/复杂\"时自动切换 playwright\n\n# 输出设置\noutput:\n path: \"~/OpenClaw/Visuals/\"\n format: \"png\" # png | jpeg\n quality: 90 # JPEG 质量 (1-100)\n\n💡 使用示例\n示例 1: 金句卡片\n\n用户: \"帮我把这句话做成图片: '行动是治愈恐惧的良药'\"\n\nAI:\n\n识别为金句类型\n选择 quote-card 模板\n生成 HTML 内容\n调用本地生成脚本:\nnode scripts/generate-image.js \\\n --template quote-card \\\n --content '{\"QUOTE\":\"行动是治愈恐惧的良药\",\"AUTHOR\":\"威廉·詹姆斯\",\"THEME\":\"light\"}' \\\n --output ~/OpenClaw/Visuals/quote-20240201.png\n\n读取生成的图片文件，在聊天窗口发送给用户\n示例 2: 日志可视化\n\n用户: \"生成今天的日志分享图\"\n\nAI:\n\n读取 ~/PhoenixClaw/Journal/daily/2026-02-01.md\n解析内容\n选择 daily-journal 或 social-share 模板\n生成并发送图片\n示例 3: 聊天记录总结\n\n用户: \"把今天的对话做成总结图\"\n\nAI:\n\n扫描 ~/.openclaw/sessions/ 今日记录\n提取关键话题和决策\n选择 dashboard 或 social-share 模板\n生成并发送图片\n📚 参考文档\nreferences/templates.md - 模板设计规范\nreferences/content-parsing.md - 内容解析规则\nreferences/rendering-setup.md - 本地渲染配置\n🎨 扩展开发\n添加新模板\n在 assets/templates/ 创建新的 .html 文件\n定义模板变量占位符\n在 references/templates.md 添加文档\n更新模板选择逻辑\n添加新主题\n在 CSS 中定义新的配色方案\n更新 config.yaml 中的主题选项\n在模板选择时传入 {{THEME}} 变量\n设计原则\n视觉风格\n极简主义: 去除多余装饰，留白充足\n瑞士风格: 网格系统，清晰层级\n编辑排版: 大字号标题，精致细节\n配色方案\n主色: #1a1a1a (深灰)\n辅色: #525252, #737373, #a3a3a3 (灰度)\n背景: #fafafa, #f5f5f5 (米白)\n强调: #ea580c (橙红), #4f46e5 (靛蓝)\n图标系统\n\n使用 Lucide 风格 SVG 图标，替代所有 emoji：\n\n所有图标内联在 HTML 中\n统一 stroke-width: 1.5\n支持通过 CSS 控制大小: .icon-sm, .icon-md, .icon-lg\n字体策略\n使用系统字体栈，无需加载外部字体\n中文: system-ui, PingFang SC, Microsoft YaHei\n英文: system-ui, Segoe UI, Roboto, Helvetica Neue\n\nOpenClaw Visual - 让每一条记录都值得被看见" }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/goforu/openclaw-visual", "publisherUrl": "https://clawhub.ai/goforu/openclaw-visual", "owner": "goforu", "version": "0.0.1", "license": null, "verificationStatus": "Indexed source record" }, "links": { "detailUrl": "https://openagent3.xyz/skills/openclaw-visual", "downloadUrl": "https://openagent3.xyz/downloads/openclaw-visual", "agentUrl": "https://openagent3.xyz/skills/openclaw-visual/agent", "manifestUrl": "https://openagent3.xyz/skills/openclaw-visual/agent.json", "briefUrl": "https://openagent3.xyz/skills/openclaw-visual/agent.md" } }