hug-html
一个基于网格的HTML/CSS可视化编辑器，支持组件化构建网页。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hug-html。 它的用途是：一个基于网格的HTML/CSS可视化编辑器，支持组件化构建网页。 完整的 Skill 内容见：https://321skill.com/skills/hug-html-x/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要为新产品上线设计一个宣传落地页，要有英雄横幅、功能亮点网格和联系表单。”，它会引导你在hug-html编辑器中，从内置模板开始，通过拖拽原子组件并应用样式预设，快速生成对应的HTML/CSS代码，并确保布局在网格系统中保持响应式。
介绍
hug-html 旨在解决前端开发中，手动编写和调整HTML/CSS布局效率低下、不够直观的问题。它提供了一个网格感知的可视化编辑器，允许开发者通过拖拽和组合8种原子组件来快速构建页面，同时通过3级约束确保布局的规范性。
使用时，开发者可以在编辑器中自由组合基础组件，利用单元格合并功能创建复杂布局，并通过内置的7+模板快速启动项目。编辑器支持样式预设和生成后处理，能显著提升从设计到代码的实现速度。
它非常适合需要快速原型设计、制作宣传海报或电商活动页面的前端开发、UI设计师和内容创作者。对于不擅长手写CSS但需要产出标准HTML代码的营销和运营人员也同样友好。
建议在需要快速产出响应式、结构清晰的静态页面时使用。对于高度动态交互或复杂状态管理的单页面应用，可能需要结合其他框架或库来完成。
核心特点
核心在于其“网格感知”的可视化编辑与两级模块系统（基础+复合），允许在严格的网格约束下进行灵活组合，并内置了单元格合并等高级布局功能，比单纯提供组件库的工具更注重视觉化、规范化的布局构建。
注意事项
不适合开发需要复杂前端状态管理和动态交互的单页面应用（SPA）。
常见问题
hug-html能导出Vue或React代码吗？
目前主要专注于生成标准的、结构良好的HTML和CSS代码，不直接导出特定框架的组件代码。
这个工具需要编程基础吗？
基础使用不需要，可视化操作即可。但若要深度定制或集成到项目，需要了解HTML/CSS。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hug-html-x/raw/index.md 读取 hug-html 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hug-html-x/raw/index.md（查看排版版本）