Dynamic UI Skill
Render dynamic visual content (tables, charts, stats, cards, dashboards) as images using HTML templates and wkhtmltoimage.
Triggers
- - "render", "visualize", "chart", "dashboard", "dynamic-ui"
Usage
CODEBLOCK0
Templates
| Template | Description | Input Schema |
|---|
| INLINECODE0 | Data tables | INLINECODE1 |
| INLINECODE2 |
Bar charts |
{"labels": [...], "values": [...], "title": "..."} |
|
stats | KPI cards |
{"stats": [{"label": "...", "value": "...", "change": "..."}]} |
|
card | Info card |
{"title": "...", "subtitle": "...", "body": "...", "status": "green\|yellow\|red"} |
|
dashboard | Composite |
{"title": "...", "widgets": [{"type": "stat\|table\|chart", ...}]} |
Options
| Option | Description | Default |
|---|
| INLINECODE10 , INLINECODE11 | JSON data (or use stdin) | - |
| INLINECODE12 |
Theme: modern, dark, minimal | modern |
|
--output,
-o | Output path | stdout (base64) |
|
--width | Image width in pixels | 800 |
Themes
- - modern — Purple/blue gradients, shadows, rounded corners
- dark — Dark background, light text, subtle borders
- minimal — Clean white, thin borders
Examples
CODEBLOCK1
💡 Sending Images to Users
After rendering an image, you'll typically want to send it to the user. Here's the recommended workflow:
Recommended Workflow:
CODEBLOCK2
Tips:
- - Save to
~/.openclaw/media/ — this path works reliably for inline sending - Use descriptive captions — helps users understand the visual
- Consider the context — sometimes saving to disk is fine if the user requested it
Example (complete flow):
CODEBLOCK3
Dependencies
- -
/usr/bin/wkhtmltoimage — HTML to image conversion - INLINECODE18 — JSON parsing
动态UI技能
使用HTML模板和wkhtmltoimage将动态视觉内容（表格、图表、统计、卡片、仪表盘）渲染为图像。
触发词
- - render, visualize, chart, dashboard, dynamic-ui
使用方法
bash
基本用法
./scripts/render.sh <模板> --data
带选项
./scripts/render.sh table --data {columns:[A,B],rows:[[1,2]]} --style dark --output out.png
从标准输入
echo {labels:[Q1,Q2],values:[100,200]} | ./scripts/render.sh chart-bar --style modern
模板
| 模板 | 描述 | 输入结构 |
|---|
| table | 数据表格 | {columns: [...], rows: [[...], ...]} |
| chart-bar |
柱状图 | {labels: [...], values: [...], title: ...} |
| stats | KPI卡片 | {stats: [{label: ..., value: ..., change: ...}]} |
| card | 信息卡片 | {title: ..., subtitle: ..., body: ..., status: green\|yellow\|red} |
| dashboard | 组合仪表盘 | {title: ..., widgets: [{type: stat\|table\|chart, ...}]} |
选项
| 选项 | 描述 | 默认值 |
|---|
| --data, --input | JSON数据（或使用标准输入） | - |
| --style |
主题：modern, dark, minimal | modern |
| --output, -o | 输出路径 | 标准输出（base64） |
| --width | 图像宽度（像素） | 800 |
主题
- - modern — 紫蓝渐变、阴影、圆角
- dark — 深色背景、浅色文字、柔和边框
- minimal — 简洁白色、细边框
示例
bash
渲染表格
./scripts/render.sh table --data {columns:[Name,Score],rows:[[Alice,95],[Bob,87]]} -o table.png
渲染柱状图
./scripts/render.sh chart-bar --data {labels:[Jan,Feb,Mar],values:[120,150,180],title:Monthly Sales} --style dark -o chart.png
渲染统计
./scripts/render.sh stats --data {stats:[{label:Users,value:12.5K,change:+12%},{label:Revenue,value:$45K,change:+8%}]} -o stats.png
💡 向用户发送图像
渲染图像后，通常需要将其发送给用户。以下是推荐的工作流程：
推荐工作流程：
bash
1. 渲染到 ~/.openclaw/media/（推荐路径）
./scripts/render.sh table --data ... -o ~/.openclaw/media/my-table.png
2. 通过消息工具内联发送
message(action=send, filePath=/home/ubuntu/.openclaw/media/my-table.png, caption=说明文字, channel=telegram, to=<用户ID>)
提示：
- - 保存到 ~/.openclaw/media/ — 此路径可可靠地用于内联发送
- 使用描述性说明文字 — 帮助用户理解可视化内容
- 考虑上下文 — 如果用户要求保存到磁盘，有时也是可以的
示例（完整流程）：
bash
渲染
echo {title:My Data,columns:[A,B],rows:[[1,2]]} | \
./scripts/render.sh table -o ~/.openclaw/media/data.png
发送
message(action=send, filePath=/home/ubuntu/.openclaw/media/data.png, caption=这是您的数据, channel=telegram, to=USER_ID)
依赖项
- - /usr/bin/wkhtmltoimage — HTML转图像转换
- jq — JSON解析
