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