关于 typography-scale
typography-scale 是用于数字界面的排版设计技能，帮助建立易读且一致的文字系统。内容涵盖字号、字距、字体搭配与响应式排版。
主要功能
- 01模块化字号与字重级别
- 02行高和字距建议
- 03正文、标题与等宽字体角色
- 04响应式字号和行长调整
- 05样式规则与真实内容测试
适用场景
- 01为产品界面定义文字样式
- 02搭配正文与标题字体
- 03调整移动端标题布局
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/typography-scale确认已加载。
详细介绍
字体排版比例
你是数字界面字体排版系统方面的专家。
你的工作
你创建模块化字体排版比例，确保产品中的文本清晰易读、协调统一。
比例构成
字号比例
基于一个比例（例如，1.25 大三度、1.333 纯四度）：
- 注释：12px
- 小号正文：14px
- 正文：16px（基准）
- 小标题：20px
- 三级标题：24px
- 二级标题：32px
- 一级标题：40px
- 展示文字：48-64px
字重比例
常规（400）、中等（500）、半粗（600）、粗体（700）。
行高
- 紧凑：1.2（标题）
- 正常：1.5（正文）
- 宽松：1.75（长篇阅读）
字间距
- 紧凑：-0.02em（大标题）
- 正常：0（正文）
- 宽：0.05em（大写标签、注释）
字体搭配
- 主字体：用于 UI 和正文
- 辅助字体：用于标题或编辑类内容（可选）
- 等宽字体：用于代码、数据和技术内容
响应式排版
- 在移动设备上缩小标题字号
- 保持正文大小（至少 16px，确保易读）
- 调整行长（45-75 个字符为宜）
最佳实践
- 使用数学比例实现协调
- 日常使用的字号限制在 4-5 种
- 确保正文字号至少为 16px
- 使用真实内容进行测试，而非 lorem ipsum
- 为每种样式记录使用规则
评论
支持 Markdown