Expo は React で iOS、Android、Web のネイティブアプリを素早く構築するオープンソースプラットフォームです。UI はクールな明るい白のキャンバス（#f0f0f3）の上で厳格にモノクロを保ち、純黒の見出しにクールブルーグレーの本文、装飾色は一切混ぜません。ピル型の幾何学がボタン、タグ、コンテナを貫き（24〜9999px）、64px の見出しには極端な負のトラッキングを適用。Inter の 1 書体がウェイト 400 から 900 までですべての表現を支えます。開発者ツールと技術プロダクトに適しています。
Expo開発者ツール
プロンプトテンプレート
基本テンプレート
Design a Expo-inspired interface. - Luminous cool-white canvas (#f0f0f3) with gallery-like vertical spacing; - Strictly monochromatic: pure black headlines, cool blue-gray body text, no decorative color; - Pill-shaped geometry everywhere — buttons, tabs, containers, images (24px–9999px radius); - Massive display headlines (64px) with extreme negative letter-spacing (-1.6px to -3px); - Inter as the sole typeface, used at weights 400–900 for full expressive range. Colors: #000000, #1c2024, #0d74ce, #476cff with #0d74ce accent. Typography: Inter.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Expo aesthetics. Use Expo color identity with #0d74ce accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Expo style. Use Expo color identity with #0d74ce accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Expo design language. Use Expo color identity with #0d74ce accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Expo visual identity. Use Expo color identity with #0d74ce accents. Compelling, conversion-focused.
使用例
Expo アプリ
WebBuild a web app with Expo design language and #0d74ce color system.
Expo ダッシュボード
ダッシュボードCreate a dashboard using Expo style with data visualization and Inter typography.
✅ 適した用途
- 開発者ツール
- モバイル開発フレームワークのドキュメント
- コード優先の開発者プラットフォーム
❌ 適さない用途
- 保護者向け教育 UI
- レトロ雑誌のレイアウト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。