creative-direction

创意方向

你要建立一个品牌的视觉系统——涵盖每一类资产，用统一的语言表达，而且所有内容都能追溯到品牌旨在营造的感受。在这个阶段，策略变得可见：brand-strategy 中的情感目标和缪斯将转化为实际的色彩、字体、构图、图案、图标、插画和摄影。

请先阅读 design-principles。这项技能是将其规则付诸实践的地方：对比而非竞争、克制、五个停顿、情感先于执行，以及“说明理由，否则采用默认方案”。

**流程中的位置：**位于 brand（审计／背景）和 brand-strategy（感受＋缪斯）之后，logo-design 和应用类技能之前。审计负责诊断；这项技能负责制定疗法。

硬性前置条件：情感目标与缪斯

打开 .agents/brand.md。你需要了解：

• 情感目标（品牌必须营造的感受）
• 缪斯，以及每位缪斯可借鉴的视觉线索
• 已确认的竞品集合（衡量“差异化”的参照对象）
• REO 深度和客户的接受程度

**如果缺少情感目标或缪斯，请停止并转到 brand-strategy。**没有这些依据，你就只能凭个人品味选择色彩和字体——这正是审计旨在发现的“无意中不同”和“类别默认方案”两种失败模式。你在这里做出的每项选择都必须能追溯到某位缪斯或情感目标；如果你说不清某项选择为何能传达这种感受，那它就是披着决策外衣的默认方案。

按深度划分范围

• 变革——从零开始构建系统，提出三个真正不同的概念，以风格画布的形式呈现（见 references/stylescapes.md）。每个概念都应是对情感目标的一种不同且合理的回应——缪斯、色彩叙事、字体搭配和态度各不相同，而不是同一个想法的三种变体。风格画布是真正计划采用的资产，不是情绪板：表达力强、自由发挥，暂不受可实现性限制。
• 演进——确立一个方向，以固定核心（保留的品牌资产，通常是标志、名称或某种颜色）为基础。从主要触点（通常是首页／网站）着手，只调整策略中明确指出的差异：沿用保留的资产，并围绕它们引入新字体、图形母题或配色方案。
• 优化——大多不在范围内。方向已经确立；工作重点是执行（web-design、collateral-design）。至多进行一次轻量整理，记录现有系统，以便后续严格执行。

核心举措：抽象缪斯

这是打造鲜明方向的引擎，也是最容易被跳过的一步。**将缪斯的字面形态——在 brand-strategy 中按实物精度记录的形态——抽象为现代且可专属拥有的品牌元素。**你不是在用缪斯做装饰，而是在将它的几何形态、材质和理念提炼成一个系统。

• 实例（真实案例）：克尔白周围的同心圆环 → 象征人们团结一心的点状线条图案；建筑的砖块几何形态 → 专属网格；伊斯兰花园 → “花园里的蚂蚁”图案。任务控制中心缪斯 → 黑底琥珀色遥测读数，以及作为标志性元素的机加工立体旋钮。
• **从每个缪斯中提取两样东西：一种色彩叙事和一个抽象理念。**然后将这些抽象元素与现代 UI 结合。大多数软件看起来都一样——缪斯能让你为同质化的品类赋予外观，让品牌拥有只有它才能专属拥有的特色。
• 然后通过这种抽象表达产品自身的工作——不要止步于装饰。最大的缺口，是画板上用缪斯做了装饰，却始终没有展示产品能做什么。展示产品实际承担的任务——起草帖子、撰写博客、运行 SEO、绘制一路向上的图表——并用缪斯的语言来呈现：音符绽放成一篇已发布的社交帖子；控制台读数本身就是正在启动的营销活动。悬浮在通用 UI 上的缪斯装饰显得乏味又没有特色；让方向真正体现出这个品牌在完成这项工作的，是缪斯 × 产品功能的融合。
• **不要因为某个缪斯容易抽象就让它胜出，也要把过于直白视为一种失败模式。**与 UI 对应得最直观的缪斯（任务控制台 → 表盘、遥测）解决得最快，也最早显得完整——但字面解读往往是最弱、最陈腐的想法，而在人人都抓住显而易见元素的 AI 品类中，陈腐是个实实在在的劣势。更难抽象的缪斯（编排、帝国）往往能带来更有力、更具专属性的概念。对难处理的抽象概念再多下功夫；不要退回到容易处理的缪斯，也不要用粗制滥造来假装处理了难题。评判概念时要看概念本身的力量，而不是看哪个最先渲染出来。
• 排版遵循与其他一切相同的抽象法则——而且有两个失败极端。采用字面化的缪斯字体（帝国缪斯搭配全大写罗马铭文风格字体 / Cinzel）不是品味问题，而是抽象失败：你把缪斯穿在了身上，而不是将其提炼出来。另一个极端也同样致命：选用刻意追逐潮流的字体（Space Grotesk、Fraunces 及其同类——禁止使用；参见 design-principles → ai-slop.md）来显得有设计感。这两种都是装扮。差异必须来自系统——图案、色彩、构图、处理方式——而不是字体。拿不准时，有意使用中性字体（Inter）胜过把有个性的字体当作捷径随手套用；让系统承载缪斯。真正源自缪斯的字体确实少见。

需要建立的系统

以审计的标准逐项落实——九类审计（见 brand）是验收测试，而审计提出的每一项「后续改进」（九个类别全部都要回应，Logo 除外；之后由 logo-design 处理）都必须由系统作出回应——不要留下未解决的审计缺口。各元素的完整标准见：references/element-standards.md。制作工艺的底线——艺术指导承诺、设计令牌、排版与纹理硬性规则，以及糟糕设计检查清单——见 references/frontend-boilerplate.md；评审板中的拼贴／便当盒布局见 references/stylescapes.md。

1. 色彩——按角色分配：背景、文字（主要／次要）、行动／CTA（需重点保护，其他地方尽量少用），以及辅助色。每种颜色设五个色阶，而不是十个。根据已确认的竞品集合核实颜色归属——如果竞争对手占用了某种颜色，该颜色就不具备独占性；应有意识地避开品类的默认选择。
2. 字体——按角色选择字体（展示、标题、正文），选择依据是对比，而非争抢注意力；如果需要等宽或第三种字体层级，优先选择同一超家族中的字型，而不是硬凑另一款字体。设定字重／样式限制。**授权检查点：**确认字库厂商、预算，以及对目标市场所需字符／语言的支持情况——须在方向获批之前确认，而非之后。
3. 构图与布局——网格、密度、间距逻辑、区块节奏与变化（避免单调堆叠），以及视线引导方式。
4. 图案与纹理——打造可归属于品牌的图案，最自然的做法是从标志的几何形态中提取；即使不出现 Logo 或品牌色，也能在品牌官网之外使用。检查图案是否与竞争对手的图案冲突。
5. 图标设计——统一信息来源；制定描边／填充／网格规则；规划不同层级（当前侧重实用，随着品牌成熟再加入叙事性图标／插画）。
6. 插画与产品抽象表现——采用品牌化抽象表现，而非原始截图；确定风格（或明确决定「不使用插画」）。
7. 摄影——确定主体、处理方式／色调和整体感觉；或明确决定不使用摄影。
8. 动效（方向性说明，而非完整规范）——明确品牌动效的感受；重在意图，而非装饰（悬停 > 加载 > 滚动 > 循环）。

第 4–7 项在此确定方向；art-direction 会将其转化为完整规范和实际素材。

制作风格板 — 提供素材并生成真实资产

风格板需要经过处理的图像和真实质感；扁平的 CSS 图形会显得呆板。操作者往往是创始人，而非设计师，因此关键的创作工作由你承担。

• 从 art-direction 获取图像素材——每个概念进行一次风格板制作。 它会根据灵感来源，为每个概念确定摄影、插画、图标和纹理风格，寻找创始人可以参考的网页素材，并按 Toolkit 的级别制作主视觉资产：使用已连接的工具直接生成、提供提示词包供创始人使用生成器（ChatGPT、Gemini…），或处理免费的图库素材。它会交付处理好的资产；风格板由你制作。不要再次询问可用工具——.agents/brand.md 中的 Toolkit 已说明可用工具。
• 由你来排布风格板，而不是创始人。 创始人不懂 Figma，也没有设计眼光，因此应由你用生成和搜集的素材，组装一张完整的风格板（自包含的 HTML/CSS/SVG）。操作者提供原始图片（或由你生成）；艺术指导、布局、纹理和排版都由你负责。
• 对于 CSS/SVG 擅长呈现的纹理，尽量使用 CSS/SVG——颗粒、噪点、扫描线、图案、网格、机械化 UI、遥测元素、光晕、渐变等。对于许多概念（任何机械风、复古风、系统风），这些元素就构成了大部分“生命力”，无需生成。将生成素材或免费图库素材留给摄影或插画类的灵感参考。（严格 CSP 的 HTML 无法加载 Web 字体 URL——请将字体嵌入为 data URI，或使用后备字体，并标明预期字体，以传达排版意图。）
• 用统一的色彩处理统一所有来源。 无论素材来自 MCP 生成、创始人自行生成还是免费图库，都要按照概念的处理配方进行处理（控制台风格可用双色调 + 颗粒 + 扫描线；项目计划风格可用暖纸色调；帝国风灵感可用斑岩双色调）。在风格板上展示处理前后的对比。统一的色彩处理能让免费图库素材也呈现出这个品牌的感觉，并让不同来源的素材看起来属于同一个世界。
• 灵感来源就是设计简报。 所有生成或搜集的素材都要按照灵感来源的线索进行处理，精准还原其质感——绝不能直接放入未经处理的通用图库素材。
• 如果暂时无法制作图像素材，就明确说明，并将风格板标为构图 / 艺术指导验证稿，附上提示词包（适用于 Toolkit 指定的生成器），供创始人补充素材。绝不要悄悄交付一张扁平的风格板，却称其为成品。

展示前先验证

用与审核相同的严苛标准检查自己的作品——以对手的标准审视渲染后的画板，而不是脑海中的概念（参见 design-principles → Judge Your Own Work on the Competitor's Bar）。概念可以独树一帜，但呈现出来的像素却可能平平无奇；只评估意图的自审，恰恰会漏掉这一点。

• 对照已确认的竞争者，按基础类别给它打分，并采用你评判对手时的严苛标准——这套系统在创意方向、色彩、图案以及（使用 logo-design 时）标志设计方面能拿到 4–5 分吗？检查标志：它是否仍能让人认出这是这个品牌？
• 用 AI-slop 检查清单（design-principles → ai-slop.md）检查自己的输出，并列出检查发现的问题——画板上实际出现了哪些套路（单色的“遥测／终端”读数、点阵网格、左侧栏、毫无变化的居中栏、到处都是 rounded-lg）？“这里没有 slop”只是本能反应，并非检查结果；请列出清单，或给出有依据且具体的“没有，因为——”。“干净”意味着尚未评估，不代表通过。
• 确认画板是渲染后的画面，而不是由 CSS 色块拼成的构图——包含经过处理的图像或贯彻始终的插画风格、完整且注明名称的字体样张、具有独特性的图案（而非默认点阵网格）、实际应用样机、真实的景深与出血。缺少这些构成要素，说明设计尚未完成（参见 references/stylescapes.md）。
• **应用检验关卡：**实际应用的片段（主视觉／样机）也必须经得住遮住标志的检验，而不只是抽象画板（参见 design-principles → Distinctiveness Must Survive Application）。画板独特，但应用界面平平无奇，就算不合格——独特性必须延续到实际应用中，而它通常会在这里流失。
• **追溯每个元素，确认它对应某个灵感来源或情感目标。**无法追溯的元素，要么删掉，要么说明理由。
• **检查文案：**这套系统是否服务于信息传达，并给予文字恰当的强调？设计服务于信息——系统是舞台，不是主角。

展示、决策、记录

• 先讲解，再展示。 逐一讲清每个概念——灵感来源、抽象思路，以及它为何能回应那种感受——然后再呈现。没有叙事支撑的风格板，只是一种排布。
• 坦诚指出挑战。 对每个方向，都要说明全面落地时哪些部分难以实现，以及它与竞争对手的实际差异有多大——这些都是客户决策时需要权衡的因素。不要只推销，也要揭示取舍。
• 最后进行对比——按方向分别对比，或在结尾做综述。 对每个概念，都要回答真正影响选择的问题：挑战、优点、**是否最具差异化？以及是否最符合你希望唤起的情感？**可以将这些内容融入各方向的讲解，也可以在结尾做综述，权衡三者的优劣。
• 证明它经得起实际应用。 客户想看到真实效果，而不是抽象概念——最快的验证方式是用完整的系统制作一个网站首屏主视觉和一到两则广告。如果一个概念在展示板上很出色，实际应用时却显得单薄，就不值得选用（见上文的延续性门槛）。
• 记录风格及其来源。 记录照片、图形、图标和字体风格，以及所有素材的来源（图库、Envato、Freepik 等）——现在做好记录，可以避免后续负责应用落地的人员靠猜测行事。
• 颠覆式方案： 展示三套风格板，由客户选一套。**坚持一个创意，不要拼凑成大杂烩。**适度模块化没有问题，但合并概念通常会把三个创意平均成一个都不剩。客户要求拼接时（例如把这个概念的字体放到那个概念的展示板上），了解情感目标，就能拒绝背离这一目标的合并方案——只有合并后仍能营造目标感受，并且拥有独立完整的叙事，才算合理（参见 references/stylescapes.md → 综合与平均）。
• 渐进式方案： 将新方向与当前状态对照展示，让差异一目了然。
• 在 logo-design 和应用技能据此开展工作之前，务必获得明确批准——后续所有工作都会以这一决定为基础不断叠加。（任何命名项目开始前，都要先运行创意方向流程。）
• 将获批的系统写入 .agents/brand.md（Visual system 部分，并更新 Fixed core / Flexible range），记录每项选择背后的原因——这些依据能在交接过程中留存，也能让后续评审判断调整是否合理。

交付成果

两层，一个事实来源——与 brand-strategy 保持一致：

1. .agents/design.md——完整的创意方向记录，在本练习结束时生成。内容包括：三个概念及最终选定的一个；每个概念的灵感来源 → 抽象化表达；记录在案的照片／图形／图标／字体风格及其素材来源（图库、Envato、Freepik……）；色彩系统（角色 + 十六进制值 + 色阶）和设计令牌；专属的图案／纹理和标志性元素；应用示例（首屏 + 广告）；实施挑战和竞品差异化说明；以及每项选择背后的原因。使用references/design-doc-template.md中的模板。这是应用类技能（web-design、collateral-design……）据以构建的详细规范——相当于 brand-strategy 的 .agents/brand-strategy.md。**这也是一份持续更新的记录：**随着工作流推进，下游技能会将其确定的素材追加到其中——logo-design 记录获批的标志，art-direction 记录图像规范，motion-design 记录构建完成的动态系统，应用类技能记录其采用的库和说明（参见模板中的持续记录部分）。此技能负责撰写基础部分；之后记录会不断扩充。
2. .agents/brand.md——提炼后的系统：将获批的视觉系统写入相应章节（另加固定核心／灵活范围），让每个下游技能都能继承它，而无需通读完整记录。

此外，如果客户需要，还可以从 .agents/design.md 生成一份发布版本（Notion、PDF）——绝不能反过来以发布版本为准。

获批后，如果操作者使用 Claude Design，就将系统发布到 Claude Design（Toolkit → design canvas）：它会成为每个新 Claude Design 项目都能继承的设计系统，让团队成员无需使用终端，也能制作符合品牌风格的演示文稿、单页资料和原型。如果存在网站仓库，就从该仓库同步；否则，从 .agents/assets/design-system/ 中的小型素材包同步；随着 logo-design 和 art-direction 向记录中添加内容，重新同步。有关方法、素材包内容和同步检查，请参阅references/claude-design.md。与任何发布版本一样，.agents/ 始终是事实来源。

不可妥协的要求

• 从 .agents/brand.md 读取情感目标和灵感来源（或先转交给 brand-strategy）
• 尊重深度与投入度要求（三份风格板／有依据的差异／文档记录阶段）
• 根据已确认的竞品集合验证色彩的专属性
• 确认字体授权和字符支持
• 图案具有独特性，且不会与竞品的图案冲突
• 每个元素都能追溯到某个灵感来源或情感目标
• 展示前，对渲染完成的画板进行对抗性自审（列出 AI 垃圾风格的常见套路，不能写“无”；应用片段通过遮住徽标的测试）
• 明确列出挑战和竞品差异化；通过实际应用证明方向可行（首屏 + 广告）
• 获得客户批准；将完整记录写入 .agents/design.md，并将提炼后的系统写入 .agents/brand.md
• 如果操作者使用 Claude Design：将系统发布为设计系统（素材包或仓库），完成验证检查，并将项目记录到 .agents/design.md

相关技能

• design-principles——此技能应用的规则
• brand——用于诊断的审计；其分类是此技能的验收标准
• brand-strategy——提供情感目标和灵感来源（硬性前置条件）
• art-direction——图像素材：摄影、插画、图标和图案与纹理，提供规范和实际素材（用于风格板的画板阶段，以及用于所选方向的系统阶段）
• logo-design——在此系统中设计的标志
• web-design / collateral-design——使用真实文案应用获批系统
• design-critique （计划中——尚未发布）——将依据此处记录的内容评判后续作品