TDesign简介

TDesign是腾讯开源的一套完整企业级设计体系，提供了基于Vue 2/Vue 3/React/微信小程序/Flutter/UniApp等多个技术栈的组件库解决方案。

TDesign的特性主要体现在以下方面：

• 完整：同时覆盖桌面端和移动端，提供Figma、Sketch、Adobe XD等设计资源，支持主流设计工具协作；

• 一致：各技术栈的组件API与视觉风格高度统一，跨端开发时能保持产品体验的一致性；

• 易用：提供Starter Kit脚手架快速上手，支持通过Design Token灵活定制设计风格，降低使用门槛；

• AI友好：提供了TDesign MCP服务器，AI编程工具接入后可以精准查阅组件文档、API、示例代码和图标，非常适合使用AI来辅助开发，大幅提升开发效率。

下面是使用TDesign开发的后台管理系统的效果图，界面还是很炫酷的！

初始化项目

TDesign提供了开箱即用的脚手架工具TDesign Starter，我们可以通过它来初始化项目。

• 首先需要使用npm安装tdesign-starter-cli，注意使用nodejs v22以上版本，否则会有版本兼容问题；

npm i tdesign-starter-cli -g

• 接下来使用tdesign-starter-cli的init命令来初始化项目；

td-starter init

• 初始化过程中，我们需要经历填写项目名称、选择模板类型、选择生成代码版本及选择包含模块等步骤，完成后会自动初始化项目；

• 项目初始化完成后，可以使用npm命令来安装项目依赖并运行；

npm install
npm run dev

• 运行成功后，通过浏览器就可以看到TDesign生成的项目页面了，效果还是挺炫酷的，访问地址：http://localhost:3002

界面展示

接下来给大家展示下项目里的几个页面。

• 不得不说，TDesign的页面效果还是非常不错的，点击右上角的设置按钮，可以发现支持多种主题模式、主题色和导航布局，自定义效果拉满！

• 接下来看下统计报表页面，里面的图表效果也很不错；

• 列表页支持的类型也很多，包括基础、卡片、筛选、树状筛选多种；

• 详情页中还支持多卡片、分步骤的样式，这种样式在开发复杂的详情页时很有用；

• 个人中心页面效果也不错，其他页面大家可以把项目运行起来自行查看。

TDesign MCP

它比较有特色的功能是支持MCP服务器，tdesign-mcp是一个本地化的TDesign组件文档查询工具，在开发过程中可以通过它直接查阅TDesign组件的API文档、示例代码、图标搜索等，AI编程工具接入它之后将更精准地使用其中的组件。

• 可以通过如下脚本来配置MCP服务器；

{
  "mcpServers": {
    "tdesign-mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "tdesign-mcp-server@latest"
      ]
    }
  }
}

• tdesign-mcp中提供了5个工具，可用于查找组件、查看文档、查找图标、查找变更记录和DOM结构，具体使用场景如下。

使用MCP开发AI对话功能

接下来我们将使用TDesign MCP来开发一个AI对话功能，这里以AI编程助手Qoder为例。

• 首先使用/init命令初始化AGENTS.md代码库文档，让AI编程助手快速了解当前项目；

• 接下来输入提示词，可以开启Qoder的Spec模式，让AI编程助手制定开发计划；

使用tdesign mcp开发一个AI聊天页面，涵盖聊天，获取对话历史记录，清除对话历史记录功能，其中使用的conversationId由前端来生成UUID，接口已经写好，对应接口文档地址：http://localhost:8086/swagger-ui/index.html

• 详细看下让AI编程助手制定的开发计划，看了下没问题就让它执行；

• 如果你发现开发的样式和之前项目里不一致，可以提醒AI编程助手基于Design Token来修改样式，TDesign组件库提供了色彩、尺寸、圆角、阴影和字体五大类Design Token，使用它们可以方便地开发出样式统一的Web应用；

• 开发完成后最终效果如下，这里使用的是TDesign提供的Chatbot智能对话组件，Chatbot是高度封装且功能完备的一体化智能对话组件，使用它来实现AI对话功能非常方便。

总结

今天给大家分享了TDesign的实战玩法，比较让我眼前一亮的是它的MCP支持——接入AI编程工具之后，查组件文档、找图标、看示例代码这些琐碎操作可以直接交给AI完成。配合它的Starter Kit脚手架，从初始化项目到用AI开发一个功能完整的页面，整个过程体验相当流畅。如果你正在找一个开箱即用、又能跟AI开发能打好配合的前端组件库，TDesign值得试试。