664849dc73
- SVG布局规划、视觉风格、技术合规技能 - ppt-master技能下载脚本（从GitHub获取） - .gitignore配置 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
66 lines
4.6 KiB
Markdown
66 lines
4.6 KiB
Markdown
---
|
||
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>
|
||
```
|