关于 typography-scale
用于为数字界面设计模块化字体系统的技能，面向需要建立易读、一致文本样式的设计工作。内容涵盖字号比例、字重、间距、字体搭配、响应式调整和使用规范。
主要功能
- 01模块化字号比例
- 02字重、行高与字距指引
- 03字体搭配建议
- 04响应式排版指引
- 05样式文档规范
适用场景
- 01定义界面文本样式
- 02建立一致的产品字体系统
- 03调整移动端标题字号
- 04使用真实内容检查文本设置
安装
复制下面的命令，在终端中运行。
$
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