排版计算器技能

目的

为设计系统计算排版比例和度量标准，包括模块化比例、行高和响应式字体大小。

能力

生成字体比例（模块化、黄金比例、大三度等）
计算最佳行高以提高可读性
生成响应式字体大小和流体排版
计算垂直节奏和基线网格
生成字体大小/行高配对
创建排版设计令牌

目标流程

design-system.js
component-library.js (typographySystemDesignTask)
responsive-design.js (responsiveTypographySpacingTask)

集成点

type-scale.com 算法
CSS clamp() 用于流体排版
模块化比例计算

输入模式

{
  "type": "object",
  "properties": {
    "baseSize": {
      "type": "number",
      "default": 16,
      "description": "基础字体大小（像素）"
    },
    "scaleRatio": {
      "type": "string",
      "enum": ["minor-second", "major-second", "minor-third", "major-third", "perfect-fourth", "augmented-fourth", "perfect-fifth", "golden-ratio"],
      "default": "perfect-fourth"
    },
    "steps": {
      "type": "number",
      "default": 6,
      "description": "基础大小上下比例步数"
    },
    "lineHeightRatio": {
      "type": "number",
      "default": 1.5,
      "description": "基础行高比例"
    },
    "fluidTypography": {
      "type": "boolean",
      "default": true
    },
    "minViewport": {
      "type": "number",
      "default": 320
    },
    "maxViewport": {
      "type": "number",
      "default": 1440
    }
  },
  "required": ["baseSize"]
}

输出模式

{
  "type": "object",
  "properties": {
    "scale": {
      "type": "array",
      "description": "包含字体大小的排版比例"
    },
    "lineHeights": {
      "type": "object",
      "description": "每个字体大小的最佳行高"
    },
    "fluidSizes": {
      "type": "object",
      "description": "流体排版的 CSS clamp 值"
    },
    "verticalRhythm": {
      "type": "object",
      "description": "垂直节奏计算"
    },
    "tokens": {
      "type": "object",
      "description": "排版设计令牌"
    }
  }
}

使用示例

const result = await skill.execute({
  baseSize: 16,
  scaleRatio: 'perfect-fourth',
  steps: 6,
  fluidTypography: true,
  minViewport: 320,
  maxViewport: 1440
});