TDesign

面向设计师与前端开发者，腾讯开源的企业级设计体系TDesign提供统一设计语言、视觉风格及多框架开箱即用的UI组件库，旨在为工作流注入美学体验。

核心能力

• 统一设计价值观：基于腾讯各业务沉淀的设计规范，保证跨产品一致性
• 多技术栈组件库：同时提供Vue2、Vue Next、React及Flutter版本，覆盖桌面端与移动端
• Flutter专用库：2023年12月以MIT协议开源，支持移动应用Flutter开发，含TDesign风格组件、主题定制、常用Icon库及色值声明类TDColors
• 主题中心：通过Design Token实现UI定制，支持CSS Variables纯前端注入，官网实时预览变更，可下载CSS文件跨项目复用
• 主题模板：提供多样化业务属性模板，一键切换业务主题，提升搭建效率
• TColor色阶工具：自动矫正不建议使用的颜色，辅助生成符合规范的色阶

适用场景与人群

• 企业级产品团队：需要统一视觉规范且跨框架（Vue/React/Flutter）复用的中后台或移动应用
• 设计师与开发者协作：设计语言与组件代码同步，减少设计与开发之间的理解偏差
• 个性化品牌定制：通过主题中心调整Design Token，适配不同企业品牌色与风格

上手与使用方式

• 官网直接试用：TDesign官网提供在线组件预览与代码示例，无需本地搭建
• 框架选择：根据项目技术栈选择Vue2、Vue Next、React或Flutter版本，各版本均提供完整文档
• 主题定制流程：在主题中心调整颜色、圆角等Token，实时预览并导出CSS文件，直接应用于多个项目
• Flutter集成：通过GitHub仓库获取TDesign Flutter库，按MIT协议自由使用与修改

开源与社区生态

• 开源协议：TDesign Flutter采用MIT协议，其他组件库遵循腾讯开源规范
• 社区驱动：主题中心功能由开源社区与腾讯团队协作完成，持续迭代
• 持续更新：自2021年末开源以来，已推出主题配置、Design Token全面融入代码、主题中心等重大功能

常见问题

Q1：TDesign的Flutter组件库支持哪些平台？

A1：TDesign Flutter基于Flutter框架，通过一套代码库即可构建iOS、Android等多平台原生应用，2023年12月已在GitHub以MIT协议开源。

Q2：如何在TDesign中定制企业品牌主题？

A2：通过主题中心（官网功能）调整Design Token（如颜色、圆角），使用CSS Variables纯前端注入，官网实时预览效果，最终可下载CSS文件直接用于Vue、React等多个框架项目，无需重复设计。

Q3：TDesign提供哪些前端框架的组件库？

A3：官方提供Vue2、Vue Next、React及Flutter四种技术栈的组件库，覆盖桌面端与移动端，各版本均保持统一设计语言。

更多同类工具与网站,可在React分类继续挑选。

信息核实于 2026年7月,具体以官网为准。