技能介绍

要解决什么问题

工程师经常需要单文件、零 CDN 依赖的展示页：APP 推广毛玻璃卡片、带表格和二维码的参数面板、可切换年份的周历仪表板，或左右双端对比页。手写 CSS Grid、backdrop-filter 和合并单元格很费时间，还要自己保证标签闭合和网格不越界。

技能如何工作

Hug HTML 用 Grid Spec（JSON） 描述 N×M 骨架，支持 rowspan/colspan 与 fill / fit / clip 三级约束向下传递到组件。组件层提供 8 种原子类型：text、image、icon、qrcode、table、divider、spacer、group，可按 row/column 方向、比例与对齐组合。

典型流程是：解析需求 → 选择或创建 grid_spec.json → 引用 modules/ 得到 module_config.json → 脚本生成自包含 *.html；可选步骤包括 visual_editor.py 产出带 Ctrl+E 的编辑页、按 data-field 填充内容，以及 --save-as 将方案固化为用户模板。内置多种方案模板（推广、信息面板、双端对比、日历等）和 5 种样式预设；生成后会做结构、网格越界与渲染风险审计。

适用边界

适合：推广/活动卡片、信息面板、周历交互页、可视化可编辑模板、AI 参考模块库的自由 HTML。
不适合：带路由或状态管理的复杂 SPA、多页站点导航、直接导出 PDF/图片、强依赖外部框架的后端交互（纯前端 HTML）。
注意：网格行列与 span 不能超出总网格；毛玻璃需 overflow:hidden 容器；模板路径与文件须 UTF-8；Ctrl+E 编辑模式需现代 Chromium/Firefox 内核。