Expo 是用 React 快速建構 iOS、Android 與 Web 原生應用的開源平台。其介面在冷調亮白畫布(#f0f0f3)上保持嚴格單色——純黑標題配冷藍灰內文,不摻裝飾色;膠囊幾何貫穿按鈕、標籤與容器(24-9999px),64px 展示標題配極端負字距,Inter 一款字型從 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 應用程式
Web 端Build a web app with Expo design language and #0d74ce color system.
Expo 儀表板
儀表板Create a dashboard using Expo style with data visualization and Inter typography.
✅ 適用情境
- 開發者工具
- 行動開發框架文件
- 程式碼優先的開發者平台
❌ 不適用情境
- 面向家長的教育介面
- 復古雜誌排版
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述,可複製或下載後交給 AI 程式設計工具使用。