黄金空间
根据需求创建具有刻意构图和可编辑源的视觉作品。遵循简报中的内容、品牌、媒介、尺寸和风格。当被要求制作海报或图片时,直接产出作品,而不是停留在设计建议、计划或图像生成提示上。
选择并交付作品
- 按照用户要求的格式交付:可编辑的 SVG,或诸如 PNG、JPEG、WebP 等光栅格式。这些是互斥的最终输出,无需同时提供两种。当未指定格式时,对于适合矢量的作品选择 SVG,对于摄影或绘画风格的作品选择光栅。在必要时简要说明选择理由。
- 对于适合矢量的海报、社交媒体图形、扁平插图、图表和图标,默认创建并保存一个完整的
.svg文件。用户无需单独要求 SVG。如果渲染可用,同时提供一个 PNG 预览,但不要替换可编辑的主文件。明确要求其他格式时,以该要求为准。 - 光栅海报或扁平插图可以作为中间 SVG 构图,并使用可用的渲染器导出。交付请求的光栅文件;只有在请求或对交接有用时才包含其 SVG 源。切勿仅更改文件扩展名来假装渲染或编码了请求的格式。
- 对于摄影、写实或绘画风格图像,通过可用的图像生成或编辑工具应用相同的构图约束。阅读 references/image-direction.md 了解该工作流程。交付请求的光栅图像。如果同时也要求 SVG,在可行时创建一个独立的矢量解释版本,并说明任何细节损失;不要静默替换请求的视觉风格。
- 将光栅图像放入 SVG 内部属于混合构图,不是完全可编辑的矢量作品。仅在相关时提供,清晰标注嵌入的光栅部分,并保留实时文本和独立的矢量覆盖层。不要将其描述为下面所述的便携式矢量主文件。
- 使用用户的输出目录和与所选格式匹配的文件名,例如
poster.svg或poster.png。 当文件工具可用时写入文件,并在交接中提供链接。如果文件写入不可用,则返回完整的 SVG 源代码。代码围栏是备选方案,不能替代可用工具能够创建的文件。
建立构图
使用提供的设计简报。如果细节缺失,选择合理的默认值并简要说明。仅当缺失的答案会实质性改变结果时才提问。对于现有设计,保留其用途和有用的视觉语言。
确定信息、焦点元素、阅读顺序、输出尺寸以及最小的预期显示尺寸。在生成之前,形成一个紧凑的内部设计规范:焦点位置、比例或网格、安全边距、间距关系、角色划分、调色板以及任何受保护的文案区域。使用该规范构建 SVG 或指导图像工具;仅在最终解释中命名原则是不够的。对于具体的比例和光学决策,请阅读 references/composition.md。
- 将黄金分割比
phi = (1 + sqrt(5)) / 2,约1.618,视为一种可选的关系。一个可用的分割大约是61.8% / 38.2%在边距和装订线之后。将其与等列、三分法或内容主导的布局进行比较。只有当内容和光学平衡受益时才保留它。切勿声称黄金比例能证明美感,或添加螺旋图形来暗示高级感。 - 赋予留白明确功能:分隔主题、连接相关项、保护可读性或创造焦点。内部间距通常应小于组之间的间距。不要强制规定空白画布的统一百分比。
- 通过刻意的大小、粗细、位置和空间差异构建层次。使用对齐和重复间隔使关系可见。当几何对齐的圆形、对角线和文字看起来偏离中心时进行调整。
- 使调色板和字体服务于主题。确保正文在交付尺寸下清晰可读;不要为了挽救拥挤的构图而缩小文字。不要为了填充空间而编造文案。
- 对于信息图形和界面,使用标签或形状以及颜色来传达含义。对照实际背景检查对比度。颜色阈值和适用性请参阅构图参考文档。
构建可编辑的 SVG 主文件
在生成或编辑 SVG 之前,包括用于光栅导出的中间源,请阅读 references/svg-contract.md。默认是一个静态、自包含、纯矢量的可编辑主文件。本节适用于 SVG 创作;光栅输出不需要伪装成可编辑的矢量内容。
- 创作一个完整的 SVG 文档,包含 SVG 命名空间和正确尺寸的
viewBox。对于最终的 SVG 交付物,保存并链接.svg文件。切勿用包裹在 SVG 中的位图或预览截图替代。 - 保持独立对象可独立选择。使用描述性唯一 ID、浅层语义分组、适当时使用基本形状,仅在曲线需要时使用紧凑路径。不要将整个设计变成一个复合路径。
- 在主文件中将文本保留为实时
<text>/<tspan>。声明字体系列和后备字体,并披露替换风险。可选的轮廓化分发副本是独立作品;轮廓化会失去文本可编辑性。 - 优先使用呈现属性和简单的变换。避免在便携式主文件中使用外部依赖、脚本、嵌入的光栅内容、HTML、动画、滤镜效果和 CSS 驱动的外观。仅在具有可见目的时使用本地渐变或剪裁定义。对兼容性敏感的功能需要在预期的编辑器中进行检查,而不是做出未经测试的兼容性声明。
- 在清理现有文件时,保留 ID、实时文本、分组和有用的精度。不要静默运行破坏性优化或扁平化源主文件。
仅当 assets/starter.svg 的结构适合简报时才对其进行适配。其比例、方向、颜色和风格是示例,不是要复制到每个输出中的默认值。
检查并交付
对于最终或中间 SVG,当 Python 可用时,运行打包的结构检查器:
python <skill-directory>/scripts/check_svg.py artwork.svg
修复错误。检查每个警告;它是审查请求,而不是设计不佳的自动证据。--strict 也会在警告时失败;--json 输出机器可读的报告。检查器涵盖保守的创作配置文件,并非所有有效的 SVG。它不衡量视觉质量、对比度、剪裁、路径几何或跨编辑器保真度。不要称其为安全清理器。
对于光栅交付,验证实际的编码格式、像素尺寸、宽高比以及请求的背景或透明度。PNG或合适的 WebP 可以保留 Alpha 通道;JPEG 需要故意的纯色背景。在交付尺寸下检查压缩和边缘质量。不要将 PNG 或 JPEG 发送到 SVG 检查器。
在交接之前,根据设计规范检查实际视觉效果:
- 预期的主题或信息是否是入口点,并具有清晰的阅读顺序?
- 安全边距是否保护了基本内容,焦点周围是否有有目的的空间?
- 组内间隙和组间间隙是否明显不同,没有意外的相切?
- 所选比例是否适合内容,而不会缩小或拥挤?
- 文本、颜色关系、基线和笔画粗细在目标尺寸下是否清晰易懂且连贯,没有意外的剪裁或编造的文字?
在交付尺寸下渲染 SVG 并在可能时渲染一个较小的预览。检查输出并在交付前修正观察到的问题;不要仅仅列出遵循的规则。对光栅输出应用相同的视觉审查。公式和结构静态检查无法保证美学质量。如果有可用的编辑器,打开 SVG 主文件并验证文本和代表性形状是否可以独立选择和更改。如果渲染或编辑器验证不可用,请报告此限制,不要声称已通过。
以所选格式交付实际文件(如果文件写入不可用,对于 SVG 任务,交付完整的 SVG 源代码),并附带一个关于构图、字体和实际执行的检查的简短说明。包括精确尺寸和(在相关时)所选比例。保持预览与源文件分开。除非请求,否则不要添加设计论文。尊重纯 SVG 或纯光栅的交接。