poster-design

Name: poster-design
Author: arnavpuri

github.com/arnavpuri设计与 UI17160 次安装4 周前更新

代码仓库

关于 poster-design

poster-design 是用于制作活动、促销、公告和产品发布海报的设计技能，适合需要数字或印刷版式的创作者。默认采用 Gemini 生成图像，也可用 HTML/CSS/SVG 处理文字密集或需要编辑的海报，并输出 PNG/PDF。

主要功能

01生成 Gemini 海报图像
02通过 HTML/CSS/SVG 制作可编辑海报
03提供印刷尺寸、出血与分辨率参考
04支持多种海报构图与文字层级
05检查海报关键信息与输出

适用场景

01制作活动或演出海报
02设计促销与产品发布海报
03准备适用于印刷或数字渠道的海报

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/arnavpuri/designskills --skill poster-design

安装后在 Claude Code 中输入/poster-design确认已加载。

详细介绍

海报设计

为活动、促销、公告和产品发布打造引人注目的海报。默认输出为 Gemini 生成的、比例和分辨率合适的图像；如果文案较多或必须保持可编辑，请使用 HTML/CSS/SVG，然后渲染为 PNG/PDF。

步骤 1：加载设计背景

首先阅读 .agents/design-context.md——其中包含品牌颜色（十六进制）、字体和风格原型
如果文件不存在，请使用 design-context 默认备用设置，并告知用户已使用默认设置
海报通常比其他格式有更大的创意发挥空间，但设计仍应以品牌颜色和字体为基准

Gemini 图像生成流程

流程/CLI：image-generation。提示词编写、裁剪和文字叠加备用方案：graphic-design 步骤 3。

根据步骤 2 的表格选择 Gemini 比例；印刷使用 --size 4K，数字用途使用 2K
要求留出边距：“让所有文字距离每条边至少 5%”——避免裁切和出血
阅读输出 PNG：逐字检查活动名称、日期、时间、场地、价格和 URL——日期错误会毁掉整张海报。每次后续调整只修正一个问题；如果小字仍然生成错误，请将其改用代码叠加

提示词示例

活动海报：“为 [event name] 制作活动海报。采用 [style] 设计和 [color palette] 配色。顶部以大号展示文字 ‘[event name]’。底部标注日期 ‘[date]’ 和场地 ‘[venue]’。”
演唱会海报：“为 [artist/band] 在 [venue] 举办的演唱会制作海报。使用深色背景，搭配 [neon/vibrant] 强调色。艺人名称使用粗体窄体字。叠加做旧纹理。底部标注日期和门票信息。”
促销传单：“制作促销海报。以 [color] 突出展示 ‘[discount]% OFF’。下方放置产品图片。在横幅中加入紧迫提示文字 ‘[deadline]’。采用简洁、充满活力的零售版式。”

步骤 2：确定海报类型和尺寸

标准尺寸

格式	印刷尺寸	300 DPI 像素尺寸（裁切尺寸）	Gemini 比例	用途
A4 纵向	210 x 297mm	2480 x 3508	2:3 或 3:4，然后裁剪	标准传单
A3 纵向	297 x 420mm	3508 x 4961	2:3 或 3:4，然后裁剪	大型海报
US Letter	8.5 x 11in	2550 x 3300	3:4，然后裁剪	标准美国传单
US Tabloid	11 x 17in	3300 x 5100	2:3，然后裁剪	大型美国海报
18 x 24in	18 x 24in	5400 x 7200	3:4	标准海报
24 x 36in	24 x 36in	7200 x 10800	2:3	大型海报
网络海报	N/A	800 x 1200	2:3	数字分发
社交媒体海报	N/A	1080 x 1350	4:5	Instagram 纵向

（在 72 DPI 下，A4 = 595 x 842，Letter = 612 x 792——仅用于屏幕预览。）

印刷规格

**出血：**每边的背景都应超出裁切边缘 3mm（公制）或 0.125in（美国）。带出血的 A4 = 216 x 303mm = 2551 x 3579px（300 DPI）。将 Gemini 输出裁剪至出血尺寸，而非裁切尺寸
**安全边距：**文字和徽标应距离裁切边缘至少 3-5mm（0.125-0.25in）
**分辨率：**手持传单按最终尺寸使用 300 DPI；供 1m 以上距离观看的大型海报使用 150-200 DPI 即可。Gemini 4K 的长边最高约为 4K px——足以让 A4/Letter 达到约 300 DPI，让 A3/Tabloid 达到约 200 DPI；对于 18 x 24in 及更大的尺寸，请进行放大或使用矢量/代码重新制作
**颜色：**Gemini 和浏览器输出 RGB。请询问印刷商是否接受 RGB PDF；如果要求 CMYK，请使用印刷商的 ICC 配置文件转换（Pillow ImageCms 或排版工具），并重新检查饱和的蓝色/绿色，因为这些颜色偏移最大
设置 DPI 元数据：img.save("poster.png", dpi=(300, 300))——决定质量的是像素，而非元数据
**可读距离：**观看距离每增加 10 英尺（3m），标题字高约需增加 1 英寸（25mm）

步骤 3：选择构图框架

Z 字形布局

人眼会自然沿着 Z 字形浏览。适合阅读顺序清晰的海报。

[Logo/Brand].............[Date]
.............................
......[MAIN VISUAL].........
.............................
[Details]...........[CTA/URL]

布局：

左上：品牌标识／识别元素
右上：关键日期或标签
中央：主视觉／标题
左下：活动详情
右下：行动号召（CTA）或购票链接

焦点式（居中）

所有元素都从同一个中心点向外延伸。适合大胆、图形感强的海报。

         [Decorative Top]
     -------------------------
     |                       |
     |    [MAIN HEADLINE]    |
     |    [Visual Element]   |
     |    [Subheadline]      |
     |                       |
     -------------------------
         [Details / Footer]

分层／重叠

元素相互重叠并堆叠，营造纵深感。适合动感、现代风格的海报。

Background layer:  Full-bleed gradient or image
Middle layer:      Large transparent text or shape
Content layer:     Headline + details on semi-transparent card
Top layer:         Decorative accents, floating elements

分割式构图

画布分为两个不同区域（垂直或对角分割）。

[Image/Visual Half] | [Text/Info Half]

或对角分割：

.poster { position: relative; }
.visual-half {
  clip-path: polygon(0 0, 65% 0, 45% 100%, 0 100%);
  position: absolute; inset: 0;
}
.text-half {
  clip-path: polygon(65% 0, 100% 0, 100% 100%, 45% 100%);
  position: absolute; inset: 0;
}

网格式布局

使用可见或不可见网格构建结构化布局。适合信息密集型海报。

.poster-grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 40px;
}
.poster-grid .headline { grid-column: 1 / -1; }
.poster-grid .visual { grid-column: 1; }
.poster-grid .details { grid-column: 2; }
.poster-grid .footer { grid-column: 1 / -1; }

第 4 步：海报的字体层级

海报需要极为鲜明的字体层级。标题必须能从远处读清（无论是实体距离还是滚动浏览距离）。

四级层级

/* Fixed-size poster canvas: set `container-type: inline-size` on .poster so cqw
   scales with the poster width, not the browser window */
/* Level 1: Display / Headline -- the hook */
.poster-headline {
  font-family: var(--font-heading);
  font-size: clamp(48px, 10cqw, 160px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase; /* optional, depends on style */
}

/* Level 2: Subheadline -- context */
.poster-subheadline {
  font-family: var(--font-heading);
  font-size: clamp(20px, 4cqw, 48px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* Level 3: Body / Details -- the specifics */
.poster-body {
  font-family: var(--font-body);
  font-size: clamp(14px, 2.2cqw, 24px);
  font-weight: 400;
  line-height: 1.5;
}

/* Level 4: Fine print / Meta -- secondary info */
.poster-meta {
  font-family: var(--font-body);
  font-size: clamp(11px, 1.5cqw, 16px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

海报的字体处理方式

/* Stacked headline -- each word on its own line */
.stacked-headline {
  display: flex;
  flex-direction: column;
  line-height: 0.9;
}
.stacked-headline span {
  display: block;
}
.stacked-headline span:nth-child(odd) {
  font-style: italic;
  font-weight: 300;
}

/* Mixed weight headline */
.mixed-weight span.light { font-weight: 300; }
.mixed-weight span.bold { font-weight: 800; }

/* Oversized first letter */
.drop-cap::first-letter {
  font-size: 3em;
  float: left;
  line-height: 0.8;
  margin-right: 8px;
  font-weight: 800;
}

/* Knockout text (text reveals background) */
.knockout-text {
  background: url('texture.jpg') center/cover;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

第 5 步：背景技巧

渐变网格

.gradient-mesh {
  background:
    radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.4) 0%, transparent 50%),
    radial-gradient(at 100% 0%, rgba(236, 72, 153, 0.4) 0%, transparent 50%),
    radial-gradient(at 100% 100%, rgba(34, 197, 94, 0.3) 0%, transparent 50%),
    radial-gradient(at 0% 100%, rgba(245, 158, 11, 0.3) 0%, transparent 50%),
    linear-gradient(180deg, #0F172A, #1E293B);
}

带渐变的照片叠加

.photo-bg {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.8) 100%),
    url('event-photo.jpg') center/cover;
}

几何图案

.geo-pattern {
  background-color: var(--primary);
  background-image:
    linear-gradient(30deg, rgba(255,255,255,0.05) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.05) 87.5%),
    linear-gradient(150deg, rgba(255,255,255,0.05) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.05) 87.5%),
    linear-gradient(30deg, rgba(255,255,255,0.05) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.05) 87.5%),
    linear-gradient(150deg, rgba(255,255,255,0.05) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.05) 87.5%);
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px;
}

噪点纹理叠加

<svg style="position:absolute;inset:0;width:100%;height:100%;opacity:0.06;pointer-events:none;">
  <filter id="noiseFilter">
    <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
  </filter>
  <rect width="100%" height="100%" filter="url(#noiseFilter)"/>
</svg>

半色调效果（复古）

<svg style="position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;opacity:0.15;">
  <pattern id="halftone" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
    <circle cx="3" cy="3" r="1.5" fill="currentColor"/>
  </pattern>
  <rect width="100%" height="100%" fill="url(#halftone)"/>
</svg>

第 6 步：活动信息布局

活动基本信息区块

<div class="event-details">
  <div class="detail-row">
    <span class="detail-icon">&#x1F4C5;</span>
    <div>
      <strong>Saturday, March 28, 2026</strong>
      <span>Doors open 7:00 PM</span>
    </div>
  </div>
  <div class="detail-row">
    <span class="detail-icon">&#x1F4CD;</span>
    <div>
      <strong>The Grand Hall</strong>
      <span>123 Main Street, San Francisco, CA</span>
    </div>
  </div>
  <div class="detail-row">
    <span class="detail-icon">&#x1F3AB;</span>
    <div>
      <strong>$25 Early Bird / $35 Door</strong>
      <span>tickets.example.com</span>
    </div>
  </div>
</div>

.event-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: rgba(255,255,255,0.05);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
.detail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.detail-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

海报的 CTA 按钮

.poster-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--accent);
  color: #000;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
}
/* Print: a CTA is a label, not a button -- pair it with a short URL or QR code (min ~2cm) */

第 7 步：风格变化

演唱会／音乐海报

深色背景（黑色、深紫色、藏青色）
高对比度的霓虹色或鲜艳点缀色
以醒目的艺人姓名作为主导元素
做旧或粗粝的纹理
装饰元素：声波、扬声器、黑胶唱片
字体：粗体窄体无衬线字体或展示字体

科技活动／会议

简洁、现代的渐变背景
几何形状和抽象图案
圆形边框的演讲者头像
科技主题装饰元素（电路图案、代码片段）
字体：简洁的无衬线字体，详情使用等宽字体
颜色：蓝色、紫色、青绿色

促销／推广

明亮、吸睛的颜色（红色、黄色、橙色）
以最大的元素展示折扣百分比
用醒目的方式处理 “SALE” 文案
紧迫感提示（“限时优惠”、倒计时）
简洁的产品图片
字体：数字使用醒目的窄体粗体，详情使用简洁的无衬线字体

产品发布

以产品图片为主视觉（尺寸大、光线充足）
文字尽量精简——让产品自己说话
高级感的渐变背景
醒目展示发布日期
产品周围使用微妙的辉光效果
字体：优雅、字距宽松、现代

极简活动

单一主色搭配白色／黑色
留出大量空白
以字体为核心——文字本身就是设计
细线和几何点缀
只呈现必要信息，不加装饰
精致、如画廊般的美感

复古／怀旧活动

暖色调配色（#C84B31、#F4E8C1、#2D1B00）
半色调圆点图案
衬线或板衬线字体
仿旧纸张纹理背景
边框和装饰性分隔线
做旧／粗糙边缘效果

第 8 步：装饰元素

/* Gradient rule */
.divider { height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); margin: 24px 0; }
/* Ornamental divider: lines either side of a centered label */
.ornament-divider { display: flex; align-items: center; gap: 16px; }
.ornament-divider::before, .ornament-divider::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.3; }
/* Blurred floating shapes behind content */
.floating-shape { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.2; pointer-events: none; }
/* Inset border frame (keep it inside the safe margin for print) */
.poster-frame { position: absolute; inset: 16px; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; pointer-events: none; }

质量检查清单

支持 Markdown

登录后评论