creator-hub/DESIGN.md

name, description, colors, typography, rounded, spacing, components

name	description	colors	typography	rounded	spacing	components
CreatorHub	延续 Ant Design 默认组件的克制、清晰的抖音运营工作台	primary primary-hover primary-active primary-background success warning error neutral-layout neutral-container neutral-text neutral-secondary neutral-disabled neutral-border neutral-divider nav-selected-background nav-selected-text event-like event-follow event-repost source-sync source-notice tag-like-background tag-like-text #1677ff #4096ff #0958d9 #e6f4ff #52c41a #faad14 #ff4d4f #f5f5f5 #ffffff rgba(0,0,0,0.88) rgba(0,0,0,0.65) rgba(0,0,0,0.25) #d9d9d9 #f0f0f0 rgba(0,0,0,0.04) rgba(0,0,0,0.95) #eb2f96 #722ed1 #fa8c16 #faad14 #13c2c2 #fff0f6 #c41d7f	title body label fontSize fontWeight lineHeight 20px 600 1.4 fontFamily fontSize fontWeight lineHeight -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' 14px 400 1.5714285714285714 fontSize fontWeight lineHeight 14px 600 1.5714285714285714	sm md lg 4px 6px 8px	xs sm md lg 8px 12px 16px 24px	button-primary button-primary-hover button-primary-active button-default button-text input nav-selected tag-like card backgroundColor textColor typography rounded padding height {colors.primary} {colors.neutral-container} {typography.body} {rounded.md} 4px 15px 32px backgroundColor {colors.primary-hover} backgroundColor {colors.primary-active} backgroundColor textColor typography rounded padding height {colors.neutral-container} {colors.neutral-text} {typography.body} {rounded.md} 4px 15px 32px backgroundColor textColor typography rounded height transparent {colors.neutral-text} {typography.body} {rounded.md} 32px backgroundColor textColor typography rounded padding height {colors.neutral-container} {colors.neutral-text} {typography.body} {rounded.md} 4px 11px 32px backgroundColor textColor typography rounded {colors.nav-selected-background} {colors.nav-selected-text} {typography.body} {rounded.md} backgroundColor textColor rounded {colors.tag-like-background} {colors.tag-like-text} {rounded.sm} backgroundColor rounded padding {colors.neutral-container} {rounded.lg} {spacing.lg}

Design System: CreatorHub

Overview

Creative North Star: "日常运营工作台"

界面是长期处理账号和数据的工作场所。视觉语言克制、常规、清晰，通过位置、分组、文字层级、轻微颜色和状态反馈帮助使用者判断信息，而不是通过装饰吸引注意。

延续当前 Umi Max 4.7、React 19、antd 6.6.5、Pro Components 3.x 和 Ant Design X 的界面。使用 antd/pro 默认组件，不新建另一套按钮、表单、导航或视觉包装；组件不适合业务时优先调整交互。尺寸根据同屏密度与操作频率选择，不以统一放大来强调可用性。

Key Characteristics:

• 熟悉的组件、图标与交互，不要求使用者学习新视觉隐喻。
• 内容和操作层级清楚，辅助入口不抢主操作的注意力。
• 列表保持适合日常工作的密度，长内容不撑宽页面。
• 未知、错误和处理中有明确反馈，不通过视觉制造假正常。

本文件记录现有系统，不是改版方案。机器可读数值来自已安装 antd 的 theme.getDesignToken()、默认组件与预设色阶，以及 Pro Components 自带的 getLayoutDesignToken() 和 ProLayout 菜单配置；活动代码没有额外自定义主题或全局样式覆盖。ProLayout 内部默认值优先于普通 antd Menu 的默认值，不能把两者混为一套导航配色。前言中的数值是当前默认主题快照，不要求在应用中重复配置。现有实现依据为 web/src/layouts/index.tsx、web/src/utils/metadata.tsx、web/src/components/accounts/ 和 web/src/pages/creator/；产品约束见 PRODUCT.md 与 AGENTS.md。本次是代码分析，未进行浏览器视觉验收。

Colors

使用白色内容区、浅灰页面背景和低对比度分隔，保留 Ant Design 的清晰蓝色作为交互强调；业务标签用少量预设色区分语义，不形成第二套品牌配色。

Primary

• 清晰交互蓝（colors.primary）：主要按钮、链接及组件原生交互强调。悬停与按下使用默认蓝色色阶，不额外添加渐变、光晕或重色块。
• 浅蓝交互底（colors.primary-background）：组件原生的轻度强调，不用于整块表格或整页背景，也不替代 ProLayout 的侧栏选中底。

Neutral

• 浅灰工作底（colors.neutral-layout）：页面底层，与白色卡片区分。
• 白色内容面（colors.neutral-container）：表单、卡片和弹层的主要承载面。
• 深色正文 / 次级说明 / 禁用文字（colors.neutral-text、colors.neutral-secondary、colors.neutral-disabled）：使用默认透明度表达层级，禁用色不承担重要正文。
• 控件边界 / 轻分隔（colors.neutral-border、colors.neutral-divider）：区分输入、表格和内容分组，不增粗边框制造强调。
• 侧栏浅灰选中底 / 深色选中文字（colors.nav-selected-background、colors.nav-selected-text）：沿用 ProLayout 自带侧栏配色，不改成普通 antd Menu 的浅蓝底与蓝字。

Named Rules

The Semantic Color Rule. 颜色必须同时有文字说明：成功、警告和错误使用相应状态组件；事件类型固定为点赞粉色、评论蓝色、关注紫色、转发橙色，来源固定为同步金色、通知青色。不得仅靠颜色解释状态。

事件和来源采用 Tag 的 magenta、blue、purple、orange、gold、cyan 预设。前言中的事件色是色系主色；实际 Tag 文本、背景和边框由 antd 的该色系生成，不能把主色强行用作所有文字。tag-like 记录其中一个实际预设样例。

Typography

Body Font: 使用前言中的 antd 系统字体栈，标题和标签沿用同一字体。中文由用户系统可用字体呈现；不新增网络字体、专属展示字体或装饰性字形。

Character: 字体服务于连续阅读和数据判断。中文标题与正文遵循默认组件层级，不使用大段全粗体或宣传式大标题。

Hierarchy

• Title：默认四级标题角色，用于常规内容标题；页面标题的实际呈现由 PageContainer 决定，不单独覆盖。
• Body：表格内容、表单值、操作名称和说明的主要角色；默认字号与行高见前言。
• Label：需要强调的字段或小节名称，沿用默认加粗，不另设字体。
• 更小的辅助文字、其他标题级别和控件大小交由 Typography 与组件自身 API，不将三个记录角色当成全站强制字号表。

The Honest Hierarchy Rule. 标题说明“这是哪里”，正文说明“发生了什么”，辅助文字说明“下一步怎么办”；不能用放大字号掩盖状态缺失或信息组织问题。

Layout

• 全局使用 ProLayout 的混合布局与固定侧栏，菜单按“运营”“资源”分组，工作台为独立入口。侧栏不另造品牌区；详情页选中所属菜单，不同时高亮多个前缀相近的入口。
• 页面标题和副标题来自 PageContainer，不在卡片内重复页面标题。当前全站关闭面包屑；登录页不经过主布局。
• 列表主操作放在表格 Card 内右上角，与左侧统计信息同行，使用 Flex justify="space-between" align="center"；操作行与后续内容间距为 spacing.md。不得同时在页头重复注册同一列表操作。
• 非列表页操作可使用现有页头槽，与实体信息同处 content 行；沿用默认布局能力，不另造浮动工具栏。
• ProLayout 自带的轻背景过渡属于库默认表现，不新增装饰性渐变，也不为消除它而改写主题。PageContainer 的默认内容留白由库处理，不把其较大边距推广到所有控件。
• 间距采用组件默认值和前言中的常用刻度。并非所有内容都必须使用同一内边距；普通 Card 默认内容留白与紧凑列表区应根据组件能力选择。
• 筛选行可以换行。内容必须约束在可用宽度内；长文本完整换行，不撑宽整页。确需横向空间的数据表使用组件的滚动能力，不把桌面表格硬挤成不可读的窄列。
• 默认组件保留自己的响应能力，但本项目没有已验收的独立手机布局。本次不承诺额外断点布局或移动端功能；侧栏折叠、菜单与控件适配优先使用 ProLayout/antd 原生能力。
• 返回列表保留筛选、TAB 和浏览位置；改变筛选或每页数量回到第一页。该行为避免工作中断，不通过重新排列页面表达状态变化。

Elevation & Depth

界面以背景层次和轻边界组织信息；普通内容区不额外叠加强阴影。Modal、Dropdown、Tooltip、Popover 等短暂浮层保留组件默认深度，以区别于页面内容。不是“全站禁止阴影”，也不是每张卡片都需要悬浮感。

Shadow Vocabulary

• 默认浮层阴影：沿用 antd 的 boxShadow / boxShadowSecondary，准确值记录在 .impeccable/design.json；不在业务页面写另一套近似值。
• 默认控件反馈：按钮自身的轻阴影和输入焦点反馈由组件保留，不扩大为卡片外发光。

The Quiet Depth Rule. 普通内容靠层次与分组，浮层靠默认深度；不要用厚阴影、粗描边或装饰性渐变提高存在感。

动效只用于组件状态、展开与关闭等反馈，沿用 antd 默认速度与缓动。不添加循环装饰动画，也不以假进度或永不结束的骨架屏掩盖未实现功能。

Shapes

采用默认组件的轻圆角：常规输入与按钮使用 rounded.md，Tag 等小元素使用 rounded.sm，Card 等容器使用 rounded.lg。这些是默认刻度，不需要给所有现有元素手动写圆角。

表格、表单和内容区保持常规轮廓。不要将辅助开关、工具按钮或状态标签放大成胶囊式视觉中心，不增加厚边框、大圆角和装饰性形状。

作品小封面沿用现有业务组件。事件聚合的对应作品使用 48px 小封面；不同列表的封面尺寸按已有组件与信息密度处理，不推广为全站图片规格。

Components

Buttons

常规、清晰，突出当前任务而不是按钮本身。

• 主操作使用原生 Button 的主要样式；列表新增等入口采用通用图标并放在卡片内。
• 次级操作使用默认按钮、文字入口或“更多”菜单。每行只保留必要的状态感知主操作，不铺开所有动作。
• 默认大小、悬停、按下、焦点、禁用和 loading 由组件处理；不能把默认控件高度当成必须统一放大的下限。
• 暂停、停止和删除等有影响的动作明确确认。危险语义采用组件原生 danger，不通过自制颜色替代。

Tags & Status

轻量、带明确文字，不作为大面积视觉装饰。

• 类型与来源使用预设彩色 Tag；采集状态仅一个 Tag，异常优先，原因去重后通过 Tooltip 说明。
• 未登录环境使用“待登录”；没有状态或读取失败不能显示成正常。
• 不以 Tag 替代按钮，不通过没有文字的圆点要求使用者猜测含义。

Cards / Containers

白色内容面，边界轻，间距常规。

• 使用默认 Card 与内容留白，按需要通过组件属性区分边界，不用额外包装组件重做卡片。
• 卡片小节标题可保留；页面标题只能出现于全局页头。统计信息与主操作遵循 Layout 中的排列。
• 普通卡片不追加阴影、重底色或大圆角。

Inputs / Fields

直接表达输入规则，错误紧邻对应字段。

• 使用 Form、Input、InputNumber、Select 等原生控件；数据来自可搜索下拉时不提供未经确认的手填替代。
• 保留默认焦点、错误、禁用和校验反馈。标签不能只放在 placeholder 中，重要错误不能只靠颜色表达。
• 原生 Modal 承载列表中的创建流程；创建成功关闭并刷新，失败保留填写内容和清楚的错误提示。
• 帮助文字说明实际格式或限制，不为短表单增加多余步骤。

Navigation

可辨认、稳定，不抢内容的注意力。

• 菜单及中文标题以 web/src/utils/metadata.tsx 为准；延续 ProLayout 默认交互，不定制深蓝侧栏或另一套导航样式。
• 图标来自 @ant-design/icons，选用行业通用隐喻，不自行发明不熟悉的符号。
• 来源切换使用原生 Tabs；各来源独立保存筛选和分页，不让切换导致上下文丢失。

Tables & Content

适合反复筛选、比较和追溯，不为装饰牺牲密度。

• 账号名、时间、指标和操作各有明确列语义。缺少指标显示“—”，缺少昵称使用已确认的前端提示，不伪造真实资料。
• 长事件内容在列内完整换行，不截断、不折叠、不添加“展开”，也不能撑宽页面。
• 作品入口配合本地小封面；缺图保持入口和明确提示，不以远程图片掩盖缓存失败。
• 分页、筛选、空状态和错误状态使用默认组件；空列表不是错误，读取失败不是空列表。

Conversations

沿用聊天组件，让联系人、消息和输入保持熟悉关系。

• 私信使用 Ant Design X 的 Conversations、Bubble.List 与 Sender，不另造聊天皮肤。
• 同一联系人在不同账号下保持独立会话，所属账号清晰，刷新和加载更多不改变当前选中会话。
• 消息的发送中、失败和结果未确认需要可辨认说明，不展示没有证据的送达或已读状态。

Feedback

出现问题时说明当前结果与可执行动作，不能悄悄消失。

• 使用 Alert 的 title / description，通过 App.useApp() 获取消息实例；不重新使用弃用 API。
• 纵向排列使用 Flex vertical，不恢复 Space direction。
• 断线、缺失资料、下载失败和校验失败显示不同原因；正在处理只对真实请求显示 loading。
• Empty 说明无数据或未实现功能。当前工作台以此说明看板尚未实现，不展示假图表、假数据或假骨架屏。

.impeccable/design.json 提供工具面板用的独立 HTML/CSS 样例、默认阴影、动效、断点及色阶。样例从现有默认组件翻译，供工具预览，不是可复制到应用中的自定义组件或样式；应用仍使用原生 antd/pro。工具预览不能替代实际界面验收。

Do's and Don'ts

Do:

• Do 沿用原生 antd/pro 的样式和状态，通过组件 API 解决布局与交互需求。
• Do 让标题、统计、筛选、列表与操作有清楚层级，主操作只在对应区域出现一次。
• Do 用文字和组件状态同时解释未知、错误、处理中和完成。
• Do 将长内容约束在列内，保持真实资料、作品入口和缺图提示可辨认。
• Do 保留键盘焦点、可见标签和通用图标，修改后与同屏信息密度对照检查。

Don't:

• Don't 恢复 MUI、react-admin、旧深蓝导航或另一套独立主题。
• Don't 新建视觉包装组件或通过 CSS 覆盖默认组件样式；现有业务组件不等于新的设计系统封装。
• Don't 主动放大控件，增加厚边框、强阴影、大圆角、装饰性渐变或营销页式布局。
• Don't 仅靠颜色传达状态，或把未知、断线、缺失数据呈现为正常、零或完成。
• Don't 用编造的头像、指标、图表、远程封面或无限加载来隐藏真实缺失与未实现功能。