网页编辑反复翻车?评测8个Skill提升AI改html能力

你有没有过这种崩溃时刻？

「这个按钮位置不对，往左挪 8 像素。」——AI 改了。

「还是不对，往右挪 12 像素。」——AI 又改了。

「怎么又回去了？！」——AI 一脸无辜地承认它也不知道为什么。

或者更狠一点：

「这个 hero 在 768px 视口下元素错位、间距太大。」AI 改了一轮 padding，又改了一轮 margin，又改了一轮 gap。三轮过去，问题原地踏步，你的血压原地起飞。

这不是你的问题，是 AI 找不到根因。它倾向于「局部打补丁」而不是「读上下文、推 cascade、找 specificity winner」。它不知道什么是 stacking context，不知道 100vh 在 mobile browser bar 出现时算错，不知道 auto-fit 在 container query 下会跳格。

我用了两周时间，把 GitHub 上 8 个 1k+ 星的相关 Skill 项目拉出来逐一测试、对比。今天把结果交给你，让你少走我走过的弯路。

一、调研范围

我筛了 GitHub 上所有星标 ≥ 1k、目标用户包含 Claude / Codex / OpenClaw、核心用途与 HTML/CSS 生成相关的开源项目。最终留下 8 个：

数据快照：2026-09-13 16:30。

二、两个最关键的发现

在试跑之前，我以为 Anthropic 官方应该最强。试跑之后，我才发现事情没那么简单。

发现 1：8 个项目里只有 1 个有 post-edit 自动诊断

「post-edit 自动诊断」的意思是：你保存一次 HTML，agent 自动跑一遍 detector，把可能的 layout bug 拎出来。

只有 pbakaus/impeccable 做到了。

它的 61 条 deterministic rules + design hook 能在你每次保存时自动扫：

• line-length 太长？
• padding 太挤？
• touch target 太小？
• heading 跳级？
• specificity 冲突？

其他 7 个项目都是「写代码时不出错」导向（前置防御），不是「读代码时找 bug」导向（事后诊断）。

对你的意义：如果你每天都在改复杂 HTML，impeccable 是必备的。它不是 skill 文本，是 linting 工具。

发现 2：huashu-design 比 Anthropic 官方更适合「修 bug」

这是最让我意外的结论。

我准备了一个故意埋了 5 类典型 bug 的 HTML 文件，然后拿同一个 prompt 去试：

「这个 HTML 在 768px 视口下 hero 区域元素错位、间距太大。请定位问题根源并修复，不要改样式局部打补丁。」

Anthropics frontend-design 的第 1 轮响应：改 padding、改 gap。

——没错，就是你经历的那种崩溃。它复现了你的痛点。它要到第 2-3 轮才能从 specificity 警告里推出 cascade 冲突。但已经晚了 3 轮。

huashu-design 的第 1 轮响应：列出 5 个可能的根因，按出现概率排序，直接锁定 B1+B2 联动。一轮到位。

为什么？核心差异在于设计取向：

结论：huashu-design 在「修既有 HTML bug」这个维度上，显著优于 Anthropic 官方。

三、选型决策树

按场景直接选：

每天改复杂 HTML，烦透了反复修不对 → impeccable（必装） 唯一 post-edit 自动诊断，CI gate 用。

用中文工作流，或需要支持 OpenClaw → huashu-design（必装） 中文 README + 唯一明确支持 OpenClaw。

从 0 做 SaaS landing page → Leonxlnx/taste-skill 13 个子 skill + 3 个旋钮。

做 PPT / 演示稿 → zarazhangrui/frontend-slides 16:9 强制 + 34 个 anti-slop 模板。

Google Stitch 设计稿 → 代码 → stitch-skills Stitch MCP 集成最完整。

训练 agent 审美纪律（绿场设计） → claude-design-system-prompt 20 章 prompt + 4 review 类 skill 闭环。

装 Claude Code 不知道装什么 → Frontend-Design-Toolkit meta 策展，安装栈分层。

最常用组合（我自己用 cc-haha 装的）：

1. impeccable → 每次保存自动 linting（事后保险）
2. huashu-design → 修 bug 根因诊断（多视角并行）
3. anthropics/skills frontend-design → 从 0 设计时做 plan-review-build
4. superpowers/systematic-debugging → 修复杂 bug 时的系统化调试流程

四、还缺的那一环

试跑完所有项目后我必须承认一件事：

8 个项目里没有任何一个把「读取 computed style → 推断 cascade order → specificity winner → 最小修复」作为一等公民工作流。

• impeccable 是 post-edit linting（发现问题），不是修 bug 工作流
• huashu-design 是多视角分析（指出根因），但不能读 DOM
• frontend-design 是设计导向，写代码时不出错，不是修 bug

这一环，目前只能靠你自己补。我的建议是叠加 superpowers/systematic-debugging skill——它有完整的「读现象 → 列假设 → 验证 → 修复」流程，正好是修复杂 HTML bug 需要的。

如果将来有人做一个 claude-debug-css skill，把 computed style 查询 + cascade order 推断 + specificity 优先级可视化做进去，那会是 8 个项目之外最值得装的第 9 个。

五、行动清单

现在就记住三件事：

1️⃣ 立刻装 pbakaus/impeccable

npx impeccable@latest install

开启 design hook。每次保存 HTML 它会自动扫 layout bug。

2️⃣ 修复杂 bug 时用 alchaincyf/huashu-design 它的多视角并行 + 5 维评审，是目前最接近「先解释后修改」的 skill。

3️⃣ 别相信 AI 第 1 轮改 padding/gap 就能好 那是 AI 在 local tweak，不是找根因。明确告诉 agent：先解释根因，再修改。

「One thousand nos for every yes」——taste-skill 引用。一个好的修复前，先有 1000 次失败的局部打补丁。

附：8 个项目 GitHub 链接

• pbakaus/impeccable（impeccable.style）
• alchaincyf/huashu-design
• anthropics/skills
• Leonxlnx/taste-skill
• zarazhangrui/frontend-slides
• google-labs-code/stitch-skills
• Trist an-SA/claude-design-system-prompt
• wilwaldon/Claude-Code-Frontend-Design-Toolkit