终端风格UI设计系统

技能简介

一套完整的终端风格UI设计系统，模拟macOS终端窗口外观，采用等宽字体、暖色调配色和命令行美学。适用于开发者工具、代码市场、技术文档站点等场景。

能做什么

• 快速搭建具有终端视觉风格的Web界面
• 实现明暗双主题切换功能
• 复用标准化的组件模式（窗口装饰、代码块、导航等）
• 保持跨页面的一致设计语言

使用说明

1. 引入CSS变量 – 导入或定义全部颜色/间距变量（含暗色模式）
2. 使用终端窗口组件 – 将内容包裹在terminal-window组件内
3. 应用等宽字体 – 所有UI文本使用JetBrains Mono
4. 遵循间距规范 – 统一使用预定义的间距值
5. 采用语义化颜色 – 按含义而非外观应用颜色
6. 实现主题切换 – 添加主题切换按钮及JavaScript逻辑
7. 保持模式一致 – 全站复用相同组件模式
8. 测试响应式 – 确保各断点下布局正常
9. 验证双主题 – 检查明暗模式显示效果
10. 优化动画性能 – 保持过渡流畅

安装指令：本技能为设计规范，无特定安装命令，直接引用CSS变量和组件代码即可。

输入与输出

见下方输入与输出表格。

风险提示

• 荧光绿(#39ff14)仅限美元符号使用，避免滥用
• 需自行实现JavaScript主题切换逻辑
• 中文字体显示需额外配置回退方案
• 动画效果在低配设备上可能影响性能

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/chyinan/terminal-ui-website-design/SKILL.md
来源类型：GitHub仓库