hug-htmllisted

# hug-html > → 详见 `references/antipatterns.md` > → 详见 `references/faq.md` > → 详见 `references/architecture.md` ## 触发场景 当用户提到以下内容时触发本技能： - "生成 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种)/字重(100-900)/字号(9-48px)/字色/透明度 | | 8 | **图片编辑** | 点击输入URL + 拖放文件替换，所有图片组件均支持 | | 9 | **生成后审计** | 自动检查 HTML 结构完整性、标签平衡、图片属性、网格越界、渲染风险 | | 10 | **统一接口** | `--export-interfaces` 导出完整接口定义 JSON，大模型可直接理解 | | 11 | **方案模板固化** | `--save-as <名>` 将任意生成固化为用户模板，后续按名引用 | | 12 | **自由生成模式** | AI 参考组件库，理解需求确定骨架→组合组件→约束→生成→审计 | | 1