开发者打造Claude Code技能 自动美化HTML输出质量

Claude Code 输出的 HTML 太丑的问题。为了彻底解决这个问题，我做了一个能把 HTML 输出自动整理成「直接就能拿去开会的品质」的 skill，分享给大家。

只要装上它，Claude Code 输出 HTML 的瞬间，就会自动调整成咨询风格的清爽好看设计。

安装方法很简单，只要把这一行贴到 Claude Code（桌面版可用）里就行：「把 skills/html-report-design 安装到 ~/.claude/skills/」。

- 表格、KPI、箭头流程、路线图、瀑布图都能按照「咨询模板」输出
- 支持 A4 打印，可以直接分发使用
- 偏好 CLI 的用户可以用 `npx skills add Ted0321/kotetsu-work-ai-skills@html-report-design`
- ChatGPT 用户复制粘贴 SKILL.md 也能运行

▼原理
原理很简单，问题根源在于 AI 习惯用「线条和方块」搭建结构，而咨询资料是靠「留白和文字层级」来做设计的。

这个 skill 只会在你要求「用 HTML 输出」的时候触发，它会禁止 AI 加边框、渐变和 emoji，强制 AI 原封不动使用已经写好的 CSS，在输出的瞬间就把设计矫正过来。

它还会强制内容也按照模板输出：
- 每个章节都按照「标题→结论一句话→依据」的顺序排列
- 图表从箭头流程/路线图/框架表/气泡图/瀑布图的模板中选择
- 配色只用辅助灰色+主色深蓝，不用图例，直接标注

只有强调色可以替换成公司的品牌色。

▼最后
SKILL.md 已经全文公开了。读过就能明白，核心技巧是「不用文字给 AI 描述设计规则，直接把整套 CSS 给它」，这样输出就不会走样了。

我也在仓库里放了给 ChatGPT 用户用的浓缩复制版，欢迎提改进 PR。