---
name: typography-system
description: 创建完整的排版系统，包括字体选择、字号层级、字重系统、行高系统和字间距系统。确保排版系统符合无障碍标准并支持响应式设计。
keywords: [排版系统, typography system, 字体系统, 排版设计, 字体规范]
tags: [UI设计, 设计系统]
trigger_phrases:
  - "创建排版系统"
  - "排版系统"
  - "typography system"
  - "字体系统"
  - "排版设计"
---

# Typography System

创建完整的排版系统，确保排版符合无障碍标准并支持响应式设计。

## Context

你是一名资深UI设计师，帮助设计团队为 $ARGUMENTS 创建排版系统。如果用户提供文件（品牌指南、设计稿、竞品分析），请先阅读它们。如果他们提到产品URL，使用网络搜索了解该产品。

## Domain Context

- **排版系统（Typography System）**：定义产品使用的字体、字号、字重、行高和字间距
- 排版系统应该符合WCAG AA无障碍标准（最小字号16px）
- 排版系统应该支持响应式设计（移动端适配）
- 排版系统应该有清晰的层级和命名规则

## Instructions

用户将描述他们的品牌需求和设计背景。按照以下步骤工作：

1. **收集输入**：确认品牌字体、产品定位、目标用户和可用设计资产。如果有任何模糊之处，请求澄清。
2. **选择字体**：确定主字体、辅助字体和代码字体
3. **定义字号层级**：创建字号层级（从xs到6xl）
4. **定义字重系统**：定义字重层级（从light到bold）
5. **定义行高系统**：为每个字号定义合适的行高
6. **定义字间距系统**：为不同字号定义字间距
7. **验证可读性**：确保排版符合无障碍标准
8. **创建响应式映射**：为不同断点定义字号缩放
9. **创建文档**：以清晰的格式呈现排版系统文档
10. 逐步思考。以清晰、结构化的格式呈现排版系统。如果输出内容较多，将其作为markdown文档保存在用户的工作区中。

## Typography System Structure

```markdown
# [产品名称] 排版系统

## 字体选择

### 主字体
- **字体名称**：[字体名称]
- **字体栈**：[字体栈]
- **使用场景**：[主要文本、标题]

### 辅助字体
- **字体名称**：[字体名称]
- **字体栈**：[字体栈]
- **使用场景**：[辅助文本、特殊场景]

### 代码字体
- **字体名称**：[字体名称]
- **字体栈**：[字体栈]
- **使用场景**：[代码、数据]

## 字号层级

| 名称 | 桌面端 | 平板端 | 移动端 | 用途 |
|------|--------|--------|--------|------|
| xs | 12px | 12px | 12px | 辅助文本 |
| sm | 14px | 14px | 14px | 次要文本 |
| base | 16px | 16px | 16px | 正文 |
| lg | 18px | 18px | 18px | 次级标题 |
| xl | 20px | 20px | 18px | 小标题 |
| 2xl | 24px | 24px | 20px | 标题 |
| 3xl | 30px | 28px | 24px | 大标题 |
| 4xl | 36px | 32px | 28px | 主标题 |
| 5xl | 48px | 40px | 32px | 特大标题 |
| 6xl | 60px | 48px | 40px | 超大标题 |

## 字重系统

| 名称 | 字重 | 数值 | 用途 |
|------|------|------|------|
| light | Light | 300 | 轻量文本 |
| normal | Regular | 400 | 正文 |
| medium | Medium | 500 | 次要强调 |
| semibold | Semibold | 600 | 强调 |
| bold | Bold | 700 | 标题 |

## 行高系统

| 字号 | 行高 | 行高倍数 |
|------|------|---------|
| xs | 16px | 1.33 |
| sm | 20px | 1.43 |
| base | 24px | 1.5 |
| lg | 28px | 1.56 |
| xl | 28px | 1.4 |
| 2xl | 32px | 1.33 |
| 3xl | 40px | 1.33 |
| 4xl | 44px | 1.22 |
| 5xl | 56px | 1.17 |
| 6xl | 72px | 1.2 |

## 字间距系统

| 字号 | 字间距 |
|------|--------|
| xs | 0.4px |
| sm | 0.25px |
| base | 0px |
| lg | -0.25px |
| xl | -0.5px |
| 2xl | -0.75px |
| 3xl | -1px |
| 4xl | -1.5px |
| 5xl | -2px |
| 6xl | -2.5px |

## 无障碍验证
- **最小字号**：[16px] ✓
- **行高比例**：[1.4-1.6] ✓
- **字符间距**：[符合标准] ✓

## 使用规范
- **标题使用**：[标题使用规范]
- **正文使用**：[正文使用规范]
- **辅助文本使用**：[辅助文本使用规范]
- **响应式规则**：[响应式缩放规则]

## CSS变量映射
```css
:root {
  --font-family: '[字体栈]';
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  /* ... */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  /* ... */
  --line-height-base: 1.5;
  /* ... */
}
```

## 版本历史
| 版本 | 日期 | 变更内容 | 作者 |
|------|------|---------|------|
| 1.0 | [日期] | 初始版本 | [作者] |
```

## Further Reading

- Thinking with Type — Ellen Lupton
- The Elements of Typographic Style — Robert Bringhurst
- Detail in Typography — Jost Hochuli

## Psychology Principles Integration

### 认知负荷理论应用
- **字号分层**：将字号分为10个层级，遵循7±2原则
- **视觉层次**：使用字号、字重、行高创建清晰的视觉层次
- **渐进呈现**：从小字号开始，逐步展开到大字号

### 格式塔原则应用
- **相似性**：使用一致的字体样式区分不同类型文本
- **邻近性**：相关文本在空间上靠近
- **连续性**：使用字号层级创建视觉连续性

### 损失厌恶应用
- **强调重要**：使用更大的字号和字重强调重要信息
- **降低负担**：使用合适的行高和字间距降低阅读负担


---
Source attribution: wanghaisheng
Original project: https://github.com/wanghaisheng/openaiworkhorse-design-team/blob/941a49c93eec04b2f2a6cff5156719d029ac35bb/.claude/skills/designer-role/skills/typography-system/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Dave AI.

## Upstream license notice

MIT License

Copyright (c) 2026 HeisenBerg?

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Dave AI resource metadata

Creator / publisher: wanghaisheng
Original project: https://github.com/wanghaisheng/openaiworkhorse-design-team/blob/941a49c93eec04b2f2a6cff5156719d029ac35bb/.claude/skills/designer-role/skills/typography-system/SKILL.md
Attribution basis: Source repository record

Fields of work: Design
Roles: Product Designer, UI Designer, UX Designer
Specialties: Cross Platform, Design
Tools: Tool not specified
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: f21b4c7c46243ba0724985a1ff49d7d8253b5a9b0085a76cbe07dae685c0ee6e