OpenCode

Difficulty:
Company
opencode-ai

Effect Preview

Style Description

AI coding platform. Developer-centric dark theme

Tags

OpenCodeAI

Prompt Template

Base Template
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:.

Variant Prompts

📱 Mobile
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.
📊 Dashboard
Design a dashboard with OpenCode design language. Use OpenCode color identity with #007aff accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with OpenCode visual identity. Use OpenCode color identity with #007aff accents. Compelling, conversion-focused.

Usage Examples

OpenCode App

Web App
Build a web app with OpenCode design language and #007aff color system.

OpenCode Dashboard

Dashboard
Create a dashboard using OpenCode style with data visualization and - Background: typography.

✅ Best For

  • AI
  • Brand-consistent interfaces
  • Modern web applications

✅ Avoid For

  • Unrelated design aesthetics
  • Different brand guidelines