hug-html

# 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" - "这个模...