Community图像github.com

ashuwhy/品牌识别

Logo、应用图标和商店素材制作流程:从创意简报、多轮图像模型迭代、实际尺寸对比表,到最终用代码绘制并输出所有启动器、自适应、通知、启动画面、网站图标、字体和商店素材。适用于选择Logo、制作应用图标或生成商店截图与海报。

品牌识别 是什么?

该技能为开发者提供了一套完整的品牌视觉资产生产流水线,涵盖从创意简报、AI图像模型迭代、候选方案对比测试,到最终用代码生成所有平台所需素材的端到端流程。其核心优势在于流程的耐久性:将图像模型、图标规范和商店尺寸视为可变因素,鼓励在实际渲染前检查当前平台规范,并用“(checked 2026-10)”标记最可能变化的尺寸。该技能支持任何应用,关键工具包括`make_versus.py`(生成对比表)和`make_fonts.py`(字体子集化),它们可直接运行;其余脚本(提示、候选绘制、素材渲染器、商店帧、海报)虽为特定应用编写,但提供了可借鉴的方法。流程要求使用SVG字符串进行代码级重绘,通过启动器图标实际遇到的圆角遮罩、模糊视图、系统主题色、多像素尺寸等真实场景进行对比测试,强调“信任对比表胜过个人偏好”。此外,技能还涵盖了自托管字体子集化(避免网络依赖导致构建失败)、通过无头Chrome渲染商店帧至当前商店尺寸、以及确保所有素材(Logo套件、自适应图标、通知图标等)从同一代码函数生成,以实现任意尺寸清晰显示并支持深色模式自动切换。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ashuwhy/claude-skills/tree/HEAD/skills/brand-identity

Installed? Explore more 图像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

品牌识别 是做什么的?

以下流程是耐久部分。图像模型、图标规格和商店尺寸会变化;在渲染任何内容之前,请检查当前平台规范,并且 (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)。

相关技能