One Design Next

基于 TAD One Design & WXAD AD UI 设计语言的 React 组件库

通用业务控件 / 平台布局 / GenUI 对话组件 / AI Skill 工程化流水线

概览

One Design Next 是腾讯 TAD / WXAD 团队维护的 React 组件库，提供 70+ 组件，涵盖：

• 基础 UI — 按钮、表单、表格、对话框、导航等通用控件
• 平台布局 — 如翼（RuyiLayout）、MP（MpLayout）、互选（HuxuanLayout）等业务平台专用布局
• GenUI — AI 对话场景组件（Composer、StreamText、ChatItem、AgentStep 等）
• AI Skill 系统 — 配套 Cursor Skill 流水线，支撑需求分析到页面落地的全流程

配有 Dumi 文档站，支持组件预览、区块示例与设计 Token 文档。

快速开始

安装

npm install one-design-next

# 或使用 pnpm
pnpm add one-design-next

使用

// 1. 引入全局基础样式（入口文件中引入一次即可）
import 'one-design-next/dist/styles/base.css';

// 2. 按需导入组件
import { Button, Table, Dialog, Composer } from 'one-design-next';

构建产物位于 dist/ 目录（由 father 生成）。除 base.css 外，可按需引入更细粒度样式，详见文档站说明。

组件一览

完整导出清单以 components/index.ts 为准，分类说明与 Props 索引见 component-list.md。

| 分类 | 组件 | | :----------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 通用 | Button Icon Link Avatar Image HoverFill ConfigProvider | | 布局 | Card Collapse ScrollArea RuyiLayout MpLayout HuxuanLayout | | 导航 | Tabs Dropdown Pagination Cascader TreeSelect | | 数据录入 | Form Input InputNumber InputOtp Select AutoComplete Checkbox Radio Switch Slider ColorPicker DatePicker DateRangePicker TimePicker Calendar | | 数据展示 | Table Chart VirtualList NumberFlow EllipsisText TextSwap Empty | | 反馈 | Dialog Drawer Message Alert Tooltip Popover Loading | | GenUI | Composer StreamText ChatItem AgentStep AgentThink Artifact Invocation Mention CodeBlock PreviewPanel ActionBar Attachments MessageImage Sources Provenance Suggestions SkillSlot UserBubble Welcome ErrorBlock Fab | | 底层 | ModalBase 系列 PopBase 系列 Collapsible 日期 / 时间工具函数 |

GenUI 共享类型（ToolCall、ChatMessage、Conversation 等）通过 _genui-types 统一导出。

主题定制

One Design Next 提供两种主题定制方式：

| 方式 | 适用场景 | 说明 | | :----------------- | :---------------------------------------------- | :------------------------------------------ | | CSS Variables | 全局主题、脱离 React 树的场景（如 Message） | base.css 提供基础 token，组件级变量可覆盖 | | ConfigProvider | 需要 React 上下文的定制（图标解析、按钮行为等） | 通过 Provider 注入配置 |

本地开发

推荐使用 pnpm，与仓库脚本一致。

# 安装依赖
pnpm install

# 启动开发（构建 variables / benchmark / feedback 数据后启动 Dumi 文档站）
pnpm run dev

# 组件库构建（father 构建 + 样式管线）
pnpm run build

# 文档站静态构建
pnpm run docs:build

常用脚本

| 命令 | 说明 | | :--------------------------- | :-------------------------------- | | pnpm run dev | 启动本地开发文档站 | | pnpm run build | 构建组件库（father + 样式） | | pnpm run docs:build | 静态构建文档站（含 LLM 知识生成） | | pnpm run docs:preview | 本地预览文档产物 | | pnpm run build:skills | 构建多产品 Skill 发布包 | | pnpm run create-component | 创建新组件脚手架 | | pnpm run create-skill | 创建新 AI Skill | | pnpm run test | 运行 Vitest（watch 模式） | | pnpm run test:ci | 运行 Vitest（CI 模式） | | pnpm run test:changed | 仅测试改动相关用例 | | pnpm run typecheck | TypeScript 类型检查 | | pnpm run benchmark | 运行性能基准测试 | | pnpm run benchmark:compare | 对比性能基准 | | pnpm run benchmark:auto | 仅运行自动基准任务 | | pnpm run lint | ESLint + Stylelint 代码检查 | | pnpm run release | 版本发布 |

仓库结构

one-design-next/
├── components/            # 组件源码与样式（60+ 组件）
│   ├── button/
│   ├── composer/
│   ├── stream-text/
│   ├── _genui-types.ts    # GenUI 共享类型
│   ├── _util/             # 内部工具函数（日期、时间等）
│   └── index.ts           # 统一导出入口
├── docs-pages/            # 文档与示例
│   ├── doc/               # 设计 Token 等文档页
│   ├── block/             # 区块级 demo（与 block-catalog 知识对应）
│   ├── workshop/          # 页面级 / 评测向用例
│   ├── draft/             # 草稿区（对话场景 demo / 团队内部 vibe coding）
│   ├── dev-diary/         # 设计系统演进笔记
│   └── feedback/          # 反馈文档入口
├── .cursor/skills/        # AI Skill 知识包与流程（SKILL.md 为总入口）
├── .dumi/                 # Dumi 配置与构建数据
├── scripts/               # 构建、benchmark、反馈等工具脚本
├── benchmark/             # benchmark 原始数据与对比结果
├── tests/                 # 组件与文档回归测试
├── skills/
│   └── odn-design-ruyi/   # 如翼设计 Skill（直接发布此目录，无 src/dist）
├── dist/                  # 组件库构建产物
└── public/                # 静态资源

AI Skill 系统

项目配套完整的 AI Skill 流水线，总入口为 .cursor/skills/SKILL.md。

工作流

需求分析 → 设计规格 → 区块 / 页面实现 → 质量审查 → 精修发布 → 反馈采集

阶段说明

| 阶段 | Skill | 职责 | | :----------- | :--------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------- | | P1 设计 | p1-design-analyst · p1-design-spec | 需求结构化分析、组件级设计说明 | | P2 知识 | p2-one-design · p2-block-catalog · p2-business-knowledge · p2-page-catalog | 组件库知识、区块目录、业务页面知识 | | P3 执行 | p3-page-implement | 用 ODN 组件 + 区块拼装页面代码 | | P4 质量 | p4-audit · p4-polish | 代码质量审查、发布前精修 | | 内部维护 | p4-figma-to-block · p5-figma-to-page · p4-component-update-process · p5-dmp-web-restore · p5-fe-free-trade-restore | 设计稿转区块/整页、组件更新、线上页面还原（仅维护者本地用） | | 辅助 | ten-questions · philosophy-talks | 方法论讨论与设计哲学 |

Skill 发布

对外发布目录就是 skills/odn-design-ruyi/，不再经过 src → dist 拷贝。

外部平台只读消费该目录，不修改本仓库的组件与区块。

发布

环境准备

在 ~/.npmrc 中配置 npm 账号的 _authToken（需有 one-design-next 包的发布权限）。

发布流程（推荐）

git checkout master && git pull origin master

# 自动执行：版本号更新 + CHANGELOG 生成 + build + git push + npm publish
pnpm run release

# 可选：指定版本策略
pnpm run release patch
pnpm run release minor
pnpm run release major

提交信息遵循 Conventional Commits 规范（通过 commitlint + husky 钩子校验）。

相关链接

• npm 包 — one-design-next

协议

MIT License © TAD / WXAD Design