腾讯又开源了一个新项目，用起来真优雅！

前端组件库卷归卷，但能把CLI脚手架、MCP和Chatbot智能对话组件打包到一起的，还真没几个。TDesign不只给你一套UI组件，还把跟AI编程工具打配合的链路都铺好了------接入MCP后AI写代码能更智能地调组件，加上内置Chatbot，给项目集成AI功能简直不要太方便。今天给大家分享下它的实战玩法！

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开发的后台管理系统的效果图，界面还是很炫酷的！

这或许是一个对你有用的开源项目，mall项目是一套基于 SpringBoot3 + Vue3 的电商系统（Github标星60K），后端支持多模块和微服务架构，采用Docker和K8S部署。包括前台商城项目和后台管理系统，能支持完整的订单流程！涵盖商品、订单、购物车、权限、优惠券、会员、支付等功能！

Boot项目：github.com/macrozheng/...

Cloud项目：github.com/macrozheng/...

文档网站：www.macrozheng.com

项目演示：

初始化项目

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

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

bash 复制代码

npm i tdesign-starter-cli -g

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

bash 复制代码

td-starter init

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

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

bash 复制代码

npm install
npm run dev

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

界面展示

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

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

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

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

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

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

TDesign MCP

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

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

json 复制代码

{
  "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编程助手制定开发计划；

bash 复制代码

使用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值得试试。

项目地址

github.com/Tencent/tde...