hug-html
一个基于网格的HTML/CSS可视化编辑器，提供原子组件和模板快速构建页面。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hug-html。 它的用途是：一个基于网格的HTML/CSS可视化编辑器，提供原子组件和模板快速构建页面。 完整的 Skill 内容见：https://321skill.com/skills/hug-html-x-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘用hug-html帮我快速创建一个电商产品展示页的布局，需要包含头部导航、商品网格和页脚。’，它会引导你在可视化编辑器中拖拽相应的原子组件（如导航栏、卡片、网格容器），应用预设的样式和约束，并实时生成对应的HTML/CSS代码。
介绍
hug-html 旨在解决前端开发中，从设计稿到代码的快速构建和原型验证问题。它提供了一个基于网格的可视化编辑器，允许开发者通过拖拽8种原子组件（如按钮、输入框、卡片等）并应用3级约束（如间距、对齐、响应式）来组合页面，支持单元格合并和两级模块系统（基础与复合），内置7种以上常用模板，并能一键生成代码。
使用方式非常直观：在编辑器中通过拖拽组件到网格画布上，实时调整样式预设（如颜色、字体、间距），编辑器会即时生成对应的HTML和CSS代码。用户还可以进行生成后编辑（post-generation），对生成的代码进行微调，以满足更具体的需求。
它特别适合需要快速产出静态页面原型、落地页或管理后台界面的前端开发者、全栈开发者和UI设计师。对于产品经理或营销人员，也可以用它来快速验证页面布局和交互想法，无需深入编码。
建议在需要快速搭建标准Web页面结构时使用，例如制作宣传页、活动页或后台管理系统的界面原型。注意，它主要专注于静态HTML/CSS的结构和样式生成，复杂的交互逻辑和动态数据绑定仍需开发者手动实现。
核心特点
与同类可视化页面构建工具相比，其核心在于“网格感知”（grid-aware）的编辑体验和“两级模块系统”，允许从原子组件自由组合出复合模块，并提供了单元格合并等高级布局控制，使得生成的代码结构更清晰、更符合现代CSS Grid/Flexbox实践。
注意事项
不适合需要复杂交互逻辑、动态数据绑定或高度定制化动画的Web应用开发。
常见问题
hug-html 能生成Vue或React组件吗？
目前主要生成标准的HTML和CSS代码，可用于任何前端框架的基础结构，但不会直接生成框架特定的组件文件。
生成的代码质量如何？
代码结构清晰，基于网格布局，但可能包含编辑器生成的特定类名，建议根据项目规范进行二次优化。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hug-html-x-7/raw/index.md 读取 hug-html 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hug-html-x-7/raw/index.md（查看排版版本）