fengmengqi 664849dc73 初始提交：SVG PPT技能与项目配置

- SVG布局规划、视觉风格、技术合规技能
- ppt-master技能下载脚本（从GitHub获取）
- .gitignore配置

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-05-26 22:20:17 +08:00

4.6 KiB

Raw Permalink Blame History

name	description
2-general-svg-aesthetics	负责 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)

极简科技风标题（替代老旧大蓝块）：

<!-- 轻量化页眉 -->
<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" />

带微小视觉点缀的标准卡片：

<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>

4.6 KiB Raw Permalink Blame History Unescape Escape