Communitygithub.com

品牌形象

创建一套完整的品牌形象，生成真实可用的文件——涵盖策略与调性、经过验证的色彩系统（OKLCH 色阶、浅色和深色主题、符合 WCAG 的角色映射）、字体、专业 SVG 标志（从简洁的文字标记或几何图形到复杂且有意义的符号）、收藏夹图标、应用和社交资产、设计令牌以及品牌指南页面。当用户请求标志、品牌、品牌套装、标识、调色板、主题、字体搭配、视觉方向、“调性”、品牌重塑、网站收藏夹图标或应用图标时，或说出诸如“让它看起来像一家真正的公司”、“我需要为我的面包店/应用/初创公司设计品牌”或“我们应该使用什么颜色”等话语时使用。不适用于页面或屏幕布局；那些技能（落地页设计、Web 应用设计等）会消费本技能生成的令牌。

品牌形象 是什么？

该技能是一个全面的品牌创建工具，旨在为开发者或 AI 代理用户提供端到端的品牌形象生成能力。它不仅仅是生成视觉资产，而是从品牌战略出发，自动产出经过验证的、可直接使用的文件。其核心优势在于确保品牌的每个决策（如颜色、字体、标志）都服务于一个核心概念（“想法”），避免空洞的装饰。技能支持生成包括多分辨率 SVG 标志、基于 OKLCH 色彩空间的完整色调（含无障碍对比度检查）、设计令牌、以及一个品牌指南页面在内的全套资产。它内建了从构思到验证的完整工作流，并能与其他技能（如界面指南）集成进行自动化审计。该技能覆盖 Claude Code 等支持技能文件加载的 AI 代理平台。

兼容平台~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/thecatthatflies/interface/tree/HEAD/skills/brand-identity
查看原文→浏览所有技能

在你喜欢的 AI 中提问

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

品牌形象 是做什么的？

品牌形象是一套能支撑所有场景的少量决策：一个想法、一个承载该想法的标志、与之匹配的颜色和字体，以及保持一致性的规则。常见的失败是没有想法只有装饰：一个渐变斑点、一个通用无衬线字体、凭心情选择的调色板，以及一个一旦缩小或单色显示就变得难以辨识的标志。本技能将这些决策生成为文件，并在真实的渲染器中验证它们。

在品牌形象与界面相交的任何地方，应用 interface-guidelines 的优先级原则（人人可用 > 真实表达 > 言简意赅 > 答案优先 > 可恢复 > 稳定 > 可见可能 > 惯例 > 打磨）。如果该技能已安装，其审计脚本会检查本技能生成的指南页面。

简报

在绘制任何内容之前回答这些问题。如果用户不在，在 brand.json 中陈述假设并继续执行。

  • 它是什么，为谁，对抗谁？ 品类、受众、两到三个竞争对手。品牌形象必须与这些对手区分开来，而不是与一般品牌区分。
  • 核心想法。 一个能够被符号承载的关于品牌是什么的单一句子（“窑炉把柔软的粘土变成永久的东西”）。从主题本身、其材料、过程、地点或承诺中提取，而不是从风格中提取。参见 references/strategy.md。
  • 个性： 三个特质，每个都包含在实践中意味着什么以及排除了什么。“温暖：大地色系和朴实的语言，绝不做作。”
  • 必须工作的场景： 收藏夹图标和应用图标、手机屏幕、标牌、印刷品、刺绣、社交头像、深色模式、邮件。最难的场景决定了复杂度的上限。
  • 约束： 需要保留的现有资产（客户熟悉的颜色、名称）、许可字体的预算、文化市场（颜色和符号的含义因文化而异）。
  • 标志的复杂度等级（references/logo.md 第 2 节）：仅文字标记、简单几何标记、或分层象征标记。根据上下文和想法选择，而不是根据野心。复杂标记需要为小尺寸提供一个简化版本。

工作流

1. 方向，然后一个决定

开发三个在想法上（而不仅仅是颜色上）有所不同的方向。对于每个方向：用一句话描述想法、标志概念方法（references/logo.md 第 3 节）、调色板草图（两到三个种子色）、字体搭配、以及一句话描述其感觉。如果用户在场，将其写下来并展示；如果不在，选择一个并说明原因。不要混合方向；混合通常会破坏使每个方向有效的想法。

2. 编写 brand.json

它是每个脚本读取的唯一事实来源。最小形状：

{
  "name": "Kiln", "tagline": "Small-batch ceramics, fired in Leeds.", "url": "https://kiln.example",
  "idea": "One sentence the mark carries.",
  "personality": [{ "trait": "Warm", "means": "Earth tones and plain words, never slick." }],
  "voice": { "is": ["Plain", "Specific"], "isnt": ["Twee", "Salesy"], "examples": [{ "say": "Fired at 1,260°C.", "not": "Lovingly handcrafted!" }] },
  "colors": { "primary": "#d9480f", "accent": "#0b7285", "neutral": { "chroma": 0.01 } },
  "type": { "display": { "family": "Fraunces", "weights": [400, 700] }, "text": { "family": "Inter", "weights": [400, 600] }, "scale": { "base": 16, "ratio": 1.25 } },
  "logo": { "primary": "logo/lockup.svg", "mark": "logo/mark.svg", "story": "Why the mark looks like this.", "minSizePx": 16 }
}

3. 色彩

选取两到三个有意义的种子色（references/color.md），然后：

node <skill-dir>/scripts/palette.mjs brand.json

它会构建感知上均匀的 OKLCH 色阶，在最近台阶上精确保留每个种子色，将中性色向品牌色倾斜，将状态色（成功、警告、危险、信息）与品牌色分开以使危险始终可被识别为危险，映射浅色和深色的语义角色，并对照 WCAG 2.2 检查每一个可见颜色对。通过更改种子色或角色来修复失败，而不是忽略它们。打开 tokens/palette.html 并查看浅色和深色演示。

4. 字体排版

选择一个展示字体和一个文本字体（通常一个字体家族就足够了），理由需与核心想法和阅读上下文相关联（references/typography.md）。检查许可、语言覆盖范围、字重、如果数字重要则要有表格数字，以及其在 14 到 16 像素下的渲染效果。除非用户已拥有许可，否则优先选择开源许可的字体家族（SIL OFL）。

5. 标志

手动以 SVG 形式绘制标志：在网格上规划几何形状，有目的地编写路径，并使用真实的孔洞（fill-rule="evenodd" 或组合路径），而不是在上面绘制白色形状。将文字标记转换为轮廓，使其不依赖已安装的字体：

node <skill-dir>/scripts/logo.mjs outline --text "Kiln" --google "Fraunces:700" --tracking -0.01 --out logo/wordmark.svg
node <skill-dir>/scripts/logo.mjs check logo/*.svg
node <skill-dir>/scripts/logo.mjs sheet logo/lockup.svg --mark logo/mark.svg --colors tokens/tokens.json --out logo/sheet.png

查看生成的图片。在 16 和 24 像素下，标志必须仍能自我辨认；在单色黑色、反白以及在繁忙的图像背景下，每个部分都必须清晰可见。如果细节消失，请简化或绘制一个单独的小尺寸标志。迭代：大多数好的标志需要经过多轮简化。构建组合标志（标志加文字标记）时使用视觉（而非数学）对齐，并定义留白区域和最小尺寸。关于细节和 SVG 工艺：references/logo.md。

6. 资产和系统

node <skill-dir>/scripts/assets.mjs brand.json    # favicons, ICO, Apple touch, PWA and maskable icons, Open Graph card, manifest, head tags
node <skill-dir>/scripts/book.mjs brand.json      # brand guidelines page + type.css

然后添加快要中超出这些范围的需求：社交头像、邮件页眉、从标志中提取的图案或纹理、图标风格、插画或摄影方向（references/system.md）。每个资产都使用令牌，而不是复制的十六进制值。

7. 验证和交付

  • 如果可用，在指南页面上运行 interface-guidelines 审计：node <interface-guidelines>/scripts/audit.mjs brand-book。
  • 亲自阅读标志图片、调色板页面、Open Graph 卡片和图标。修复看起来不对的地方。
  • 在上下文中测试品牌形象：将标志和令牌放在产品的一个真实屏幕上（至少一个页眉和一个按钮），分别测试浅色和深色模式。
  • 交付：核心想法、每个文件是什么、你验证了什么、你没有验证什么（商标搜索、目标市场的文化审查、印刷校对），以及任何通过的对比度例外情况及其原因。

陷阱

  • 没有想法，只有风格。 选择“现代、干净、大胆”不是一个想法。如果你不能用一句话说出标志的含义，那它还没有任何意义。
  • 通用标志。 闪电形、弧形、火花形、六边形、渐变球体、圆形字母缩写且未做任何处理。只有在想法要求且其中某些元素可以被占有时才使用它们。
  • 绘制的孔洞。 彩色标志上的白色形状在单色显示、照片上以及反转时会变成实心块。logo.mjs check 会标记它们。
  • 小尺寸下消失的细节。 细笔画和内部细节在 16 像素下会消失。图片会显示这一点；提供一个适合小尺寸的标志。
  • 标志 SVG 中的 <text> 元素。 它在字体缺失的任何地方都会以回退字体渲染。需要将其转换为轮廓。
  • 品牌色作为危险色，或危险色作为品牌色。 即使是红色品牌，也需要一个独特且可识别的危险颜色，并且其错误文本必须通过对比度检查。
  • 将颜色含义当作事实。 “蓝色代表信任”是一个薄弱、受文化限制的关联，而不是法则（references/color.md 第 1 节）。选择颜色是为了在品类中的区分度和支持核心想法。
  • 抄袭。 不要重新创建或密切模仿现有品牌的标志、名称或商业外观。请注意，真正的商标搜索是用户在发布前的步骤。
  • 模仿真实组织。 对于不是该组织的用户，模仿真实组织不是品牌塑造，应予以拒绝。

参考

文件何时阅读
references/strategy.md寻找想法、个性、命名调性、撰写方向时
references/logo.md任何标志相关工作：类型、复杂度等级、概念方法、构造、SVG 工艺、组合标志、测试
references/color.md选择种子色、颜色含义证据、OKLCH、角色、深色模式、无障碍访问
references/typography.md选择和搭配字体、许可、比例、数字、Web 加载
references/system.md图标、图案、图像、动效、语音、资产、令牌、指南

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

thecatthatflies/content-site-design

Design, build, write, and review sites people come to read - documentation, developer docs and API references, help centers and knowledge bases, blogs, editorial and news articles, guides, changelogs, and personal or company writing - so readers find the answer fast and agents can read, cite, and navigate them. Use when someone says "build a docs site", "set up our help center", "make my blog", "our docs are hard to navigate", "restructure the knowledge base", "nobody finds anything with search", "write this page so people understand it", "make our docs work for AI coding agents", or when choosing page structure, headings, navigation, search, typography for long reading, or llms.txt and Markdown versions of pages. Not for marketing or launch pages meant to convert (use landing-page-design), app screens (use web-app-design), or visual identity (use brand-identity).

thecatthatflies/form-design

Design, build, and review forms and multi-step flows that people finish without errors and agents can fill without guessing - sign-up and sign-in, checkout and payment details, address and contact forms, applications, onboarding questionnaires, wizards, settings forms, validation and error messages, passwords and passkeys. Use whenever someone builds or fixes a form ("add a sign-up form", "our checkout converts badly", "make these errors better", "why won't autofill work", "turn this into a wizard"), even if they only mention one field. Includes a rendered-page checker for labels, autocomplete, input types, paste, and error wiring. Not for the surrounding app shell, tables, or settings navigation (web-app-design), store layout and product pages (ecommerce-design), or native desktop dialogs (desktop-app-design).

thecatthatflies/landing-page-design

Design and build marketing pages that people remember and understand, and that agents can read accurately - product and launch pages, homepages for a product or studio, pricing pages, waitlists, feature pages, one-pagers, event and campaign pages. Covers art direction (a concept drawn from the subject, one memorable idea, composition), message and page structure, honest proof, pricing, sign-up and waitlist flows, and speed. Use whenever someone asks for a landing page, "a site for my app", "a page to announce X", "make our homepage less generic", "a pricing page", "a coming-soon page", or wants an existing marketing page redesigned or critiqued, even if they only say "make it look good". Consumes brand tokens from `brand-identity` and does not invent logos, palettes or type systems; run that skill first when no brand exists. Not for product UI behind a login (`web-app-design`), docs or blogs (`content-site-design`), storefronts and checkout (`ecommerce-design`), or HTML email (`email-design`).

thecatthatflies/web-app-design

Design, build, and review SaaS and internal web application UI that people use for work and agents can operate - app shells and navigation, list and detail views, data tables with sorting, filtering, bulk actions and pagination, empty states, settings, onboarding, roles and permissions, workspace or tenant switching, optimistic updates and undo, command palettes, and URL-driven view state. Use whenever building or reviewing an admin panel, CRM, back office, internal tool, project tracker, or any logged-in product ("build me an admin for orders", "our app feels clunky", "add bulk delete", "make the table filterable", "add an org switcher"), even when the request names only one screen. Not for KPI and monitoring pages (dashboard-design), forms and wizards in depth (form-design), marketing pages (landing-page-design), native desktop shells (desktop-app-design), or AI chat surfaces (ai-chat-design).

相关技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community