痛点与挑战

在前端开发中。团队往往面临以下痛点：

• 组件库众多，却缺乏一站式方法；
• 跨技术栈时组件 API 与视觉风格不统一，导致代码重复和体验碎片化；
• 搭建项目脚手架耗时、配置繁琐，初学者上手门槛高；其实，
• AI 编程工具接入后仍需手动查阅文档、示例和图标。效率低下，
• 主题定制与 Design Token 使用不够直观，导致样式一致性难以保证。

TDesign 简介

TDesign 是腾讯开源的完整公司级设计程序，为 Vue、React、微信小程序、Flutter、UniApp 等多技术栈提供统一的组件库。

• 完整性桌面端与移动端全覆盖，并提供 Figma/Sketch/Adobe XD 等设计资源。
• 一致性跨端 API 与视觉风格高度统一，保持产品体验一致。
• 易用性Starter Kit 脚手架让你秒开项目；Design Token 灵活定制更容易开始。
• AI 友好内置 MCP 服务。让 AI 编程工具精准查询组件文档、API 与示例，明显提高开发效率。

后台效果预览

快速启动 & 初始化项目

1. 安装 CLI：

   npm i tdesign-starter-cli -g

td-starter init

npm install
npm run dev

* 如果你在 Windows 上遇到权限错误，请尝试使用管理员模式或切换到 PowerShell。*

MCP 与 AI 开发集成

MCP是一个本地化的 TDesign 文档查询工具。 它让 AI 编程助手能够精准定位所需组件，从而大幅减少人工查找时间。

{
"mcpServers": {
"tdesign-mcp-server": {
"command": "npx","args":
}
}
}

MCP 提供五大工具：

• 查找组件 – 快速定位所需组件名和属性。
• 查看文档 – 一键打开官方 API 文档。
• 图标搜索 – 找到对应 SVG 图标。
• AWS – 查看最近更新记录。
• DOME – 可视化 DOM 树结构。

在 AI 开发过程中。你只需在聊天窗口输入对应命令，即可获得实时响应。

MCP 助力 AI 对话功能实现

"初始化 AGENTS.md" 能让 Qoder 快速了解项目结构，接下来通过 Spec 模式制定开发计划。

tdesign mcp develop ai-chat-page

• 如果发现样式与已有页面不一致，可直接提醒 AI 基于 Design Token 调整颜色、尺寸等属性；TDesign 的 Design Token 包含色彩、尺寸、圆角、阴影和字体五大类，支持全局统一管理。
• 最终效果使用了 TDesign 内置的 Chatbot 智能对话组件。该组件高度封装且功能完备，实现方式操作简单。

TDesign 将完整的公司级设计程序与 AI 开发流程无缝结合。从脚手架初始化，到 MCP 支持。再到利用 Chatbot 实现 AI 对话功能，全流程体验流畅且高效。若你正在寻找既能快速上手又能深度配合 AI 开发的前端框架，TDesign 是值得一试的选择。

项目地址