超级原型套件

品牌套件

画布文件夹包含画板：您构建的 HTML 画板。该技能向同一文件夹添加第二种行——公司发布的图片，以形状形式布局，而非画板。包括标志、字体样本、商店截图、社交帖子、广告创意、新闻照片。

关键在于按列进行比较。行代表表面，而非资产类型，因此 X 上的头像位于 Instagram 上的头像之上，再位于 TikTok 上的头像之上，任何与其他不一致的头像会作为列中的断裂点显现，而非您需要另行寻找的问题。

在收集之前请阅读 references/sources.md。这是按产出顺序排列的每个表面操作手册，包含调用说明。在编写清单和连接生成器时请阅读 references/manifest.md；其中包含模式、验证脚本和 gen.py 规则。

您需要产出的内容

canvases/<slug>/
  assets/brand/
    manifest.json          记录源：按规范顺序排列的行
    identity/  social/  stores/  ads/  press/
  gen.py                   读取 manifest，将其行追加到 layout.json
  layout.json              画布和品牌页面实际渲染的内容

assets/brand/ 是 assets/ 中画布唯一分配 URL 的部分。生成器会将 assets/ 下的其他所有内容以内联 data: URI 形式嵌入画板，因此需要单独形状的图片必须在此存放。

七个步骤

切勿先编写 manifest。 manifest 中的每个文件必须已通过验证。未通过的文件将被删除；它不会获得带有说明的 manifest 条目。

1. 查看完成示例。 应用内置了十二个示例。列出它们并打印其中一个的行：

   KIT="$(sp root)"
   ls "$KIT"/canvases/*/assets/brand/manifest.json
   python3 -c 'import json,sys
   for r in json.load(open(sys.argv[1])): print(len(r["images"]), r["title"])' \
     "$KIT/canvases/claude-ios/assets/brand/manifest.json"
   

   sp 未找到？运行 sh <sp-canvas skill dir>/scripts/install.sh（Windows：install.ps1）并遵循该技能的 references/install.md。其 stderr 上的 [super-prototyping:notice] 行包含自身规则：完成步骤，然后执行其指示。
2. 公司自有品牌或新闻套件。 全分辨率标志、字体和颜色值来源于此，因此先检查。请参阅 references/sources.md。
3. 商店列表。 最可靠的批量来源，API 一次性返回所有截图。
4. 社交媒体。 每个平台的头像、横幅以及 4-8 个发布视觉内容。首先验证每个账户——请参阅下面的“验证账户，而非句柄”。
5. 营销网站和新闻室。 主页主图、功能页面插图、og:image 卡片、新闻照片。
6. 验证每个文件。 字节、扩展名、尺寸、大小、重复项。references/manifest.md 包含验证脚本。必须输出 NO PROBLEMS。
7. 编写 manifest，连接 gen.py，重新生成，在浏览器中查看。

行是固定词汇表

行标题来自此列表，您编写的行必须作为它的子序列出现：按此顺序，跳过不适用的任何行。

Logo & wordmark · Typeface · Art direction · Applied identity ·
X · Instagram · TikTok · YouTube · LinkedIn ·
App Store · Google Play · Microsoft Store ·
Announcement cards · Paid advertising · Press photography

首先是身份，然后每个平台对应一行。其中两个标题不是自明的，因此与已提供的文件夹匹配：

• Art direction 是公司自身发布的图像风格：插图系统、主图、摄影处理、角色研究、指南图。
• Applied identity 是应用在实物上的身份：产品 UI、海报、标识、活动舞台、商品。

不要自行发明行标题。如果该产品不存在某个表面，则将其省略：缺少某行是正确的，空行是错误，而包含其他材料的行是虚假的。

数量

内置的十二个文件夹包含 50 到 144 个资产，多数在 70 到 120 之间。覆盖多个表面是重点，因此每个社交平台 4-8 个发布视觉内容胜过来自一个商店的四十张截图——但商店行需要包含商店中的所有内容，在这些文件夹中为 4 到 20 个。

五个决定包含内容的规则

来源是二值的，绝不允许猜测

"theirs" 表示公司发布的内容。"archive" 表示由策划的品牌档案发布，且档案只有在为每个项目注明原始来源和日期时才视为可信。如果两者都无法确定，则该资产不能收录。 这就是此规程存在的全部理由：图片必须声明来源，由第三方策划的内容绝不能冒充为公司发布的内容。

验证账户，而非句柄

不要相信您收到的句柄，包括写在规范中的。确认它能够解析，确认它已通过验证（在有验证的地方），并且确认属于正确的公司。被抢占和休眠的仿冒账户很常见：有一次，X 上的单纯 @tiktok 被发现是不相关的本地优惠账户，而公司的账户是 @tiktok_us。

在报告中说明您使用了哪些句柄和商店 ID，以及哪些是错误的。

HTTP 200 绝非页面存在的证据

营销网站和新闻室通常是单页应用，会对任何路径（包括您编造的）返回 HTTP 200。请检查渲染后的 <title>。真实文章有其独特的标题；编造的 slug 会获得网站的通用标题：

curl -sL "$URL" | grep -o '<title>[^<]*</title>'

首先在同一网站上对故意编造的 slug 运行该命令，以便了解其通用标题外观。任何返回通用标题的 slug 都不存在：将其丢弃，并丢弃从它获取的任何内容。

相同字节算一个资产

在每次下载批次之后，从画布文件夹中运行：

find assets/brand -type f -exec md5 -r {} \; | sort | awk '{print $1}' | uniq -d

必须不输出任何内容。如果哈稀值冲突，请删除新副本。裁剪和缩放后的图片在字节上不完全相同，此处没有工具能捕获——需通过目视检查，并保留较大的版本。

扩展名必须与字节匹配

file <path> 是权威依据，而非您下载的 URL。曾发生过 PNG 保存为 .jpg、WebP 保存为 .png 以及 HTML 挑战页面保存为 .jpg 的情况。重命名以匹配。HEIF 需转换而非重命名，因为此处的浏览器无法渲染：

sips -s format jpeg in.heic --out out.jpg

文件存放位置

分组	存放内容
identity	标志、字标、字体样本、颜色、艺术方向、应用身份
social	X、Instagram、TikTok、YouTube、LinkedIn
stores	App Store、Google Play、Microsoft Store
ads	付费广告创意、公告卡片
press	新闻照片

使用这五个名称；不要发明平行名称。按内容命名文件（x-avatar.jpg、appstore-iphone-03.jpg、wordmark-black.svg）。

某些文件夹已在 assets/brand/ 下存放图片，生成器会将其内联到画板中而非作为行绘制——例如，模型使用的头像照片。这些不是品牌材料；保持原样，不要编入 manifest。在开始之前找到它们：

git ls-files assets/brand/

打印出的每个路径都应放入验证脚本的 IGNORE 集合中，路径相对于画布文件夹编写，这也是脚本进行对比的方式。

连接生成器

在文件夹的其他目录常量旁边添加一行常量：

BRAND_DIR = OUT / "assets" / "brand"

以及在该文件夹完成其行列表的位置添加一行代码。此处的生成器有两种形态，请匹配您面前的具体实现：

    rows += json.loads((BRAND_DIR / "manifest.json").read_text())        # 在 layout() 内部
LAYOUT["rows"] += json.loads((BRAND_DIR / "manifest.json").read_text())  # 模块级 LAYOUT

品牌行应位于每个画板行之后，读取是无条件的，没有 if BRAND_DIR.exists()。仅在 manifest 存在后才添加该行，否则 python3 gen.py 会因读取而引发 FileNotFoundError。

然后运行 python3 gen.py 并检查 layout.json 的差异是否为纯新增。如果它删除了行，请停止并阅读 references/manifest.md 中的“gen.py 必须是无操作”部分；您发现了一个真正的错误，重新生成将会造成损坏。

画布无需进一步更改即可拾取该文件夹：行会渲染，“品牌套件”按钮出现在工具栏中，并且该文件夹会加入品牌页面的切换器。

在浏览器中验证后再报告

在开发服务器上打开该文件夹的两个页面：

http://127.0.0.1:<port>/?canvas=<slug>            画布
http://127.0.0.1:<port>/brand.html?canvas=<slug>  品牌套件

在品牌套件页面上运行此检查，而非画布上。惰性加载意味着未滚动到视图中的图片永远不会失败，因此强制加载并计数：

const imgs = [...document.querySelectorAll("main img")];
for (const i of imgs) i.loading = "eager";
await Promise.allSettled(imgs.map((i) => i.decode()));
imgs.filter((i) => i.naturalWidth === 0).length;  // 必须为 0

画布将其品牌行绘制为 tldraw 形状，并剔除屏幕外的行，因此在那里进行同样的计数不具证明力。应选择缩放以适应并目视检查。

报告

• 验证脚本的完整输出，包括行表格。
• 公司是否发布正式品牌或新闻套件，及其 URL。
• 您使用并验证的账户、句柄和商店 ID，以及任何错误、休眠、被抢占或属于不同公司的项。
• 您拒绝的每个候选资产及原因：404、被屏蔽、非第一方、过小、重复、错误公司。
• 您无法访问的内容，分为不存在的项和存在但被屏蔽的项。

明确陈述的空白胜过虚假充实的 manifest。诚实的“此产品没有 Microsoft Store 列表”比一行他人的截图更有价值。