TDesign は Tencent がオープンソース化したエンタープライズ向けデザイン体系で、デザイナーと開発者のために「仕事の美学を築く」ことを目標としています。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 UI
WebCreate CRM management screens with TDesign design language: customer tables, detail drawers, and calm enterprise hierarchy.
✅ 適した用途
- 中国語圏のローカル企業アプリ
- Vue と React
- 管理コンソール
❌ 適さない用途
- 海外向けの純英語プロダクト
- 軽量な個人プロジェクト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。