设计系统组件库
为团队内部项目建立的统一设计语言，包含 Figma 组件库和对应的 React 组件实现。
Project Summary
先看结果，再看过程。
为团队内部项目建立的统一设计语言，包含 Figma 组件库和对应的 React 组件实现。
项目类型
设计
发布时间
2025
交付内容
内容展示页
可查看资料
线上版本 + 源码
这是一个帮助团队从「每个项目都长得不一样」走向「统一视觉语言」的基础设施项目。
设计 Token 系统
从颜色、字体、间距开始定义 Token，通过 Style Dictionary 工具自动生成 CSS 变量、Tailwind 配置和 Figma Variables，保证设计与代码的单一数据源。
组件规范
每个组件包含：Figma 组件（含 Variants 和 Auto Layout）、React 实现（TypeScript Props）、Storybook Story（含交互测试）、使用文档。
推广策略
设计系统最大的挑战不是构建，而是让人用。我们的做法是从最高频使用的按钮、表单、卡片开始，先帮一个项目迁移，形成样板后再推广。