Tesla は電気自動車と持続可能エネルギーの企業で、その UI は「極限の引き算」を貫いています。100vh の全画面ヒーローエリアは完全に映画級の車両映像に委ねられ、ページにはシャドウもグラデーションもボーダーも模様もありません。唯一のアクセントカラーであるエレクトリックブルー（#3E6AE1）はメイン CTA にのみ現れ、Universal Sans が Web、アプリ、車載 UI を統一します。すべての情緒は映像が担い、UI は可能な限り不可視です。自動車、ハードウェア、映像優先のプロダクトサイトに適しています。
Tesla自動車
プロンプトテンプレート
基本テンプレート
Design a Tesla-inspired interface. - Full-viewport hero sections (100vh) dominated by cinematic car photography with minimal overlay UI; - Near-zero UI decoration: no shadows, no gradients, no borders, no patterns anywhere on the page; - Single accent color — Electric Blue (#3E6AE1) — used exclusively for primary CTA buttons; - Universal Sans font family (Display + Text) unifying web, app, and in-car interfaces; - Photography-first presentation where product imagery carries all emotional weight. Colors: #3E6AE1, #FFFFFF, #F4F4F4, #171A20 with #3E6AE1 accent. Typography: — The main action button:.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Tesla aesthetics. Use Tesla color identity with #3E6AE1 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Tesla style. Use Tesla color identity with #3E6AE1 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Tesla design language. Use Tesla color identity with #3E6AE1 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Tesla visual identity. Use Tesla color identity with #3E6AE1 accents. Compelling, conversion-focused.
使用例
Tesla アプリ
WebBuild a web app with Tesla design language and #3E6AE1 color system.
Tesla ダッシュボード
ダッシュボードCreate a dashboard using Tesla style with data visualization and — The main action button: typography.
✅ 適した用途
- 自動車業界
- ミニマルな自動車プロダクトページ
- 全画面映像のナラティブ
❌ 適さない用途
- 情報密度の高いツール UI
- 多彩なコンシューマー EC
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。