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 via CLI (Recommended)
clawhub install openclaw/skills/skills/chyinan/terminal-ui-website-designWhat This Skill Does
The terminal-ui-design-system provides a structured, reusable design framework for building terminal-inspired interfaces. It leverages a developer-focused aesthetic, combining macOS-style window decorations with a warm, high-contrast color palette centered around a primary terracotta shade (#cc7a60). The skill handles the heavy lifting of defining design tokens—including color scales, typography settings, spacing variables, and component implementation specs—ensuring that your interface feels like a sophisticated developer tool while remaining approachable and user-friendly.
Installation
To integrate this design system into your workflow, use the following OpenClaw command:
clawhub install openclaw/skills/skills/chyinan/terminal-ui-website-design
Use Cases
- Code Marketplaces: Present snippets or plugins inside stylized 'terminal' windows that feel native to a developer's environment.
- Technical Documentation: Use the system to wrap API response examples and shell commands in visually distinct, branded containers.
- Developer Portfolios: Create a personal site that reflects your technical identity by adopting a command-line look and feel.
- SaaS Dashboards: Build dashboards that monitor backend processes using the high-contrast, readable typography and syntax-aware color schemes defined in this system.
Example Prompts
- "Create a hero section for my developer tool website using the terminal-ui-design-system. It should feature a mock macOS window showing a 'yarn install' command in the center of the screen."
- "Draft a component specification for a code-display block that uses the system's syntax highlighting colors for keywords, strings, and comments."
- "Help me design a dashboard layout for an API monitoring service. Use the primary terracotta color for active status indicators and the muted grey background for the overall page structure."
Tips & Limitations
- Tip: When implementing, lean heavily on the semantic color variables (e.g.,
--syntax-keyword) to maintain consistent branding across your components. - Tip: Combine the provided border-light variable with the bg-main pattern to achieve the authentic 'terminal' look on web layouts.
- Limitation: This is a design system specification, not a set of pre-rendered components. You will need to map these CSS variables to your existing UI framework (e.g., Tailwind CSS, styled-components, or standard CSS) to fully implement the visuals.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-chyinan-terminal-ui-website-design": {
"enabled": true,
"auto_update": true
}
}
}