Thirteen figures十三张图

Every rule in this skill that is easier to see than to read. None of these are decoration — each one answers a question a generator asks while writing a screen, and each carries the number that settles it. 这个 skill 里所有「看比读快」的规矩。没有一张是装饰——每一张回答生成器写屏幕时会问的一个问题，并且带上定案的那个数字。

FIG 01 · anatomy解剖

The shell, exploded外壳分层

Only layer 2 blurs. Nesting a second backdrop-filter costs a full filter pass per frame and is invisible at 0.80 alpha — there is almost nothing left behind the card to blur. The wallpaper is position: fixed: the window floats, the paper stays put. Let it scroll and the whole spatial metaphor collapses into one long image. 只有第 2 层做模糊。再套一层 backdrop-filter，每帧多跑一整条滤镜链，而在 0.80 不透明度下根本看不出来——卡片后面已经没剩多少可模糊的了。壁纸是 position: fixed：窗口浮着，纸不动。让它跟着滚，整个空间比喻就塌成一张长图。

FIG 02 · the core rule核心规则

Opacity climbs with the number count越承载数字，越不透明

Self-test: if you can see the wallpaper shifting behind a KPI number, the alpha is too high. Numbers over a moving gradient are numbers the reader reads twice, and nobody pays that for prettier glass. 自测判据：如果你能透过 KPI 数字看见壁纸的颜色变化，alpha 就开大了。数字压在会动的渐变上要读两遍，没人愿意为「更好看的玻璃」付这个代价。

FIG 03 · measured实测

White text on the ramp fails白字压渐变不合格

The gradient never carries text. Both ramp stops fail — the coral end fails at every size, including large. Filled accent buttons take the solid --atl-accent-ink; the ramp stays on orbs, bars, meters and the brand mark. 渐变永远不承载文字。两个端点都不过——珊瑚端连大字号都不过。实心强调按钮用 --atl-accent-ink；渐变只留给圆球、柱子、进度条和品牌标记。

FIG 04 · signature签名笔触

Orb, not line-icon-in-a-ring圆球，不是线图标套细环

The designer this aesthetic reconstructs came out of gradient iconography and 3D illustration — the orb is his grammar, not decoration. Secondary list rows drop to --soft (16% tint + accent glyph); a full ramp on every row turns the screen into confetti. 这套美学重建自一位做渐变图标集和 3D 插画出身的设计师——圆球是他的语法，不是装饰。次级列表行降到 --soft（16% 淡底 + 强调色图形）；每行都上满渐变，屏幕会变成彩纸屑。

FIG 05 · why the track轨道为什么不能省

The track is the unit, not decoration轨道是量纲，不是装饰

This is the whole reason the component exists. A bar without a ceiling has no unit, so the reader can only compare bars to each other — and the moment one screen shows a single bar, the chart says nothing at all. 这就是这个组件存在的全部理由。没有上限的柱子没有量纲，读者只能柱子跟柱子比——而只要某一屏只剩一根柱子，这张图就什么都没说。

FIG 06 · contract契约

The freeze contract — why gates can screenshot this冻结契约 —— 闸为什么能确定性截图

Same shape for data-grow: the terminal size lives in the inline style, and JS only zeroes it for one frame so CSS can transition it back. No size is ever computed in JavaScript. That is what makes a page correct before the animation runs at all. data-grow 同理：终值写在内联 style 里，JS 只是把它清零一帧，让 CSS 过渡回去。没有任何尺寸是 JavaScript 算出来的。这就是为什么动画还没跑，页面已经是对的。

FIG 07 · selection选型

Which figure answers which question哪种图回答哪个问题

Four donut slices is a hard ceiling: past four the arcs stop being comparable and the chart needs a legend to be readable at all — which means it has stopped working. A meter always keeps the number beside it; a bar cannot be read to a precise value. 环图四片是硬上限：超过四片弧长不再可比，图必须靠图例才读得懂——那说明它已经不工作了。进度条旁边永远要留数字；条形本身读不出精确值。

FIG 08 · the ink card暗卡

One anchor, and it holds the open loop一个锚点，装还没了结的事

Highest-contrast real estate should be spent on what needs doing. A summary in the anchor slot spends the reader's attention on information they already have. 对比度最高的位置应该花在要做的事上。把汇总放进锚点位，等于把读者的注意力花在他们已经拿到的信息上。

FIG 09 · responsive响应式

Where the shell folds外壳在哪里折叠

A drawer needs a hamburger button and an overlay, and both are invisible to a static screenshot — a canonical page has to be reviewable without clicking anything. The strip costs a horizontal scroll and keeps the whole navigation on screen. 抽屉需要一个汉堡按钮和一层遮罩，两者对静态截图都是不可见的——范本页必须不点任何东西就能评审。横条的代价是一次横向滚动，好处是导航全在屏幕上。

in-app diagrams界面内图示

Four diagrams that are product surfaces 四张长在产品里的图

Register bitfields and SoC blocks belong on documentation pages, and three other skills draw them. What belongs here is the diagram that would be a panel you can click in a real product. Craft rules: references/diagram-craft.md §7. All four on one screen: references/canonical/console.html. 寄存器位域和 SoC 框图是文档页的图，另外三个 skill 各有一套。这里收的是"在真实产品里会是一块可以点的面板"的那种。画法见 references/diagram-craft.md §7；四张在同一屏上的样子见 references/canonical/console.html。

FIG 10 · in-app diagram界面内图示

service topology服务拓扑

Service health服务健康度

Six services, live p95 and error rate. Pick a node to see what is on call. 六个服务，实时 p95 与错误率。点一个节点看它的值班信息。

1 degraded1 个降级

payroll-svc

812 ms

p95, up from 180 ms at 09:12 p95，09:12 起从 180 ms 抬上来

On call · Dita R.值班 · Dita R.

Redis evictions started at the same minute. Redis 开始逐出的时刻和它同一分钟。

Nodes are <g data-tab>, so selection costs no new script — and the selected node IS the screen's one dark anchor, which is why the detail beside it is a plain card. Template: templates/diagrams/service-topology.html. 节点是 <g data-tab>，选中不写一行新 JS——而选中的节点就是这一屏那张暗卡，所以旁边的详情必须是普通卡。模板：templates/diagrams/service-topology.html。

FIG 11 · in-app diagram界面内图示

pipeline status流水线状态

Payroll run · March薪酬运行 · 三月

Started 09:04. Stage four is running; the last stage has not been reached. 09:04 开始。第四阶段在跑，最后一段还没走到。

running运行中

Name and meta on the card, a thin track-and-fill strip beneath. Text never sits on the saturated gradient — a label straddling the fill edge has no colour that works, and axe returns INCOMPLETE over a gradient so no gate would have said so. Template: templates/diagrams/pipeline-status.html. 名字和数值在卡上，细的 track + fill 条在下面。文字永远不压在饱和渐变上——骑在填充边缘的标签没有一种颜色成立，而 axe 在渐变底上返回 incomplete，没有任何闸会告诉你。模板：templates/diagrams/pipeline-status.html。

FIG 12 · in-app diagram界面内图示

permission graph权限归属

Who can reach what谁能访问什么

Two people, three roles, four resources. Pick a person to trace her reach. 两个人、三个角色、四项资源。点一个人，看她能够到哪儿。

1 sole owner1 项单人持有

Dita Rahayu

3 / 4

resources reachable能够到的资源

payroll-admin · reviewerpayroll-admin · reviewer

She is the only write path to payroll DB. 通往 payroll DB 的写权限只有她一条路。

People → roles → resources. The question is never "what roles exist" but "what can THIS person reach", so selection drives the whole panel. Template: templates/diagrams/permission-graph.html. 人 → 角色 → 资源。要回答的从来不是"有哪些角色"，而是"这个人能够到哪儿"，所以整块面板由选中驱动。模板：templates/diagrams/permission-graph.html。

FIG 13 · in-app diagram界面内图示

flow canvas编排画布

After a payroll run薪酬跑完之后

One trigger, one branch, two actions. Pick a step to edit it. 一个触发、一次分支、两个动作。点一步来编辑它。

draft草稿

then · page on-callthen · 呼叫值班

Escalates after 5 minutes5 分钟未响应则升级

Ran 3 times this month, acknowledged twice. 本月触发 3 次，其中 2 次被认领。

The dot grid is CSS, not four hundred <circle> elements: texture belongs to the container, information to the SVG (§2). Template: templates/diagrams/flow-canvas.html. 点阵底是 CSS，不是四百个 <circle>：纹理进容器，信息进 SVG（§2）。模板：templates/diagrams/flow-canvas.html。