文档大纲

网页编辑反复翻车？评测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（div+css）生成相关的开源项目。最终留下 8 个：

#项目⭐核心卖点
1pbakaus/impeccable67.7k61 条 detector rules + design hook（唯一 post-edit 自动诊断）
2alchaincyf/huashu-design24.1k中文 + 三方向硬门 + 工作室角色（唯一明确支持 OpenClaw）
3anthropics/skills
frontend-design		176kAnthropic 官方，plan → review → build → critique 二遍流程
4Leonxlnx/taste-skill86.7k13 个子 skill 矩阵 + 3 旋钮
5zarazhangrui/frontend-slides29.2k16:9 演示场景 + 34 个 anti-slop 模板
6google-labs-code/stitch-skills8.3kGoogle Stitch MCP 集成
7Trystan-SA/claude-design-system-prompt1.9k20 章 system prompt + 4 个 review 类 skill
8wilwaldon/Claude-Code-Frontend-Design-Toolkit1.1k元工具包（70+ skill 策展列表）

三、两个最关键的发现

在试跑之前，我以为"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 文件（B1 flex min-width / B2 specificity / B3 grid container query / B4 vh mobile / B5 z-index stacking context），然后拿同一个 prompt 去试：

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

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

——没错，就是你经历的那种崩溃。它复现了你的痛点。

它要到第 2-3 轮才能从 specificity 警告里推出 cascade 冲突（@container vs @media 后写后赢）。但已经晚了 3 轮。

huashu-design 的第 1 轮响应：列出 5 个可能的根因，按出现概率排序，直接锁定"B1+B2 联动"（flex item 撑开 + cascade 冲突）。一轮到位。

为什么？

huashu-designfrontend-design
设计取向修 bug 工作流（多视角并行 + 5 维评审）写代码不出错（plan → review → build）
第 1 轮行为列 5 个可能根因改 padding/gap（局部打补丁）
「先解释再修改」✅ 5 维评审天然支持❌ 无显式机制
多视角并行✅❌
适配Claude / Codex / OpenClawClaude Code 主

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

四、选型决策树

按场景直接选：

你的场景推荐 Skill理由
每天改复杂 HTML，烦透了反复修不对impeccable（必装）唯一 post-edit 自动诊断，CI gate
用中文工作流，或需要支持 OpenClawhuashu-design（必装）中文 README + 唯一明确支持 OpenClaw
从 0 做 SaaS landing pageLeonxlnx/taste-skill13 个子 skill + 3 个旋钮
做 PPT / 演示稿zarazhangrui/frontend-slides16:9 强制 + 34 个 anti-slop 模板
Google Stitch 设计稿 → 代码stitch-skillsStitch MCP 集成最完整
训练 agent 审美纪律（绿场设计）claude-design-system-prompt20 章 prompt + 4 review 类 skill 闭环
装 Claude Code 不知道装什么Frontend-Design-Toolkitmeta 策展，安装栈分层

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

impeccable    → 每次保存自动 linting（事后保险）
huashu-design → 修 bug 根因诊断（多视角并行）
anthropics/skills frontend-design → 从 0 设计时做 plan-review-build
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 no's for every yes」—— taste-skill 引用。一个好的修复前，先有 1000 次失败的局部打补丁。

附录 A · 9 维度对比表（核心摘要）

项目TypographyColorSpacingLayoutMotionAnti-slop试跑准确度根因诊断 ⚠
impeccable★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
huashu-design★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
anthropics/skills★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
Leonxlnx/taste-skill★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
frontend-slides★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
claude-design-system-prompt★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
stitch-skills★★★★★★★★★★★★★★★★★★
Frontend-Design-Toolkit★★★★★★★★★★★★★

⚠ 加粗的「根因诊断」是 cc-haha 痛点最相关的维度。

附录 B · 试跑 prompt 模板

生成场景 prompt：

请用 \[skill 名] 为一家虚拟的 'Lumen Notes'（极简 markdown 笔记 SaaS）
生成一个 SaaS landing page 单页 HTML，要求 div+css，不引入任何外部框架

编辑场景 prompt：

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

⚠ 关键是末尾那句"不要改样式局部打补丁"——明确告诉 agent 拒绝 local tweak。

附录 C · 8 项目链接

阅读量： 244

网站备案号：沪ICP备2025137870号