graphic-design

平面设计

用于生成精美视觉图形的核心技能。支持两种输出模式：

1. AI 图像生成（默认）——使用 Gemini 3.1 Flash Image Preview，根据提示词和参考图生成像素级精准的图形
2. 代码生成——生成可用于生产环境的 HTML/CSS/SVG，制作原生 Web 图形

社交媒体帖子、海报、广告和丰富视觉效果适合使用 AI 生成。交互式 Web 图形、动画元素或需要可编辑 HTML 的场景适合使用代码。

---

步骤 1：加载设计背景

开始任何设计工作前：

1. 首先阅读 .agents/design-context.md。提取主色、辅色和强调色（hex）、标题和正文字体，以及风格类型
2. 如果文件不存在，请使用 design-context 中的默认后备设置，并告知用户输出使用的是默认设置。建议运行 design-context，以获得符合品牌风格的效果

---

步骤 2：分析需求

确定图形的用途：

意图	处理方式	关键元素
促销	醒目吸睛	大标题、CTA、产品图
信息传达	层次清晰、易于阅读	结构化内容、图标、数据
情感表达	营造氛围	摄影、色调、精简文案
庆祝	活力喜庆	动感形状、明亮色彩、彩纸／粒子效果
公告	简洁权威	突出日期／详情、专业风格
品牌认知	符合品牌风格、令人难忘	突出 Logo、以品牌色为主

确定所需元素：

• 标题文本
• 副标题或辅助文本
• 产品图或视觉焦点
• CTA 或行动文案
• 品牌元素（Logo、颜色）
• 尺寸／宽高比

---

步骤 2b：分析产品图（如有提供）

1. 识别主色——从图像中提取 3–5 种关键颜色
2. 评估构图——确定主体位置和留白区域
3. 判断氛围——暖色／冷色、活力／平静、奢华／休闲
4. **选择搭配策略：**和谐搭配（沿用图像颜色）、对比搭配（使用互补色突出主体），或单色搭配（降低饱和度并叠加品牌色）

---

步骤 3：Gemini 图像生成流程（默认）

除非输出必须是可编辑 HTML、动画，或包含较长／精确文案（此时使用步骤 7），否则请使用此流程。API 和 CLI 详情见 image-generation；本节介绍设计层。综合步骤 4–6 中关于构图、颜色和字体的决策。

撰写提示词

**用叙述方式描述场景，不要只罗列关键词。**将精确文案放在双引号中，使用 hex 代码，描述空间布局，指出风格，并说明排除项（完整检查清单见 image-generation 步骤 2）。

Create a [style] [format] for [purpose].
Scene: [foreground, background, how elements are arranged]
Colors: ["navy blue #1a2b4a background with coral #ff6b6b accents"]
Typography: [large bold sans-serif headline "[TEXT]" in white, upper third]
Mood: [energetic, calm, professional, playful]
Exclude: [no borders, no clip art, no extra text]

如果有产品图，通过 --image product.png 传入：

将此产品放在醒目的渐变背景上（#1a2b4a 到 #ff6b6b）。保持产品、标签和 Logo 与照片完全一致。在顶部添加一个白色粗体无衬线大标题“NEW ARRIVAL”。添加几何强调形状。

选择支持的宽高比，再裁剪到精确像素尺寸

Gemini 仅支持输出 1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9, 1:4, 4:1, 1:8, 8:1——不要在提示词中填写像素尺寸并期待其得到遵循。对于其他目标尺寸（1200x628、300x250、A4），请以最接近的宽高比生成，再使用 --resize 居中裁剪并调整尺寸：

python <image-generation>/scripts/gemini-generate.py --prompt-file prompt.txt --aspect-ratio 16:9 --size 2K \
  --resize 1200x628 --output graphic.png

• 告知 Gemini 将文字和关键主体放在裁剪后仍会保留的区域内（“将所有文字放在中间 80% 的区域内”）
• 屏幕用途使用 --size 2K，印刷或大型展示使用 4K
• 从同一张母版生成多个尺寸：不使用 --resize 生成一次，然后运行 python <image-generation>/scripts/export-sizes.py master.png --group social --out exports/（提供社交媒体、广告、视频预设；--focus x,y 可让主体保持在画面内）

验证，再优化

绝不要交付未经查看的图片：

1. 读取输出的 PNG。 检查：每个词的拼写是否与需求完全一致，文字在实际显示尺寸下是否清晰易读，品牌颜色是否正确，是否有一个明确的视觉焦点，重要内容是否落在裁切区域或 UI 覆盖区域，产品／徽标是否变形
2. 每轮只修复一个问题 -- --image graphic.png --prompt 'Change "EVERYTHNG" to "EVERYTHING". Change nothing else.' -- 然后再次读取结果
3. 两次文字修复失败后，重新生成，并使用提示词“no text, leave the upper third clear”，然后将文案作为代码叠加层添加：

<style>body{margin:0}</style>
<div class="canvas" style="width:1200px;height:628px;position:relative;background:url('visual.png') center/cover;">
  <h1 class="headline" style="position:absolute;left:64px;top:56px;max-width:60%;color:#fff;">NEW ARRIVAL</h1>
</div>

node <graphic-design>/scripts/render.mjs overlay.html --size 1200x628 --out final.png   # add --scale 2 for retina

<graphic-design> 是此技能的目录。脚本会等待网页字体加载完成，严格按请求的尺寸输出；如果内容超出画布（文字被裁切），则会发出警告并以 3 退出。然后读取 final.png 进行确认。

---

第 4 步：运用构图原则

三分法

将画布划分为 3x3 网格。将关键元素置于四个网格线交点（33%/67%），而不是中间的格子里。

/* Focal point centered on the upper-left power point */
.focal-point {
  position: absolute;
  left: 33.33%;
  top: 33.33%;
  transform: translate(-50%, -50%);
}

黄金比例（1:1.618）

用于确定元素之间的尺寸关系：

• 如果主标题为 48px，副标题应约为 30px（48 / 1.618）
• 如果主内容区域为 600px，侧边栏／强调区域应约为 370px

视觉焦点层级

每张图都需要一个明确的视觉焦点。按重要性分层：

1. 主要焦点 -- 视线首先落到的元素（最大、对比度最高）
2. 次要元素 -- 补充信息（中等大小、适度对比）
3. 三级细节 -- 小字、徽标、装饰（最小、对比度最低）

Z 字形（适用于文字较多的图）

视线移动路径：左上 -> 右上 -> 斜向左下 -> 右下

F 字形（适用于信息密集型布局）

视线先沿顶部水平扫视，然后向下移动，扫视更短的水平行。

---

第 5 步：选择配色方案

从设计上下文中的颜色入手，然后采用以下策略：

互补色强化

Primary + its complement for maximum contrast
Use 60-30-10 rule: 60% dominant, 30% secondary, 10% accent

渐变技巧

/* Smooth multi-stop gradient */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Mesh-style gradient (multiple radials) */
background:
  radial-gradient(at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
  radial-gradient(at 80% 20%, rgba(255, 119, 115, 0.3) 0%, transparent 50%),
  radial-gradient(at 50% 50%, rgba(76, 29, 149, 1) 0%, rgba(15, 23, 42, 1) 100%);

/* Conic gradient for unique effects */
background: conic-gradient(from 45deg, #12c2e9, #c471ed, #f64f59, #12c2e9);

/* Animated gradient */
background: linear-gradient(270deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientShift 8s ease infinite;

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

为图片叠加颜色

.image-with-overlay {
  position: relative;
}
.image-with-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.7), rgba(124, 58, 237, 0.7));
  mix-blend-mode: multiply;
}

---

第 6 步：处理排版

主标题层级

/* Display headline -- the main event */
.headline {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 8cqw, 5rem); /* cqw = % of .canvas width, not the browser window */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Subheadline -- supporting context */
.subheadline {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.4;
  opacity: 0.85;
}

/* Detail text -- dates, fine print */
.detail {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

文字效果

• 渐变文字：background: linear-gradient(...) + background-clip: text + -webkit-text-fill-color: transparent
• 描边文字：-webkit-text-stroke: 2px currentColor + -webkit-text-fill-color: transparent
• 发光文字：使用多层 text-shadow，逐渐增加模糊半径／扩散范围，同时降低不透明度
• 浮雕效果：透明颜色 + 浅色 text-shadow + 深色 bg-clip 文字
• 纵深／3D 文字：叠加多层 text-shadow，每层偏移 1px，颜色逐渐加深

---

第 7 步：代码输出路径

输出结构

选择代码路径（用于可编辑、动画或文字较多的输出）时，生成带有内嵌 CSS 的独立 HTML 文件。使用无头 Chromium 将其渲染为精确尺寸的 PNG（参见第 3 步），并在交付前读取截图：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=[HeadingFont]:wght@700;800&family=[BodyFont]:wght@400;500&display=swap" rel="stylesheet">
  <style>
    /* Reset and canvas setup */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    .canvas {
      width: [WIDTH]px;
      height: [HEIGHT]px;
      position: relative;
      overflow: hidden;
      container-type: inline-size; /* enables cqw units inside */
      /* Background, gradients, etc. */
    }

    /* Layer structure */
    .background-layer { /* gradients, patterns, images */ }
    .content-layer { /* text, CTAs, key elements */ }
    .decoration-layer { /* shapes, accents, overlays */ }
  </style>
</head>
<body>
  <div class="canvas">
    <div class="background-layer">...</div>
    <div class="content-layer">...</div>
    <div class="decoration-layer">...</div>
  </div>
</body>
</html>

高级 CSS 技巧

使用 clip-path 创建创意形状

/* Diagonal section */
.diagonal { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }

/* Blob shape */
.blob { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }

/* Circle reveal */
.circle-reveal { clip-path: circle(40% at 50% 50%); }

/* Custom wave */
.wave-bottom {
  clip-path: path('M0,200 C150,250 350,150 500,200 L500,0 L0,0 Z');
}

玻璃拟态

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
}

用混合模式融入图片

.image-overlay {
  background-image: url('product.jpg');
  background-size: cover;
  background-blend-mode: overlay; /* or multiply, screen, soft-light */
  background-color: rgba(37, 99, 235, 0.5);
}

SVG 滤镜

使用内联 <svg> 和 <filter> 制作噪点（feTurbulence + feColorMatrix + feBlend multiply）和发光效果（feGaussianBlur + feMerge）。

装饰元素

• 浮动圆形：绝对定位、径向渐变、filter: blur(40px)
• 网格／点状图案：使用低不透明度的 linear-gradient 或 radial-gradient 设置 background-image，并使用较小的 background-size

微妙动画

• 浮动：在 4s 内以 ease-in-out infinite 的方式执行 translateY(0 -> -10px -> 0)
• 脉冲发光：在 2-3s 内交替改变 box-shadow 的强度
• 闪烁：将线性渐变的背景尺寸设为 200%，并为 background-position 设置从 -200% 到 200% 的动画

---

第 8 步：针对不同风格的框架

代码路径的起点；对于 Gemini，将相同的线索转化为提示词（参见 image-generation 风格模式）。

/* Minimalist: single accent, generous whitespace, thin rules, max 2 colors + neutrals */
.minimalist-canvas { background: #FAFAFA; padding: 60px; }
.minimalist-canvas .headline { font-size: 3rem; font-weight: 300; color: #171717; letter-spacing: -0.03em; }

/* Bold / Vibrant: saturated gradients, oversized type, geometric overlays */
.bold-canvas { background: linear-gradient(135deg, #FF6B6B, #FFE66D); }
.bold-canvas .headline { font-size: 5rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; }

/* Luxurious: dark ground, gold accents, serif, refined spacing */
.luxury-canvas { background: #0A0A0A; color: #F5F0E8; }
.luxury-canvas .headline { font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 400; letter-spacing: 0.05em; }
.luxury-canvas .accent { color: #D4AF37; border: 1px solid rgba(212, 175, 55, 0.3); }

/* Playful: bright colors, rounded everything, organic shapes */
.playful-canvas { background: #FFF8F0; border-radius: 24px; }
.playful-canvas .headline { font-family: 'Fredoka', sans-serif; font-size: 3rem; color: #E03E3E; transform: rotate(-2deg); }

/* Corporate: blue/gray palette, structured 12-column grid, clean data */
.corporate-canvas { background: #FFFFFF; font-family: 'Inter', sans-serif; }
.corporate-canvas .headline { font-size: 2.5rem; font-weight: 700; color: #1E3A5F; }

/* Retro: warm palette #C84B31 #2D1B00 #F4E8C1 #ECDBBA, halftone (SVG), distressed texture */
.retro-canvas { background: #F4E8C1; color: #2D1B00; }
.retro-canvas .headline { font-family: 'Playfair Display', serif; font-size: 4rem; font-weight: 900; }

/* Brutalist: B&W, raw borders, monospace, visible grid, overlapping elements */
.brutalist-canvas { background: #FFFFFF; border: 4px solid #000000; }
.brutalist-canvas .headline {
  font-family: 'Space Mono', monospace; font-size: 4rem; font-weight: 700; text-transform: uppercase;
  color: #FFFFFF; mix-blend-mode: difference; /* white + difference = black on white, inverts over black blocks */
}

---

步骤 9：质量检查清单

交付任何图形前，请确认：

• 颜色与设计上下文中的调色板一致
• 使用指定字体排版（如有需要，通过 Google Fonts 加载）
• 视觉层次清晰——一眼就能看出应该先看哪里
• 文本对比度符合 WCAG 2.x：普通文本为 4.5:1，大号文本（>=24px，或 >=18.66px 粗体）以及 CTA 按钮等 UI 形状为 3:1
• 间距恰当——没有任何内容显得拥挤
• 尺寸符合所需规格
• 生成的图像：已读取输出的 PNG 并检查每个字词；已裁剪到精确像素尺寸
• 代码输出：独立完整（字体除外），已读取并检查渲染后的截图
• 装饰元素起到增强效果，而非喧宾夺主
• 设计符合预期的风格类型
• 所有文本内容准确无误，拼写正确

---

专业技巧

1. 从背景着手——先营造合适的氛围，再添加内容
2. 运用不透明度——不透明度为 0.05 到 0.15 的形状能营造层次感，又不会分散注意力
3. 叠加渐变——多个半透明渐变可以打造丰富、独特的背景
4. 限制调色板——大多数图形最多使用 3 种颜色，另加中性色
5. 字号对比——标题至少要比正文大 3 倍
6. 留白也是设计——空白不是浪费，而是留出呼吸空间
7. 按实际尺寸测试——打开 HTML 文件并以 100% 缩放查看，确认可读性
8. 使用 CSS 自定义属性——统一定义颜色，并在各处引用以保持一致