当用户请求生成图文并茂的 HTML 文档时,按照本 skill 规定的模板、路径和工作流执行,确保输出风格统一、存放位置规范。
模板支持双主题切换:内置白色版/暗黑版,点击右上角 ☀️/🌙 按钮即可切换,无需用户选择。
模板文件路径:
~/.workbuddy/skills/graphic-report-generator/assets/ui-template.html
该模板的核心设计特点:
| 元素 | 样式 |
|---|---|
| ------ | ------ |
| 背景色 | #f8fafc 浅灰白 |
| 主色调 | #1a56db 蓝色 |
| Hero 区 | 深蓝渐变(#0f172a → #1e3a8a → #1d4ed8)+ 装饰圆形 |
| 卡片 | 白色背景 + 圆角 16px + 边框 + 轻微阴影 |
| 表格 | 蓝色表头(#e8f0fe)+ hover 高亮行 |
| 标签/徽章 | 语义色背景 + 圆角胶囊 |
| 数字/时间轴 | 深色代码区(#0f172a)+ 语法高亮 |
| 字体栈 | -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif |
使用模板时:
assets/ui-template.html,提取其完整 块 中,保留 块原样| 用途 | 路径 |
|---|---|
| ------ | ------ |
| 知识库主目录 | /Users/macwoos/Desktop/范奇工作文档/20260407workbuddy/ |
| 图文报告存放目录 | /Users/macwoos/Desktop/范奇工作文档/20260407workbuddy/客户问题解读报告/ |
工作流:
/Users/macwoos/WorkBuddy/Claw/<文件名>.html/Users/macwoos/Desktop/范奇工作文档/20260407workbuddy/客户问题解读报告/<中文标题>.htmlpreview_url 打开本地文件供用户预览/Users/macwoos/WorkBuddy/Claw/.workbuddy/memory/YYYY-MM-DD.md根据内容类型选用以下组件(全部定义在模板中):
| 组件 | 适用场景 | CSS class |
|---|---|---|
| ------ | ---------- | ----------- |
flow(流程图) | 展示系统架构、工作流程、数据流向 | .flow .flow-node .flow-arrow |
purpose-grid(用途卡片) | 对比多个并列概念或方案 | .purpose-card .purpose-card.max/default/tx |
kind-grid(类型网格) | 展示不同类型/模式的对比 | .kind-card .kind-badge |
timeline-vis(时间轴) | 展示时间序列、分时数据 | .tl-bar .tl-seg |
stack-vis(层级可视化) | 展示优先级、堆叠关系 | .stack-row .stack-bar |
rule-grid(规则卡片) | 展示注意事项、警告、特殊规则 | .rule-card .rule-card.warn/info/danger/success |
iog-banner(横幅) | 重要概念/功能介绍模块 | .iog-banner |
field-table(字段表) | 展示结构化字段定义 | .field-table |
json-example(代码块) | JSON 示例、配置代码 | .json-example |
块(从 assets/ui-template.html 读取)section + section-headerfield-name(蓝色 monospace) 标签/Users/macwoos/WorkBuddy/Claw/<英文名>-<日期>.html客户问题解读报告/<中文标题>.htmlpreview_url 打开本地 HTML 供预览argo-ocpp-integration-report.htmlArgo OCPP 集成测试问题解读🔌 LB2.0 ⚡ PV 2.1 ⚠️ 集成问题以下任何一种表达都应触发本 skill:
共 1 个版本