From 664849dc734390e9ba7ba0edc4a4de913ba09a3d Mon Sep 17 00:00:00 2001 From: fengmengqi Date: Tue, 26 May 2026 22:20:17 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E6=8F=90=E4=BA=A4=EF=BC=9ASV?= =?UTF-8?q?G=20PPT=E6=8A=80=E8=83=BD=E4=B8=8E=E9=A1=B9=E7=9B=AE=E9=85=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - SVG布局规划、视觉风格、技术合规技能 - ppt-master技能下载脚本（从GitHub获取） - .gitignore配置 Co-Authored-By: Claude Opus 4.6 --- .gitignore | 28 ++++++++ scripts/download_ppt_master.sh | 22 +++++++ skills/1-svg-layout-planner/SKILL.md | 52 +++++++++++++++ skills/2-general-svg-aesthetics/SKILL.md | 65 +++++++++++++++++++ .../3-ppt-svg-technical-compliance/SKILL.md | 30 +++++++++ 5 files changed, 197 insertions(+) create mode 100644 .gitignore create mode 100644 scripts/download_ppt_master.sh create mode 100644 skills/1-svg-layout-planner/SKILL.md create mode 100644 skills/2-general-svg-aesthetics/SKILL.md create mode 100644 skills/3-ppt-svg-technical-compliance/SKILL.md diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1e5a555 --- /dev/null +++ b/.gitignore @@ -0,0 +1,28 @@ +# Generated / derivable outputs +backup/ +svg_final/ +exports/ + +# OS files +.DS_Store +Thumbs.db +desktop.ini + +# Claude Code +.claude/ +.omc/ + +# Python +__pycache__/ +*.pyc + +# ppt-master +ppt-master/ +projects/ + +# Large binaries +*.pptx + +# Extracted PPT images +*_files/ + diff --git a/scripts/download_ppt_master.sh b/scripts/download_ppt_master.sh new file mode 100644 index 0000000..fbb15f4 --- /dev/null +++ b/scripts/download_ppt_master.sh @@ -0,0 +1,22 @@ +#!/bin/bash +# Download ppt-master skill from GitHub +# Usage: bash scripts/download_ppt_master.sh + +REPO_URL="https://github.com/hugohe3/ppt-master.git" +SKILL_DIR="skills/ppt-master" + +# Remove existing +rm -rf "$SKILL_DIR" + +# Clone to temp directory +TMPDIR=$(mktemp -d) +git clone --depth 1 "$REPO_URL" "$TMPDIR" + +# Copy only the skills directory +cp -r "$TMPDIR/skills/ppt-master" "$SKILL_DIR" + +# Clean up +rm -rf "$TMPDIR" + +echo "[Done] ppt-master skill downloaded to $SKILL_DIR/" +echo " $(find "$SKILL_DIR" -type f | wc -l) files" diff --git a/skills/1-svg-layout-planner/SKILL.md b/skills/1-svg-layout-planner/SKILL.md new file mode 100644 index 0000000..f0c185f --- /dev/null +++ b/skills/1-svg-layout-planner/SKILL.md @@ -0,0 +1,52 @@ +--- +name: 1-svg-layout-planner +description: 负责 SVG 图片的骨骼构建：严格的坐标网格、防碰撞防重叠约束及排版几何公式。 +--- + +# SVG 视觉结构与布局规划师 (Layout Planner) + +**核心职责**：解决大模型“排版空间想象力弱”的缺陷，强制使用固定的数学公式和网格规范，杜绝元素交叠和畸形比例。 + +## 1. 绝对数学坐标与布局网格 (Math & Grids) + +为保证不穿模，必须严格套用以下绝对网格系统（基于画布 `1600x900`）： + +* **三列等分布局 (3-Column)**： + * 卡片宽度 `w = 420` + * 间距 `gap = 60` + * 三个卡片的 `x` 坐标严格固定为：`x1 = 140`, `x2 = 620`, `x3 = 1100` +* **四列等分布局 (4-Column)**： + * 卡片宽度 `w = 300` + * 间距 `gap = 40` + * 四个卡片的 `x` 坐标严格固定为：`x1 = 120`, `x2 = 460`, `x3 = 800`, `x4 = 1140` +* **上下间距规则**： + * 行与行之间的距离（Y轴 Gap）至少为 `60px`。 + +## 2. 文本防碰撞与呼吸感公式 (Text Padding Formulas) + +文字溢出卡片是低级错误，必须使用公式精确计算 `y` 坐标与背景块的高度： + +* **基准字号放大 (Baseline Scaling)**：基于 1600x900 的大画布，绝对**禁止**使用小于 16px 的字！ + * 主标题：`48px` - `60px` + * 卡片标题：`32px` - `36px` + * 正文段落：`20px` - `24px` +* **多行文本 Y 轴增量法则**：两行 `` 之间的 `y` 坐标差值（即行距）**必须绝对大于字号**！ + * 例如字号 `20px`，下一行的 `y` 必须等于上一行 `y + 36px`（提供16px物理行间距）。 +* **段落大间距法则 (Paragraph Margin)**：不同信息块之间（例如一个小标题与其下方的另一个小标题之间）必须留有喘息空间。**新段落的 Y 轴增量应该等于 正常行距 + 24px**。 +* **自适应容器高度公式**：内部 `` 高度计算必须预留充足的底部 Padding 和标签高度： + * `Height = 顶部Padding(32) + 所有文字内容总高度 + 底部标签高度(如有,如40) + 底部Padding(32)` +* **绝对坐标计算示例**： + * 假设内部容器坐标为 `y="100"`，`padding="32"`。 + * 内部第一行**小标题**（字号24）：`y = 100 + 32 + 24 = 156`。 + * 内部第二行**正文**（字号20）：`y = 156 + 16(行距) + 20 = 192`。 + * 内部第三行**另一正文**（字号20）：`y = 192 + 16(行距) + 20 = 228`。 + * 下一段落**新小标题**（字号24，增加段落间距）：`y = 228 + 24(段落大间距) + 24 = 276`。 + +## 3. 文本对齐铁律 (Text Alignment) + +* **左对齐原则**：除非是卡片正中心的一个极简单词，否则**所有的多行列表、描述文案，必须严格左对齐**。统一使用相同的 `x` 坐标（如 `x="container_x + 32"`）。 +* **慎用居中**：禁止对带有标点符号的长句子使用 `text-anchor="middle"`，大模型无法准确判断渲染宽度，极易导致两边超出卡片。 + +## 4. 连线与中心锚点 (Arrow Alignment) + +* 如果要画连接两张卡片的箭头，箭头的 `y` 坐标必须精确等于相邻卡片的垂直中心点：`arrow_y = container_y + container_height / 2`。 diff --git a/skills/2-general-svg-aesthetics/SKILL.md b/skills/2-general-svg-aesthetics/SKILL.md new file mode 100644 index 0000000..5be6fc4 --- /dev/null +++ b/skills/2-general-svg-aesthetics/SKILL.md @@ -0,0 +1,65 @@ +--- +name: 2-general-svg-aesthetics +description: 负责 SVG 图片的通用商业级视觉风格。定义现代、高级、克制的配色与层次质感，剔除老旧落后审美。 +--- + +# 通用美学设计标准 (Aesthetics) + +**核心职责**：强制剔除“2003时代 Word PPT”的老旧审美，确保生成的每一页都是顶级咨询公司或科技大厂的极简高级画风。 + +## 1. 审美防呆禁令 (Strict Aesthetic Bans) + +* **禁用巨型落后图形**：**绝对禁止**使用巨大的 `` 或 `` 作为主体内容的背景！所有的内容载体必须是圆角矩形 `` 或直接在留白区排版。 +* **禁用厚重页眉**：**禁止**在页面顶部画一个巨大的、厚重的高饱和纯色方块作为标题背景。 + * **正确的高级做法**：页面标题使用左对齐大号深色文字，下方垫一根极细（2px）的彩色品牌线，让出巨大的呼吸空间。 + +## 2. 克制的色彩体系 (Controlled Palette) + +严禁使用高饱和度的大红大绿。标准调色板： +* **背景色 (Background)**：画布必须是大面积的纯白 `#FFFFFF` 或浅灰白 `#F8FAFC`。 +* **主品牌色 (Primary)**：商务蓝 `#2563EB` 或 深邃蓝灰 `#1E293B`。仅用于强调线、小色块标签或图示中心节点。 +* **文字色阶 (Typography)**：主标题 `#0F172A`（极深灰），副标题/正文 `#475569`（中灰），注释 `#94A3B8`。 +* **边框颜色 (Strokes)**：卡片边框必须是极细、极淡的，例如 `stroke="#E2E8F0" stroke-width="1.5"`。 + +## 3. 大字号与视觉对比度 (Visual Hierarchy & Scale) + +因为画布尺寸是 `1600x900`（非常大），普通网页的 14px 放在这里就像蚂蚁一样小。**必须全面放大字号**，并通过字号、颜色和字重建立极强的视觉层级： +* **页面主标题**：`font-size="48" 或 "56"`，加粗，`fill="#0F172A"`。 +* **卡片主标题**：`font-size="32" font-weight="bold" fill="#0F172A"`。 +* **卡片内小标题/标签**：`font-size="24" font-weight="bold" fill="#1E293B"`。 +* **正文列表/描述**：`font-size="20" fill="#475569"`（这已经是正文的最小极限了，**绝对禁止**使用小于 16px 的字号）。 +* **严禁科学计数法滥用 ``**：如果要写 `10^-3`，请直接输出文本 `10^-3` 或 `10e-3`。**绝对禁止**使用 `` 或 `baseline-shift` 做上标/下标，这会导致 PPT 渲染完全错位飞出屏幕！ + +## 4. 极致专业级矢量图标 (Ultra-Professional Icons) + +**坚决拒绝 Emojis 或敷衍的单线条图形**。图标是提升 PPT 质感的灵魂，必须体现你的编码细节能力： + +* **复杂的 `` 路径细节**：如果你要画“服务器”，不要只画一个方框。要画出外机箱 ``、层级指示灯 `` 和通风散热刻度线 ``；如果要画“数据处理”，画出立体的堆叠层或带连接线的节点树。 +* **Duotone (双色调) 质感设计**：专业图标通常包含一个带透明度（`opacity="0.1"`）的彩色底层形状（如柔和的圆形背景），再加上一个颜色更深、对比更强的线框 `` 叠加在上面。 +* **大尺寸占位**：将图标封装在 `48x48` 或 `64x64` 的 `` 容器中。 +* **线框质感**：统一样式的 `fill="none" stroke="#2563EB" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"`。 + +## 5. 现代组件参考 (Modern Component Snippets) + +**极简科技风标题（替代老旧大蓝块）：** +```xml + +什么是 Vibe Coding? + +``` + +**带微小视觉点缀的标准卡片：** +```xml + + + + + + + + + 自然语言交互 + 用日常语言描述业务需求 + 无需死记语法与 API 调用细节 + +``` diff --git a/skills/3-ppt-svg-technical-compliance/SKILL.md b/skills/3-ppt-svg-technical-compliance/SKILL.md new file mode 100644 index 0000000..55776e2 --- /dev/null +++ b/skills/3-ppt-svg-technical-compliance/SKILL.md @@ -0,0 +1,30 @@ +--- +name: 3-ppt-svg-technical-compliance +description: 负责 SVG 图片的血液：PPT底层兼容性与SVG语法约束。必须遵守以确保在 PowerPoint 中 100% 可编辑且不走样。 +--- + +# PPT 兼容与工程合规 (Technical Compliance) + +**核心职责**：确保生成的 SVG 代码能够被 `convert_svgs_to_pptx` 完美转换。PPTX 的解析引擎很脆弱，必须严格遵守以下降级与内联约束。 + +## 1. 样式处理协议：去 CSS 化 (Zero-CSS Policy) + +* **全内联属性**：**严禁使用 `