brand-identity

Skill 版本： 1.0.0

品牌形象——展示 3 个，选 1 个

概述

面向非设计师、营销人员或开发者的访谈式品牌创作。你会进行一段简短对话（五个问题，加上可选的情绪板），提出三个真正各不相同的视觉方向，并将它们并排呈现在同一个浏览器页面中，让用户可以直观地看出差异；然后让用户选一个，再将其打磨为一份独立完整的 产品形象 HTML 文档（徽标／字标、颜色、字体、组件、间距、品牌语气，以及实际应用示例）。

核心原则：用户通过比较完成的方案来做审美决定；你负责做出设计决定，产出这些方案。 你要像顾问，而不是表单。绝不要问设计术语问题（“要什么色相？边框半径多大？”）。询问他们的产品，以及希望别人记住什么，然后将答案转化为设计——每条建议都要说明理由。

这里仅涉及产品形象。完整的品牌战略（宗旨、使命、原型、用户画像、信息传达）将来再扩展——除非用户提出要求，否则不要延伸到这些内容。

适用场景

• 用户想要品牌／品牌套件／设计系统／视觉形象，但目前几乎没有相关内容
• 用户询问某个产品、应用或公司的“配色／字体该怎么选？”
• 不适用于更新已有的成熟品牌系统（应改为进行审计），也不适用于绘制徽标插画（字标仅采用字体排印）

流程

按顺序执行以下五个阶段。阶段 2（概念确认）和阶段 4（选择方案）是关卡——未经用户确认，不要继续渲染或定稿。

1. 发现需求——5 个问题，每次只发一条消息

用通俗、自然的语言提问（不要使用 AskUserQuestion——这些都是开放式问题）。等用户回答后再问下一个问题。事先告诉用户，这是一段对话，不是死板的表单；他们随时可以转而自由聊天。

1. 你们是做什么的？（同时了解品牌／产品名称——如果用户没提供，就询问）
2. 面向哪些人？
3. 他们为什么要在意？（有什么不同之处）
4. 你们在和谁竞争？（说出名称，或回答“没有直接竞争对手”——稍后会据此让各个方向在视觉上避开他们的风格）
5. 唯一值得记住的事——“你希望别人第一次看到后，记住的唯一一件事是什么？”用一句话表达：一种感受、一种视觉、一项主张，或一种态度。把它记下来。之后的每个决定都必须服务于这件事。 试图让人记住所有东西的设计，最终什么也记不住。

如果回答不够具体，最多追问一次，然后继续。对非设计师访谈过久会让他们不知所措。

不要使用感知滑杆。 通过视觉呈现三个方向来探索品牌个性，而不是用问卷将其框定。

2. 灵感与情绪板——邀请用户提供，然后复述你的理解

请用户提供以下任意内容：情绪板（在聊天中拖入多张图片）、他们欣赏的品牌／网站，或喜欢的颜色（颜色名称或十六进制值）。这是可选项，但强烈建议提供——情绪板能让各个方向清晰得多。

如果用户提供了图片，阅读图片并提炼氛围特征（参见 design-mapping.md → “Moodboard → vibe profile”）：主色板及冷暖倾向、饱和度、对比度、纹理／材质感、形状语言、字体感觉，以及 3–5 个氛围形容词。生成概念前，向用户展示你的理解，并让他们纠正：“从你的情绪板中，我感受到的是：温暖、编辑感，略带复古，像奶油色纸面上的墨迹，并有一种醒目的强调色。是这样吗？”

如果情绪板中的图片风格冲突，指出这种张力，不要把它们平均成一团模糊的风格：“其中两张是温暖、手作感的，另一张则冷峻、技术感十足——我会以温暖、手作感为主线，除非你更想追求冷峻的方向。”

如果用户没有提供灵感或情绪板，就仅根据需求发现阶段的内容继续，并从他们的回答中提炼设计方向。

3. 三个概念 → 并排呈现

3a. 先用文字为三个概念命名。 根据探索结果 + 风格画像，推导出三个真正不同的方向（参见 design-mapping.md → “Deriving three distinct concepts”）。以字母列表呈现，每个概念一行：

A) "Quiet Ledger" — precise, restrained, monospace accents; numerals as hero
B) "Warm Signal"  — editorial warmth, a real serif, an ember accent
C) "Field Notes"  — soft, human, organic; grain and rounded forms

禁止趋同是硬性要求： 三个方向必须采用不同的字体系列、不同的色温，以及不同的形状／布局节奏。如果把两个方向的字标互换却没人注意到，那其中一个就不合格——请重新生成一个刻意采用不同方向的版本。它们应该像是出自三个不同的设计团队。

快速确认（“就做这几个”／“把 C 换成更大胆的方向”）。概念修改最多进行 2 轮——这是渲染前低成本迭代的好时机。

3b. 构建对比页面。 生成一个独立完整的 brand-directions.html，按照 output-spec.md → “Comparison page” 的要求，以完整保真度呈现全部三个方向。每个方向面板都要展示：字标、色板（名称 + 十六进制值）、字体样张、使用用户自身领域内容的几个实际组件（按钮、卡片、输入框）、一个使用示例，以及一条通俗易懂的安全／风险说明。

展示前自检——硬性门槛。 对每个方向都问：“设计师会不会不好意思在这个作品上署名？”如果会，就舍弃并重新生成。触发条件：紫色／紫罗兰渐变主视觉、三列圆形图标网格、所有内容居中且间距整齐划一、正文使用 Inter 或 Space Grotesk、所有元素都采用气泡状圆角、渐变 CTA 按钮、泛泛的图库照片风格、将 system-ui 用作展示字体／正文字体。任意一项都意味着拒绝并重做该方向。

用用户的浏览器打开页面（SendUserFile 设置 display: "render"，或使用 open）。告诉他们：“三个方向并排呈现。请看一看，告诉我哪个最合心意——也可以混搭（‘选 B，但用 A 的亮色点缀’）。”

4. 选定方向——由聊天来做决定

用户在聊天中说出选择，并补充任何混搭说明。这里没有交互按钮，也没有服务——页面供浏览，聊天用于决定。继续之前，先确认你理解无误：“采用 B——Warm Signal——并融入 A 更明亮的点缀色。对吗？”

5. 优化并交付最终身份文档

通过对话优化选定方向（应用混搭说明、调整任何细节）。然后按照 output-spec.md → “Final identity document” 的要求，构建最终的 product-identity.html（使用产品名称命名，例如 pact.html）。然后：

• 使用脚本计算对比度，不要猜。 所有展示的文字／背景组合都必须符合实际 WCAG 对比度；交付前，修正任何低于 4.5:1 的正文文字组合。
• 组件示例和语气规范中的“建议／避免”示例必须使用他们领域的内容，而不是 lorem ipsum。
• 渲染或截图，确认没有问题，然后发送（SendUserFile、render）。
• 最后告知他们获得了什么，以及顺理成章的下一步（标志设计、完整品牌策略），但不要开始进行下一步。

快速参考

输入	收集方式	用途
探索问题 ×5	每次一个开放式问题	概念、文案、语气、组件内容
值得记住的事	问题 5	每项决策都服务于这一核心
灵感／情绪板	图片／品牌／十六进制色值	风格画像 → 概念、调色板、字体
选定方向	对比页面之后在聊天中确定	决定哪个方向成为最终文档

参考资料： design-mapping.md（情绪板→风格画像、推导 3 个概念、调色板配方、字体指南、黑名单、反劣质设计、安全／风险说明）· output-spec.md（对比页面 + 最终身份文档结构）

常见错误

• 在一条消息中问完所有探索问题 → 用户只会回答其中一个，然后忽略 其余问题。一次问一个。
• 三个方向看起来像同一系列的变体 → 陷入收敛陷阱。字体、温度和节奏都要有所不同，否则就算不上三个选项。
• 跳过概念确认环节 → 用户本可以只用一行文字调整方向，却要先看完三个完整方案。
• 对矛盾的情绪板取平均 → 结果模糊、毫无个性。指出矛盾，并选定一条主线。
• 默认使用 Inter 或 Space Grotesk → 每款 AI 工具都会趋于相同。除非用户指定，否则绝不将其用作主字体。参见过度使用的列表。
• 猜测对比度 → 发布错误的数值。请实际计算。
• 使用泛泛的填充内容（“Lorem ipsum”“Acme Corp”）→ 只有按钮写着他们要执行的操作，卡片展示他们的数据，文档才会让人觉得切实可用。
• 扩展为完整的品牌策略（使命、原型、用户画像）→ 只做产品识别；其余内容可作为后续工作提供。