hug-html
基于网格的HTML/CSS可视化编辑器，支持原子组件组合与样式预设
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hug-html。 它的用途是：基于网格的HTML/CSS可视化编辑器，支持原子组件组合与样式预设 完整的 Skill 内容见：https://321skill.com/skills/hug-html-x-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘使用hug-html帮我创建一个产品介绍页的布局，需要包含头部导航、英雄横幅、三栏功能展示和页脚。’，它会引导你在可视化编辑器中选择合适的模板或原子组件，通过拖拽调整网格布局，应用预设样式，并最终生成结构清晰、响应式的HTML/CSS代码。
介绍
hug-html 旨在解决前端开发中，从设计稿到HTML/CSS代码转换效率低下、样式维护困难的问题。它提供了一个网格感知的可视化编辑器，允许开发者通过拖拽8种原子组件（如容器、按钮、文本等）并应用3级约束（如间距、对齐、响应式规则）来快速构建界面，支持单元格合并和两级模块系统（基础与复合）来提升复用性。
使用时，开发者可以在编辑器中选择内置的7+种模板快速开始，或从空白画布搭建。通过调整网格、应用样式预设，并利用后生成功能（如代码优化、适配）来获得可直接使用的、结构清晰的HTML与CSS代码。整个过程直观，减少了手动编写布局和样式的重复劳动。
它非常适合需要快速产出前端界面原型、落地页或内容管理后台等标准化页面的前端开发者和全栈开发者。对于UI设计师与产品经理，它也是一个快速验证设计想法、生成可交互原型的工具。
建议在构建需要快速迭代、且对视觉一致性要求较高的营销页面或管理面板时使用。注意，它更适合基于网格的规整布局，对于高度定制化、艺术性强的复杂动态界面，可能需要结合手动编码。初次使用建议从内置模板开始，熟悉其约束系统和模块化概念。
核心特点
核心在于将网格布局系统与原子化设计组件深度结合，提供“单元格合并”和“两级模块系统”，使得在可视化编辑中能实现更灵活、可复用的布局结构，而非简单的拖拽堆砌。
注意事项
不适合需要高度复杂交互、非网格化自由布局或强动态数据绑定的单页面应用(SPA)开发。
常见问题
hug-html 能导出 Vue 或 React 组件吗？
目前主要生成标准的HTML和CSS代码，可直接用于任何前端框架的静态部分，但需要手动集成框架逻辑。
它和 Webflow 这类无代码工具有什么区别？
hug-html 更轻量、专注于开发者，强调通过原子组件和代码级约束生成干净、可维护的代码，而非完全无代码的网站构建。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hug-html-x-2/raw/index.md 读取 hug-html 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hug-html-x-2/raw/index.md（查看排版版本）