VISUAL IDENTITY
黑底、薄荷绿、角色阵列
黑底建立技术氛围，绿色承担 CTA 与能力强调；多个 3D 机器人以职业道具区分角色，让“多 Agent”无需解释即可被看见。
00 / EXECUTIVE
SUMMARY
SUMMARY
不是四套皮肤，
而是四种产品立场
真正值得借鉴的不是某个圆角或某种渐变，而是视觉选择如何服务产品定位。四家都以对话为入口，但对“AI 是什么”的表达完全不同。
WorkBuddy 把 AI 画成团队，Kimi 把 AI 组织成能力目录，ChatGPT 把 AI 隐入通用容器，Claude 把 AI 写成思考伙伴。
01 / CROSS
COMPARISON
COMPARISON
设计风格横向对标
同一维度放在一起看，才能区分“行业共识”和“品牌特征”。以下颜色与字体来自公开页面采样，产品迭代后可能变化。
| 维度 | WorkBuddy | Kimi | ChatGPT | Claude |
|---|---|---|---|---|
| 品牌命题 | AI 专家团队，强调执行与交付 | 模型即产品，强调能力与效率 | 通用 AI 工具，强调低门槛与连续对话 | 思考伙伴，强调理解、写作与复杂工作 |
| 官网气质 | 游戏化科技、角色化、强营销冲击 | 黑色技术博客、研究发布、数据密集 | 现代编辑、留白极多、内容主导 | 人文编辑、暖纸色、手绘符号 |
| 产品 UI | 左侧能力导航＋中央任务入口 | 大 Composer＋能力标签显性陈列 | 极简聊天容器＋渐进披露工具 | 聊天与 Artifact 并置，重阅读与编辑 |
| 主色策略 | 薄荷绿＋黑，强反差 | 产品白黑；技术内容蓝黑 | 大面积中性灰白，颜色让位于内容 | 暖白＋陶土橙＋墨黑 |
| 字体策略 | 粗黑展示体＋圆体/无衬线正文 | 系统无衬线，技术页面高密度 | 中性无衬线，字级与留白建立秩序 | 衬线标题＋无衬线正文，编辑感突出 |
| 图形语言 | 3D 猫形机器人、霓虹、角色分工 | K 字标、数据图、模式/能力图标 | 抽象符号、实拍/生成图、极少固定装饰 | 手绘线条、人脸轮廓、太阳/星芒符号 |
| 圆角与容器 | 产品中等圆角；营销大胶囊与深色大板块 | 输入框 10px 左右；能力采用胶囊标签 | Composer 大圆角；界面边界弱化 | 8px 左右；纸张式容器与克制描边 |
| 信息密度 | 官网高、产品中 | 官网研究页高、产品首页低 | 默认低，工具与内容按需出现 | 中低，长文与产物阅读优先 |
| 记忆点 | 多角色机器人专家团 | 能力标签和研究型黑色视觉 | 几乎没有视觉噪声的通用工作面 | 暖色纸张＋衬线标题＋手绘人文符号 |
WorkBuddy
以“虚拟专家团队”建立具象 Agent 心智：官网负责把能力演成角色，产品负责把角色收回到任务入口。
TEAM × DELIVERY
UI LANGUAGE
能力导航明确，任务入口聚焦
- 左侧列出任务、专家、技能、连接器与资料库。
- 中央用欢迎状态、场景开关和技能标签降低首次使用成本。
- 图标与文字配对，适合能力数量较多的 Agent 产品。
STYLE POSITION
游戏化企业科技
品牌强度
92
界面克制
58
能力可见
90
LEARN
值得学习
用角色、任务和最终文件表达 Agent 的价值；复杂能力使用清晰分组，不把全部入口塞进一个“+”菜单。
RISK
注意风险
官网 IP 与霓虹信息量很高，若原样进入工作页面，会压低专业阅读效率；桌面客户端心智也不适用于 PmWork 云端页面。
PMWORK TRANSLATION
转译为红圈
保留“Agent 有身份”和“结果可交付”，但 IP 缩成头像、状态和空页面反馈；工作区以任务节点而非角色海报为主。
Kimi
产品首页极简，但不会隐藏核心能力；公开技术内容则以黑底、数据图和高密度文本塑造“模型能力可信度”。
CAPABILITY × SPEED
VISUAL IDENTITY
黑白骨架＋蓝色能力信号
公开研究页面使用黑色基底和蓝色数据高亮，内容像开发者文档；产品首页回到白底，以 K 字标和功能入口建立识别。
UI LANGUAGE
大输入区＋能力胶囊
- Composer 占据视觉中心，任务描述空间大。
- 模型/思考强度与 Agent 模式就在输入区内。
- Websites、Docs、Slides、Sheets、Deep Research 等能力直接陈列。
STYLE POSITION
技术理性＋功能显性
品牌强度
72
界面克制
81
能力可见
96
LEARN
值得学习
能力无需用户猜测；模型、模式、附件与发送动作在一个输入容器里形成完整决策链。
RISK
注意风险
能力标签无限增加会变成工具目录；技术发布页的深色高密度不能直接套在日常办公工作台。
PMWORK TRANSLATION
转译为红圈
首页只展示 4–6 个高频交付类型；更多技能通过二级面板展开。运行模式改成“默认审批 / 自动执行”等业务语言。
ChatGPT
把品牌视觉噪声降到最低，让输入、内容和正在使用的工具成为界面主角；官网则像一本不断更新的数字杂志。
CONTAINER × CLARITY
VISUAL IDENTITY
高留白、黑白秩序、内容换皮
品牌页面不依赖固定装饰风格，而以超大标题、严格栅格、真实媒体与生成内容建立每次发布的主题。产品本身主要是中性色。
UI LANGUAGE
弱边界和渐进披露
- 入口只有一句提示与 Composer，极低决策压力。
- 左侧历史和项目承担长期上下文，中心专注当前任务。
- 工具藏在“+”与上下文推荐中，用到时才出现。
STYLE POSITION
通用、安静、内容优先
品牌强度
68
界面克制
98
能力可见
60
LEARN
值得学习
把视觉资源留给用户内容；默认状态安静，复杂能力通过项目、工具菜单和右侧工作区逐层展开。
RISK
注意风险
它依赖极高品牌知名度。红圈若完全采用黑白极简，会失去品牌识别，也无法体现 PmWork 的任务管理差异。
PMWORK TRANSLATION
转译为红圈
继承低噪声 Composer 与项目容器，但用红线任务节点、审批状态和产物类型建立 PmWork 专属认知。
Claude
把 AI 从“机器工具”转成“思考伙伴”：衬线字、暖纸色、手绘线条提供人文温度，Artifact 则把回答升级为可编辑作品。
THOUGHT × ARTIFACT
VISUAL IDENTITY
暖纸、陶土橙、手绘思考
衬线大标题拉开与科技品牌的距离；不规则手绘图形与太阳/星芒标识强调人的思考，而不是算力和速度。
UI LANGUAGE
对话旁边就是作品
- Artifact 让文档、代码、图表与网页成为独立可编辑区域。
- 内容版本、导出、发布与继续修改形成完整产物流。
- 文字行宽、段落节奏和暖色背景服务长时间阅读。
STYLE POSITION
人文编辑＋可编辑产物
品牌强度
94
界面克制
88
能力可见
68
LEARN
值得学习
把长内容当作品设计，而非聊天气泡；右侧产物区清晰区分“AI 过程”和“用户最终要交付的东西”。
RISK
注意风险
暖米白、陶土橙、衬线字已经高度属于 Claude；若直接借用会产生明显仿制感，也不匹配红圈品牌。
PMWORK TRANSLATION
转译为红圈
借右侧 Artifact 逻辑，不借暖橙视觉。PmWork 产物区使用冷白纸面、红色版本节点和清晰的审批/导出控制。
06 / VISUAL
DNA LIBRARY
DNA LIBRARY
从竞品提炼出的
设计元素库
这些是可迁移的设计机制，不是要复制的视觉资产。每一项都要经过红圈品牌、云端 Web 工作流和企业任务语境的重新定义。
视觉身份
主色策略一个高识别品牌色＋大面积中性色；主色只承担行动、状态和记忆点。
品牌符号WorkBuddy 用 IP，Kimi 用字标，ChatGPT 用容器一致性，Claude 用手绘符号。
宣传图角色叙事、技术数据、主题内容、人文抽象分别对应四种传播策略。
摄影/插画应服务发布主题，而不是作为 AI 产品的通用“科技背景”。
界面骨架
左侧栏承载项目、任务历史、长期上下文与能力分组，不承担主要内容阅读。
Composer任务描述、附件、执行模式、模型/专家与提交动作应成为一个决策单元。
过程区Agent 产品需要展示计划、工具调用、审批和错误恢复，而不只是流式文字。
产物区文档、表格、报告与网页需要独立预览、版本、编辑、导出和分享。
版式与密度
首次首页低密度：一个清晰命题、一个 Composer、4–6 个常用能力入口。
执行页面中高密度：任务进度、Agent、工具、审批、产物并存，但按列分区。
阅读页面控制文本行宽 640–760px；表格与图表可扩展到更宽画布。
留白节奏留白用于分层和聚焦，不能用来掩盖缺失的信息架构。
质感与动效
圆角Composer 可更圆；数据表、任务列表和文档区应保持克制，避免所有元素胶囊化。
阴影只表达浮层、拖拽和层级；常规卡片优先使用背景差与 1px 描边。
动效重点表现计划生成、节点推进、产物完成和等待审批，不做持续装饰动画。
状态运行中、等待用户、成功、风险、失败必须同时依赖图标、文字和颜色。
上下文容器
项目、空间、资料、指令和历史形成持续工作的范围。
任务 Composer
从聊天输入升级为带上下文、模式和审批策略的任务委托器。
可审核执行
把 Agent 的计划、调用、等待和风险转成可理解的过程界面。
可编辑产物
最终价值落在文件、报告、表格、页面及其版本，而不是对话长度。
07 / PMWORK
TRANSLATION
TRANSLATION
红圈 PmWork 的
对标设计方向
对标大厂不等于视觉拼贴。PmWork 要保留红圈的红、圆形资产和机器人 IP，同时建立自己的任务过程符号：红线与节点。
Red Thread Workspace
红线任务工作台
WorkBuddy任务交付
＋
Kimi能力可发现
＋
ChatGPT低噪声容器
＋
Claude产物工作区
＋
红圈红线与圆形节点
Logo 联署、主 CTA、焦点、活动任务节点、关键完成反馈。品牌红占画面约 8–12%。
首次欢迎、Agent 头像、空状态、等待与完成反馈。工作中不使用大型 3D 角色背景。
2px 连接线表达任务顺序，实心圆表示进行中，空心圆表示待执行，带勾圆表示完成。
左侧 272px 项目与任务；中央弹性执行区；右侧 320–360px 产物、版本与审批。
BRAND#E5484D
ACTION#C92F37
DEEP#A9222A
SOFT#FFF1F1
INK#1D1D1B
MUTED#6F6F6A
CANVAS#F7F7F5
IP SIGNAL#16B8C6
08 / DESIGN
DECISION
DECISION
采用、转译与避免
用于设计评审时快速判断方案是否真正吸收了对标，而不是停留在“像某一家”的表面模仿。
直接采用的机制
- 低门槛 Composer 中心
- 高频能力可发现
- 项目作为上下文容器
- 执行过程可审核
- 产物独立预览和版本管理
必须品牌化转译
- 右侧 Artifact → 红圈产物区
- 多 Agent 头像 → 红圈 IP 状态头像
- 进度时间线 → 红线任务节点
- 能力标签 → 交付类型与技能组合
- 暖/蓝/绿强调 → 红圈品牌红
明确避免
- 复制竞品 Logo、品牌色或组件比例
- 大面积机器人海报进入工作界面
- 用“黑底科技感”代替信息架构
- 所有组件都做成圆角胶囊
- 把云端 Web 设计成桌面客户端
09 / PUBLIC
SOURCES
SOURCES
公开来源与边界
报告基于截至 2026-08-07 可访问的官方公开页面、官方帮助中心与公开产品图。截图只用于设计研究和内部讨论。
WorkBuddy 官方首页https://www.workbuddy.cn/
WorkBuddy AI 专家团https://www.workbuddy.cn/work/
Kimi 官方产品页https://www.kimi.com/
Kimi 官方界面概览https://www.kimi.com/help/getting-started/overview
Kimi K2.5 官方技术发布https://www.kimi.com/blog/kimi-k2-5
ChatGPT 官方产品页https://chatgpt.com/
ChatGPT Projects 官方说明https://help.openai.com/en/articles/10169521-projects-in-chatgpt
ChatGPT Canvas 官方说明https://help.openai.com/en/articles/9930697-what-is-the-canvas-feature-in-chatgpt-and-how-do-i-use-it
OpenAI 产品发布页面https://openai.com/index/introducing-chatgpt-images-2-0/
Claude 官方产品页https://claude.com/product/overview
Claude Artifacts 官方说明https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them
Claude Projects 官方说明https://support.anthropic.com/en/articles/9519177-how-can-i-create-and-manage-projects
说明：页面颜色与字体值来自公开网页的样式采样与视觉观察，不等同于各公司对外发布的完整品牌手册；部分产品界面会因登录状态、地区、套餐和灰度实验不同而变化。报告中的“设计评分”用于相对比较，不代表产品质量排名。