A design skill in sky-skills · reworked 2026-10-07sky-skills 的设计 skill · 2026-10-07 改版
anthropic-design is a Claude Code skill for explainer pages, technical introductions and long editorial reads. It pins one thing: a warm cream, ink, one orange and four quiet hues. Layout, typefaces, motion and components are left to the model and the content. The only goal is a reader who understands. anthropic-design 是一个 Claude Code skill,做讲解页、技术介绍页和编辑式长文。它只定死一样东西:暖米白底、墨色字、一种橙、四种低饱和的语义色。版式、字体、动画、组件,由模型按内容决定。目标只有一个:读者看完能懂。
The orange button carries ink, not white: 5.90 : 1 against 3.12 : 1. Why 橙色按钮上用墨色字,不用白字:5.90 : 1 对 3.12 : 1。为什么
01 · What is fixed定死什么
Before 2026-10-07 the skill also fixed density quotas, class names and a scoring target, and every page drifted toward the ten reference pages. Now the colour is the identity, and the arrangement follows the content. 2026-10-07 之前,这个 skill 还规定了图密度配额、类名、评分靶子,结果每一页都往 10 个参考页的样子靠。现在身份只靠配色,怎么排跟着内容走。
assets/fonts.css are there if you want them.字体。assets/fonts.css 里的 Poppins + Lora 想用就用。anth-* in assets/anthropic.css is optional.组件和类名;assets/anthropic.css 里的 anth-* 可用可不用。02 · Palette配色
WCAG AA asks for 4.5 : 1 on body text and 3 : 1 on large text (24px, or 18.66px bold). Every number in this section is computed in your browser from the relative-luminance formula, the same one the skill used on 2026-10-07. WCAG AA 要求正文 4.5 : 1,大字(24px,或粗体 18.66px)3 : 1。这一节的每个数都由你的浏览器按相对亮度公式现算,和 skill 在 2026-10-07 用的是同一个公式。
Text colour字色
Background底色
#d97757 is 2.96 on cream, under even the 3 : 1 bar for large text: use it for fills, lines and buttons. Large text can take #c56544 (3.75); small text takes #a8502f (5.17).#d97757 在米白底上 2.96,连大字的 3 : 1 都不到:只用作色块、线条、按钮底。大字可以用 #c56544(3.75),小字用 #a8502f(5.17)。
The old rule required white text on orange buttons. White is 3.12, enough only for large bold labels; ink is 5.90. The rule was changed to fit the numbers.旧规则要求橙色按钮一律白字。白字只有 3.12,只够大号粗体;墨色字 5.90。规则按这组数改了。
Blue, olive and gold sit under 3.5 on cream. As text, mix 62% with ink: color-mix(in srgb, hue 62%, #141413). As fills and lines, use them as they are.蓝、橄榄绿、金在米白底上都不到 3.5。当字色时和墨色混一下:color-mix(in srgb, 语义色 62%, #141413);当色块、线条用原色。
The danger red that reads 5.95 on cream falls to 2.75 on #1c1b18. Inside terminals and code boxes, errors, warnings and passes switch to a lighter set.危险红在米白底上 5.95,放进 #1c1b18 只剩 2.75。终端、代码框里的报错 / 警告 / 通过,换成另一组浅色。
03 · History改版
25 commits have touched SKILL.md since 2026-04-19. The lines containing MUST or 必须 climbed to 14 by 2026-06-11. The rewrite on 2026-10-07 (daee1e7) took them from 14 to 3, and the file from 240 lines to 206.
从 2026-04-19 起,SKILL.md 一共改过 25 次。含 MUST 或「必须」的行,到 2026-06-11 涨到 14 行。2026-10-07 那次改版(daee1e7)把它从 14 行降到 3 行,整个文件从 240 行减到 206 行。
git show <commit>:SKILL.md | grep -cE 'MUST|必须'. Grey steps: total lines (right axis). Hover or tap a dot.灰色台阶:总行数(右轴)。指一个点看那次提交。dr-cli --plan before writing动笔前先跑 dr-cli --plananth-* class names everywhere一律用 anth-* 类名04 · Making it understood让人看懂
They are cases, not rules. Point at one to see where it sits on this page.它们是案例,不是规则。指一张卡片,看它用在这一页的哪里。
i
The first thing a reader sees is how the thing moves, not an abstract illustration.读者第一眼看到的是这个东西怎么动,不是一张抽象插画。
ii
The better a page looks, the more readily it is believed. Evidence lets the reader check for themselves.页面越好看,内容越容易被当真。证据让读者能自己核对。
iii
One click of your own is faster than three paragraphs.自己点一下,比读三段文字快。
05 · Diagram library图例库
Start from the content, not the shape. The list is the table in SKILL.md §3; each row lights the templates that fit. Change the structure, mix them, or invent one.先看内容,再定图型。左边是 SKILL.md §3 那张表;点一行,下面亮起合适的模板。结构可以改,可以混搭,也可以自创。
Open the gallery page打开图集页 Hardware figures硬件类图 diagram-craft.md templates/diagrams/
06 · Checks检查
check_objective.mjs looks only for things that are wrong on any page. Pick a lens to see what it does and why it decides the way it does.check_objective.mjs 只查放在哪一页都算错的东西。点一项,看它查什么、为什么这么判。
Not checked, left to the model and to people:不查,交给模型和人: layout版式typefaces字体colour proportions配色比例component names组件写法
50 of 50 cells pass. These pages were written or reworked to pass, so this table alone proves little; the self-test on the right shows the checker can fail.50 格里 50 格通过。这些页面本来就是按能过的标准写或改的,单看这张表说明不了多少;右边的自测说明这道检查真的会报错。
Tool output, unedited (the tool reports in Chinese). 10 self-test pages; the 7 marked ★ are broken on purpose and must be reported.工具原样输出。10 张自测页,标 ★ 的 7 张是故意做坏的,必须报出来。
07 · Examples范例
Open one and look for the three ways. Each card is drawn from what its page is about.打开一页,找找那三种做法。每张卡片的图,画的是那一页讲的东西。
08 · Using it怎么用
Claude Code reads the description of every installed skill. These phrases come from SKILL.md; the requests underneath go to other skills.Claude Code 会读每个已装 skill 的描述。下面这些词取自 SKILL.md;再下面那几类请求会交给别的 skill。
Loads the palette, the three ways, the diagram library and the five checks.加载配色、三种做法、图例库和五项检查。
$ git clone https://github.com/TbusOS/sky-skills.git $ cd sky-skills $ cp -r skills/anthropic-design skills/design-review ~/.claude/skills/ # then, in Claude Code: > explain how a TCP handshake works, as an anthropic-style page用 anthropic 风格做一页讲 TCP 三次握手的讲解页 # before you deliver it: $ node ~/.claude/skills/design-review/scripts/check_objective.mjs page.html
design-review comes along because the five checks live in it.design-review 一起装:五项检查的脚本在它里面。
design-review's four checks, its critic score and dr-cli --audit still work. They are not a gate: the critic aims at the reference pages, and departing from them is not a fault in this skill.design-review 的四道检查、critic 评分、dr-cli --audit 都还能用,但不是交付门槛:critic 拿参考页当靶子,偏离参考页的版式在这个 skill 里不算问题。
The references/ folder (tokens, typography, components, motion, data display, writing) and the nine page templates are cases to copy from, not rules.references/ 下的配色、字体、组件、动画、数据展示、文案几篇,和九个页面模板,都是可以抄的案例,不是规则。