Community图像github.com

Logo

设计标志和品牌标识:简报、多种标志类型的概念、干净的几何 SVG、光学优化、色彩和字体、测试(16像素、单色、反色)以及交付(SVG、PNG、favicon、应用图标)和一份迷你指南。当被要求设计标志、文字标志、字母组合、符号、应用图标、favicon 或进行标志评审/更新时使用。不用于品牌色彩/字体/令牌(lll:design-system)或屏幕界面(lll:ui)。

Logo 是什么?

Logo 技能是一个专门用于设计标志和品牌标识的 AI 代理技能。它指导代理从简报开始,通过概念生成、SVG 构建、光学优化和严格测试,最终交付一套完整的标志文件。该技能强调“标识而非解释”,要求每个标志围绕一个清晰的想法构建,并必须在 16 像素和单色条件下依然有效。它支持启发式指导模式和全自动交付模式,在后者中,代理会将最终文件直接写入项目的 `brand/logo/` 文件夹,包括主标志、变体、favicon、应用图标、测试表和迷你使用指南。该技能适用于 Claude Code、Cursor 和 Cursor 等平台,为技术和非技术团队提供了从概念到交付的结构化设计工作流,确保最终产物既美观又实用。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/lilly-logic-labs/lll-skills/tree/HEAD/skills/logo

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

在你喜欢的 AI 中提问

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

文档

标志

设计一个用以识别而非解释的标志:一个清晰的想法,用干净的 SVG 构建,在 16 像素和单色下验证有效,并交付给开发者和打印者能直接使用的文件。输出是一个推荐的标志以及证明其可行的证据。

何时使用

  • 为公司、产品或项目设计全新的标志、文字标志、字母标志、字母组合、符号或徽章。
  • 设计应用图标、favicon 或社交头像,无论是全新设计还是基于现有标志修改。
  • 对现有标志进行评审、比较或更新(例如“小尺寸时看起来很差”、“感觉过时了”)。
  • 为已有的标志提供交付变体和简短的使用指南。

何时不使用

  • 品牌色彩、字体、令牌、语调、DESIGN.md、“帮我看看网站的样子”:使用 lll:design-system。
  • 产品 UI 内部的屏幕、组件、插图:使用 lll:ui。
  • 企业命名、定位、商标建议:使用 lll:business;商标搜索需要专业人士。
  • 社交媒体帖子、活动、广告创意:使用 lll:marketing。
  • 照片、视频或 3D 品牌资产:超出范围;请明确说明。

模式

指导模式(默认)。 在聊天中完成简报、概念、评审和建议。概念 SVG 在仓库外的草稿文件夹中绘制、渲染、查看并展示(粘贴 SVG 或图片);不写入项目。不使用子代理。在概念检查点处停止。

全模式。 仅在所有者选定方向并要求产出全套(或要求端到端运行)时使用。将最终文件写入项目的品牌文件夹(brand/logo/,或项目已使用的文件夹):主文件、变体、favicon 和应用图标集、测试表、迷你指南。交付列表和文件名:references/delivery.md。子代理是可选的;最多用一个宽泛的简报来处理渲染和导出任务(../../shared/agents.md)。

任务

任务触发条件参考文档
设计新标志references/brief.md, references/mark-types.md, references/concepts.md
构建将概念转化为 SVGreferences/svg-construction.md, references/optical-refinement.md
评审对现有标志提出反馈references/critique-redesign.md, references/testing.md
更新现代化或替换references/critique-redesign.md, 然后执行设计
资产变体、favicon、应用图标references/delivery.md, references/app-icons.md
展示展示概念、撰写指南references/presentation-guide.md

硬性规则

  1. 标志是标识符,而非解释。一个想法,一句话可以说清楚。如果一句话也能描述竞争对手的标志,那就不算一个好的概念。
  2. 动笔前先学习:确切名称拼写、业务内容、目标用户、三到五个形容词、竞争对手、约束条件。尊重已有的品牌资产(人们熟悉的颜色、形状),除非所有者要求改变。
  3. 先用黑色构建。形式可行之后再加颜色。不要用渐变、阴影或特效来弥补薄弱的形式。
  4. 审查你的工作。盲写 SVG 是导致差标志的主要原因。每次迭代都要渲染并查看。
  5. 绝不能描摹、模仿或“更新”一个已广为人知的现有标志。如果觉得眼熟且不是客户的标志,那它一定是别人的。
  6. 最终稿必须是矢量:文本转换为轮廓、描边扩展、无光栅、无滤镜、无脚本。
  7. 绝不能声称已获得商标许可或字体版权授权。说明你使用了哪些字体,并告知所有者必须通过专业搜索来确认标志可用。
  8. 在概念检查点停止。展示三个概念和一个推荐方案,然后等待。只有在选定方向后才构建全套文件。只有当所有者明确要求不检查时才跳过暂停。
  9. 测试结果是结论,而非意图:报告哪些通过了、你改了什么、还有什么需要所有者处理。
  10. 只写通用内容。绝不要将其他客户的名称或标志放入交付物中。

步骤

  1. 了解项目。 阅读 ../../shared/stack-detect.md 基础信息,然后查找现有标志(public/, assets/, brand/, *.svg、应用图标集、manifest.json)、DESIGN.md、README 和着陆页文案。注意确切名称、平台(网页、iOS、Android、桌面)、已使用的颜色。
  2. 简报。 填写简报(references/brief.md):名称、产品/服务、受众、形容词和反义词、竞争对手、约束条件、标志需适用的场景。快速通道:在一则消息中最多提五个问题,或者直接陈述假设并继续。形容词是最有价值的输入。
  3. 扫描品类。 列出该品类中的陈词滥调(金融科技:盾牌和向上的箭头;咖啡:豆子和蒸汽;AI:火花和大脑)。将其视为禁区,除非你能赋予它们新的形式。在允许的情况下,使用浏览器工具只读地查看竞争对手的标志。
  4. 概念。 撰写 8 到 12 个一句话概念,涵盖至少两种标志类型(references/mark-types.md, references/concepts.md)。从想法清晰度、区分度、简洁性、相关性和小尺寸表现力方面进行评分。保留最强且差异最大的三个。写概念成本低,构建成本高:只构建三个。
  5. 为每个概念构建黑色优先的 SVG(references/svg-construction.md)。用文字描述构建过程(基本图元、半径、角度、网格单位),然后编写 SVG。保存每次迭代(a-v1.svg, a-v2.svg)。
  6. 检查和优化,至少两轮。
    • node scripts/svg-check.mjs check a.svg 报告结构、颜色、描边、接近错误的角度和居中情况。
    • node scripts/svg-check.mjs sheet a.svg -o sheet-a.html 构建测试表:尺寸阶梯、16 像素和 32 像素、单色、反色、背景、眯眼测试、镜像、favicon 标签、应用磁贴、头像裁剪。
    • 使用浏览器工具打开测试表并查看。修复失败项(references/testing.md, references/optical-refinement.md)。重复此过程。
  7. 检查点。 以灰度显示三个概念的大尺寸和小尺寸并排效果,每个概念一行说明,给出推荐方案以及每个概念的一个诚实风险(references/presentation-guide.md)。提供全套选项。等待答复。如果客户需要修改,返回步骤 5。
  8. 全套(全模式,获批后)。 最终几何和小尺寸调整;色彩(一种或两种颜色,单色和反色版本,references/colour-type.md);字体和组合(水平、堆叠、仅符号、仅文字标志);交付文件(references/delivery.md);应用图标(references/app-icons.md);迷你指南(references/presentation-guide.md)。使用 node scripts/svg-check.mjs variants logo.svg 创建黑白和单色副本,使用 node scripts/svg-check.mjs icon logo.svg --kind ios -o ios.svg 创建应用图标画布,使用 node scripts/svg-check.mjs ico 16.png 32.png 48.png -o favicon.ico 打包 favicon 尺寸。
  9. 收尾。 运行最终检查清单(references/testing.md)。列出所有需要所有者处理的事项:商标搜索、字体许可、打印校对、色彩匹配。

标志类型速查表

类型适用场景注意事项
文字标志品牌名称独特且主要在文本中出现时16 像素时表现弱;需要紧凑的搭配方案
字母标志/字母组合名称较长、缩写知名或简短时如果字母形式未定制化,容易显得通用
图形符号一个简单、可拥有的物体能很好地表达想法时避免过于直白或陈词滥调
抽象标志品牌涵盖广泛或抽象时需要时间来积累含义
徽章/盾形纹章体现传统、工艺或机构感时精细细节在小尺寸时丢失
组合标志大多数新品牌;符号和文字标志组合必须分开使用时也能独立工作
动态/系统标志品牌有多个触点或产品时需要稳固的核心;不适合小型品牌

推理和决策指南:references/mark-types.md。

输出

  • 指导模式: 简报和假设、三个概念(渲染图片或粘贴的 SVG,每个概念一行说明)、推荐方案、到目前为止的测试结果、待办事项。不写入仓库。
  • 全模式: 包含清单的最终文件文件夹、测试表、迷你指南、每个主文件的 svg-check 实际输出,以及所有仍需所有者处理的事项。
  • 说明未执行的操作:未渲染、未进行设备测试、未打印校对、未进行商标搜索。
  • 后续步骤:两到四个要点(选择方向、进行商标搜索、使用 lll:ui 在网站和 App 中应用标志、使用 lll:design-system 设置品牌色彩)。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相关技能