Every design skill for a coding agent ships a prompt. This one ships the prompt and the thing that checks the prompt was obeyed. 给编程 agent 的设计 skill，别人发的是提示词。这个仓发的是提示词，加上检查提示词有没有被照做的那个东西。
The file below passes the structural check and passes the rendered visual audit. In a browser nothing about it looks wrong. 下面这个文件，结构检查过了，渲染视觉审计也过了。在浏览器里看不出哪里不对。
The only edit separating that file from a canonical reference page is two colour values, nudged until they stop clearing 4.5:1. That is the case a prompt cannot catch and a person reviewing at speed will wave through. 它和一张合格样张的差别只有两个颜色值，调到刚好不满足 4.5:1 为止。这正是提示词管不住、人快速过一眼也会放过去的那一类。
Each is a complete design language: type scale, colour tokens, layout rhythm, motion, diagram conventions, and a reference library of finished pages the generator is measured against. Fifty-nine specimens in all, and every one of them passes the gate. 每一套都是完整的设计语言：字号阶梯、颜色 token、版面节奏、动效、图表画法，外加一批做好的参考页面，生成器拿它们当标尺。一共 59 张，全部能过检查链。
Cream ground, serif body, orange accent, long-form rhythm.米色底、衬线正文、橙色重点、长文节奏。
White ground, SF type, statistics used as headlines.白底、SF 字体、数字当标题用。
Cream, chocolate and gold, editorial with a maker's hand.米色、巧克力棕、金，带手工痕迹的编辑感。
Cream, sage green, deep indigo, generous whitespace.米色、鼠尾草绿、深靛，留白给得大方。
The one skill that draws an application rather than a page, and it clicks.九套里唯一画应用本身而不是页面的，而且真的能点。
Deep navy, frosted panels, light and dark themes both measured.深藏青、磨砂面板，明暗两个主题都实测过。
A matte cinematic stage, near-black with a single cool flare.哑光电影感舞台，近黑底加一道冷光。
Paper white, serif headings, data before argument.纸白、衬线标题、数据放在论证前面。
Diagrams carry the argument; prose fills the gaps between them.让图承载论证，文字只补图之间的缝。
hardware-3d is the odd one here. The nine lay out a page; this one renders one — a hand-written WebGL2 engine in a single HTML file with no external dependencies, for explaining how a piece of hardware actually works. Park the camera and every frame re-jitters the sub-pixel offset, the aperture disk, the softbox area and the ambient-occlusion kernel, then averages. Two hundred samples later the soft shadows and the depth of field are sampled rather than approximated.
hardware-3d 是这里的另类。那九套是排一张页面，这一套是渲染一张页面 —— 单个 HTML、零外部依赖、手写的 WebGL2 引擎，用来讲一块硬件到底是怎么工作的。相机一停，每帧重新抖动亚像素偏移、光圈盘、柔光箱面积和环境光遮蔽的采样核，然后平均。两百次采样之后，软阴影和景深是采出来的，不是近似出来的。
A 64-bit word is a row of lit and dark cells, not a dot. A bus is 64 parallel wires, not one line. The path runs inside the die — logic blocks on the silicon, elevated copper rails above them, which is what the metal layers physically are.一个 64 位字画成一行亮暗格子，不是一个点。一条总线是 64 根并行导线，不是一条线。路径走在 die 内部 —— 逻辑块躺在硅上，架空的铜轨在它们上方，那正是金属互连层的物理样子。
Advances by clock ticks · pause · single-step按时钟拍推进 · 可暂停 · 可单步
Self-contained, render pipeline, frame budget — and one that measures the look. On a normal page 0.4% of pixels are bright and saturated, median saturation 0.09. Tint the materials neon and those become 44.8% and 0.63, and the check refuses the page.自包含、渲染管线、帧时间 —— 外加一道量画面本身的。正常页面高亮高饱和像素占 0.4%、饱和度中位数 0.09；把材质染成霓虹青之后是 44.8% 和 0.63，检查当场拦下。
The counterpart of the design gate's brand check对应设计检查链里的品牌检查
Five stations: the board under studio light, a DRAM package close up, row-and-column addressing inside the die, 64 data lines across the board, and the queue through L3, L2 and L1 into a register.五站：棚拍下的整板、一颗 DRAM 封装的微距、颗粒内部的行列寻址、板上的 64 根数据线、以及穿过 L3 / L2 / L1 排队进寄存器的那一路。
Twenty-six pages built with these skills and shipped through the gate. The diagram galleries carry a Copy SVG button on every figure, so a figure can be lifted straight into your own page. 用这些 skill 做完、并且过了检查链的 26 张页面。图例库里每张图都带一个 Copy SVG 按钮，可以直接抠去自己的页面里用。
One per design language. Architecture, flow, hierarchy, timing waveforms, register bitfields, SoC blocks, call graphs, packet encapsulation.每套设计语言一份。架构、流程、层次、时序波形、寄存器位域、SoC 框图、调用图、封包分层。
Full-length articles where the figures carry the argument rather than decorate it.完整长文，图是用来承载论证的，不是拿来装饰的。
How one bit is held一个比特是怎么被存住的 · How a chip is assembled一颗芯片怎么封装出来 · How a picture reaches a screen一张画面怎么到屏幕上
Short primer-design pages on one mechanism each: address maps, interconnects, protocol layers, register decoding, scheduler timing.primer-design 的短页，一页讲一个机制：地址映射、互连拓扑、协议分层、寄存器解码、调度时序。
Five checks run in order and stop at the first failure. 五道按顺序跑，第一道不过就停。
| Check检查 | What it decides它判什么 |
|---|---|
verify.py |
Structure: leftover placeholders, missing viewport, undefined classes, BEM modifiers without their base, unbalanced SVG, hero container width, hardcoded colours that already have a token.结构：占位符残留、缺 viewport、未定义的 class、BEM 修饰符缺基类、SVG 标签不配对、hero 容器宽度、已经有 token 却写死的颜色。 |
visual-audit.mjs |
The rendered page: contrast, brand presence, diagram label sizes, orphan cards, SVG text legibility, and colour borrowed from another skill's palette.渲染后的页面：对比度、品牌存在感、图表标签字号、孤立卡片、SVG 文字可读性、以及借用了别家调色板的颜色。 |
axe-audit.mjs |
Accessibility, via axe-core. Four rules block: color-contrast, link-name, aria-prohibited-attr, svg-img-alt.可访问性，走 axe-core。四条规则阻断：color-contrast、link-name、aria-prohibited-attr、svg-img-alt。 |
interaction-audit.mjs |
The states a click reaches: console errors, axe violations that appear only after a click, dead controls, broken in-page anchors, and content revealed onto other content. Every other check judges the first painted frame.点开之后才存在的状态：控制台报错、点击之后才出现的 axe 违规、死控件、断锚点、新露出来压住别的内容。其余每一道判的都是同一个静止画面。 |
screenshot.mjs |
A full-page PNG, for the part a person still has to look at.整页 PNG，留给人眼那一部分。 |
A sixth is opt-in: --pixel compares rendered pixels against a committed baseline. It stays opt-in because an intentional redesign trips it as readily as a regression does.
第六道是选配：--pixel 拿渲染像素跟提交过的基线比。它一直是选配，因为有意的改版和真正的回退一样会让它报错。
The gate answers one question: does this page obey the design language it claims to be written in. It says nothing about whether the page is any good, whether the content is correct, or whether a reader will follow the argument. Clearing every check is compatible with the page being worth throwing away. 这道检查只回答一个问题：这一页有没有照着它声称的那套设计语言写。它不回答页面好不好、内容对不对、读者能不能跟上论证。全部检查通过，和这一页该扔掉，两件事可以同时成立。
Contrast ratios, class definitions and label sizes have numeric answers. Whether a layout earns its whitespace does not, and the attempts to mechanise it in earlier rounds produced false positives at a rate that made the check useless. That half is handed to six critic agents, and to a person. 对比度、class 有没有定义、标签多大，这些有数值答案。版面留白是否用得其所没有，早几轮试着把它机械化，误报率高到那条检查没法用。那一半交给六个评审 agent，以及交给人。
Every defect a reviewer catches becomes a row in the known-bugs catalogue, plus a new mechanical check wherever the defect can be detected by machine. 评审员每抓到一个毛病，就变成 known-bugs 目录里的一行；只要机器能判，同时再加一条新检查。