Web Teardown Skill — Design skill for Claude Code

web-teardown

**把一个网站的设计系统量出来。** 不截图、不用视觉模型 —— 直接读 CSSOM， 把颜色、字号、字距、圆角、缓动、层级一个一个数出来。

**不绑定任何特定 agent。** 任何能读文件、能跑 JS 的 coding agent （Claude Code、Codex、OpenCode、Cursor、Cline、Gemini CLI、Continue、Aider…） 配任何能写代码的模型（DeepSeek、Claude、Kimi、GPT、Qwen…）都能用。 提取器是一段纯 JS，**连 agent 都不需要也能跑** —— 贴进浏览器控制台就出数据。

解决什么问题

想抄一个站的设计，常规做法是截图 + 取色插件 + 肉眼猜。 问题是：取色插件只给你颜色，给不了字距、行高、缓动曲线、层级规划； 而肉眼永远看不出「这个站的中性色其实全部带了 0.01 的彩度」。

这个 skill 换了条路：**页面自己就带着答案**。CSS 变量、computed style 里躺着完整的数值，遍历一遍就能拿到 —— 比任何视觉推断都准，而且**不需要模型有眼睛**。

最值钱的一节：漂移检测

配色和字体谁都能抓，抓完是一张频次表，没意思。 真正只有全量测量才撞得见的是这个 —— **token 里写的和页面上实际跑的对不上**：

拿 linear.app 实测的结果（2026-08-27，1440x900）：

• 速度 token 定义了 4 档，用得最多的 0.42s（出现 438 次）根本不在表里
• 定义了 18 条缓动曲线，实测只有 1 条真在用，其余 17 条是死库存
• 19 个中性色全部带彩度、色相聚在 240° 附近，唯独 #3b3b3b 彩度是 0 —— 漏网的那一个
• 36 个高频色里有 14 个（39%）追不到任何 CSS 变量

这些数字会随人家发版而变 —— 引用前自己重跑一次。

人眼读 CSS 读不出这些。这也是为什么这类内容能立住： **它不是吹捧稿，它敢说 Linear 哪里没对齐。**

装

git clone --depth 1 https://github.com/whyubel1eve/web-teardown-skill.git web-teardown
cd web-teardown
./install.sh                      # 自动探测常见 agent 的技能目录
./install.sh ~/my-agent/skills    # 或者直接指定

懒得自己动手，也可以把这段直接发给你的 agent：

帮我装 web-teardown skill：
git clone --depth 1 https://github.com/whyubel1eve/web-teardown-skill.git <你的技能目录>/web-teardown
（Claude Code 是 ~/.claude/skills/web-teardown；别的 agent 放你自己的 skills / rules 目录）
然后读一遍 web-teardown/SKILL.md，那是入口。

脚本会依次探测 `~/.claude/skills`、`~/.codex/skills`、`~/.agents/skills`、 `~/.opencode/skills`、`~/.cursor/skills`、`~/.gemini/skills`、`~/.cline/skills` 以及当前项目下的 `.claude/skills` / `.agents/skills`， 探测不到就装到当前目录。**装到哪都行，只要你的 agent 能读到那个目录里的文件。**

装完让 agent 读 `SKILL.md`，它自己知道该怎么走。

依赖全是可选的

有什么	能做什么
Node ≥ 22 + Chrome	全自动：滚动触发懒加载、多视口、明暗双主题
只有 Node	分析和渲染可用，采集走 agent 的浏览器工具或控制台
什么都没有	照样能用 —— 提取器贴进浏览器控制台，把 JSON 交给 agent 分析

用

对 agent 说人话就行：

扒一下 linear.app 的设计系统
这个站的配色和字号阶梯是什么？ https://…
帮我把 stripe.com 的 design token 提出来

想自己跑：

no