设计方向

只有主入口、当前任务或领域路径明确要求时才读取本文件。方向已定时只处理受影响的部分；领域提供了替代产物时沿用替代路径，不用本文件重新建立前置门槛。

目录导航

• 认品类，拆标杆（产品参考与交互参考分开）
• 先删减，锁定主角与主动作
• 先定调性，再求差异（含 模糊词翻译）
• 用生成引擎起方向（含 独立概念生成与把关）
• 定色彩
• 定首屏骨架（说服型骨架 [blocked]）
• 方向卡
• 差异检验
• 北极星与呼应
• 让人记住的一刻
• 参考怎样转为设计决定
• 小样、选择与品味

方向的目标是“这个品类里最好的团队会这样做，而且做出了这个产品自己的样子”；只是“和模型的默认不一样”还不够。高级感来自一套语言的完整和细节，不来自题材少见。

方向里的题材、材质、场景、字体和配色，每次都从当前产品的内容、受众和使用场合里推出；想到的方向和常见的“网红风格”撞上时，要能说出来自这个产品的理由，否则重选。

认品类，拆标杆

先写下本产品的事实：用户、品牌、任务、真实内容与对象、使用场合、设备、已有素材、技术条件和交付限制。设备写明主视口与支持范围；用户没指定时，按主要使用场景选一个主视口。缺什么就标未知，不拿参考产品的内容补成自己的事实。再认清品类，看一线产品怎样建立用户已经期待的结构和完成度；后面的调性与概念只能在这块地板之上偏离，并说出产品理由。

产品参考和交互参考分开选、分开记。可以来自同一家，也可以选择不同产品，但两类证据不能合成一份“干净、好用”的印象。按四步做：

1. 说出品类和产品参考。 写下品类，再选风格最鲜明的两三家，不一定是最有名的。产品参考回答首屏有什么、内容怎样组织、视觉身份怎样成立。
2. 拿到真实画面，拆产品参考。 用宿主的浏览器或搜索取首屏和关键内容的真实画面，存进任务目录，对着图拆，不凭记忆写。页面打不开或 404 时换地址再试一次，还不行就换一家；拿到两家的真实画面就够。拆成 6–10 条看得见的要素，每条写“是什么样、为什么这样做”：内容层级、首屏骨架、字体、颜色、图标与素材、文案语气，以及它们服务的使用场合。只有“干净、留白、一种强调色”就是没拆到位，换一家重拆。确实拿不到画面时，在方向卡“产品参考与取舍”写明“未看图，凭记忆”，并把字体、色彩、主视觉三栏标为待验证。
3. 单独拆交互参考。 选核心动作做得成熟的一家，取从入口到结果的真实画面或录屏，写下“触发 → 对象变化 → 反馈 → 下一状态”，以及任务涉及的关键状态；控件形状与手感只有怎样服务这条路径时才记。产品参考里没有出现的交互，不得凭它的视觉风格推断。拿不到真实证据时，在“交互参考与取舍”标明，并把核心交互标为待验证。
4. 分别决定留什么、换什么。 拿本产品的受众、内容、任务和使用场合逐条对照：理由同样成立的留下，理由不成立的换掉。产品侧的取舍写进“产品参考与取舍”，操作与状态侧的取舍写进“交互参考与取舍”，不互相代替。

拆的时候分清三样东西：

• 基线：用户已经期待的结构，例如画廊里作品先行、筛选在顶部，商店里购物车在右上角。沿用它，用户不用重新学。
• 套路：这个品类人人都在用的默认版式。一轮方向里至少一个要打破它，见“差异检验”。
• 撞脸：字体、配色、主视觉和图标都和某个标杆一样，只换了名字。任何方向都不允许。

先删减，锁定主角与主动作

拆完参考，先为首屏和每个关键状态各写两句：唯一主角是什么；唯一主动作是什么。 重复解释、同权重的次要动作和没有任务贡献的装饰先删或降级；对象名称、判断依据、当前状态和主动作不能当作多余内容删掉。其他动作保留时写清怎样降级，再写一条 主动作 → 主角或对象变化 → 状态反馈，确认动作有可见结果。

先定调性，再求差异

从产品的题材、受众、品牌语气和使用场合推出调性。用五个刻度描述，每个刻度都写出依据：

取值写成“这个产品是什么 → 五个刻度各取哪一端”，依据来自它的受众、内容和使用场合。刻度两端的任何组合都可以完全成立，失败的是没有依据的默认：

• 证据指向喧闹粗粝，交付的却是米色卡片、柔和阴影和大留白。这是最常见的失败，设计被磨回了模型默认的“安静高级”。
• 反过来，为了显得有趣，给一个本该安静的产品硬加颗粒、撕纸边和粗边框。

证据已经锁定调性时，所有候选都留在这个调性里，在构图、色彩身份和主视觉上拉开差异。不要为了“平衡”放进一个安静极简的保底方案。只有证据确实模糊时，才让候选分布在不同调性上。

模糊词必须翻译

“高级、精致、克制、史诗、有文学感、简洁”不能当作设计理由。用户或你自己说出这类词时，先翻译成可观察的决定：

翻译不出可观察决定的词，从理由里删掉。

动效与交互上的模糊词同样必须翻译为具体模式：

用生成引擎起方向

需要主 Agent 起新概念时，按下面的独立概念流程执行。用户已经给定完整概念时不重起；入口已经指定概念专项时，采用专项的产出，不重复派通用概念子 Agent，但仍由主 Agent 选择并执行独立把关。

独立概念生成与把关

1. 主 Agent 只备事实包。 写产品事实、用户与品牌约束、主角与主动作、必须保留的交互基线，以及素材、技术和设备限制。不给主 Agent 已想到的方向或偏好的风格。
2. 全新子 Agent 出概念。 至少派一个没有本任务历史的新子 Agent；能并行时按不同事实角度分派多个。只给事实包，不给标杆截图、主 Agent 的想法或其他子 Agent 的结果。收齐至少三个候选，每个交回：一句概念、核心动作怎样完成、主视觉与关键素材、一个记忆点、资产与技术依赖。至少一个候选直接从本产品特有对象或动作长出，不从标杆派生。
3. 主 Agent 选择。 按任务路由确定的对外方向数量选择：默认选一个，明确探索多个时才选多个；内部候选至少三个的要求不因此减少。不先内定答案再让子 Agent 佐证，也不把重复概念换词照收。为选中概念各选一个生成引擎、写成方向卡，再按“差异检验”先过适配与落地门槛。
4. 另一位全新评审者否决或放行。 评审者不能是概念子 Agent，只拿事实包、用户约束和选中的方向卡，不拿主 Agent 的推荐。逐张写“通过 / 退回 + 理由”：检查受众、品牌与任务适配，核心交互，资产与技术成本，设备约束，以及六项差异；多个方向都只会顺着同一家标杆换皮，或存在陪跑方向时整组退回。主 Agent 修完后交同一评审者复核，全部通过才发给用户或制作首屏，不自行忽略退回意见。这一步只审概念、方向卡和灰度，不打视觉分，也不替代真实画面评审。

宿主不能派子 Agent 时，主 Agent 按同样的输入和交付项自己完成，并在设计说明标明“未独立生成概念与把关”；适配和落地门槛仍照做，不声称独立评审。

把概念翻译成生成引擎

每个方向都从一个具体的引擎出发，而不是从形容词出发，不同方向最好用不同的引擎。引擎的内容来自这个产品的证据：受众、内容、使用场合和品牌已有的资产。

• 材质 × 环境：一种材质放在一个具体的环境里。由它推出光照、深度、边缘的处理和动效的阻尼。
• 一个具体场景：一个有时间、地点和光线的场景。由场景里的光线、声音、材料和节奏推出质感和动效速度。适合情绪型工具。
• 角色原型：给产品一个具体的性格，让性格决定字体和动作。
• 一场设计运动或文化语法：选一个和产品的题材、受众或地域有真实联系的设计运动或视觉传统，借用它的语法，而不是贴它的图案。
• 其他领域的整套表现形式：把另一个领域的媒介或器物的表达方式借过来。只借它最有辨识度的一两个手法，页面本身仍是原来的体裁；不把那个媒介的部件一件件搬来，那会变成道具堆砌。
• 打破一个具体常规：改变比例、阅读顺序或操作组织，同时保持可读、可学、功能完整和目标设备可执行；不把刺眼色彩或失控构图当作引擎。

引擎决定结构、手感、质感和动效；颜色按下一节单独定。

定色彩

产品自己的品牌资产、实物和内容画面是颜色的第一来源；主视觉就是产品实物时，主色可以直接从实物里取。没有现成主色时，不要直接拿生成引擎里那种材质或场景的固有色当主色——隐喻一落到黄铜、木纹或暗房，不同的产品最后就会撞进同一组颜色。按三步定：

1. 先写两行，几个方向共用：这个品类最顺手的默认配色是什么，写出底色和强调色；拆过的标杆各占了哪个色相和明暗。
2. 每个方向定一套不同的色相和明暗，或明确的黑白，用一句写它来自这个产品的什么：内容、受众或品牌资产。避开刚拆过的标杆配色；至少一个方向跳出这个品类的默认配色。
3. 写出至少三层：底色、主强调色，以及由它们派生的选中底、描边和禁用态。

黑白灰加一种强调色，甚至完全不用彩色，也是完整的色彩身份，这时颜色交给内容：产品截图、用户的照片、一张画。几个方向之间不按明暗分：头号失败是“一个亮、一个暗、一个暖”，每个方向要有自己的色相家族或材质感，明暗只是结果。

定首屏与工作区骨架

唯一主角与主动作、概念和关键素材来源确定后，先画灰度结构，再把它实现成有视觉细节的首屏。每个方向只画主视口首屏：只用灰阶块、必要文字和动作标记，写出内容层级、对象位置、状态反馈与阅读起点；唯一主角的视觉权重最高，唯一主动作紧邻它或紧随其后，其他动作降级。核心动作会改变状态时，补操作前后两张。只有另一端会改变布局或输入时，才补那一端的灰度；否则留到实现后检查，不在概念阶段写两套方案。

灰度里分不清主角、主动作或状态变化时，重新取舍主次；结构相同就先重写结构，不等字体、色彩和主视觉来救。除概念已经确定的标题外，其余文案在骨架后写并适应骨架。按页面类型选结构：

• 来听一句话、看一张画、被说服的页面（落地页、品牌页、产品发布页、展览页）： 从 8 种首屏骨架里选，跳出左右分栏默认模板。详见 说服型页面首屏骨架 [blocked]。
• 来看内容、挑东西或处理对象的页面（画廊、商店、信息流、文档、作品集、工具和后台）： 首屏就是第一排内容本身或工作区。面包屑、标题、实时状态与全局筛选合并为一排紧凑顶栏（约 56–64px），第一排内容要完整出现在首屏；不放首屏口号，也不放解释这个页面是干什么的段落。多模块后台采用紧凑三行布局（首行 4 张指标卡可将进度环内嵌、中行主态势图配动态流、末行主数据表配排行），在 1440×900 视口内同时露出核心模块与主表前几行。没有工程约束的独立单页优先将 HTML、样式与脚本内聚在单个 index.html 中，静态原型的汇总数字与明细保持直观自洽即可，动手前不另写脚本验算公式；完整详情与日志按需在选中对象后滑出或展开，不用多层小卡片和满屏彩色标签把桌面塞满。
• 两种都有时（例如商店首页顶上有活动横幅）：以用户最常来做的事为准，横幅可以留，但不能把第一排内容推出首屏。

方向卡

每个方向写一张方向卡，每项都填具体选择，不填形容词。明确探索并制作多个首屏时，调性、产品参考与取舍、交互参考与取舍几个方向共用一份（候选分布在不同调性上时，调性各填各的）；每个方向先填北极星、主角与主动作、生成引擎、首屏骨架、字体、色彩、主视觉、图标、控件语法、核心交互、记忆点、资产与技术，其余各栏在方向选定后、做完整页面之前补齐。派生版式时，每个版式变体只重写首屏骨架、页面结构和主视觉三栏：

北极星、字体、色板和特征直接写进对比页 manifest，与画面一同展示。

差异检验

方向卡写完、做首屏之前，先过适配与落地门槛，再比差异。只有一个方向也过同样门槛；有多个对外方向时每个都必须通过，任何一项不过就重写该方向，不降为陪跑：

• 受众、品牌与任务适配：逐项指向产品事实和用户约束，说不清适配依据就退回；不得故意做差来衬托推荐项。
• 核心交互可走通：从唯一主动作到对象变化和结果都有路径，关键状态有去向；只能描述风格、说不出操作结果就退回。
• 资产与技术成本可落地：关键素材有来源，制作数量与技术在任务授权、项目依赖和预算内；指望尚未获得的素材、能力或依赖才能成立就退回。
• 设备与输入可执行：主视口的灰度、输入和反馈已写清；另一端会改变结构或输入时已补方案。不把已知的设备问题留给“后续适配”，没有设备差异时不另写响应式说明。

有多个对外方向时，还要并排比较首屏骨架、字体、色彩、主视觉、核心交互、记忆点六项。基于选定方向派生版式时只比版式，不强制重写核心交互；用户给了品牌规范时字体和配色可共用，其余规则照查：

• 比灰度线框，不比描述：把各方向的主视口首屏线框并排比。描述不同、线框却都是同一结构，重选骨架；填了“页面结构”的候选，页面组织也不能完全相同、只换颜色和质感。
• 视觉四项至多一项相同：首屏骨架、字体、色彩、主视觉四项里，任意两个方向至多一项相同；否则换一个生成引擎重写。每个方向有自己的色相家族或黑白，不只按明暗区分，见“定色彩”。
• 核心交互和记忆点也要比：写出操作路径、对象变化、反馈和关键状态有何不同，以及用户最后会记住哪个动作或时刻。核心交互因任务必须相同时写明理由，不拿按钮换位冒充交互差异；骨架与核心交互相同、记忆点又只是装饰替换的，判定为同构换皮，直接退回，不进入对比页或推荐。
• 至少一个明显不同，但全部适配可落地：至少一个方向在骨架或核心交互上与其他方向明显不同，且所有对外方向都通过上面的门槛。差异来自解决任务的方式，不以极端颜色或构图取胜。
• 至少一个打破品类套路：在同一调性内，至少一个方向不用这个品类的默认版式。打破套路不等于抛弃基线。常见套路如下：
  • 电商：大横幅、商品网格加页脚。
  • 社交：底部标签栏、信息流加悬浮按钮。
  • 落地页：主视觉、特性、用户评价，最后一个行动按钮。
  • 聊天：左侧联系人，右侧消息。
  • AI 与开发者工具：黑色背景、紫蓝发光弥散圆晕、浮空粒子与千篇一律的胶囊按钮。
• 不撞脸：把每个方向和它拆过的标杆并排看，撞脸就重做，定义见“认品类，拆标杆”。沿用基线不算撞脸。
• 盲看：遮住名字和说明只看画面，仍能说出每个方向带给人的不同感受。

有多个首屏时，做出来后再比一次实际画面：在对比页并排看首屏，眯起眼睛只看明暗块面。块面的分布如果相似，比如都是左边一大块、右边一小块，即使字体和颜色都不同，也回到骨架表重做，不靠换装饰补救。

北极星与呼应

北极星选定后，把它落成全页一致的关系：每一屏谁是主角，次要信息怎样退后，哪种排版或图形在全页重复出现形成节奏，哪一处用反差突出主操作。

结构性突破要动的是结构，例如首屏的骨架、比例或阅读顺序，而不是多加一个装饰；它要么让主题更强，要么把人引向关键动作。精修的时候，别把有辨识度的选择磨平。新加的元素如果不能加强同一个意图，就不加。

让人记住的一刻

每个方向选一两处集中发力，其余保持安静。记忆点通常是一个组件的一次动作：结果、材质、光影、手感和节奏都做到位。

去哪里找：

• 用户会做的动作。 点按、拖动、切换、提交，比滚动更容易成为记忆点。
• 关键时刻。 付款成功、第一次完成任务、升级、删除、上传、等结果。这些时刻情绪最强，一个小动画的回报最高。
• 边角页面。 404、空状态、加载、页脚。没人期待，风险又低，最容易出彩。
• AI 在工作的时候。 让过程看得见，进行中和做完的区别直接落在画面和内容变化上，不只靠转圈动画。

怎么想：

• 让结果当场发生。 状态切换不只换一个图标，而是让被影响的东西当场变化。用户看到的是结果，不是控件在表演。
• 把数字画成看得见的量。 百分比、时长、余额，先问能不能画成面积、长度或个数。数字只是标签，量才是画面。
• 借这个领域里的真东西交付结果。 先看用户做这件事时手上拿的是什么、眼里看的是什么，例如音轨、画布图层、包裹、账单，借它的样子和动作把状态交出来。票据、打印机、卡带、老游戏机这类复古道具已经泛滥，跟产品无关就不要套。
• 给控件物理和性格。 拖动有弹性和重量，按下有光影变化，拉过头会不情愿地弹回来。
• 画法要说得出来源。 点阵、字符画、像素、粒子、写实材质这类画法，只有能说出它来自产品做的事时才选。说不出来源就不选；选了就从主视觉一路用到加载、图标和空状态。

参考怎样转为设计决定

先说清这份参考拿来做什么：借它的视觉关系，把它当质量的底线，还是照着它精准还原。看过图再描述它长什么样。借鉴时取的是关系，例如“标题最重，图负责情绪，辅助信息压得很淡”，再拿当前的内容重新组织；不照搬参考里的业务模块、标识和文案。借来的隐喻要落成具体的界面决定，不做成一层妨碍操作的仿真外壳。

参考里没有的东西也是决定。参考的首屏没有标题区和说明段，就不要替它补上；参考没有用的装饰，也不要加回去。

小样、选择与品味

方向只做首屏，不一开始就做多套完整产品；默认数量和确认点见主入口的“形成并收敛方向”，明确比较时按 显式探索 [blocked]。

首屏选能暴露方向优缺点的那一页：含复杂表单的产品不能只做封面。

介绍产品的页面，必须让用户看到产品真正交付的东西：一张生成好的报表、一份导出的合同、一段处理后的真实数据，而不是只用文字承诺“能做什么”。这个实样往往比功能列表更有说服力，也最容易成为首屏以下某一段的主角。

推荐理由从任务适配、辨识度、内容承载、可读性和实现代价里比出来。请用户补充品味时，问想要什么感受、不要什么和为什么、哪些地方要保留。定方向时用户只说“再高级一点”，用上面的翻译表追问，或拿两张小样让用户比较。

把选定方向和品味写进设计说明，作为后续判断基线。评审提出新风格时，先判断它是否解决原目标；只有当前方向确实不适配，或用户改变目标时，才重新探索。