菜单
子 skill — 设计系统与组件展示。当用户要从 repo 提取 design tokens 做团队 reference、或要把一个组件的所有 variant 平铺在一张 contact sheet 上 review 时使用。包含设计系统参考（design-tokens.html）和组件变体陈列两种范式。当父 skill 路由命中"设计系统/design tokens/组件变体/展示组件库"类请求时加载。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
让 agent 用单文件 HTML 替代 markdown 输出空间性、并行性、可比较或可交互的内容。当用户请求"对比/计划/评审/报告/解释器/幻灯片/编辑器/可视化"或当输出含并排选项、流程图、时间线、代码 diff、可交互元素、需要"指着某处说就是它"的场景时使用。本 skill 是路由器：先用决策框架判断是否走 HTML，再按 9 大类调度对应的子 skill（01-explore / 02-review / 03-design / 04-proto / 05-diagram / 06-slides / 07-research / 08-report / 09-editor），并复用 ../templates/*.html 与 shared/base.css 输出真实可运行的产物。
子 skill — 原型与可点击流。当用户要决定一个 transition 的 duration/easing（动画沙盒，animation.html）或要"走一遍"4-6 屏交互流验证手感时使用。包含动画沙盒和可点击流两种范式。当父 skill 路由命中"动画/原型/手感/clickable flow"类请求时加载。
子 skill — 插画与图表。当用户要博客/文档配图（SVG 插图集）、流程图、状态机、deploy pipeline（flowchart.html）时使用。所有图都用内联 SVG，不引外部库（mermaid/d3/excalidraw）。当父 skill 路由命中"图/diagram/flowchart/state machine/pipeline 可视化"类请求时加载。
子 skill — 探索与规划。用户在多种实现方案/设计风格之间未决，或方案选定后要写工程版 RFC 时使用。包含三方案对比（compare.html）、视觉设计方向、实现计划（plan.html）三种范式。当父 skill html-effectiveness 路由命中"对比/选型/RFC/计划"类请求时加载。
子 skill — 代码评审与理解。当用户要 PR 评审、PR 写作（作者侧）、或要理解陌生代码模块的请求路径/调用栈时使用。包含 PR 评审（diff.html）、PR 写作（pr.html）、模块图三种范式。当父 skill 路由命中"评审/PR/审阅/这段代码怎么工作"类请求时加载。
子 skill — 键盘控制幻灯片。当用户要"上去就能讲"的会议幻灯片、不想用 Keynote/PPT/Google Slides、希望单 HTML 文件左右键翻页时使用。当父 skill 路由命中"幻灯片/slide deck/做几张 slides/讲几页"类请求时加载。
| name | html-effectiveness-design |
| description | 子 skill — 设计系统与组件展示。当用户要从 repo 提取 design tokens 做团队 reference、或要把一个组件的所有 variant 平铺在一张 contact sheet 上 review 时使用。包含设计系统参考（design-tokens.html）和组件变体陈列两种范式。当父 skill 路由命中"设计系统/design tokens/组件变体/展示组件库"类请求时加载。 |
"HTML is the medium your design system ships in, so it's the natural format for talking about it. Tokens become swatches, components become contact sheets."
| 用户说 | 用哪个范式 | 模板 |
|---|---|---|
| "把我们的 design tokens 整理成一份 reference" | 设计系统参考 | ../../templates/design-tokens.html |
| "review 一下我们用了哪些颜色 / 字号" | 同上 | 同上 |
| "show me all variants of Card / Button" | 组件变体陈列 | 自建（见下） |
空间形状：4 个区域 + 底部组件展示行。每个 token 必须可见：
HTML 骨架：
<section class="tokens-color">
<h2>Color · Primary</h2>
<div class="palette">
<div class="swatch" style="background:#D97757">
<span class="hex">#D97757</span><span class="var">--clay</span>
</div>
<div class="swatch" style="background:#141413;color:#FAF9F5">
<span class="hex">#141413</span><span class="var">--slate</span>
</div>
<!-- ivory / oat -->
</div>
</section>
<section class="tokens-type">
<h2>Typography</h2>
<div class="scale">
<div>
<p style="font-size:48px;line-height:1.1;font-weight:500">Plan the week ahead</p>
<small>Display 48 / 1.1 / 500</small>
</div>
<!-- Heading 1, Heading 2, Body, Small, Caption -->
</div>
</section>
<section class="tokens-space">
<h2>Spacing</h2>
<div class="space-scale">
<div><span class="bar" style="width:4px"></span>4 <code>--sp-1</code></div>
<div><span class="bar" style="width:8px"></span>8 <code>--sp-2</code></div>
<!-- 12, 16, 24, 32, 48, 64 -->
</div>
</section>
关键 CSS：
.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.swatch { aspect-ratio: 1; padding: 16px; border-radius: 12px;
color: white; display: flex; flex-direction: column;
justify-content: flex-end; gap: 4px; font-size: 12px; }
.swatch .hex { font-family: var(--font-mono); }
.swatch .var { opacity: 0.7; }
.space-scale > div { display: flex; align-items: center; gap: 12px;
padding: 8px 0; }
.space-scale .bar { display: inline-block; height: 16px;
background: var(--clay); border-radius: 2px; }
直接可用模板：../../templates/design-tokens.html — 含 4+4+4 配色 swatches、6 级字号 scale、8 级间距、4 级圆角、3 级阴影、核心组件展示行 + light/dark 切换。修改方式：把 hex 值、变量名前缀、字号 / 间距数字换成项目自己的 tokens 即可。
空间形状：3×N 网格，每格一个变体。标签 A/B/C/D 在卡片左上，"best for: ..." 在底部。可加 prop slider（padding / radius / shadow）让 reviewer 实时调。
典型变体集合（以 Card 为例）：
HTML 骨架：
<header class="bar">
<span>Card variants</span>
<div class="controls">
<label>Padding <input type="range" id="pad" min="8" max="40" value="20">
<output>20px</output></label>
<label><input type="checkbox" id="shadow" checked> Shadow</label>
</div>
</header>
<div class="grid">
<figure class="variant">
<span class="tag">A · Flat</span>
<div class="card flat">[实际渲染的卡片]</div>
<figcaption>best for: dense lists on tinted backgrounds</figcaption>
</figure>
<!-- B / C / D / E / F -->
</div>
关键 JS（slider 影响所有变体）：
const padSlider = document.querySelector('#pad');
const padOut = padSlider.parentElement.querySelector('output');
padSlider.oninput = () => {
document.documentElement.style.setProperty('--card-pad', padSlider.value + 'px');
padOut.textContent = padSlider.value + 'px';
};
document.querySelector('#shadow').onchange = (e) => {
document.documentElement.style.setProperty(
'--card-shadow', e.target.checked ? 'var(--shadow-md)' : 'none'
);
};
.card { padding: var(--card-pad, 20px); box-shadow: var(--card-shadow, none); }
无独立模板。
--clay，要同时显示 #D97757