核心设计命题
设计系统的价值来自规则被设计师理解、被研发调用，并在业务场景中持续复用。Design System / 甲方自研
招商银行协同办公设计系统
- 项目范围
- 协同办公设计系统 / 设计中台
- 我的角色
- Design System & Platform Designer
- 负责范围
- 组件梳理、规范文档、典型模板、Token、中台接入
- 项目产出
- 2 套规范 / 107 个组件 / 268 个通用图标
项目概览
项目背景与设计目标
建立一套设计师能理解、研发能引用、平台能维护，并能通过通用模式扩大覆盖的协同办公设计系统。
成都、杭州、深圳三地协同办公产品积累了不同的组件命名、状态和使用方式。我参与回收真实业务资产、对齐通用规则，并把组件、说明、Token、模板与设计中台连接起来。
项目约束
- 成都、杭州、深圳三地业务不同，相似控件存在不同命名、状态、变体和使用边界。
- 组件既要满足设计师调用，也要通过说明、示例和 Token 被研发准确实现。
- 设计系统只有回到通用模式、典型页面和维护流程后，才能扩大覆盖面。
价值链路
从设计需求到系统价值
项目从真实协作问题出发，先服务设计师，再连接研发和平台，最后通过通用模式扩大覆盖。2026 年的 AI / Agent 回看单独放在结尾。
- 01背景与初衷
- 02服务设计师
- 03Token 连接开发
- 04通用模式扩展
- 05AI / Agent 回看
规范落地
让规范从组件文件走进真实工作流
组件说明解决设计使用问题，Token 与中台承接研发实现，通用模式负责验证和扩大覆盖。
组件要同时给出说明与示例
- 问题
- 设计师看到组件样式后，仍然需要判断它适合什么场景、包含哪些状态，以及哪些扩展会破坏一致性。 Button 规范按何时使用、类型、状态、注意事项和更新记录组织，读者无需打开完整组件文件也能理解规则。
- 判断
- 为高频和复杂组件补齐用途、类型、状态、注意事项与示例，让组件成为可以被理解的设计规则。
- 结果
- 为高频和复杂组件补齐用途、类型、状态、注意事项与示例，让设计师能够判断如何使用。
Token 把视觉规则翻译成研发语言
- 问题
- 颜色、尺寸、圆角和状态如果停留在设计稿里，研发需要在每个页面重复解释和实现。 项目参考 Ant Design 的体系整理颜色、状态与尺寸默认值，并参与 Design Token 命名和研发沟通。
- 判断
- 参考 Ant Design 统一 Token 命名与映射，再通过设计中台完成组件封装、配置和维护。
- 结果
- 参考 Ant Design 建立 Token 映射，并通过设计中台封装、配置和维护组件。
设计侧统一颜色、尺寸、状态与组件说明
设计中台封装组件、版本与研发调用方式
通用模式让组件回到业务场景
- 问题
- 组件库中的标准状态无法直接证明它能覆盖不同系统里的真实任务。 人员选择案例来自招乎、问卷、孺牛等系统，覆盖全行、团队、组织、单选与多选场景。
- 判断
- 把组件放回典型模板和人员选择等场景，比较全行、团队、组织、单选和多选差异，再确定类型与边界。
- 结果
- 用通用模式、典型页面和人员选择案例验证组件类型与业务弹性。
多人选择、已选反馈与全行搜索
姓名、工号与组织信息的搜索结果
资产覆盖
真实资产与覆盖面
组件、图标、典型模板和平台闭环共同构成可持续使用的设计基础设施。
设计资产规模与维护闭环
把组件基线、图标资产、通用模式与平台维护放在同一张总览中，说明设计系统的规模和持续使用方式。
- 组件与规范基线
- 107
- 通用图标
- 268
- 通用模式与典型模板
- 可复用
- 平台接入与持续维护
- 反馈闭环
Token 与开发
Design Token 如何连接设计与开发
把语义命名、组件映射和版本兼容接入代码，让设计规则可以检查、迁移和维护。
统一语义
将颜色、尺寸、间距、圆角和阴影收敛为可复用的命名结构。
减少偏差
设计与开发基于同一套规则协作，减少沟通成本和实现偏差。
便于维护
业务、主题或平台变化时只调整 Token，组件自动同步。
Button 状态
Normal
Hover
Active
Loading
Disable
Focus
Token 映射关系
参考 Ant Design，在 V4 与 V5 之间保留语义映射和旧变量兼容关系。
背景色按钮填充色
colorPrimaryBg#296AFDV4: @primary-color
悬停背景色按钮悬停填充色
colorPrimaryBgHover#4D81FFV4: @primary-color-hover
禁用背景色按钮禁用时背景色
colorPrimaryBgDisable#A8C5FFV4: @disabled-bg
文本色按钮文字颜色
colorTextLightSolid#FFFFFFV4: @text-light-solid
禁用文本色按钮禁用时文字颜色
colorTextDisabled#FFFFFFV4: @text-disabled
高度按钮高度（大号）
controlHeightLG40pxV4: @control-height
圆角按钮圆角半径
borderRadiusSM4pxV4: @border-radius-base
代码示例
CSS
:root {
--color-primary: #1677ff;
--control-height-lg: 40px;
--border-radius-sm: 4px;
}JavaScript
export const themeTokens = Object.freeze({
colorPrimary: "#1677ff",
controlHeightLG: 40,
borderRadiusSM: 4,
});TypeScript
export const themeTokens = {
colorPrimary: "#1677ff",
controlHeightLG: 40,
borderRadiusSM: 4,
} satisfies ThemeConfig["token"];Properties
const buttonProperties = {
type: "primary",
size: "large",
loading: isSubmitting,
};
<Button {...buttonProperties}>
提交
</Button>- 01设计侧定义Token 与规则
- 02输出 Token 表Figma / JSON / MD
- 03开发侧接入CSS 变量 / JS 对象
- 04组件使用 Token实现与维护
结果与复盘
落地结果与复盘
只说明已确认的项目产出、个人职责和协作范围，并保留数据边界。
真实产出
项目沉淀 2 套协同办公设计规范、107 个组件、268 个通用图标，以及一批用于验证和复用的典型模板页。
我的职责
我负责组件体系梳理、规范与说明、典型模板、设计中台配置对接、工具迁移后的变体重构，并参与 Design Token 命名与研发沟通。
协作与使用
我与成都、杭州、深圳三地设计团队及研发逐项对齐组件类型、状态和扩展边界，并推动规范进入设计中台与典型业务场景。
数据边界
当前没有可公开的采用率、复用率、维护效率和覆盖系统数量，因此不使用效率百分比描述项目价值。
设计复盘
这个项目让我从单个组件执行转向系统判断：先识别哪些规则必须统一，再决定哪些边界需要留给业务，并用说明、Token、平台和场景把规则持续传递下去。
结构化规则成为新的系统输入
2026 年回看：规范如何进入 AI / Agent 生成链路
现在再回头看这个项目，会发现很多当时花了大量时间做的事情，放到今天正在变成另一种工作方式。组件当然还重要，但它已经不只是“画出来”的产物，而越来越像一套先被定义、再被生成、最后被校正的规则系统。如果今天重做这套体系，我会更早把组件的用途、结构、状态、边界和 Token 命名整理成结构化内容，让它不仅方便设计师和开发理解，也能被 AI 和工具直接读取。
以前规范文档主要写给人看，重点是讲清楚；现在它还需要多一层能力，就是写得足够结构化，能够进入新的生成链路。比如把组件说明整理成 Markdown 或配置文件，明确场景、结构、状态、交互规则和使用限制，它就不只是说明书，也更像是一份可以继续驱动设计生成和代码实现的输入源。这样看下来，这个项目其实比我当时以为的更前置，它训练到的不是单一产出能力，而是把复杂规则整理清楚、再变成系统输入的能力。
对我来说，这也是 2026 年之后更值得继续做的事。重复执行会越来越多地被工具接管，真正被放大的，反而是定义规则、判断边界和校正结果的能力。这个项目当年让我把组件、规范、平台和协同第一次完整接到了一起；放到今天，它也刚好成为我继续理解 AI 时代设计工作方式变化的一个起点。
DESIGN-SYSTEM / DOCS / COMPONENTS / BUTTONS2026.03.25
# Button 按钮 ## 1. 基础信息 | 项目 | 说明 | | :--- | :--- | | **组件名称** | Button | | **分类** | 触发器 | | **平台** | Web | | **版本** | v1.0.0 | | **维护者** | Liu Duo | | **更新** | 2026-03-25 | ## 2. 用途与场景 用于在系统中**触发操作**或**提交命令**。 **核心场景：** - 表单提交与保存 - 弹窗确认与取消 - 页面跳转与导航 - 危险操作的二次确认 ## 3. 结构与布局 按钮由 `Label`、`Icon`、`Loading` 三层组成。 1. **文本层**：显示操作语义，支持中英双语 2. **图标层**：可选前缀/后缀图标，增强识别 3. **状态层**：Loading / Disabled / Focus ## 4. 变体与规格 | 变体 | 用途 | 场景示例 | | :--- | :--- | :--- | | **Primary** | 主操作 | 保存、提交、确认 | | **Secondary** | 次要操作 | 取消、返回、重置 | | **Tertiary** | 辅助操作 | 更多选项、展开详情 | | **Ghost** | 极轻操作 | 链接式跳转 | | **Danger** | 破坏性操作 | 删除、移除、撤销 | ## 5. Token 映射（V4 → V5） 基于 Ant Design 命名规范，完成 V4 到 V5 的 Token 迁移： - `colorPrimaryBg`: 背景色 #296AFD（V4: @primary-color） - `colorPrimaryBgHover`: 悬停色 #4D81FF（V4: @primary-color-hover） - `colorPrimaryBgDisable`: 禁用色 #A8C5FF（V4: @disabled-bg） - `colorTextLightSolid`: 文本色 #FFFFFF（V4: @text-lightsolid） - `controlHeightLG`: 高度（V4: @control-height） - `borderRadiusSM`: 圆角（V4: @border-radius-base） > Token 命名统一后，组件样式可通过 Token 表直接维护，减少设计与开发的沟通偏差。
继续浏览