Terminal UI Design System

Create terminal-inspired UI interfaces with macOS-style window decorations, monospace typography, and a warm color palette. Use this skill when building developer tools, code marketplaces, technical documentation sites, or any interface that benefits from a terminal/command-line aesthetic. Provides complete design system specifications including color palette, typography, spacing, components, and CSS implementation details.

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add chyinan/terminal-ui-design-system --skill terminal-ui-design-system
Manual install
git clone --depth 1 https://github.com/chyinan/terminal-ui-design-system.git /tmp/terminal-ui-design-system
mkdir -p ~/.claude/skills
cp -r /tmp/terminal-ui-design-system/. ~/.claude/skills/terminal-ui-design-system

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Terminal UI Design System

A comprehensive design system for creating terminal-inspired user interfaces with macOS-style window decorations, monospace typography, and a warm, developer-friendly color palette. This design system is optimized for developer tools, code marketplaces, technical documentation, and any interface that benefits from a command-line aesthetic.

## Design Philosophy

**Core Principles:**
- **Terminal Aesthetic**: Mimics macOS terminal windows with colored dots, monospace fonts, and command-line syntax
- **Developer-First**: Uses syntax highlighting colors, code-like structures, and terminal metaphors
- **Warm & Approachable**: Warm terracotta primary color (#cc7a60) creates a friendly, non-intimidating feel
- **High Contrast**: Clear visual hierarchy with distinct text colors and backgrounds
- **Functional Beauty**: Every design element serves a purpose while maintaining visual appeal

## Color System

### Primary Palette

**Main Brand Color:**
- `--primary: #cc7a60` - Warm terracotta/orange-brown, used for primary actions, accents, and highlights
- `--primary-foreground: #fff` - White text on primary backgrounds
- `--primary-dark: #b56850` - Darker shade for hover states
- `--primary-light: #d8907a` - Lighter shade for subtle accents
- `--ring: #cc7a60` - Focus ring color (same as primary)

**Warm Accent:**
- `--warm-red: #c85a3f` - Used for code block borders and warm accents

### Semantic Colors

**Backgrounds:**
Read the full skill on GitHub

Details

Skill name
terminal-ui-design-system
Repo updated
2 February 2026

FAQ

What does the Terminal UI Design System skill do?

Create terminal-inspired UI interfaces with macOS-style window decorations, monospace typography, and a warm color palette. Use this skill when building developer tools, code marketplaces, technical documentation sites, or any interface that benefits from a terminal/command-line aesthetic. Provides complete design system specifications including color palette, typography, spacing, components, and CSS implementation details.

How do I install the Terminal UI Design System skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add chyinan/terminal-ui-design-system --skill terminal-ui-design-system. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Terminal UI Design System popular?

It lives in chyinan/terminal-ui-design-system, which has 9 GitHub stars and 0 forks.

Related skills

UI Craft

9

Achref23illi/ui-craft

Make a mobile UI look and feel like a shipped app. Rules with numbers, 29 screen recipes (plus 200 measured ones), a fast screenshot review and lessons from a real redesign, grounded in 4,500 iOS screens from 78 apps (Spotify, Airbnb, Instagram, Apple Music, Wise, Coinbase, Google Maps, Uber Eats, Halide, Notion…). Use before designing or restyling any mobile screen (React Native, Expo, SwiftUI, Flutter, mobile web), when reviewing screenshots for "does this look like a real app", or when you need a reference for a pattern (feed, player, editor, sheet, paywall, settings, onboarding, empty stat

Frontend & Design

Shopify Theme Builder

8

moVictor99/shopify-theme-builder

Build a complete, clean, Online Store 2.0 Shopify theme from a guided requirements interview. Use when a user wants to build, generate, scaffold, or design a Shopify theme, Shopify sections, JSON templates, Liquid, section groups, or a fully theme-editor-controllable storefront (including bilingual / RTL Arabic stores). Produces a zip-ready theme that passes theme-check and meets Shopify Theme Store requirements.

Frontend & Design

Web Design Taste

8

Alice59357/web-design-taste

帮助没有设计背景、不懂技术术语的用户做出设计师级高质量网页。用户只需用大白话描述需求,通过选择预设风格卡片(而非描述设计),即可产出完整可运行的网页。每当用户提到"做个网页"、"做个网站"、"落地页"、"作品集"、"介绍页"、"官网"、"销售页",或表达"想要好看的页面但不知道怎么形容"时,必须使用此技能。即使用户没有提供任何设计要求,也要使用此技能来引导。

Frontend & Design

Product UI Director

9

macistone71-jpg/heqingfeng-product-ui-skill

何庆丰定制的产品 UI/UX 设计、实现与验收 Skill。凡是新建、改版、评审或迭代 Web、移动端、桌面端界面,设计系统、页面、组件、交互、响应式、可访问性、配色、字体、数据图表或视觉质量时必须使用。覆盖需求简报→设计系统→差异化视觉→代码实现→真实浏览器验收→迭代记录,内置可搜索 UI/UX 数据和项目级设计记忆。

Frontend & Design

Brand Yml

7

stephenturner/skill-brand-yml

Create a _brand.yml file for Quarto projects that captures brand colors, typography, and identity in a structured YAML format. Use this skill whenever the user mentions _brand.yml, brand.yml, Quarto branding, brand identity for Quarto, or wants consistent colors and fonts across Quarto documents, websites, presentations, or Shiny apps. Also trigger when the user asks to extract brand colors or fonts from a website, PDF brand guidelines, or style guide for use with Quarto. Even if the user just says "set up my brand" or "make my Quarto docs match our brand," this is the right skill.

Frontend & Design

Muji Style Skill

8

yanliudesign/muji-style-skill

Create original quiet-living visuals from any theme, object, product, article, event, space, or supplied photograph using natural materials, restrained color, functional typography, asymmetric whitespace, honest photography, and human imperfection. Always use this skill when the user asks for MUJI-inspired, 无印良品感, 日系极简, Japanese minimalism, quiet living, natural minimalism, understated lifestyle design, 素朴生活美学, 留白产品海报, or asks to make a visual feel quieter, simpler, more natural, and less designed. Preserve the underlying design principles without copying MUJI logos, packaging, campaigns, stor

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.