What makes hug-html notable?

1.3K downloads. Trust evidence available

How should hug-html be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

hug-html

8种原子组件自由组合 + 3级约束, cell merging, two-level module system (base + composite), 7+ built-in templates, grid-aware visual editor, style presets, post-generation... Skill: hug-html Owner: ldxs001 Summary: 8种原子组件自由组合 + 3级约束, cell merging, two-level module system (base + composite), 7+ built-in templates, grid-aware visual editor, style presets, post-generation... Tags: chinese-error-handling:3.3.1, grid:3.3.1, html:3.3.1, latest:3.3.1, layout:3.3.1, module-library:3.3.1, style-presets:3.3.1, template:3.3.1, visual-editor:3.3.1 Version history: v3.3.1 | 2026-07-09T10:47:33.622Z |

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.3k

Updated

Oct 10, 2026

Version

3.3.1

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.3K downloads reported by the source. Last updated 10/10/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 10, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 10, 2026
Adoption signal: 1.3K downloadsadoption · observed Oct 10, 2026
Latest release: 3.3.1release · observed Jul 9, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s1794v2r46s8y5d1r4jdd7ec5h84rw70:hug-html

Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-ldxs001-hug-html/snapshot"

Documentation

CLAWHUB

153,913 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
displayName: hug-html
name: hug-html
tags: ['html', 'grid', 'template', 'visual-editor', 'module-library', 'style-presets', 'layout', 'chinese-error-handling']
version: 3.3.1
author: Ldxs
license: MIT
description: 8种原子组件自由组合 + 3级约束, cell merging, two-level module system (base + composite), 7+ built-in templates, grid-aware visual editor, style presets, post-generation audit, user template save-as, Chinese error handling
sensitive_access: false
critical_write: false
permission_weight: LOW
data_dir: ../.standardization/hug-html/data/
external_data_dir: true
trigger: 生成 HTML 模板/编辑 HTML/HTML 模块/网格布局/单元格合并/可视化编辑/输出自包含 HTML
trigger_negative: 仅询问概念/无文件生成需求/要求使用其他工具
meta_field_sync: true
create_permissions_md: true
license_compliance: true
---
# hug-html

> → 详见核心能力的渐进式文件索引

## 限制

- **本技能的能力边界分为支持场景、不支持场景和边界情况三类。**
- **生成推广卡片** — 应用推广、活动宣传、产品介绍的毛玻璃卡片。触发词："生成一个 APP 推广 HTML 卡片"
- **生成信息面板** — 带表格、参数、二维码的信息展示面板。触发词："做一个带二维码和参数描述的 HTML"
- **生成可视化编辑模板** — 带 Ctrl+E 可编辑的 HTML。触发词："生成一个可视化编辑的 HTML 模板"
- **生成日历/周历仪表板** — 假日管理、年份控制、工日统计的交互仪表板。触发词："生成一个周历交互 HTML"
- **生成双端对比卡片** — 左应用右元服务/双实体的对比展示。触发词："生成一个双端推广卡片"
- **内容填充** — 自动/手动填充 data-field 标记的文字和图片。触发词："给这个 HTML 模板填充示例内容"
- **方案模板固化** — 将当前设计保存为可复用的用户模板。触发词："把这个模板保存为 my-card"
- **自由创作 HTML** — AI 参考模块库直接编写自包含 HTML。触发词："帮我写一个毛玻璃风格的首页"

**不支持的场景：**
- **复杂前端应用** — 不支持路由/状态管理/API 调用（替代：手写 React/Vue）
- **多页面 HTML 站点** — 不处理页面间导航（替代：静态站点生成器）
- **PDF / 图片输出** — 不直接生成图片或 PDF（替代：浏览器打印或截图）
- **外部 CSS/JS 框架集成** — 强调零外部依赖（替代：手动引入 CDN）
- **非网格布局的自由排版** — 基于 CSS Grid（替代：自由生成模式）
- **后端交互** — 纯前端 HTML，无后端能力。影响：数据持久化需额外方案。替代：搭配 Flask/Node.js

**边界情况：**
- **网格越界** — row/col + rowspan/colspan 不能超过网格总行列数。影响：CSS Grid 异常渲染
- **毛玻璃裁剪** — backdrop-filter 需要 overflow:hidden 容器
- **JSON 模板路径** — --spec 支持绝对/相对路径和内置名，不存在有中文错误提示
- **文件编码** — 必须 UTF-8，其他编码会导致乱码
- **编辑模式兼容性** — Ctrl+E 需要 Chrome/Edge/Firefox，不支持 IE

## 触发条件

**正向触发：**
- "生成 HTML 模板" / "HTML template" / "hug html"
- "编辑 HTML" / "可视化编辑 HTML" / "visual edit HTML"
- "HTML 模块" / "HTML module library"
- "网格布局" / "grid layout" / "N×M 网格"
- "单元格合并" / "rowspan" / "colspan"
- 输出格式：自包含 HTML 文件（毛玻璃卡片风格）
- "我需要一个 APP 推广卡片，要有个二维码—可以用，支持"
- "帮我做一个带表格和参数配置的 HTML 面板—支持，用 data-table + param-panel 模块"
- "生成一个双端对比的推广页面—支持，用 header-dual + qr-dual"
- "这个模板我想保存下来以后用—支持，用 --save-as 固化"
- "给我生成的 HTML 加一个可视化编辑界面—支持，用 visual_editor.py"

**否定条件：**
- 不触发：用户仅询问 HTML 语法概念，无文件生成需求
- 不触发：用户明确请求其他特定技能

## 核心能力

> 📚 **渐进式加载**：本技能采用渐进式 MD 体系，`SKILL.md` 为入口（≤230行），详细内容拆分到 `references/*.md` 按需加载。

| # | 能力 | 说明 |
| --- |------| ------ |
| 1 | **骨架结构** | N×M 网格、行列数、单元格合并（rowspan/colspan）、gap 间距 |
| 2 | **骨架约束** | 3级约束（fill/fit/clip），递归传递到组件级别 |
| 3 | **组件体系** | 8种原子组件（text/image/icon/qrcode/table/divider/spacer/group），自由组合 |
| 4 | **组合逻辑** | 方向(row/column)、比例(ratios)、对齐(align)、8方向位置 |
| 5 | **方案模板库** | 内置 7+ 预置{骨架+组件+样式}组合 + **用户可自定义固化** |
| 6 | **样式预设** | 5 种内置风格：商务/科研/喜庆/丧事/技术，一键切换配色字体 |
| 7 | **基础编辑** | 每个文字元素独立控制：字体家族(8种)/

_meta.json

{
  "ownerId": "kn75zfd51df61ajdyqtgvrs1hx84s4q6",
  "slug": "hug-html",
  "version": "3.3.1",
  "publishedAt": 1783594053622
}

references/antipatterns.md

# 反模式手册

本文档列出 hug-html 技能的常见反模式及正确做法。

---

## 反模式列表

### ❌ 错误：在 SKILL.md 中粘贴大段代码

**问题**：SKILL.md 应保持 ≤230 行，大段代码会导致文件臃肿，违反 R-17 渐进式加载规范。

**正确做法**：将代码移到 `scripts/` 目录，在 SKILL.md 中描述调用方式。

```markdown
❌ 错误示例：
```python
def generate_template():
    # ... 50行代码 ...
```

✅ 正确示例：
调用 `scripts/template_generator.py --output <path> --type <promo|product|tech|flow>`
```

---

### ❌ 错误：使用相对路径 `./scripts/grid_builder.py`

**问题**：相对路径在不同工作目录下会解析错误，导致脚本找不到。

**正确做法**：使用相对路径（如 `scripts/grid_builder.py`），skill-standardization 审计工具会自动拼接安装目录。

```markdown
❌ 错误：python "C:/Users/.../scripts/template_generator.py"
✅ 正确：python scripts/template_generator.py --output ../.standardization/hug-html/data/output/result.html
```

---

### ❌ 错误：在 SKILL.md 中写"详见脚本注释"

**问题**：用户无法看到脚本注释，且脚本注释容易过时。

**正确做法**：将详细说明写入 `references/guide.md`，SKILL.md 只写必要信息。

---

### ❌ 错误：产出物路径指向安装目录

**问题**：`artifact_paths` 应指向数据目录（`../.standardization/hug-html/data/output/`），而非安装目录下的 `data/output/`。

**正确做法**：

在 `SKILL.md` frontmatter 中：
```yaml
artifact_paths: ["../.standardization/hug-html/data/output/"]
```

在脚本中：
```python
from pathlib import Path
output_dir = Path(__file__).parent.parent.parent / ".standardization" / "hug-html" / "data" / "output"
```

---

### ❌ 错误：模块名拼写错误

**问题**：`SKILL.md` 或 `references/` 中引用的模块名与实际文件名不一致，导致用户调用失败。

**正确做法**：每次提及脚本名时，用绝对路径验证文件是否存在。

```
✅ 正确：python "C:/Users/sm001/.workbuddy/skills/hug-html/scripts/template_generator.py" --help
```

---

### ❌ 错误：术语不一致

**问题**：同一概念混用多个术语（如"配置"/"配置"、"填充内容"/"填内容"），增加理解成本。

**正确做法**：全文统一术语。

| 概念 | 统一术语 | 错误术语 |
|------|----------|----------|
| configuration | 配置 | 配置、setting |
| fill content | 填充内容 | 填内容、填入 |
| module | 模块 | 组件、component |
| preset | 预设 | 预置、preset |
| update | 更新 | 更新、modify |

---

## 检查清单

- [ ] SKILL.md ≤ 230 行？
- [ ] 无大段代码（>10行）直接在 SKILL.md 中？
- [ ] 所有路径均为相对路径？
- [ ] 无"详见脚本注释"等推卸责任的描述？
- [ ] `artifact_paths` 指向数据目录而非安装目录？
- [ ] 所有脚本名拼写正确且文件存在？
- [ ] 术语全文统一？

---

> 本文档遵循 R-18 反模式引用规范，由 `skill-standardization v2.38.6` 生成。

references/architecture.md

# 四层架构（细化）

hug-html 采用四层架构设计，从抽象到具体逐层约束。

```
骨架 (Skeleton)
├── 骨架结构 — N×M 网格、行列数、单元格合并(rowspan/colspan)、gap 间距
├── 骨架样式 — 底板背景/渐变/透明度、外阴影、外边框、圆角、内外边距
└── 约束模式 — fill(完全贴合) / fit(等比缩放) / clip(裁剪遮挡)

模块 (Module)  ← 组件组合 = {组件声明 + 约束 + 比例} 自由搭配
├── 组件组合 — 8种原子组件自由搭配（text/image/icon/qrcode/table/divider/spacer/group）
├── 组合逻辑 — 方向(row/column)、比例(ratios)、对齐(align/cross_align)
└── 约束传递 — 骨架约束模块 → 模块约束组件（递归）

组件 (Component)  ← 8种原子类型
├── text     — 纯文本（title/body/caption 三种变体）
├── image    — 图片（支持 fit/cover/fill 填充模式）
├── icon     — 图标（FontAwesome / SVG 内联）
├── qrcode   — 二维码（API 生成）
├── table    — 数据表格（表头+行）
├── divider  — 分割线
├── spacer   — 空白占位
└── group    — 组合容器（递归包含子组件）

基础样式 (Base)
└── CSS 原语 — 字体/颜色/渐变/圆角/间距/阴影/边框
```

**编辑粒度**（可视化编辑器内）：
| 可更新 | 不可更新（需改 Grid Spec） |
|--------|---------------------------|
| ✓ 图片内容（点击输入 URL / 拖放文件替换） | ✗ 骨架结构（行列数、合并方式、gap） |
| ✓ 基础样式（每个文字元素独立：字体家族/字重/字号/字色） | ✗ 模块结构（组件的 HTML 骨架） |
| ✓ 模块样式（通过 cell style 覆盖背景色/内边距） | ✗ 骨架样式（底板色/外阴影等） |

**大模型使用流程**（自由生成模式）：
1. 理解用户需求 → 确定骨架结构：几行几列、哪些单元格需要合并
2. 确定约束模式：fill/fit/clip → 决定骨架对模块、模块对组件的约束
3. 描述需要的组件 → 从8种原子组件中自由组合，放入对应骨架位置
4. 配置组合逻辑：方向、比例、对齐方式
5. 生成 HTML → 可直接用 `module_assembler.py` 或自由生成自包含 HTML

references/call-chains.md

# call-chains.md — hug-html 调用链定义

本文件定义 `hug-html` 技能的调用链，供 `skill-sub` 读取和执行。

---

## 调用链 1：generate-html（完整生成流程）

**描述**：从需求分析到输出最终 HTML 的完整流程

**触发方式**：`/hug-html generate --type <type> --output <path>`

**步骤**：

| 步骤 | 动作 | 调用脚本 | 输出 |
|------|-------|------|------|
| 1 | 解析需求 | （AI 理解用户意图） | 确定 `type`, `preset`, `modules` |
| 2 | 生成模板 | `template_generator.py --type <t> --output <o>` | `template.html` |
| 3 | 填充内容（可选） | `content_filler.py --auto --template <t> --output <o>` | `filled.html` |
| 4 | 应用样式预设（可选） | `content_filler.py --preset <p> --template <t> --output <o>` | `styled.html` |
| 5 | 生成编辑界面（可选） | `visual_editor.py --template <t> --output <o>` | `editor.html` |
| 6 | 组装模块（可选） | `module_assembler.py --modules <m> --output <o>` | `assembled.html` |
| 7 | 输出最终文件 | （复制到 `data/output/final.html`） | `final.html` |

**调用链 JSON**（`skill-sub` 格式）：

```json
{
  "name": "generate-html",
  "description": "从需求到最终 HTML 的完整生成流程",
  "steps": [
    {"step": 1, "action": "parse-requirement", "tool": "AI", "output": "type,preset,modules"},
    {"step": 2, "action": "generate-template", "script": "template_generator.py", "args": "--type {type} --output data/output/template.html"},
    {"step": 3, "action": "fill-content", "script": "content_filler.py", "args": "--auto --template data/output/template.html --output data/output/filled.html", "optional": true},
    {"step": 4, "action": "apply-preset", "script": "content_filler.py", "args": "--preset {preset} --template data/output/template.html --output data/output/styled.html", "optional": true},
    {"step": 5, "action": "generate-editor", "script": "visual_editor.py", "args": "--template data/output/template.html --output data/output/editor.html", "optional": true},
    {"step": 6, "action": "assemble-modules", "script": "module_assembler.py", "args": "--modules {modules} --output data/output/assembled.html", "optional": true},
    {"step": 7, "action": "finalize", "tool": "AI", "output": "data/output/final.html"}
  ]
}
```

---

## 调用链 2：edit-html（编辑流程）

**描述**：生成模板 → 生成编辑界面 → 用户编辑 → 导出最终 HTML

**触发方式**：`/hug-html edit --template <path>`

**步骤**：

| 步骤 | 动作 | 调用脚本 | 输出 |
|------|-------|------|------|
| 1 | 检查模板是否存在 | （AI 验证） | 模板路径 |
| 2 | 生成可视化编辑界面 | `visual_editor.py --template <t> --output <o>` | `editor.html` |
| 3 | 提示用户在浏览器中编辑 | （AI 输出提示） | 编辑说明 |
| 4 | 用户导出最终 HTML | （用户点击「生成最终 HTML」按钮） | `final.html` |
| 5 | 提取编辑后内容（可选） | `content_filler.py --extract <html> --output <json>` | `content.json` |

**调用链 JSON**：

```json
{
  "name": "edit-html",
  "description": "生成可视化编辑界面并导出最终 HTML",
  "steps": [
    {"step": 1, "action": "validate-template", "tool": "AI", "output": "template-path"},
    {"step": 2, "action": "generate-editor", "script": "visual_editor.py", "args": "--template {template} --output data/output/editor.html"},
    {"step": 3, "action": "prompt-user", "tool": "AI", "output": "edit-instructions"},
    {"step": 4, "a

Github ReposUpdated 1d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.