hug-html
网格感知的HTML可视化编辑器，8种原子组件自由组合
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hug-html。 它的用途是：网格感知的HTML可视化编辑器，8种原子组件自由组合 完整的 Skill 内容见：https://321skill.com/skills/hug-html-x-4/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘帮我生成一个产品展示页面，顶部是导航栏，中间两栏布局：左侧是产品卡片网格（3列），右侧是筛选面板（包含价格滑块和类别复选框），底部是页脚。’ hug-html 会自动识别布局需求，使用容器组件构建两栏结构，插入默认产品卡片组件和筛选表单组件，并应用 built-in 模板中的‘电子商务’样式预设，生成可直接运行的 HTML 文件。
介绍
hug-html 是一个基于网格布局的 HTML 可视化编辑器 Skill，提供 8 种原子组件（如容器、文本、图片、按钮、表格、表单、卡片、导航栏）和三级约束（单元、行、区域），支持单元格合并、两级模块系统（基础模块 + 复合模块），内置 7 个以上模板，并附带样式预设和后处理能力。它让前端开发者、UI 设计师和全栈工程师能够通过拖拽或自然语言指令快速生成结构整齐、响应式良好的 HTML 页面，免去手写繁琐的 CSS 网格代码。
使用方式很简单：对 AI 描述你想要的页面布局（例如“两栏布局，左侧是产品列表，右侧是搜索框和筛选条件”），hug-html 会自动解析并生成对应的 HTML 网格结构，通过原子组件组合和约束规则保证布局的合理性与可维护性。你还可以在生成后通过可视化编辑器微调单元格合并、模块层级和样式预设，实现像素级精确控制。
适合前端开发、全栈开发、UI 设计师、产品经理，以及需要快速搭建演示页面或原型的学生和创业者。尤其适合需要频繁迭代页面布局、保持设计一致性的团队，以及不熟悉 CSS Grid 但希望快速产出高质量 HTML 的非专业开发者。
使用建议：建议先用内置模板快速验证布局意图，再通过原子组件组合和单元格合并进行精细化调整。注意，hug-html 主要面向静态页面和布局，不适合需要复杂交互逻辑（如实时数据流、动画编排）的 Web 应用，此时应结合其他前端框架。
核心特点
与同类布局生成器相比，hug-html 独创的“三级约束 + 单元格合并”机制，能在保持网格灵活性的同时强制约束布局边界，避免生成混乱的嵌套结构；同时内置两级模块系统（基础+复合），支持模块化复用，适合搭建大型项目骨架。
注意事项
不适合需要复杂交互逻辑（如实时数据绑定、动画编排）或后端数据驱动的动态页面场景。
常见问题
hug-html 支持哪些原子组件？
支持 8 种原子组件：容器、文本、图片、按钮、表格、表单、卡片、导航栏，可通过约束组合成复合模块。
生成的 HTML 可以导出为纯文件吗？
可以，生成后可直接复制 HTML 源码，或通过可视化编辑器导出为 .html 文件，支持样式预设和内联样式。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hug-html-x-4/raw/index.md 读取 hug-html 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hug-html-x-4/raw/index.md（查看排版版本）