OpenCode はオープンソースの AI コーディングエージェントです。UI は「ターミナルの血統」を顔に書いており、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 アプリ
WebBuild 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 コーディングとエージェントツール
- 開発者プラットフォームのダーク UI
❌ 適さない用途
- 非技術ユーザー向けのプロダクト
- 明るい紙質感の読書サイト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。