A developer-focused design system that replicates the macOS terminal aesthetic for modern web interfaces.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install terminal-ui-website-design
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install terminal-ui-website-design using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Terminal UI Design System?
The Terminal UI Design System provides a complete set of specifications for creating interfaces that feel like a command-line environment. It combines a warm terracotta primary palette with functional monospace typography to create a professional yet approachable look. By using this system from Openclaw Skills, developers can quickly build tools that resonate with the technical community through familiar metaphors like macOS window dots and syntax-highlighted code blocks.
This system is built with high-contrast accessibility in mind, ensuring that both light and dark modes are WCAG-compliant. It focuses on functional beauty, where every spacing unit and border radius is calculated to maintain the crisp, rigid feel of a terminal while providing the responsiveness of a modern web application.
Terminal UI Design System Use Cases
- Building technical documentation sites that require an authentic command-line aesthetic.
- Developing developer tool marketplaces or plugin directories.
- Creating dashboards for system monitoring and DevOps utilities.
- Designing personal portfolios for software engineers that reflect their coding environment.
How Terminal UI Design System Works
- Initialize the design tokens by defining the CSS variable scale for colors, spacing, and typography.
- Apply the JetBrains Mono font stack to ensure a consistent developer-centric reading experience.
- Use the terminal window component structure to wrap primary content sections with macOS-style control buttons.
- Implement interactive command buttons with the fluorescent green prefix to guide user actions.
- Attach the provided theme toggle JavaScript to manage transitions between light and dark modes.
Terminal UI Design System Setup
To implement this design system from the Openclaw Skills library, follow these steps:
- Add the CSS variables to your root stylesheet:
:root {
--primary: #cc7a60;
--font-mono: "JetBrains Mono", monospace;
}
Include the font-family in your head section via Google Fonts or a local host.
Apply the terminal window HTML structure to your main containers.
Terminal UI Design System Data Schema & Taxonomy
| Token Category | Key Variables | Description |
|---|---|---|
| Primary Colors | --primary, --warm-red | Terracotta and warm accents |
| Backgrounds | --bg-main, --bg-card, --bg-code | Hierarchical backgrounds |
| Typography | --font-mono, --text-base | Monospace font scale |
| Spacing | --spacing-sm to --spacing-2xl | 4px base unit system |
| Elevation | --shadow-sm to --shadow-lg | Realistic window depth |
Terminal UI Design System Advanced Features
- Integrated dark mode with automatic system preference detection through Openclaw Skills.
- Custom pulse animations for active navigation items to simulate terminal focus.
- Animated cursor effects for logos and command-line prefixes.
- Backdrop blur implementations for glassmorphism effects in window headers.
SKILL.md
Loading
Related Openclaw Skills
Team-Discuss Skill
A sophisticated multi-agent orchestration framework designed for structured, multi-round collaborative discussions and logical alignment.
Tavily Search
An AI-optimized web search skill that delivers high-quality research results and automated summaries through the Tavily API.
Daily AI News Aggregator
A sophisticated AI-driven news aggregator that compiles daily digests from top technical sources including HackerNews, GitHub Trending, and ArXiv research papers.
Epstein Files Search
A powerful CLI utility for searching over 44,886 declassified Jeffrey Epstein documents released by the DOJ in 2026.
clip-local
A local video processing utility for clipping YouTube content, generating bilingual subtitles, and extracting highlights automatically.
Wise Read-Only API
A secure, read-only interface for the Wise API that enables AI agents to query balances, exchange rates, and transaction history without write access.
Featured*
