Skill v1.0.0

currentAutomated scan100/100

openminis/minisskills/generative-ui-minis

──Details

PublishedJuly 29, 2026 at 09:08 AM

Content Hashsha256:1ec3cd23c302aaf2...

Git SHAbdc3cba261a3

──Files

Files (1 file, 4.0 KB)

SKILL.md4.0 KBactive

SKILL.md · 150 lines · 4.0 KB

version: "1.0.0" name: generative-ui-minis description: 在 Minis 当前环境里，把文本说明自动转换成更像 Claude Artifact 的单文件 HTML 生成器，统一支持卡片、表格、记录、时间线、代码块、图表等输出；当用户提到这些组件或可视化页面时应优先调用。 metadata: openclaw: emoji: "🧩" requires: bins: ["python3"]

Generative UI Minis Skill

这是一个面向当前 Minis / iSH 环境的 Claude Artifact 风格生成器 skill。

目标不是修改聊天宿主本身，而是：

将用户说明整理为结构化 spec
用 Python 渲染为单文件 HTML artifact
保存到 /var/minis/workspace/
让用户直接预览、分享、继续迭代

自动触发场景

当用户表达以下意图时，应优先调用本 skill：

“做个 Claude Artifact / Claude 风格页面”
“把回答变成卡片”
“生成表格 / 记录表 / checklist”
“把内容整理成时间线”
“生成代码块展示页面”
“做个图表 / 可视化页面”
“把这些内容渲染成 HTML 原型”
“做个交互式说明页 / artifact”

特别是当用户同时提到： 卡片、表格、记录、代码块、时间线、图表、可视化页面、artifact 时，默认认为需要调用本 skill 生成额外页面。

当前支持的统一组件

cards：信息卡片 / KPI 卡片
table：表格
records：记录列表
timeline：时间线 / 步骤流
code：代码块
chart：内置条形图
details：折叠详情

主要脚本

1）完整 Artifact 生成器

bash

python3 /var/minis/skills/generative-ui-minis/scripts/generative_ui_artifact.py \
  "项目周报" \
  --text "需要概览卡片\n需要风险表格\n需要时间线\n需要代码块\n需要图表"

默认会输出到：

bash

/var/minis/workspace/<title>_artifact.html

2）传入 JSON spec 渲染

bash

python3 /var/minis/skills/generative-ui-minis/scripts/generative_ui_artifact.py \
  "Demo" \
  --spec /path/to/spec.json \
  --out /var/minis/workspace/demo_artifact.html \
  --json-out /var/minis/workspace/demo_spec.json

spec 格式

json

{
  "title": "生成式 UI 示例",
  "summary": "统一输出多种组件。",
  "chips": ["Artifact", "Cards", "Table"],
  "blocks": [
    {
      "type": "cards",
      "title": "概览卡片",
      "items": [
        {"title": "状态", "value": "进行中", "desc": "当前迭代中"}
      ]
    },
    {
      "type": "table",
      "title": "记录表",
      "columns": ["日期", "事项", "状态"],
      "rows": [["03-17", "生成器开发", "完成"]]
    },
    {
      "type": "timeline",
      "title": "时间线",
      "items": [
        {"title": "阶段一", "desc": "需求整理"},
        {"title": "阶段二", "desc": "页面渲染"}
      ]
    },
    {
      "type": "code",
      "title": "示例代码",
      "language": "python",
      "content": "print('hello artifact')"
    },
    {
      "type": "chart",
      "title": "进度图表",
      "series": [
        {"label": "设计", "value": 70},
        {"label": "开发", "value": 85}
      ]
    }
  ]
}

能力边界

能做：

统一生成单文件 artifact HTML
支持卡片、表格、记录、时间线、代码块、图表
适合作为回答的可视化补充页面

暂不直接做：

聊天宿主原生消息级组件注入
实时数据库驱动的复杂前端应用
长期运行的交互服务端

触发建议

如果用户说：

“给我做个卡片版”
“顺便生成表格/时间线/代码块”
“整理成 artifact 页面”

不要只用文字回答，应该直接运行本 skill 生成额外 HTML artifact。

All versions

Skill v1.0.0

Generative UI Minis Skill

自动触发场景

当前支持的统一组件

主要脚本

1）完整 Artifact 生成器

2）传入 JSON spec 渲染

spec 格式

推荐工作流

能力边界

触发建议