SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场stills

stills

设计与创作

查看项目

更新于 10-28 21:25

技能介绍

Stills 是 langchain-ai/design-agent 中的一项技能，用于生成符合品牌规范的静态图片。每张静态图都是一个 HTML 页面；页面中的每个元素都是可移动、可重新设计样式或替换的图层。Chrome 负责渲染，品牌包负责提供样式，每个尺寸都是独立布局，而不是缩放副本。

用途

Stills 用于制作符合品牌规范的静态图片，例如多种尺寸的广告与横幅、社交图片、轮播图以及分页 PDF。

主要能力

  • 每张静态图是一个 HTML 页面，元素以图层形式存在，可移动、重新设计样式或替换。
  • 通过真实浏览器（Chrome）渲染，由品牌包提供样式。
  • 每个尺寸都是独立布局，而非缩放副本。
  • 提供 html2png.mjs 工具，可将 HTML 渲染为 PNG、JPEG 或 WebP 图片，支持一次调用渲染多个尺寸。
  • 提供 html2pdf.mjs 工具，可将 HTML 渲染为分页 PDF。
  • 支持品牌字体要求、品牌令牌（tokens.css）和品牌 Logo 资源。
  • 提供 brand-lint.mjs 进行品牌规范检查，review-thumb.mjs 生成审阅缩略图。

使用方式

渲染图片的命令示例：

node /workspace/tools/html2png.mjs projects/<slug>/still/comp.html --out projects/<slug>/renders \
  --name launch --size 1200x627 --size 1080x1080 --size 1080x1350 \
  --require-font "<display family>" --require-font "<text family>" [--format png|jpeg|webp] [--quality 90] [--scale 2]

渲染分页 PDF 的命令示例：

node /workspace/tools/html2pdf.mjs --html projects/<slug>/doc/doc.html --out projects/<slug>/renders/doc.pdf \
  --size 8.5x11in --brand-fonts

html2png 会为每个尺寸写出 <out>/<name>-<W>x<H>.<ext> 并打印一行 JSON。每个尺寸都会在该视口下重新加载，因此媒体查询、vw/vh 和容器查询会重新组合布局。如果必需字体未绘制、页面出错或资源加载失败，则不会写出任何内容并以退出码 1 结束；需要修复页面。--brand-fonts 要求使用每个品牌字体栈的主字体，而不是指定字体族名称。退出码 2 表示工具故障，需要报告。分页 PDF 始终通过 html2pdf 生成，绝不使用手工编写的 page.pdf()（它会舍入字形步进并导致字距聚集）。

流程：

对现有静态图的小修改（一个词、字重、颜色、尺寸）流程为：修改页面、lint、重新渲染、查看、交付。

对任务进行分类。提供的视觉稿加上“restyle”“reskin”“clean up”“resize”或“make it on brand”属于转换任务：清点源文件中的每个字符串、数字、标记和关系，除非简报另有说明，否则全部保留。新资源如果已有已交付的同类资源，则继承该同类资源的布局、字体和颜色；说明继承了什么。图表和示意图即使输出为 PNG，也交给 data-viz 处理。

找到单一信息和概念。广告只承载一个想法：某人现在能做什么、下一步是什么，以及至多一个有依据的数字。在编写 HTML 之前用一句话命名视觉概念：真实的产品时刻、鲜明的排版陈述或具体的隐喻。品牌基元不是概念，通用的点、节点或网络壁纸也绝不是概念。

选择尺寸。严格使用要求的尺寸。指定渠道但没有尺寸时，使用其主要尺寸；没有渠道的“几个尺寸”使用品牌包的格式（/workspace/brand/brand.toml）或 references/sizes-and-sets.md 中的集合。

每个布局构建一个页面。链接 /workspace/brand/tokens.css 并使用其自定义属性（var(--brand-color-…)、var(--brand-font-display)、var(--brand-font-text)）；绝不手写十六进制颜色或字体族。Logo 来自 /workspace/brand/logos/，使用真实 SVG，内联或 <img>，宽度不低于 brand.toml 中的最小宽度，并保留其留白；绝不重绘、重新着色或拉伸 Logo。共享布局的尺寸共用一个响应式页面；需要不同排列的尺寸（例如 728×90 横幅与 1080×1350 竖版）拥有自己的页面，重新组合，绝不缩放。

Lint、渲染、查看。node /workspace/tools/brand-lint.mjs <page.html>（以及 --copy 检查文字）必须以退出码 0 结束。一次调用渲染所有尺寸，然后在一张表上查看整套（node /workspace/tools/review-thumb.mjs --sheet <renders>），像可能拒绝它的审阅者一样：层级、清晰的焦点、均匀的间距、没有裁切、拥挤或孤行，整套一致。修复你不会交付的内容。

使用 upload_files 交付你查看过的每个文件，并用一行简短说明概念和你所做的调用。

在 /workspace/projects/<slug>/ 中工作：页面放在简报旁边，渲染结果放在 renders/。

品牌规范构图

  • 用词最少。标题、需求提供的内容（日期、名称、优惠）和下一步，各出现一次。没有需求未提供的副行、说明、URL、页脚或眉题。
  • 每帧一个强调元素，来自品牌自身的规则（/workspace/brand/graphic-language.md）。背景、场和字体遵循品牌包，包括其为整套选择的浅色或深色。
  • 每个元素都是图层。用品牌网格上的明确几何绝对定位承载构图的少数元素，这样“把 Logo 上移”这样的备注只需改一个属性，而不是重排。
  • 更高的孪生版本把高度花在内容上。方形布局的 4:5 版本会同时缩放元素和间距（约 1.25 倍）；如果宽度限制了字体，就把额外高度放在一个刻意的留白带中，并说明孪生版本更透气。
  • 没有装饰性项目符号（•、空点、勾选或伪元素标记），没有字体效果，没有两端对齐文本，圆角不超过品牌的最大值。
  • 图片中的代码必须有效且最新；请求形状和模型 ID 来自本次运行读取的提供商文档，而不是记忆。长行用省略号截断。
  • 真实资源优于模仿。使用产品的真实 UI、源文件的真实图片和真实 Logo。用 node /workspace/tools/fetch-asset.mjs <url> --out projects/<slug>/assets --kind image 拉取公开图片；未发布的资源需要主动索取。
  • 当选项有帮助时，渲染它们（两三个概念，每个都完成），而不是描述方向。
  • 轮播图、分页文档和演示文稿：references/sizes-and-sets.md。

适用场景

  • 多种尺寸的广告与横幅
  • 社交图片
  • 轮播图
  • 分页 PDF
  • 对现有静态图进行小修改（文字、字重、颜色、尺寸）
  • 将提供的视觉稿转换为符合品牌规范的版本

限制

  • 必需字体未绘制、页面出错或资源加载失败时，html2png 不会写出任何内容并以退出码 1 结束。
  • 退出码 2 表示工具故障，需要报告。
  • 分页 PDF 必须通过 html2pdf 生成，不能使用手工编写的 page.pdf()。
  • 绝不手写十六进制颜色或字体族，必须使用品牌令牌。
  • Logo 绝不重绘、重新着色或拉伸。
  • 需要不同排列的尺寸必须拥有自己的页面，绝不缩放。
  • 没有装饰性项目符号、字体效果、两端对齐文本，圆角不超过品牌最大值。
  • 图片中的代码必须有效且最新，请求形状和模型 ID 来自本次运行读取的提供商文档。
  • 未发布的资源需要主动索取。