HTML Design Token Showcases 是一个用于生成设计令牌展示页的技能。其核心出发点是：Markdown 无法展示颜色，用 Unicode 方块字符模拟颜色是一种将就，因此对于色板、字号阶梯、间距系统等设计令牌，应改用 HTML，让取值以真实形态呈现。
【用途】 当需要“展示/记录我们的色板、颜色、主题、令牌、设计系统”“为 X 构建令牌参考”“记录间距/字体/颜色刻度”，或当 Markdown 文件不得不用 █████ 方块伪造颜色时，以及开发者需要从文档中复制 CSS 变量时，使用该技能。
【输出要求】 每个令牌需同时呈现：视觉渲染效果（真实颜色、真实间距、真实阴影）、标识符（如 --color-accent-500、space-md）、取值（如 #B8602A、12px），以及一个把取值或 CSS 变量放入剪贴板的复制按钮。令牌网格在窄宽度下重排，保证在手机上仍可阅读。
【应包含的区块】 颜色：色块网格，每个色块显示十六进制值、令牌名称、对黑与白的对比度（如“AAA 7.2:1”），按色相族或语义角色（primary/secondary/error/success）分组。 字体：在刻度中每个字号渲染示例文本，展示字体族、字重、字号、行高与字距，使用真实句子而非 lorem ipsum。 间距：一排逐渐增大的方块，各自标注令牌名与取值，可选展示常见组合（如 card-padding = space-md (16px)）。 圆角：每个圆角值对应一个方块并标注令牌名与像素值。 阴影/层级：在中性背景上展示各层级卡片，标注令牌名与 box-shadow 取值。 动效（如适用）：每个时长/缓动令牌的动画示例，提供重播按钮，标注令牌名与 CSS 取值。 组件（可选）：用令牌渲染少量代表性组件，帮助读者验证令牌组合效果。
【复制交互】 对开发者最有用的交互是复制 CSS 变量名（粘贴 var(--color-accent-500)），对设计师更有用的是复制原始取值（#B8602A）。两者都提供：点击色块复制 CSS 变量，点击十六进制值复制原始取值，均通过共享的 copyToClipboard 辅助函数并显示“已复制”提示。批量导出方面，底部提供“Copy all as CSS variables”按钮，生成 :root { ... } 形式的 CSS 变量集合。
【主题变体】 若系统有明/暗/高对比度变体，用标签条或并排方式展示，标签选择通过 URL hash 持久化以便深链到特定主题；明暗主题下还应展示同一组件的呈现差异。
【对比度与可访问性】 对将用作文字或背景的颜色，展示其与搭配颜色的对比度，并标注 WCAG 等级（AA、AAA、fail）；若某颜色在白底上未达 AA，应如实说明。
【反模式】 只给十六进制码而不渲染色块；字体示例使用 lorem ipsum；罗列令牌而不给上下文；省略可访问性信息；使用不体现真实动效令牌的装饰性动画。
【HTML 输出基础】 写入真实的 .html 文件（命名如 <topic>-<kind>.html），不在聊天中内联渲染；自包含，内联 CSS 与 JS，无构建步骤，不依赖 npm 或 CDN（Google Fonts 通过 <link> 可用，但需声明真实回退字体栈）。使用完整文档外壳（doctype、html lang、head 中的 charset、viewport、title），脚本与样式置于其后。移动端响应式，约 700px 以下折叠为单列。浏览器存储仅用于进行中状态，localStorage 使用按产物隔离的键前缀，不存储掩码或机密值。使用语义化可复制 HTML（pre/code、table、内联 svg），安全构建 DOM（textContent + createElement，禁止从变量、用户输入或导入数据设置 innerHTML）。主题令牌置于 :root，选择与领域匹配的审美。保证打印可读与可访问（WCAG AA 对比度、键盘可达控件与可见焦点、状态不仅靠颜色传达）。被反复查看的产物在页脚显示最后更新时间戳。剪贴板写入统一走共享辅助函数 copyToClipboard，不直接调用 navigator.clipboard.writeText。默认本地 HTML，若存在 Artifact 工具可添加“Publish to Claude.ai”按钮，但不得以发布替代写文件。
【预检】 在写产物之前先调用 html-skills:html-skills-listen（幂等）；若返回 URL，则将其原样注入为 window.CLAUDE_SUBMIT_URL（含 ?t= 查询串，属本地单会话回环握手，非凭据）；若报告为 web/sandbox 模式，则省略该行，submitToClaude 回退到剪贴板模式。
【示例提示】 “把我们的品牌色板记录为 HTML 页面。我们有暖中性基础色（FAF8F5、F0EDE8、D4CFC7、2C2825）、陶土色强调色（B8602A）和柔和文字色（8A837A）。展示对比度，并添加‘copy as CSS variables’按钮。”输出为 HTML 页面，每种颜色一个色块网格，显示渲染色块、名称、十六进制值与对黑/白的对比度，支持点击复制，底部有批量导出按钮。