Community图像github.com

黄金留白构图

用刻意的留白、比例、层级、字体和色彩做海报、社交图、插画、示意图和图标,并交出真正的 SVG 或位图文件。

黄金留白构图 是什么?

要海报、主视觉、图标或示意图时使用。生成时就套上留白、比例、层级和色彩约束,再检查成稿。交付的是可编辑 SVG,或 PNG、JPEG、WebP,而不是停在设计建议或提示词。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/guardyanz/golden-space/tree/HEAD/skills/golden-space

Installed? Explore more 图像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

黄金空间

根据需求创建具有刻意构图和可编辑源的视觉作品。遵循简报中的内容、品牌、媒介、尺寸和风格。当被要求制作海报或图片时,直接产出作品,而不是停留在设计建议、计划或图像生成提示上。

选择并交付作品

  • 按照用户要求的格式交付:可编辑的 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 或纯光栅的交接。

相关技能