skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-opencode.ai

Applies OpenCode's design system tokens to generate terminal-styled monospace UI interfaces.

Updated Feb 23, 2026
Search Tags:#typography#frontend#design system#color palette#opencode#monospace#ui generation
One-click install
npx skills add https://github.com/deepparser/skills --skill design-opencode-ai-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-opencode.ai
Source: https://github.com/deepparser/skills/tree/main/design-opencode.ai
Command: npx skills add https://github.com/deepparser/skills --skill design-opencode-ai-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating OpenCode's distinctive terminal-native visual identity requires knowing exact color values, typography specs, and component rules, which are tedious to reverse-engineer manually. ## Core Features & Use Cases - Complete Design Token Catalog: Provides exact hex colors (warm near-black #201d1d, off-white #fdfcfc), Berkeley Mono typography hierarchy, 8px spacing scale, and 4px/6px radius rules. - Component Specifications: Defines buttons, inputs, links, tabs, navigation, and cards with precise padding, borders, and three-stage hover/active states based on Apple HIG semantic colors. - Light and Dark Previews: Bundled HTML preview files show the full design system rendered in both themes for visual verification. - Use Case: When building a landing page or developer tool UI that should look like OpenCode, invoke this skill to generate interfaces with the correct monospace-first, flat, warm-dark aesthetic. ## Quick Start Use the design-opencode.ai skill to build a landing page hero section styled like OpenCode's website.

Frequently Asked Questions about design-opencode.ai

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a website look like OpenCode?▼

Use this skill to apply OpenCode's design tokens: warm near-black #201d1d background, off-white #fdfcfc text, Berkeley Mono as the sole typeface, 4px border radius, and flat surfaces with no shadows. The skill provides exact component specs for buttons, inputs, and navigation.

What font does OpenCode's design system use?▼

OpenCode uses Berkeley Mono exclusively for all text including headings, body, buttons, and navigation. Hierarchy is created through size and weight only: 700 for headings, 500 for interactive elements, and 400 for body text.

Does the OpenCode design system support dark mode?▼

Yes, the skill includes both light and dark theme HTML previews. The dark preview inverts the palette with adjusted accent colors like #4da3ff blue and #ff6961 red for proper contrast on dark surfaces.

What colors are in the OpenCode palette?▼

The core palette is warm near-black #201d1d, off-white #fdfcfc, and mid gray #9a9898. Semantic colors follow Apple HIG: blue #007aff, red #ff3b30, green #30d158, and orange #ff9f0a, each with hover and active variants.

When should I not use the OpenCode design style?▼

Avoid this style when you need rich visual depth, gradients, shadows, rounded pill shapes, or multi-font typography. The system is intentionally flat and monospace-only, suited for developer tools and terminal-inspired products rather than consumer marketing sites.

Related Skills

Explore More Design & Creative Skills→
Kael-DeanKael-Dean

frontend-design

Design production-grade frontend interfaces with cohesive design systems and polished code.

Community
Advanced
Norfolk-GroupNorfolk-Group

component-library

Provides a UI component library with usage rules for the Hospitality portal.

Official
Intermediate
get-convexget-convex
9

adapt

Plan responsive layouts across mobile, tablet, and desktop breakpoints.

Official
Advanced
ArnavPuriArnavPuri
3

design-context

Establish and manage design context with brand identity, color palettes, and typography.

Community
Intermediate