品牌识别 是做什么的?
以下流程是耐久部分。图像模型、图标规格和商店尺寸会变化;在渲染任何内容之前,请检查当前平台规范,并且 (checked 2026-10) 标记了最可能变动的尺寸。
脚本位于 ~/claude-skills/tools/brand/。make_versus.py(步骤3中的对比表)和 make_fonts.py(步骤5)可在任何应用上直接运行。其余部分(提示、候选绘制、素材渲染器、商店帧、海报)是为特定应用编写的,并绘制其标记,因此请阅读这些部分以了解方法并进行适配。它们需要 rsvg-convert、Pillow、fontTools 和无头 Chrome。
1. 简报
一份共享的简报,粘贴在每个概念之前(tools/brand/logo-prompts.md 是一个已完成的示例):
- 使用位置(启动器图标、商店列表),因此必须在48px下清晰可辨,并能以单色剪影形式存在
- 扁平矢量、实心形状、无渐变、阴影、3D、纹理或文字
- 精确的十六进制调色板,以及“没有其他东西”
- 一个居中的标记,位于圆角矩形块上
- 每次运行在一个网格中呈现多个变体,因此一次运行探索一个概念,而不是押注于一个渲染结果
- 该类别的禁用词列表
完成条件:简报写满一个段落,每个概念作为额外一行。
2. 轮次
- 第一轮:六到七个概念加上一个开放式简报。选择一个。
- 第二轮:保留获胜者,每个提示在一个维度上进行变化(几何与圆角、强调色的含义、留白、小尺寸单色压力测试)。用文字描述字母的解剖结构;模型容易混淆不同字体中的相似字形。
- 在继续之前,让团队以外的人看。 一个脚本、符号或颜色在观众眼中的呈现方式,可能会毁掉一个提示无法捕捉的标记。一个外部的意见值得一轮。
- 第三轮测试:一个孩子看一次后能否凭记忆画出?任何素描均署名为绘制者。
3. 对比表
用代码(SVG字符串)重绘两到三个最终候选,然后让它们接受启动器图标实际会遇到的情况(make_versus.py 从SVG中进行所有操作):
- 圆形和圆角矩形遮罩
- 模糊的“一瞥”视图
- 浅色和深色系统色调下的主题(单色)图标
- 48、32、24 和 16px,并放大显示
- 墨水占比,以及每个候选者的一行结论
信任对比表胜过个人偏好。一个需要解释的标记输给一个首先能自我表达的标记。
完成条件:一个候选者在对比表中胜出,并且我能用一句话说明原因。
4. 一张图,所有素材
获胜者成为一个带参数的函数(颜色、低于某个尺寸时细节开关)。一个脚本从中渲染所有素材;icon-assets.md 包含了矩阵和每个尺寸背后的规则。在应用中,使用来自相同数字的组件绘制标记,而不是使用PNG图片,这样在任何尺寸下都清晰,并且能在深色模式下切换颜色。
然后在仓库的文档中提供一个Logo套件(组合标志和独立标记、浅色和深色、SVG和PNG),这样就没有人会截屏应用作为Logo。
5. 字体
自托管字体,使用 fontTools 子集化为 woff2(产品所需的脚本及其货币和符号),保留可变轴。一个下载字体的构建存在网络依赖,可能导致部署失败。(checked 2026-10: next/font/google 曾因此导致 Vercel 构建失败。)
6. 商店素材和海报
- 通过无头 Chrome 将商店帧渲染为 HTML,使用商店当前尺寸
(checked 2026-10: Play 手机截图 1080x1920,特色图形 1024x500,列表图标 512px RGB 无透明度)。在绘制的框架内使用真实手机的真实截屏。Chrome 可能在写入后以非零退出,因此将输出文件视为成功信号。 - 任何屏幕上均无真实用户的姓名或数据,文案中的每项声明均对当前构建版本真实有效。
- 使用
play.py icon和play.py art上传(参见expo-release)。列表图标是独立素材;没有构建会更改它。 - 海报和缩略图:为应用可能进行的每种裁剪进行设计,并将每个渲染结果上传到新路径(参见
mobile-performance,Images)。