design-style-skill

name design-style-skill description Select a consistent visual design system for PPT slides using radius/spacing style recipes. Use when users ask for overall style direction or component styling consistency. Includes Sharp/Soft/Rounded/Pill recipes, component mappings, typography/spacing rules, and mixing guidance. Triggers: 风格, style, radius, spacing, 圆角, 间距, PPT风格, 视觉风格, design style, component style. Style Recipes - PPT视觉风格系统 同一套设计可通过调整圆角（rectRadius）和间距呈现4种不同风格。根据场景选择合适的风格配方。 单位说明 : PptxGenJS 使用英寸(inch)作为单位。幻灯片尺寸为 10" × 5.625" (LAYOUT_16x9) 风格概览 风格 圆角范围 间距范围 适合场景 Sharp & Compact 0 ~ 0.05" 紧凑 数据密集型、表格、专业报告 Soft & Balanced 0.08" ~ 0.12" 适中 企业汇报、商务演示、通用PPT Rounded & Spacious 0.15" ~ 0.25" 宽松 产品介绍、营销演示、创意展示 Pill & Airy 0.3" ~ 0.5" 通透 品牌展示、发布会、高端演示 Sharp & Compact（锐利紧凑） 视觉特征 : 方正、信息密度高、专业严肃感。 Token 配方 类别 值 (英寸) 说明 圆角-小 0" 完全直角 圆角-中 0.03" 微圆角 圆角-大 0.05" 小圆角 元素内边距 0.1" ~ 0.15" 紧凑 元素间距 0.1" ~ 0.2" 紧凑 页面边距 0.3" 较窄 区块间距 0.25" ~ 0.35" 紧凑 Soft & Balanced（柔和均衡） 视觉特征 : 适中的圆角、舒适的留白、专业又不失亲和。 Token 配方 类别 值 (英寸) 说明 圆角-小 0.05" 小圆角 圆角-中 0.08" 中等圆角 圆角-大 0.12" 较大圆角 元素内边距 0.15" ~ 0.2" 适中 元素间距 0.15" ~ 0.25" 适中 页面边距 0.4" 标准 区块间距 0.35" ~ 0.5" 适中 Rounded & Spacious（圆润宽松） 视觉特征 : 大圆角、充裕留白、友好亲切、现代感。 Token 配方 类别 值 (英寸) 说明 圆角-小 0.1" 中等圆角 圆角-中 0.15" 大圆角 圆角-大 0.25" 很大圆角 元素内边距 0.2" ~ 0.3" 宽松 元素间距 0.25" ~ 0.4" 宽松 页面边距 0.5" 较宽 区块间距 0.5" ~ 0.7" 宽松 Pill & Airy（胶囊通透） 视觉特征 : 全圆角胶囊形、大量留白、轻盈通透、品牌展示感强。 Token 配方 类别 值 (英寸) 说明 圆角-小 0.2" 大圆角 圆角-中 0.3" 胶囊形 圆角-大 0.5" 完全胶囊 元素内边距 0.25" ~ 0.4" 通透 元素间距 0.3" ~ 0.5" 通透 页面边距 0.6" 宽 区块间距 0.6" ~ 0.9" 通透 组件级风格映射表 组件 Sharp Soft Rounded Pill 按钮/标签 rectRadius: 0 rectRadius: 0.05 rectRadius: 0.1 rectRadius: 0.2 卡片/容器 rectRadius: 0.03 rectRadius: 0.1 rectRadius: 0.2 rectRadius: 0.3 图片容器 rectRadius: 0 rectRadius: 0.08 rectRadius: 0.15 rectRadius: 0.25 输入框形状 rectRadius: 0 rectRadius: 0.05 rectRadius: 0.1 rectRadius: 0.2 徽章/Badge rectRadius: 0.02 rectRadius: 0.05 rectRadius: 0.08 rectRadius: 0.15 头像框 rectRadius: 0 rectRadius: 0.1 rectRadius: 0.2 rectRadius: 0.5 (圆形) PptxGenJS 圆角示例 // Sharp 风格卡片 slide. addShape ( "rect" , { x : 0.5 , y : 1 , w : 4 , h : 2.5 , fill : { color : "F5F5F5" }, rectRadius : 0.03 }); // Rounded 风格卡片 slide. addShape ( "rect" , { x : 0.5 , y : 1 , w : 4 , h : 2.5 , fill : { color : "F5F5F5" }, rectRadius : 0.2 }); // Pill 风格按钮 (高度0.4"时，rectRadius设为0.2"即为胶囊形) slide. addShape ( "rect" , { x : 3 , y : 4 , w : 2 , h : 0.4 , fill : { color : "4A90D9" }, rectRadius : 0.2 }); 混搭原则 1. 外层容器 ≥ 内层圆角 // 正确：外 > 内 card : rectRadius : 0.2 button : rectRadius : 0.1 // 错误：内 > 外 → 视觉溢出感 card : rectRadius : 0.1 button : rectRadius : 0.2 2. 信息密度决定间距 区域类型 推荐风格 数据展示区 Sharp / Soft（紧凑间距） 内容浏览区 Rounded / Pill（宽松间距） 标题区域 Soft / Rounded（适中间距） 3. 圆角与元素高度的关系 元素高度 Sharp Soft Rounded Pill 小 (< 0.3") 0" 0.03" 0.08" 高度/2 中 (0.3" ~ 0.6") 0.02" 0.05" 0.12" 高度/2 大 (0.6" ~ 1.2") 0.03" 0.08" 0.2" 0.3" 超大 (> 1.2") 0.05" 0.12" 0.25" 0.4" Pill风格提示 : 要实现完美胶囊形，设置 rectRadius = 元素高度 / 2 Typography 排版规范 (PPT) 用途 字号 (pt) 说明 注释/来源 10 ~ 12 最小可读字号 正文/描述 14 ~ 16 标准正文 副标题 18 ~ 22 次要标题 标题 28 ~ 36 页面标题 大标题 44 ~ 60 封面/章节标题 数据高亮 60 ~ 96 关键数字展示 Spacing 间距规范 (PPT) 基于10" × 5.625"幻灯片尺寸： 用途 推荐值 (英寸) 图标与文字间距 0.08" ~ 0.15" 列表项间距 0.15" ~ 0.25" 卡片内边距 0.2" ~ 0.4" 元素组间距 0.3" ~ 0.5" 页面安全边距 0.4" ~ 0.6" 主要区块间距 0.5" ~ 0.8" 快速选择指南 演示类型 推荐风格 原因 财务/数据报告 Sharp & Compact 信息密度高，专业严谨 企业汇报/商务 Soft & Balanced 平衡专业与友好 产品介绍/营销 Rounded & Spacious 现代感，亲切感 发布会/品牌展示 Pill & Airy 高端感，视觉冲击 培训/教育 Soft / Rounded 清晰易读，友好 技术分享 Sharp / Soft 专业，信息清晰