TDesign 是腾讯开源的企业级设计体系，目标是为设计师与开发者「打造工作美学」。它同时覆盖 Vue、React 与小程序等多框架，主蓝（#0052D9）展开 10 级色板并支持深色主题；6px 圆角、#E7E7E7 发丝线与 14px 正文形成克制清爽的基调，表格、筛选器与状态标签是中后台标准件，选中态带品牌色调。适合多技术栈并存的企业中后台。
TDesign设计系统
提示词模板
基础模板
Design a TDesign-inspired interface. - Tencent design system shipping across Vue, React, and mini-programs; - #0052D9 primary blue with a 10-step palette and dark theme; - 6px radii, #E7E7E7 hairlines, 14px body type; - Enterprise admin patterns: tables, filters, and status tags; - Calm hierarchy with brand-tinted selection states. Colors: #0052D9, #E7E7E7, #F3F3F3, #000000 with #0052D9 accent. Typography: system-ui.
变体提示词
📱 移动端
Design a mobile app with TDesign aesthetics. Use TDesign color identity with #0052D9 accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with TDesign style. Use TDesign color identity with #0052D9 accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with TDesign design language. Use TDesign color identity with #0052D9 accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with TDesign visual identity. Use TDesign color identity with #0052D9 accents. Compelling, conversion-focused.
使用示例
TDesign 管理控制台
仪表板Build an admin console with TDesign style: data tables, filter panels, status tags, and #0052D9 accent color.
TDesign CRM 界面
Web 端Create CRM management screens with TDesign design language: customer tables, detail drawers, and calm enterprise hierarchy.
✅ 适合场景
- 中文本土企业应用
- Vue 与 React
- 管理控制台
❌ 不适合场景
- 面向海外的纯英文产品
- 轻量个人项目
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。