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 程式設計工具使用。