标志
设计一个用以识别而非解释的标志:一个清晰的想法,用干净的 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 |
| 构建 | 将概念转化为 SVG | references/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 |
硬性规则
- 标志是标识符,而非解释。一个想法,一句话可以说清楚。如果一句话也能描述竞争对手的标志,那就不算一个好的概念。
- 动笔前先学习:确切名称拼写、业务内容、目标用户、三到五个形容词、竞争对手、约束条件。尊重已有的品牌资产(人们熟悉的颜色、形状),除非所有者要求改变。
- 先用黑色构建。形式可行之后再加颜色。不要用渐变、阴影或特效来弥补薄弱的形式。
- 审查你的工作。盲写 SVG 是导致差标志的主要原因。每次迭代都要渲染并查看。
- 绝不能描摹、模仿或“更新”一个已广为人知的现有标志。如果觉得眼熟且不是客户的标志,那它一定是别人的。
- 最终稿必须是矢量:文本转换为轮廓、描边扩展、无光栅、无滤镜、无脚本。
- 绝不能声称已获得商标许可或字体版权授权。说明你使用了哪些字体,并告知所有者必须通过专业搜索来确认标志可用。
- 在概念检查点停止。展示三个概念和一个推荐方案,然后等待。只有在选定方向后才构建全套文件。只有当所有者明确要求不检查时才跳过暂停。
- 测试结果是结论,而非意图:报告哪些通过了、你改了什么、还有什么需要所有者处理。
- 只写通用内容。绝不要将其他客户的名称或标志放入交付物中。
步骤
- 了解项目。 阅读
../../shared/stack-detect.md基础信息,然后查找现有标志(public/,assets/,brand/,*.svg、应用图标集、manifest.json)、DESIGN.md、README 和着陆页文案。注意确切名称、平台(网页、iOS、Android、桌面)、已使用的颜色。 - 简报。 填写简报(
references/brief.md):名称、产品/服务、受众、形容词和反义词、竞争对手、约束条件、标志需适用的场景。快速通道:在一则消息中最多提五个问题,或者直接陈述假设并继续。形容词是最有价值的输入。 - 扫描品类。 列出该品类中的陈词滥调(金融科技:盾牌和向上的箭头;咖啡:豆子和蒸汽;AI:火花和大脑)。将其视为禁区,除非你能赋予它们新的形式。在允许的情况下,使用浏览器工具只读地查看竞争对手的标志。
- 概念。 撰写 8 到 12 个一句话概念,涵盖至少两种标志类型(
references/mark-types.md,references/concepts.md)。从想法清晰度、区分度、简洁性、相关性和小尺寸表现力方面进行评分。保留最强且差异最大的三个。写概念成本低,构建成本高:只构建三个。 - 为每个概念构建黑色优先的 SVG(
references/svg-construction.md)。用文字描述构建过程(基本图元、半径、角度、网格单位),然后编写 SVG。保存每次迭代(a-v1.svg,a-v2.svg)。 - 检查和优化,至少两轮。
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)。重复此过程。
- 检查点。 以灰度显示三个概念的大尺寸和小尺寸并排效果,每个概念一行说明,给出推荐方案以及每个概念的一个诚实风险(
references/presentation-guide.md)。提供全套选项。等待答复。如果客户需要修改,返回步骤 5。 - 全套(全模式,获批后)。 最终几何和小尺寸调整;色彩(一种或两种颜色,单色和反色版本,
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 尺寸。 - 收尾。 运行最终检查清单(
references/testing.md)。列出所有需要所有者处理的事项:商标搜索、字体许可、打印校对、色彩匹配。
标志类型速查表
| 类型 | 适用场景 | 注意事项 |
|---|---|---|
| 文字标志 | 品牌名称独特且主要在文本中出现时 | 16 像素时表现弱;需要紧凑的搭配方案 |
| 字母标志/字母组合 | 名称较长、缩写知名或简短时 | 如果字母形式未定制化,容易显得通用 |
| 图形符号 | 一个简单、可拥有的物体能很好地表达想法时 | 避免过于直白或陈词滥调 |
| 抽象标志 | 品牌涵盖广泛或抽象时 | 需要时间来积累含义 |
| 徽章/盾形纹章 | 体现传统、工艺或机构感时 | 精细细节在小尺寸时丢失 |
| 组合标志 | 大多数新品牌;符号和文字标志组合 | 必须分开使用时也能独立工作 |
| 动态/系统标志 | 品牌有多个触点或产品时 | 需要稳固的核心;不适合小型品牌 |
推理和决策指南:references/mark-types.md。
输出
- 指导模式: 简报和假设、三个概念(渲染图片或粘贴的 SVG,每个概念一行说明)、推荐方案、到目前为止的测试结果、待办事项。不写入仓库。
- 全模式: 包含清单的最终文件文件夹、测试表、迷你指南、每个主文件的
svg-check实际输出,以及所有仍需所有者处理的事项。 - 说明未执行的操作:未渲染、未进行设备测试、未打印校对、未进行商标搜索。
- 后续步骤:两到四个要点(选择方向、进行商标搜索、使用
lll:ui在网站和 App 中应用标志、使用lll:design-system设置品牌色彩)。