hug-html
基于网格的HTML组件库与可视化编辑器，快速构建响应式页面。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hug-html。 它的用途是：基于网格的HTML组件库与可视化编辑器，快速构建响应式页面。 完整的 Skill 内容见：https://321skill.com/skills/hug-html/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我需要一个产品介绍页的HTML结构，包含头部导航、英雄横幅、三栏特性介绍和页脚。’ 它会引导你在hug-html的可视化编辑器中选择合适的模板，拖拽原子组件进行布局，并应用样式预设，最终生成干净、响应式的HTML/CSS代码。你也可以说：‘把这个设计稿的布局用网格系统实现出来’，它能帮你快速拆解布局，生成对应的网格化HTML结构。
介绍
hug-html 旨在解决前端开发中，从设计稿到HTML代码的快速、标准化落地问题。它提供了一套基于网格系统的原子化组件和可视化编辑器，让开发者能像搭积木一样组合出复杂的页面布局，同时通过内置的样式预设和约束规则，确保产出代码的一致性与可维护性。
使用方式非常直观。开发者可以在其网格感知的可视化编辑器中，通过拖拽8种基础原子组件（如容器、按钮、文本等）来构建页面模块。系统支持单元格合并、两级模块系统（基础与复合），并提供7种以上的内置模板作为起点。编辑完成后，可以一键生成结构清晰、符合网格规范的HTML与CSS代码。
这个Skill特别适合需要快速产出标准化HTML页面的前端开发、全栈开发和UI设计师。对于产品经理或营销专员，也可以利用其模板快速搭建简单的活动页或宣传素材原型，无需深入编码。
建议在需要快速构建响应式登录页、后台管理界面、营销着陆页或设计系统原型时使用。注意，它主要专注于静态HTML结构的生成与样式预设，复杂的交互逻辑和动态数据绑定仍需开发者手动实现。对于追求极致定制化或已有成熟组件库的项目，可能需要进行额外适配。
核心特点
核心区别在于其“网格感知”的可视化编辑与“原子组件+三级约束”的生成模式，能确保生成的HTML结构天然具备优秀的响应式布局基础，而不仅仅是代码片段拼接。
注意事项
不适合需要复杂交互逻辑、动态数据绑定或深度定制组件样式的单页面应用（SPA）开发场景。
常见问题
hug-html 能生成 Vue 或 React 组件吗？
不能，它主要生成标准的、结构化的HTML和CSS代码，适用于静态页面或作为其他框架的模板起点。
可视化编辑器需要联网使用吗？
根据仓库描述，它是一个本地工具或库，可视化编辑功能 likely 集成在开发环境中，无需联网。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hug-html/raw/index.md 读取 hug-html 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hug-html/raw/index.md（查看排版版本）