Claude Code type-scale 技能：计算界面字号比例和 CSS 变量
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/type-scale/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/type-scale/`，把核对后的文件保存为 `.claude/skills/type-scale/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/type-scale`。
中文摘要
用基准字号与比例推导字号档位，给出像素、rem、CSS 变量、元素用途及行高建议。
SKILL.md 中文导读
可复现示例
在 Claude Code 调用 /type-scale，用以下虚构仪表板设置计算字号。
interface `museum dashboard` | base `16px` | ratio `1.250` | root size `16px`
output requires `CSS custom properties`, rem values, and element suggestions工作步骤
- 确定正文基准值、比例和界面用途。
- 按比例计算档位，像素取整后换算 rem。
- 为正文与标题给出建议用途和行高。
验收方法
正文保留 `16px`，首档标题 `20px`，下一档 `25px`。以根字号 `16px` 换算得到 `1.25rem` 和 `1.5625rem`，统一输出 `CSS custom properties`。
GitHub 原文 · 更新日期
适用环境
本地 Claude Code 项目。准备正文基准字号、字号比例和界面类型。
常见问题
内容很密集时如何挑字号比例？
比例影响相邻档位差距。紧凑的数据界面可选择更小的间隔，仍保持标题高于正文。