活动海报设计是做什么的？

对于用户： 发送一条消息，例如：

使用来自 https://github.com/greatopomu/claude-assets 的 poster-design 技能，为 [品牌] 设计 5 张 Instagram 海报。这是他们的网站/旧传单：[链接或文件]。

就这样。Claude 会询问它需要的任何其他信息。

对于 Claude： 此文件告诉你如何完成整个任务。从头到尾遵循它。尽量减少用户的工作量：询问一次，然后开始工作。

第 0 部分：设置（首先静默执行此操作）

辅助工具位于同一存储库的 tools/ 目录中。下面像 tools/export_png.py 这样的路径是相对于存储库根目录的。

获取工具。 如果你可以运行命令并且该计算机上尚未存在该仓库： git clone --depth 1 https://github.com/greatopomu/claude-assets.git 如果 git 不可用，请下载 https://github.com/greatopomu/claude-assets/archive/refs/heads/main.zip 并解压缩。
安装并检查： python -m pip install -r tools/requirements.txt 然后 python tools/check_setup.py。它会报告在此计算机上可正常工作的内容。要证明每个工具都能正常工作，请运行 python tools/selftest.py。
从模板开始： 将 skills/poster-design/template/index.html 复制到项目文件夹中。它已包含品牌标记、预览页面（适应 / 手机 / 100%）和 ?solo=pN 导出模式。

备用方案。 向用户清楚地说明适用以下哪种情况。

如果缺失此项	请改用此方法
无法运行代码（纯对话）	使用模板将海报构建为单个 HTML 文件（或 artifact）。要导出，用户需在 Chrome 中打开文件，在地址后添加 `?solo=p1`，打开开发者工具（F12 / Cmd+Opt+I）→ 命令菜单（Ctrl/Cmd+Shift+P）→ “Capture full size screenshot”。为每张海报重复此操作。
Python 工作正常但未找到浏览器	安装 Google Chrome 或 Edge，将 `CHROME_PATH` 设置为基于 Chromium 的浏览器，或者运行 `pip install playwright` 然后 `python -m playwright install chromium`。否则，请使用上面的手动导出方法。
无 Higgsfield CLI 或积分	使用库存照片（路线 A）或 ChatGPT（路线 B）。
Claude 桌面版无内置浏览器用于 ChatGPT	要求用户在 ChatGPT 中生成图像并下载，然后共享文件。
无法从互联网下载	要求用户下载选定的库存照片并共享它们。

图像工具是可选的辅助工具。如果某个工具无法运行，请以其他方式执行相同的步骤（例如，通过目视选择照片）并继续。

您要制作的内容

设计好的活动海报，看起来像是资深平面设计师制作的。它们不是顶部带有文字的 AI 图像。

使用 HTML、CSS 和 SVG 构建每张海报，然后使用无头浏览器（tools/export_png.py）将其导出为 PNG。
图像（人物、产品、地点）仅作为素材。您通过三条路线之一（第 4 部分）获取它们。图像工具永远不会制作完成的海报。
每个品牌 拥有自己的外观。方法保持不变；艺术指导每次都重新选择。切勿重复使用其他品牌的布局。

第 1 部分：首先询问（一条消息，仅询问缺失的内容）

阅读用户的消息以及任何文件或链接。然后发送一条简短消息，仅包含您仍需回答的问题。为每个问题提供一个合理的默认值，以便用户可以回复“默认值即可”。

按此顺序询问以下内容，跳过已回答的内容：

品牌基本信息： 名称、销售的产品、所在城市或国家、目标客户。
品牌资产： 徽标文件、品牌颜色（或您可以从中提取样式的网站或传单）以及任何品牌字体。
尺寸和用途： 默认为 Instagram 的 1080 × 1350。其他选项：1080 × 1080、1080 × 1920 故事、A4 或 A3 打印。
海报数量以及每张海报应包含的内容： 例如服务、优惠、活动或“您的选择”。
必须包含的详细信息： 价格、日期、电话号码、地址、网站或行动号召。未提供的任何内容都标记为占位符。
人物规则： 默认为第 6 部分中的规则。
图像： 默认为使用任何可用的内容，按以下顺序：库存照片（免费）、ChatGPT 在内置浏览器中（免费，有限制），然后 Higgsfield（付费积分）。询问是否可以使用付费积分。
保存位置： 默认为以品牌名称命名的新文件夹。

不要询问设计选择，例如样式、布局或效果。这些是您的工作。您将在第 2 部分中展示方向。

第 2 部分：计划，然后展示一个检查点

自行完成所有操作，然后向用户展示一个简短的计划以供批准。

从他们的文件中提取品牌颜色样本 使用脚本（tools/sample_colours.py）；不要猜测。计划将徽标重新绘制为清晰的 SVG，绝不使用模糊的裁剪。
研究该类别： 了解 3 到 4 个领先品牌的广告方式（布局、字体、图像、基调），包括一个本地竞争对手。借鉴思路，绝不使用资产。将注释和来源保存在 RESEARCH.md 中。
收集本地事实： 真实地点、日常习惯、人们实际使用的词语以及区域细节。区域细节示例：该州通常的车辆颜色或当地着装。
选择艺术方向： 为第 3 部分表中的每一行选择一个选项，以适合该品牌和受众。同时选择字体（Google Fonts）以及颜色的使用方式：哪个是主色，哪个是强调色，背景是什么。
撰写海报创意： 为每张海报提供一个创意、一个少于 8 个字的标题、一行以客户获得什么为首要信息的支持性文字、一个行动号召、所需的图像及其故事元素。没有两张海报共享相同的布局或故事元素。

检查点，构建前的唯一一个。 向用户展示：

颜色
2 到 3 行的艺术方向
字体
海报列表及其标题

询问“继续，还是有任何改动？”保持简短。

第 3 部分：艺术方向选择

按品牌选择。不同的品牌应在多行上有所不同。

选择	选项
明度	黑暗情绪化 · 明亮通透 · 大地色中间调 · 黑白加一种颜色
色彩使用	一种颜色主导并带有强调色 · 双色调照片 · 大胆的色块 · 中性色加品牌强调色
字体	粗犷的无衬线体 · 紧凑高挑 · 圆形几何 · 编辑风格的衬线体加无衬线体 · 手写体强调
形状	有机的块状和波浪 · 硬朗的几何角度 · 细线和网格 · 剪纸 · 圆形和弧形
照片处理	在形状上剪影 · 全出血加颜色叠加 · 照片置于形状内 · 宽幅照片带 · 着色 · 拼贴
纹理和光线	发光和光迹 · 平整干净 · 颗粒感 · 半色调圆点 · 仅柔和的阴影
布局	标题在上，图像在下 · 分屏 · 图像居中，文字环绕 · 文字主导 · 对角线 · 面板网格
故事元素	应用或界面卡片 · 贴纸或徽章 · 票根或收据 · 地图或路线 · 大数字或图表 · 引语 · 前后对比

不要默认使用深色背景配发光强调。仅当品牌需要时才使用它们。

第 4 部分：获取图像（三条路线）

使用适合每张海报的路线。在使用每张图像之前，对照人物规则（第 6 部分）进行检查。在 RESEARCH.md 中记录来源和许可证。

A. 库存照片（Pexels、Unsplash、Pixabay）。免费，真实人物和地点。

使用几个本地查询进行搜索。
在一张联系表（tools/contact_sheet.py）上比较 20 到 30 张缩略图。
拒绝以下照片：
- 错误的地点或人物
- 违反规则
- 可读的车牌或私人详细信息
- 有损信息的损坏或混乱
- 没有文字空间
下载宽度为 1600 到 2000 像素的图片。
如有必要，修复本地细节。tools/recolour.py 更改区域内的一种颜色。
让照片的形状决定布局：纵向照片适合全出血；横向照片适合作为带子或放在框架内。

B. ChatGPT 在内置浏览器中。 免费；最适合全场景。

用户必须已登录。输入详细的提示：主体、符合规则的服装、场景、光线、“portrait 4:5, no text, no logos”。
要更改一个细节，请留在同一个 ChatGPT 对话中：“Same image, change only …”。
限制： 免费计划每天大约允许 3 张图像。
获取文件： ChatGPT 的下载在浏览器窗格中不起作用。
- 最佳：让用户点击下载并告诉您文件名。
- 备用：以实际尺寸全屏显示图像，以 2 × 2 的截图块捕获它，然后使用 tools/stitch_tiles.py 拼接它们。

C. Higgsfield。 付费积分；最适合剪影。

首先检查余额和价格（higgsfield account status，higgsfield generate cost …）。
GPT Image 2.6 使用 --background transparent 可提供剪影。人物使用中等质量，物体使用低质量。基本计划大约同时运行 4 个作业。
使用 tools/clean_cutout.py 清理每个剪影周围的微弱发光。
要更改图像的一个细节，请使用 --image 将其传回，并仅描述更改。

每个图像提示 都说明：主体和动作、符合人物规则的服装、与海报氛围匹配的光线、构图、“photorealistic, no text, no logos, no watermark”，以及在全场景时为文字留出空间。

第 5 部分：构建海报

首先进行设置（从 skills/poster-design/template/index.html 开始）：

一个包含颜色标记、字体和作为 SVG 符号的徽标的 index.html
一个符合艺术方向的共享签名（徽标加行动号召样式）
一个预览页面，以真实比例显示每张海报，缩放以适应，带有适应 / 手机（390 像素宽）/ 100% 按钮
一个用于导出的 ?solo=pN 模式
从本地服务器（不是 file://）提供文件夹，并在浏览器窗格中打开它

每张海报：

一个创意： 标题、支持性文字、行动号召。
至少四层， 至少有一个元素交叉在主体前面。
一个故事元素 显示产品的工作原理，例如真实的应用程序卡片、票证、追踪器、地图或徽章。
自定义形状、渐变和光线， 而不是模板框。
在这一组中变化签名效果，同时保持共享系统。

设计原则（不可协商）。 这些是使海报看起来像机器制造的常见错误。在构建时就要考虑它们，而不仅仅是在最后。

呼吸空间。 文本与每个形状边缘、环、线、徽章和图像之间至少有 24 像素的清晰空间（40 像素更好）。圆形或环绝不能沿着、穿过或靠近文本。
无接近失误。 两个元素要么清晰且有意地重叠（重叠部分达到较小元素的四分之一或更多），要么保持足够远的距离。几乎接触或意外对齐的边缘看起来像是个错误。示例：产品顶部与后面圆的顶部对齐，或贴纸擦过盒子角落。
圆圈与面板清晰相接。 进入页脚或带子的圆圈要么在距离其 24 像素或更远处停止，要么清晰地在其下方至少 40 像素处穿过。它绝不只是擦过边缘。
清晰的包装。 在海报的实际背景颜色上检查每个剪影，而不仅仅是在白色和黑色上。只有在实际颜色上才会显示出残留的背景、锯齿边缘和实心的“磨砂”区域。
更少的装饰。 每一个额外的环、轮廓或叶子都是可能使文本拥挤的东西。如果它不增加意义，就省略它。
视觉层次。 确定阅读顺序：（1）标题或产品，（2）支持性文字，（3）故事元素，（4）签名。大小、粗细和颜色必须遵循该顺序。只有一个元素突出。
配对和分组。 每个图标紧挨着它所标记的一个事物放置，每对中具有相等的间距。每个联系细节都有自己的图标：WhatsApp 在号码旁边，Instagram 在用户名旁边。将相关项目组合在一个小标题下（“立即订购”、“可在...获得”）。用清晰的空间分隔不相关的组。
对齐。
- 徽标、标题、主体和页脚共用一个左边距。
- 页脚块顶部对齐，以便它们的小标题共享一条线。
- 徽章的行和列具有均匀、精确的间距。
换行。
- 连续文本永远不要以单个短词结尾。在标题和正文上使用 text-wrap: balance，然后阅读每一行。
- 换行应落在短语之间，而不是一个短语内部（“over oats, / guinea corn” 错误；“over / oats, guinea corn and soy pulp” 正确）。
- 标题按意思换行，在您选择的地方使用 <br>。
每件事物一个名称。 在这组海报中使用相同的产品或口味名称、成分列表和声明。在发布之前，列出每个声明（例如“不添加糖”或“100% 天然”）供客户确认。
页脚也是经过设计的。 它获得与主视觉相同的关注：层次结构、配对、对齐以及至少 36 像素的内边距。

技巧菜单（每张海报选择使用；不要全部使用）：

深度：
- 图层顺序：背景 → 纹理 → 发光或颜色场 → 形状 → 主体 → 前景元素 → 故事元素 → 用于可读性的叠加层 → 字体 → 签名
- 交叉主体的前景线、形状或卡片
- 主体从其卡片或框架中伸出
- 卡片放置在主体后面，以便手可以重叠它
光线和颜色：
- 主体后面的模糊径向发光
- 图像提示中要求的与海报匹配的边缘光
- 光迹（绘制两次的 SVG 路径：模糊发光加清晰核心）
- 使用堆叠的 filter: drop-shadow（而不是 text-shadow）的轮廓或霓虹字体
- 照片上的品牌颜色叠加：主体上清晰，文本后面实色
- 使用脚本重新校色图像（白天到夜晚，更暖）
形状和纹理：
- 带有细强调线的块状或波浪
- 弯曲或有角度的照片边缘
- 褪色的网格、点或图案
- 环和射线
- 带有路径文字（<textPath> 配合 textLength）的圆形徽章
字体：
- 一个粗体展示字体的和一个清晰文本字体的组合
- 标题行高 0.85 到 0.92，略紧

…

活动海报设计