初始提交：SVG PPT技能与项目配置
- SVG布局规划、视觉风格、技术合规技能 - ppt-master技能下载脚本（从GitHub获取） - .gitignore配置 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
fengmengqi
commit
664849dc73
28
.gitignore
vendored
Normal file
28
.gitignore
vendored
Normal file
@ -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/
|
||||||
|
|
||||||
22
scripts/download_ppt_master.sh
Normal file
22
scripts/download_ppt_master.sh
Normal file
@ -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"
|
||||||
52
skills/1-svg-layout-planner/SKILL.md
Normal file
52
skills/1-svg-layout-planner/SKILL.md
Normal file
@ -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 轴增量法则**：两行 `<text>` 之间的 `y` 坐标差值（即行距）**必须绝对大于字号**！
|
||||||
|
* 例如字号 `20px`，下一行的 `y` 必须等于上一行 `y + 36px`（提供16px物理行间距）。
|
||||||
|
* **段落大间距法则 (Paragraph Margin)**：不同信息块之间（例如一个小标题与其下方的另一个小标题之间）必须留有喘息空间。**新段落的 Y 轴增量应该等于 正常行距 + 24px**。
|
||||||
|
* **自适应容器高度公式**：内部 `<rect>` 高度计算必须预留充足的底部 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`。
|
||||||
65
skills/2-general-svg-aesthetics/SKILL.md
Normal file
65
skills/2-general-svg-aesthetics/SKILL.md
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
---
|
||||||
|
name: 2-general-svg-aesthetics
|
||||||
|
description: 负责 SVG 图片的通用商业级视觉风格。定义现代、高级、克制的配色与层次质感，剔除老旧落后审美。
|
||||||
|
---
|
||||||
|
|
||||||
|
# 通用美学设计标准 (Aesthetics)
|
||||||
|
|
||||||
|
**核心职责**：强制剔除“2003时代 Word PPT”的老旧审美，确保生成的每一页都是顶级咨询公司或科技大厂的极简高级画风。
|
||||||
|
|
||||||
|
## 1. 审美防呆禁令 (Strict Aesthetic Bans)
|
||||||
|
|
||||||
|
* **禁用巨型落后图形**：**绝对禁止**使用巨大的 `<ellipse>` 或 `<circle>` 作为主体内容的背景！所有的内容载体必须是圆角矩形 `<rect rx="8">` 或直接在留白区排版。
|
||||||
|
* **禁用厚重页眉**：**禁止**在页面顶部画一个巨大的、厚重的高饱和纯色方块作为标题背景。
|
||||||
|
* **正确的高级做法**：页面标题使用左对齐大号深色文字，下方垫一根极细（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 的字号）。
|
||||||
|
* **严禁科学计数法滥用 `<tspan>`**：如果要写 `10^-3`，请直接输出文本 `10^-3` 或 `10e-3`。**绝对禁止**使用 `<tspan dy="...">` 或 `baseline-shift` 做上标/下标，这会导致 PPT 渲染完全错位飞出屏幕！
|
||||||
|
|
||||||
|
## 4. 极致专业级矢量图标 (Ultra-Professional Icons)
|
||||||
|
|
||||||
|
**坚决拒绝 Emojis 或敷衍的单线条图形**。图标是提升 PPT 质感的灵魂，必须体现你的编码细节能力：
|
||||||
|
|
||||||
|
* **复杂的 `<path>` 路径细节**：如果你要画“服务器”，不要只画一个方框。要画出外机箱 `<rect>`、层级指示灯 `<circle>` 和通风散热刻度线 `<path>`；如果要画“数据处理”，画出立体的堆叠层或带连接线的节点树。
|
||||||
|
* **Duotone (双色调) 质感设计**：专业图标通常包含一个带透明度（`opacity="0.1"`）的彩色底层形状（如柔和的圆形背景），再加上一个颜色更深、对比更强的线框 `<path>` 叠加在上面。
|
||||||
|
* **大尺寸占位**：将图标封装在 `48x48` 或 `64x64` 的 `<g>` 容器中。
|
||||||
|
* **线框质感**：统一样式的 `fill="none" stroke="#2563EB" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"`。
|
||||||
|
|
||||||
|
## 5. 现代组件参考 (Modern Component Snippets)
|
||||||
|
|
||||||
|
**极简科技风标题（替代老旧大蓝块）：**
|
||||||
|
```xml
|
||||||
|
<!-- 轻量化页眉 -->
|
||||||
|
<text x="80" y="80" font-family="Microsoft YaHei" font-size="42" font-weight="bold" fill="#0F172A">什么是 Vibe Coding?</text>
|
||||||
|
<rect x="80" y="100" width="80" height="4" fill="#2563EB" />
|
||||||
|
```
|
||||||
|
|
||||||
|
**带微小视觉点缀的标准卡片：**
|
||||||
|
```xml
|
||||||
|
<g id="Standard-Card" transform="translate(120, 200)">
|
||||||
|
<!-- 降级物理阴影（兼容 PPT） -->
|
||||||
|
<rect x="4" y="4" width="300" height="200" rx="8" fill="#000000" opacity="0.03" />
|
||||||
|
<!-- 实体框 -->
|
||||||
|
<rect x="0" y="0" width="300" height="200" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5" />
|
||||||
|
<!-- 左侧点缀细线（提升高级感） -->
|
||||||
|
<rect x="0" y="24" width="4" height="24" fill="#2563EB" rx="2" />
|
||||||
|
<!-- 绝对左对齐的防溢出文本 -->
|
||||||
|
<text x="24" y="40" font-family="Microsoft YaHei" font-size="20" font-weight="bold" fill="#0F172A">自然语言交互</text>
|
||||||
|
<text x="24" y="72" font-family="Microsoft YaHei" font-size="14" fill="#475569">用日常语言描述业务需求</text>
|
||||||
|
<text x="24" y="96" font-family="Microsoft YaHei" font-size="14" fill="#475569">无需死记语法与 API 调用细节</text>
|
||||||
|
</g>
|
||||||
|
```
|
||||||
30
skills/3-ppt-svg-technical-compliance/SKILL.md
Normal file
30
skills/3-ppt-svg-technical-compliance/SKILL.md
Normal file
@ -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)
|
||||||
|
|
||||||
|
* **全内联属性**：**严禁使用 `<style>` 标签或外部 CSS 类。**所有的样式（`fill`, `stroke`, `font-family`, `font-weight`, `font-size`）必须作为 XML 的内联属性写在元素标签上。
|
||||||
|
* **显式加粗**：PPT 解析引擎经常忽略 CSS 的 `font-weight: bold`，必须使用 `<text font-weight="bold">`。
|
||||||
|
|
||||||
|
## 2. 文本引擎协议 (Text Engine)
|
||||||
|
|
||||||
|
* **字体后备栈**：`font-family` 必须首选 Windows 预装字体。中文优先 `"Microsoft YaHei", sans-serif`；英文/数字优先 `"Arial", "Inter", sans-serif`。
|
||||||
|
* **绝对行坐标**：**禁用相对排版（如 `<tspan dy="1.2em">`）**。如果文字有多行，尽量输出多行独立的 `<text x="..." y="...">` 标签，强制计算它们的绝对 y 坐标。这样在 PPT 里取消组合时，就是独立完美的文本框，不会叠在一起。
|
||||||
|
* **显式带单位尺寸**：所有字号最好带有 `px` 单位，如 `font-size="24px"`，部分 PPT 解析引擎对于无单位尺寸会处理出错。
|
||||||
|
|
||||||
|
## 3. 图元安全与降级 (Safe Elements & Downgrades)
|
||||||
|
|
||||||
|
* **正交倒角法则**：连线折角严禁出现 90 度直角的锯齿。必须在折线 `<path d="...">` 上加上 `stroke-linejoin="round"`，或手动使用圆弧贝塞尔曲线。
|
||||||
|
* **降级物理阴影**：**严禁使用复杂的 `<filter id="shadow">`（PPT 会丢失效果）。**若要阴影，使用一个比原图向右下偏移 4px、填充色为黑色、`opacity="0.05"` 的 `<rect>` 垫在原图下面。
|
||||||
|
* **无引用图层扁平化**：禁用 `<use>` 和 `<foreignObject>`。所有的图标直接用 `<path>` 画出，或使用基础几何图形组合。
|
||||||
|
|
||||||
|
## 4. 层级解耦 (Group Structure)
|
||||||
|
|
||||||
|
使用具有语意 `id` 的 `<g>` 标签对“业务模块（如底框+文字+图标）”进行打包。
|
||||||
|
如果有整体移动需求，使用 `<g transform="translate(x, y)">`，这能在用户进入 PPT 取消组合时，保持组内元件的相对位置不乱。
|
||||||
Loading…
Reference in New Issue
Block a user