hug-html
8种原子组件自由组合，快速搭建HTML页面
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hug-html。 它的用途是：8种原子组件自由组合，快速搭建HTML页面 完整的 Skill 内容见：https://321skill.com/skills/hug-html-x-5/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我用hug-html搭建一个产品展示页，包含顶部导航栏、三列商品卡片网格和底部版权信息，使用深色主题预设。' 它会自动组合原子组件，生成带网格布局和样式预设的完整HTML代码，并支持后续在可视化编辑器中微调。
介绍
hug-html 是一个专注于 HTML 页面快速构建的 Skill，提供 8 种原子组件（如按钮、卡片、网格、表单等），支持自由组合与三级约束（布局、样式、行为），并内置单元格合并、两级模块系统（base + composite）以及 7 种以上预制模板。它通过网格感知的可视化编辑器，让用户无需手写复杂 CSS 即可完成页面布局，并支持样式预设和后处理优化。
使用方式非常直观：在 AI 对话中描述页面需求，或直接调用可视化编辑器拖拽组件，系统会自动生成符合约束的 HTML 代码。你可以通过 npm 安装包并在项目中引用，也可以在支持 MCP 的 AI 编码环境中直接使用其原子组件库。内置的模板覆盖了企业官网、产品展示、管理后台等常见场景，节省从零搭建的时间。
主要面向前端开发者、UI 设计师和需要快速制作原型的产品经理。如果你正在搭建营销落地页、产品演示页或内部工具界面，这个 Skill 能显著提升效率。对于需要频繁调整样式和布局的团队，它提供的样式预设和网格系统可确保设计一致性。
注意事项：hug-html 专注于静态页面与组件化布局，不包含服务器端渲染或动态数据绑定功能。若你的项目需要复杂交互（如实时数据更新、表单提交后端逻辑），建议结合其他后端框架使用。此外，原子组件的数量有限，高度定制化设计可能需要额外编写 CSS 覆盖。
核心特点
相比传统 UI 库（如 Bootstrap、Tailwind），hug-html 提供网格感知的可视化编辑器、单元格合并和两级模块系统，无需手写 CSS 即可完成布局，同时支持组件间约束联动，适合快速原型与设计稿到代码的快速转换。
注意事项
不适合需要复杂后端逻辑、动态数据绑定或服务器端渲染的 Web 应用场景。
常见问题
hug-html 是否支持自定义组件？
支持。你可以通过两级模块系统（base + composite）组合原子组件创建自定义复合组件，并保存为模板复用。
生成的 HTML 代码能否直接用于生产环境？
可以，但建议先检查样式预设是否满足品牌规范，并优化后处理生成的文件大小。对于简单页面，可直接使用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hug-html-x-5/raw/index.md 读取 hug-html 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hug-html-x-5/raw/index.md（查看排版版本）