update: change directory

2026-03-21 22:00:25 +08:00
parent 72789be558
commit 43c4d84b28
6 changed files with 0 additions and 0 deletions
--- a/skills/pptx-generator/design-system.md
+++ b/skills/pptx-generator/design-system.md
@@ -0,0 +1,392 @@
+# Design System
+
+## Color Palette Reference
+
+| # | 名称 | 色值 | 风格 | 适用场景 | 建议 |
+|---|------|------|------|----------|------|
+| 1 | 现代与健康 | `#006d77` `#83c5be` `#edf6f9` `#ffddd2` `#e29578` | 清新、治愈 | 医疗健康、心理咨询、护肤品、瑜伽Spa | 深青做标题，浅粉做背景 |
+| 2 | 商务与权威 | `#2b2d42` `#8d99ae` `#edf2f4` `#ef233c` `#d90429` | 严谨、经典 | 年度汇报、金融分析、企业介绍、政务报告 | 深蓝显专业，亮红强调数据 |
+| 3 | 自然与户外 | `#606c38` `#283618` `#fefae0` `#dda15e` `#bc6c25` | 沉稳、大地色 | 户外用品、环境保护、农业项目、历史文化 | 深绿为底，米色为字 |
+| 4 | 复古与学院 | `#780000` `#c1121f` `#fdf0d5` `#003049` `#669bbc` | 经典、书卷气 | 学术讲座、历史回顾、博物馆、复古品牌 | 深红与深蓝对比强烈 |
+| 5 | 柔美与创意 | `#cdb4db` `#ffc8dd` `#ffafcc` `#bde0fe` `#a2d2ff` | 梦幻、糖果色 | 母婴产品、甜品店、女性时尚、幼儿园 | 文字用深灰或黑色 |
+| 6 | 波西米亚 | `#ccd5ae` `#e9edc9` `#fefae0` `#faedcd` `#d4a373` | 温柔、低饱和 | 婚礼策划、家居软装、有机食品、慢生活 | 米色背景，绿棕点缀 |
+| 7 | 活力与科技 | `#8ecae6` `#219ebc` `#023047` `#ffb703` `#fb8500` | 高能量、运动 | 体育赛事、健身房、创业路演、少儿教育 | 深蓝稳重心，橙色做焦点 |
+| 8 | 匠心与手作 | `#7f5539` `#a68a64` `#ede0d4` `#656d4a` `#414833` | 质朴、咖啡调 | 咖啡店、手工艺品、传统文化、烘焙教学 | 适合纸质/皮革质感 |
+| 9 | 科技与夜景 | `#000814` `#001d3d` `#003566` `#ffc300` `#ffd60a` | 深邃、高亮 | 科技发布会、星空天文、夜间经济、高端汽车 | 必须用深色模式 |
+| 10 | 教育与图表 | `#264653` `#2a9d8f` `#e9c46a` `#f4a261` `#e76f51` | 清晰、逻辑强 | 统计报告、教育培训、市场分析、通用商务 | 完美的图表配色 |
+| 11 | 森林与环保 | `#dad7cd` `#a3b18a` `#588157` `#3a5a40` `#344e41` | 单色渐变、森系 | 园林设计、ESG报告、环保公益、植物研究 | 单色系安全不会乱 |
+| 12 | 优雅与时尚 | `#edafb8` `#f7e1d7` `#dedbd2` `#b0c4b1` `#4a5759` | 低饱和、莫兰迪 | 高定服装、艺术画廊、美妆品牌、杂志风 | 留白是关键 |
+| 13 | 艺术与美食 | `#335c67` `#fff3b0` `#e09f3e` `#9e2a2b` `#540b0e` | 浓郁、复古画报 | 美食纪录片、艺术展、民族风情、复古餐厅 | 适合大色块拼接 |
+| 14 | 轻奢与神秘 | `#22223b` `#4a4e69` `#9a8c98` `#c9ada7` `#f2e9e4` | 冷艳、紫调 | 珠宝展示、酒店管理、高端咨询、心理学 | 紫色营造高端氛围 |
+| 15 | 纯净科技蓝 | `#03045e` `#0077b6` `#00b4d8` `#90e0ef` `#caf0f8` | 未来感、纯净 | 云计算/AI、水利海洋、医院医疗、洁净能源 | 从深海到天空的渐变 |
+| 16 | 海岸珊瑚 | `#0081a7` `#00afb9` `#fdfcdc` `#fed9b7` `#f07167` | 清爽、夏日感 | 旅游度假、夏季活动、饮品品牌、海洋主题 | 青色与珊瑚色互补亮眼 |
+| 17 | 活力橙薄荷 | `#ff9f1c` `#ffbf69` `#ffffff` `#cbf3f0` `#2ec4b6` | 明亮、欢快 | 儿童活动、促销海报、快消品、社交媒体 | 橙色吸睛，薄荷绿清爽 |
+| 18 | 铂金白金 | `#0a0a0a` `#0070F3` `#D4AF37` `#f5f5f5` `#ffffff` | 高端、专业 | Agent产品、企业官网、金融科技、高端品牌 | 白金主调，蓝色行动，金色强调 |
+
+---
+
+### Agent Design System — 完整色板
+
+基于 tokens.css/ts 的 Platinum White-Gold Theme，提供完整色阶供精细设计使用。
+
+#### White 白色系（背景与浅色表面）
+
+| 色阶 | 色值 | 用途 |
+|------|------|------|
+| white-0 | `#ffffff` | 主背景 |
+| white-50 | `#fefefe` | 略带暖调的白 |
+| white-75 | `#fcfcfc` | 微灰白 |
+| white-100 | `#fafafa` | 次级背景 |
+| white-200 | `#f7f7f7` | 卡片背景 |
+| white-300 | `#f5f5f5` | 三级背景 |
+| white-400 | `#f0f0f0` | 分隔区域 |
+| white-500 | `#ebebeb` | 边框浅色 |
+| white-600 | `#e5e5e5` | 禁用态背景 |
+| white-700 | `#e0e0e0` | 深灰白 |
+| white-800 | `#d9d9d9` | 占位符 |
+| white-900 | `#d4d4d4` | 分隔线 |
+| white-1000 | `#cccccc` | 最深白 |
+
+#### Gold 金色系（铂金商务强调色）
+
+| 色阶 | 色值 | 用途 |
+|------|------|------|
+| gold-25 | `#FFFDF5` | 极浅金背景 |
+| gold-50 | `#FEF9E7` | 浅金背景 |
+| gold-75 | `#FCF3D0` | 淡金高亮 |
+| gold-100 | `#FAECB8` | 金色 hover 态 |
+| gold-200 | `#F5DC8A` | 亮金强调 |
+| gold-300 | `#E8C860` | 金色悬停 |
+| gold-400 | `#D4AF37` | **主金色（核心）** |
+| gold-500 | `#B8972E` | 金色文字 |
+| gold-600 | `#9A7E26` | 深金强调 |
+| gold-700 | `#7C651E` | 暗金边框 |
+| gold-800 | `#5E4C16` | 深金背景 |
+| gold-900 | `#40330F` | 极深金 |
+| gold-1000 | `#221A08` | 黑金 |
+
+#### Blue 蓝色系（主操作色）
+
+| 色阶 | 色值 | 用途 |
+|------|------|------|
+| blue-25 | `#F0F7FF` | 极浅蓝背景 |
+| blue-50 | `#E0EFFF` | 信息提示背景 |
+| blue-75 | `#C2DFFF` | 浅蓝高亮 |
+| blue-100 | `#A3CFFF` | 禁用态蓝 |
+| blue-200 | `#66AFFF` | 亮蓝 |
+| blue-300 | `#338FFF` | 蓝色悬停 |
+| blue-400 | `#0070F3` | **主蓝色（核心）** |
+| blue-500 | `#005FCC` | 蓝色文字 |
+| blue-600 | `#004FA6` | 深蓝强调 |
+| blue-700 | `#003F80` | 暗蓝边框 |
+| blue-800 | `#002F5A` | 深蓝背景 |
+| blue-900 | `#001F3D` | 极深蓝 |
+| blue-1000 | `#001026` | 黑蓝 |
+
+#### Gray 灰色系（文字与中性色）
+
+| 色阶 | 色值 | 用途 |
+|------|------|------|
+| gray-0 | `#ffffff` | 白色 |
+| gray-50 | `#fafafa` | 极浅灰 |
+| gray-75 | `#f5f5f5` | 浅灰背景 |
+| gray-100 | `#ededed` | 分隔线浅 |
+| gray-200 | `#d4d4d4` | 边框浅 |
+| gray-300 | `#a3a3a3` | 四级文字 |
+| gray-400 | `#737373` | 三级文字 |
+| gray-500 | `#525252` | 二级文字 |
+| gray-600 | `#404040` | 深灰 |
+| gray-700 | `#2e2e2e` | 暗色背景 |
+| gray-800 | `#1f1f1f` | 深色背景 |
+| gray-900 | `#141414` | 极深背景 |
+| gray-1000 | `#0a0a0a` | **主文字色（核心）** |
+
+#### 透明度色值
+
+##### Opacity Black（黑色透明）
+
+| 透明度 | 色值 | 用途 |
+|--------|------|------|
+| 0% | `#0a0a0a00` | 全透明 |
+| 2% | `#0a0a0a05` | 微弱遮罩 |
+| 4% | `#0a0a0a0a` | 次级交互背景 |
+| 8% | `#0a0a0a14` | 边框/分隔 |
+| 15% | `#0a0a0a26` | 按压态 |
+| 20% | `#0a0a0a33` | 浅遮罩 |
+| 25% | `#0a0a0a40` | 中遮罩 |
+| 50% | `#0a0a0a80` | 半透明 |
+| 70% | `#0a0a0ab2` | 深遮罩 |
+| 80% | `#0a0a0acc` | 悬停态 |
+| 90% | `#0a0a0ae5` | tooltip |
+| 95% | `#0a0a0af2` | 弹窗 |
+
+##### Opacity White（白色透明）
+
+| 透明度 | 色值 | 用途 |
+|--------|------|------|
+| 0% | `#ffffff00` | 全透明 |
+| 2% | `#ffffff05` | 微弱遮罩 |
+| 4% | `#ffffff0a` | 次级交互背景 |
+| 8% | `#ffffff12` | 边框/分隔 |
+| 15% | `#ffffff26` | 按压态 |
+| 20% | `#ffffff33` | 浅遮罩 |
+| 25% | `#ffffff40` | 中遮罩 |
+| 50% | `#ffffff80` | 半透明 |
+| 70% | `#ffffffb2` | 深遮罩 |
+| 80% | `#ffffffcc` | 悬停态 |
+| 90% | `#ffffffe5` | tooltip |
+| 95% | `#fffffff2` | 弹窗 |
+
+---
+
+## Color Palette Rules (MANDATORY)
+
+### Strict Palette Adherence
+
+**Use ONLY the provided color palette. Do NOT create or modify colors.**
+
+- All colors must come from the user-provided palette
+- Do NOT use colors outside the palette
+- Do NOT modify palette colors (brightness, saturation, mixing)
+- **Only exception**: Add transparency using the `transparency` property (0-100)
+
+```javascript
+// Correct: Using palette colors
+slide.addShape(pres.shapes.RECTANGLE, { fill: { color: theme.primary } });
+slide.addText("Title", { color: theme.accent });
+
+// Wrong: Colors outside palette
+slide.addShape(pres.shapes.RECTANGLE, { fill: { color: "1a1a2e" } });
+```
+
+### No Gradients
+
+**Gradients are prohibited. Use solid colors only.**
+
+### No Animations
+
+**Animations and transitions are prohibited.** All slides must be static.
+
+---
+
+## Font Reference
+
+### 推荐字体
+
+| 语言 | 默认字体 | 可选字体 |
+|------|----------|----------|
+| **中文** | 微软雅黑 (Microsoft YaHei) | — |
+| **英文** | Arial | Georgia, Calibri, Cambria, Trebuchet MS |
+
+- 中英文混排时：中文使用微软雅黑，英文使用所选字体
+- 优先使用系统自带字体，确保跨平台兼容
+- 标题和正文可使用不同字体配对（如 Georgia + Calibri）
+
+### Recommended Font Pairings
+
+| Header Font | Body Font |
+|-------------|-----------|
+| Georgia | Calibri |
+| Arial Black | Arial |
+| Calibri | Calibri Light |
+| Cambria | Calibri |
+| Trebuchet MS | Calibri |
+| Impact | Arial |
+| Palatino | Garamond |
+| Consolas | Calibri |
+
+**Choose an interesting font pairing** — don't default to Arial for everything. Pick a header font with personality and pair it with a clean body font.
+
+### No Bold for Body Text
+
+**Plain body text and caption/legend text must NOT use bold.**
+
+- Body paragraphs, descriptions → normal weight
+- Captions, legends, footnotes → normal weight
+- Reserve bold for titles and headings only
+
+```javascript
+// Correct
+slide.addText("Main Title", { bold: true, fontSize: 36, fontFace: "Arial" });
+slide.addText("Body text here.", { bold: false, fontSize: 14, fontFace: "Arial" });
+
+// Wrong
+slide.addText("Body text here.", { bold: true, fontSize: 14 });
+```
+
+---
+
+## Style Recipes — 视觉风格系统
+
+同一套设计可通过调整圆角（rectRadius）和间距呈现4种不同风格。根据场景选择合适的风格配方。
+
+> **单位说明**: PptxGenJS 使用英寸(inch)作为单位。幻灯片尺寸为 10" x 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（锐利紧凑）
+
+**视觉特征**: 方正、信息密度高、专业严肃感。
+
+| 类别 | 值 (英寸) | 说明 |
+|---|---|---|
+| 圆角-小 | 0" | 完全直角 |
+| 圆角-中 | 0.03" | 微圆角 |
+| 圆角-大 | 0.05" | 小圆角 |
+| 元素内边距 | 0.1" ~ 0.15" | 紧凑 |
+| 元素间距 | 0.1" ~ 0.2" | 紧凑 |
+| 页面边距 | 0.3" | 较窄 |
+| 区块间距 | 0.25" ~ 0.35" | 紧凑 |
+
+### Soft & Balanced（柔和均衡）
+
+**视觉特征**: 适中的圆角、舒适的留白、专业又不失亲和。
+
+| 类别 | 值 (英寸) | 说明 |
+|---|---|---|
+| 圆角-小 | 0.05" | 小圆角 |
+| 圆角-中 | 0.08" | 中等圆角 |
+| 圆角-大 | 0.12" | 较大圆角 |
+| 元素内边距 | 0.15" ~ 0.2" | 适中 |
+| 元素间距 | 0.15" ~ 0.25" | 适中 |
+| 页面边距 | 0.4" | 标准 |
+| 区块间距 | 0.35" ~ 0.5" | 适中 |
+
+### Rounded & Spacious（圆润宽松）
+
+**视觉特征**: 大圆角、充裕留白、友好亲切、现代感。
+
+| 类别 | 值 (英寸) | 说明 |
+|---|---|---|
+| 圆角-小 | 0.1" | 中等圆角 |
+| 圆角-中 | 0.15" | 大圆角 |
+| 圆角-大 | 0.25" | 很大圆角 |
+| 元素内边距 | 0.2" ~ 0.3" | 宽松 |
+| 元素间距 | 0.25" ~ 0.4" | 宽松 |
+| 页面边距 | 0.5" | 较宽 |
+| 区块间距 | 0.5" ~ 0.7" | 宽松 |
+
+### Pill & Airy（胶囊通透）
+
+**视觉特征**: 全圆角胶囊形、大量留白、轻盈通透、品牌展示感强。
+
+| 类别 | 值 (英寸) | 说明 |
+|---|---|---|
+| 圆角-小 | 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 圆角示例
+
+```javascript
+// 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. 外层容器 >= 内层圆角
+
+```javascript
+// 正确：外 > 内
+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" x 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 | 专业，信息清晰 |