OpenCode 是開源的 AI 程式設計智慧代理。其介面把「終端血統」寫在臉上:Berkeley Mono 是唯一字型,從內文到標籤全部等寬;主色是帶紅棕底調的暖近黑(#201d1d),文字是暖白(#fdfcfc),圓角一律 4px 的實用直角,間距嚴格按 8px 系統遞進至 96px。適合開發者工具與命令列文化產品。
OpenCodeAI 與大型模型
提示詞範本
基礎範本
Design a OpenCode-inspired interface. - Berkeley Mono as the sole typeface -- monospace everywhere, no sans-serif or serif voices; - Warm near-black primary (#201d1d) with reddish-brown undertone, not pure black; - Off-white text (#fdfcfc) with warm tint, not pure white; - Minimal 4px border radius throughout -- sharp, utilitarian corners; - 8px base spacing system scaling up to 96px. Colors: #201d1d, #fdfcfc, #9a9898, #302c2c with #007aff accent. Typography: - Background:.
變體提示詞
📱 行動裝置
Design a mobile app with OpenCode aesthetics. Use OpenCode color identity with #007aff accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with OpenCode style. Use OpenCode color identity with #007aff accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with OpenCode design language. Use OpenCode color identity with #007aff accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with OpenCode visual identity. Use OpenCode color identity with #007aff accents. Compelling, conversion-focused.
使用範例
OpenCode 應用程式
Web 端Build a web app with OpenCode design language and #007aff color system.
OpenCode 儀表板
儀表板Create a dashboard using OpenCode style with data visualization and - Background: typography.
✅ 適用情境
- AI
- AI 程式設計與 Agent 工具
- 開發者平台的深色介面
❌ 不適用情境
- 面向非技術使用者的產品
- 明亮紙質閱讀網站
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述,可複製或下載後交給 AI 程式設計工具使用。