Terminal UI Website Design

创建带有 macOS 风格窗口装饰、等宽字体和暖色调的终端风格 UI 界面。适用于构建开发者工具、代码市场、技术文档站点或任何适合终端/命令行美学的界面。提供包含配色、排版、间距、组件及 CSS 实现细节的完整设计系统规范。

安装

概览

Terminal UI Website Design 是一套专为开发者打造的终端风格界面设计系统,灵感来源于 macOS 终端窗口的经典美学。该系统通过融合等宽字体、暖色调配色方案以及类命令行的交互元素,为开发者工具、代码市场、技术文档站点等场景提供独特而友好的视觉体验。其核心设计理念在于平衡功能性与美观性,既保留了命令行界面的简洁高效,又通过柔和的暖色(如主色调 #cc7a60)营造出亲切而不失专业的氛围。整个设计系统不仅包含完整的色彩体系、排版规范与间距规则,还详细定义了从导航栏到卡片组件的各类 UI 元素样式,并特别支持深色模式自动切换,确保在不同使用环境下都能保持出色的可读性和视觉一致性。

核心功能特点

  1. 采用 macOS 风格窗口装饰,包括红黄绿三色控制点及文件标题栏设计
  2. 基于 JetBrains Mono 等宽字体的完整排版系统,支持多权重与响应式字号
  3. 包含暖色调主色 (#cc7a60)、荧光绿命令前缀 (#39ff14) 和语义化状态色的色彩体系
  4. 统一的 4px 基准间距系统与圆角半径规范,保证布局协调一致
  5. 内置终端窗口卡片、命令按钮、代码块等可复用组件模板
  6. 完整支持深色模式自动检测与手动切换,所有颜色与阴影均适配双主题

适用场景

该设计系统特别适合构建面向开发者的各类数字产品。无论是用于展示技能库或代码片段的技能卡片网格,还是呈现分类资源的技术目录站点,亦或是集成实时数据图表的开发者仪表盘,Terminal UI 都能通过其独特的命令行美学增强专业感与辨识度。对于技术博客或开源项目主页而言,其清晰的层次结构和语法高亮风格的注释区块能有效提升内容可读性;而对于 SaaS 型开发者工具平台,则可通过终端窗口样式的弹窗和侧边栏强化操作直觉。此外,由于系统全面覆盖移动端与桌面端的响应式断点,从小型个人项目到大型企业级应用均可灵活适配。借助其内置的主题切换机制,用户可在明亮与昏暗环境中无缝切换,极大提升了全天候使用的舒适度与品牌一致性。