Logo 工坊 · Logo Studio
迭代生成 Logo,保留每一版原稿,并将“品牌标志”和“应用图标”作为不同产物处理。
Triggers
Activate when
- 用户说“生成 Logo”“设计应用图标”“去掉 Logo 白底”或“放大图标主体”。
- 用户要求迭代、选用或发布某一版 Logo。
- The user asks to create, refine, select, or publish a logo or app icon.
Do not activate when
- 用户只想查找已有官方 Logo;交给 Logo 查找类 Skill。
- 用户只想压缩、裁剪或转换普通图片,且不涉及品牌标志设计。
核心原则
- 不覆盖:每次生成保存为新版本
v{N}-{描述}。 - 项目驱动:根据产品功能、使用场景和品牌气质设计,不按项目名字面联想。
- 分离产物:透明品牌标志、应用图标和平台派生资源分别制作,禁止相互冒充。
- 视觉占比优先:用可见图形边界判断大小,不用源文件画布或透明留白判断。
- 真实场景验收:在 favicon、桌面、Dock、主屏幕等最终使用环境验证视觉重量。
- 确认发布:用户确认后再写入正式位置;仅在
--publish时提交。
参数
/lov-gen-logo [concept] [--use vN] [--publish vN]
concept:设计概念或迭代反馈。--use vN:选用第 N 版并更新正式资产,不提交。--publish vN:选用第 N 版、完成平台验证并提交。
产物模型
为每版保留以下文件;按项目实际用途省略不需要的派生项:
assets/logo-drafts/
├── vN-desc-raw.png # 生成器原图,永不覆盖
├── vN-desc-mark.png # 紧边界透明标志
├── vN-desc-mark.svg # 矢量标志
├── vN-desc-app-icon-mark.png # 1024 方形透明布局稿,用于测量主体占比
├── vN-desc-app-icon.png # 1024 方形、不透明、满铺底色的应用图标
└── vN-desc-preview.png # 小尺寸与明暗背景预览
区分以下语义:
| 产物 | 背景 | 留白 | 用途 |
|---|---|---|---|
mark.png/svg |
透明 | 紧边界或少量光学留白 | 网站、文档、组合品牌 |
app-icon-mark.png |
透明 | 主体长边通常占画布 62%–74% | 测量和合成中间稿 |
app-icon.png |
不透明且铺满画布 | 不在外缘留透明或白色边框 | iOS、桌面应用图标 |
| Android adaptive icon | 前景与背景分层 | 遵循平台安全区 | Android 启动器 |
除非设计明确要求白色底板,否则不要把白底视为 Logo 的组成部分。iOS 圆角由系统裁切,不要预先烘焙圆角或透明四角。
工作流程
Step 0:发现项目与版本
- 读取
package.json、README.md和现有品牌资产。 - 搜索平台事实源,例如
app.json、Info.plist、asset catalog、PWA manifest、Electron/Tauri 图标配置。 - 检查
assets/logo-drafts/的最大版本号,使用下一版本。 - 记录现有正式 Logo 路径,禁止默认假设一定存在
assets/或public/。
mkdir -p ./assets/logo-drafts
find ./assets/logo-drafts -maxdepth 1 -type f -name 'v[0-9]*-*' \
-print | sort -V | tail -1
Step 1:分析项目与设计概念
首次生成时读取:
package.json的名称、描述、关键词和依赖;名称只作标识。README.md的核心功能、目标用户和差异化价值。- 当前界面的形状语言、颜色、圆角、图标密度和相邻品牌资产。
按项目类型选择方向:
| 类型 | 识别特征 | 推荐方向 |
|---|---|---|
| Web 框架/Starter | next、react、vue、angular | 几何抽象、模块、网格 |
| CLI 工具 | commander、yargs、bin |
光标、尖锐线条、技术感 |
| 桌面/移动应用 | electron、tauri、expo、原生工程 | 单一强轮廓、应用图标构图 |
| 库/SDK | 无 UI 依赖、纯逻辑 | 极简符号、数学感 |
| AI/ML | openai、langchain、模型依赖 | 连接、流动、智能但避免通用星芒 |
迭代版本应先总结上一版的明确问题,例如“主体只占画布 46%,在主屏幕上显小”,再把改进目标写进 Prompt。不要只写“更大”或“更好看”。
Step 2:生成原稿
${IMAGE_GENERATOR_COMMAND:-image-generator} \
"PROMPT" -o ./assets/logo-drafts/v{N}-{desc}-raw.png -q high
Prompt 需要明确:
- 只生成独立标志,不含文字、展示样机、边框、卡片和预制圆角底板。
- 使用 2–3 个主要几何形状,在 16×16 仍可辨认。
- 保持轮廓完整、边缘干净、构图居中。
- 生成器不稳定支持透明度时,使用与标志颜色明显不同的纯色背景,后续提取;不要让背景成为设计元素。
- 应用图标的底色、渐变和光效在标志提取后确定性合成。
优先读取 Profile 的 brand.colors.primary 或项目已有品牌色;二者都缺少时,先询问本次视觉方向需要的颜色,不在 Skill 内设定某个品牌专属默认色。
Step 3:提取透明标志并矢量化
保留 raw.png,只对副本去背景。优先从四角连通区域移除背景,避免使用全局 -transparent white 误删标志内部的白色区域。
cd ./assets/logo-drafts
magick v{N}-{desc}-raw.png -alpha on \
-bordercolor white -border 1 -fuzz 5% -fill none \
-draw 'alpha 0,0 floodfill' -shave 1x1 \
-trim +repage PNG32:v{N}-{desc}-mark.png
magick v{N}-{desc}-mark.png -channel A -threshold 50% +channel temp.png
vtracer --input temp.png --output v{N}-{desc}-mark.svg \
--mode spline --filter_speckle 8 --color_precision 8 \
--corner_threshold 120 --segment_length 6 --path_precision 5
npx svgo v{N}-{desc}-mark.svg -o v{N}-{desc}-mark.svg --multipass
rm -f temp.png
背景不是白色时,将 -bordercolor white 替换为实际角落背景色。提取后放大检查轮廓,不接受白色毛边、半透明光晕、断裂细节或棋盘格伪透明。
Step 4:构建应用图标
从透明 mark.png 确定性合成应用图标,不直接把带透明留白的 Logo 当作 App Icon。
$SKILL_DIR/scripts/build_app_icon.sh \
--mark ./assets/logo-drafts/v{N}-{desc}-mark.png \
--output ./assets/logo-drafts/v{N}-{desc}-app-icon.png \
--layout-output ./assets/logo-drafts/v{N}-{desc}-app-icon-mark.png \
--background '#0C150F' \
--occupancy 0.68
以可见主体长边占画布 68% 为起点,根据视觉重量在 62%–74% 内调整:
- 细线、镂空、尖角或浅色标志取较大值。
- 密实、圆润、高对比标志取较小值。
- 低于
60%通常会在主屏幕上显小;高于78%通常会显拥挤。 - 比较相邻常见应用图标的视觉重量,不只比较几何宽高。
为渐变背景传入 --background-image PATH。保持背景满铺到四角,输出 PNG 必须为 1024×1024、RGB、无 alpha。
Android 项目应另外生成 adaptive icon 的前景和背景层,并在圆形、方形、圆角方形遮罩下预览;不要直接复用 iOS 合成图。
Step 5:质量门禁与展示
生成预览并同时检查:
- 透明标志置于浅色、深色和棋盘格背景。
- 应用图标以 16、32、60、120、256 像素显示。
- 应用图标与 2–3 个同平台常见图标并排,检查主体视觉重量。
- 背景铺满四角;非刻意白底时不存在白色方块或白边。
- SVG 与 PNG 的形状、方向、颜色一致。
执行基础检查:
magick identify -format '%f %wx%h %[channels]\n' \
v{N}-{desc}-mark.png v{N}-{desc}-app-icon.png
magick v{N}-{desc}-app-icon.png \
-format 'corners: %[pixel:p{0,0}] %[pixel:p{1023,0}] %[pixel:p{0,1023}] %[pixel:p{1023,1023}]\n' \
info:
使用图像查看工具展示 mark.png、app-icon.png 和 preview.png,再反馈版本、主体占比、背景语义和改进点。
✓ v{N}-{desc} 生成完成
主体长边占画布:{ratio}%
产物:透明标志 / 不透明应用图标 / 场景预览
继续迭代可直接描述具体问题;确认后执行 /lov-gen-logo --publish v{N}
Step 6:选用与发布
执行 --use 或 --publish 时:
- 读取平台配置,建立“草稿产物 → 正式事实源”的明确映射。
- 只写入项目真实存在或配置引用的路径;禁止无条件创建
assets/logo.*和public/logo.*。 - 运行项目原有的图标生成流程,验证最终打包资源而不只验证源 PNG。
- Web 项目验证 favicon、PWA manifest 和浅深色背景。
- 桌面应用验证 Dock、任务栏、菜单栏和安装包图标。
- 移动应用构建并安装到真实设备,在主屏幕与相邻图标并排验证;安装成功不等于图标验收完成。
- 用户确认版本后,
--publish仅提交本次 Logo 相关文件。
git status --short
git add <本次确认的正式资产> <对应草稿版本>
git commit -m "docs: update logo to v{N}-{desc}"
Step 7:生成 Tray Icon(Tauri)
存在 src-tauri/icons/ 时,从紧边界透明标志生成模板图标:
magick ./assets/logo-drafts/v{N}-{desc}-mark.png -trim +repage \
-resize 38x38 -gravity center -background transparent -extent 56x44 \
-colorspace gray -fill white -colorize 100% \
src-tauri/icons/tray-icon.png
在 macOS 明暗菜单栏分别检查,不把彩色应用图标直接缩小作为菜单栏模板图标。
依赖
python3与图像生成后端- ImageMagick 7(
magick) vtracersvgo
附带脚本
scripts/build_app_icon.sh:按可见主体占比构建 1024×1024 的透明布局稿和不透明应用图标,并校验尺寸与 alpha。
Execution boundary
自然语言请求即可触发;无需旧 slash 路径、参数插值或指定助手。明确解析当前请求中的 项目、目标文件、选项与输出位置;用当前宿主实际提供的文件、搜索、CLI 和浏览器能力。 项目依赖版本与外部 API 在执行时核实,不能假设示例是现行配置。随包脚本从 Skill 根解析, 业务文件从目标项目根解析。先读当前状态,保护已有未提交内容与其他任务的暂存区。 分析、预览请求保持只读;修改、提交、推送、部署和发布各依当前请求的明确范围执行。 不绕过保护、自动发送消息、强制结束用户进程或抢前台。失败保留可诊断原始错误。
Composition
执行前读取 能力组合,按明确制品交接相邻能力。
Runtime context (shared)
运行前读取本包 skill.yaml 与 Profile 合同。优先级为当前请求、
项目上下文、本 Skill records、共享 preferences、brand/user Profile、安全默认值。
只读取声明字段;没有专用运行时的宿主可使用 scripts/profile_store.py 读取共享 Profile。
配置缺失只问影响结果的一个问题。用户明确要求长期保存的值通过该脚本原子写入,
报告实际路径;不保存推断、凭据或其他任务的资料。