hug-html
基于原子组件的HTML可视化编辑器与生成器
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hug-html。 它的用途是：基于原子组件的HTML可视化编辑器与生成器 完整的 Skill 内容见：https://321skill.com/skills/hug-html-x-6/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'用hug-html创建一个带产品特性卡片网格和CTA按钮的着陆页，风格预设为现代科技风，使用cell merging将前两行合并为全宽标题区'，它会自动组合原子组件、应用模板并生成可直接运行的HTML页面。
介绍
hug-html 主要解决前端开发中 HTML 页面构建效率低、复用性差的问题。它提供 8 种原子组件，支持自由组合和三级约束（布局、样式、行为），并内置 cell merging 机制和两级模块系统（base + composite），能够快速搭建结构规整、可维护的页面。通过 grid-aware 可视化编辑器，用户可以直接拖拽调整网格布局，无需手写 CSS 细节。
使用方式简单：在支持的 AI 编码环境（如 Claude、Cursor、Trae）中安装该技能后，通过自然语言描述页面需求（例如“创建一个带导航栏和卡片网格的营销着陆页”），hug-html 会自动解析并生成原子组件组合，应用内置模板或风格预设，输出可直接运行的 HTML 代码。后期还可通过 post-generation 命令微调样式或合并单元格。
适合前端开发、全栈开发、UI 设计师以及需要快速产出 HTML 原型的产品经理、营销人员。特别适合搭建落地页、组件库示例、教学演示页面等场景，也适合希望减少重复性手写 HTML 工作的开发者。
使用建议：优先利用内置的 7+ 模板快速启动，再通过 cell merging 和模块系统进行定制。注意 atomic 组件的约束层级（layout → style → behavior），避免在低级约束中覆盖高级约束。当前版本重点优化了网格布局，对于非网格布局（如自由定位）支持有限，建议结合其他工具处理。
核心特点
支持 8 种原子组件自由组合与三级约束，同时提供 cell merging 和两级模块系统，比普通 HTML 编辑器或模板库更灵活，可同时兼顾快速搭建与深度定制。
注意事项
不适合需要复杂后端逻辑或动态数据绑定的 Web 应用开发，主要以静态 HTML 页面生成和可视化编辑为核心。
常见问题
hug-html 可以在哪些 AI 编码工具中使用？
支持 Claude、Trae、Cursor 等主流 AI 编码环境，安装后即可通过自然语言指令生成 HTML 页面。
如何安装 hug-html？
在终端中执行 npm install hug-html 即可，具体请参考仓库 README。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hug-html-x-6/raw/index.md 读取 hug-html 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hug-html-x-6/raw/index.md（查看排版版本）