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-serverlatest ] } } }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值得试试。