664849dc73
- SVG布局规划、视觉风格、技术合规技能 - ppt-master技能下载脚本（从GitHub获取） - .gitignore配置 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
3.2 KiB
3.2 KiB
| name | description |
|---|---|
| 1-svg-layout-planner | 负责 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。
- 行与行之间的距离（Y轴 Gap）至少为
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。