Semi Design は ByteDance のデザインシステムで、「ユーザー中心、コンテンツ優先、人にやさしく」を掲げています。React 実装では主色の青（#0064FA）が 10 段階の色階を展開し完全なダークテーマを備え、4px の角丸、1px #E5E6EB のボーダー、32px のコンパクトなコントロールが高密度の業務に適合します。テーブル、フォーム、長いフローのデータワークフローは滑らかに磨き込まれ、フォーカス状態とセマンティックカラーのトークンは精密です。コンテンツとデータを重んじるエンタープライズ React プロダクトに適しています。
Semi Designデザインシステム
プロンプトテンプレート
基本テンプレート
Design a Semi Design-inspired interface. - ByteDance design system with React components; - #0064FA primary blue with 10-step ramps and a full dark theme; - 4px radii, 1px #E5E6EB borders, compact 32px controls; - Dense tables, forms, and long-form data workflows; - Refined focus states and semantic color tokens. Colors: #0064FA, #E5E6EB, #F7F8FA, #1C1F23 with #0064FA accent. Typography: Inter.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Semi Design aesthetics. Use Semi Design color identity with #0064FA accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Semi Design style. Use Semi Design color identity with #0064FA accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Semi Design design language. Use Semi Design color identity with #0064FA accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Semi Design visual identity. Use Semi Design color identity with #0064FA accents. Compelling, conversion-focused.
使用例
Semi Design データダッシュボード
ダッシュボードBuild a data dashboard with Semi Design style: dense tables, filter forms, and #0064FA accent with dark mode support.
Semi Design 企業コンソール
WebCreate an enterprise console with Semi Design language: navigation sidebar, form workflows, and refined focus states.
✅ 適した用途
- React プロジェクト
- エンタープライズ製品
- ダークモードアプリ
❌ 適さない用途
- React 以外のプロジェクト
- ブランド個性を重んじるマーケティングページ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。