HTML Beautifier — Development skill for Claude Code

HTML Beautifier

---

这是什么？What is this?

一个跨平台通用的 HTML 美化 skill，能将任何输入内容（文本、Markdown、数据、报告）转换为高品质的视觉化 HTML 页面。

**不是**简单的 Markdown 转 HTML 工具，而是一套完整的视觉设计系统：

• ✅ 三种专业布局模式（长滚动/看板/单页）
• ✅ 完整的马卡龙色系设计语言
• ✅ 生成前与用户确认风格和场景
• ✅ 支持参考学习现有网页并创新
• ✅ 纯静态单文件输出，仅依赖 CDN 字体与图标
• ✅ 无动画效果，打印即最终呈现
• ✅ 适配所有主流 AI 编程助手

**适用场景**：报告美化、数据看板、方案展示、产品介绍、内容可视化

**支持平台**：Claude Code、Cursor、Windsurf、Cline、Aider、OpenClaw、Hermes、ChatGPT、Claude.ai 等

---

为什么需要它？Why this matters?

解决的问题

传统方式	HTML Beautifier
Markdown 转 HTML 样式单调	三种专业布局模式，视觉品质接近设计师产出
数据报告缺乏视觉冲击力	自动选择最佳布局，卡片化呈现信息
需要设计师参与才能做出好看的页面	AI 自动生成专业级视觉设计
参考网页但不知如何实现	支持视觉拆解和创新重构
打印效果与屏幕显示不一致	无动画设计，打印即最终呈现

核心差异点

1. 交互式确认：生成前询问使用场景和风格偏好，避免返工
2. 多模式智能选择：根据内容特征自动推荐最合适的布局
3. 参考学习能力：能从现有网页提炼精髓并用自己的设计语言重构
4. 专业级输出：完整的设计系统（配色、字体、组件、模板）
5. 跨平台兼容：适配所有主流 AI 编程助手，不限于特定工具

---

核心能力 Core Capabilities

🎨 三种布局模式

1. Editorial（编辑式长滚动）

**适用于**：分析报告、复盘总结、深度内容、方案展示

• 连续滚动阅读体验
• 模块间有明确分界
• 适合内容量大的场景
• 打印友好，章节清晰

2. Dashboard（看板/仪表盘式）

**适用于**：数据总览、项目状态、多维信息汇总

• 单屏或少量滚动
• 信息密度高，卡片网格排列
• 一眼看全貌

3. Single（单页海报式）

**适用于**：活动海报、单页简历、产品单页

• 一页搞定，居中排版
• 强视觉冲击力

🎨 马卡龙六色设计系统

色名	主色	用途
玫瑰粉	#e8889a	强调、警示
薄荷绿	#6bc4a6	正向、完成
薰衣草	#a78bda	品牌、引导
奶油黄	#e4c56a	提醒、金色调
天空蓝	#7ab4d9	信息、数据
蜜桃橙	#e8a87c	温暖、活力

每色三级：主色（-500）、浅底（-100）、极浅底（-50）

🧩 六大核心组件

1. card-light：白底卡片，万能信息容器
2. gt-渐变文字：标题强调词渐变色
3. section-divider：章节标题下方渐变短线
4. badge：药丸标签，分类标识
5. num-dot：