关于 terminal-ui-design
terminal-ui-design 是一项用于设计特色终端界面的技能，面向构建终端体验的开发者。它指导选择视觉风格，并在布局、配色、排版和动效中保持一致。
主要功能
- 01选择视觉风格
- 02配色与边框指导
- 03排版和布局技巧
- 04动效与数据展示模式
- 05实现检查清单
适用场景
- 01设计终端仪表盘
- 02美化命令行帮助输出
- 03构建终端向导
- 04统一终端界面的视觉风格
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/terminal-ui-design确认已加载。
详细介绍
终端 UI 设计
打造独具特色、可用于生产环境的终端界面，并赋予其鲜明的美学风格。不要只输出文本，而要精心设计一种体验。
快速入门
开始编码前，先选定一个大胆的美学方向：
| 风格 | 氛围 | 颜色 | 边框 |
|---|---|---|---|
| 赛博朋克 | 霓虹、未来感 | 亮粉色 #ff00ff、青色 #00ffff、紫色 #1a0a2e | 块状 █▀▄ |
| 琥珀终端 | 复古 CRT | 黑底 #ffb000 | 双线 ╔═╗ |
| 极简禅意 | 简洁、专注 | Nord 配色、冷蓝色 | 圆角 ╭─╮ |
| 复古大型机 | 企业风、正式 | 黑底绿字 | 仅 ASCII 的 +-+ |
| 合成波 | 80 年代怀旧风 | 紫色、粉色渐变 | 粗线 ┏━┓ |
| 单色粗野主义 | 鲜明、大胆 | 单色 + 强度变化 | 粗线 ┏━┓ |
选定一个方向，并精准贯彻。
设计思考清单
| 问题 | 决策要点 |
|---|---|
| 目的 | 要解决什么问题？谁会使用？工作流是什么？ |
| 基调 | 选择鲜明风格：赛博朋克、禅意、复古、极繁、俏皮 |
| 约束 | Python Rich、Go bubbletea、Rust ratatui、ANSI 代码？ |
| 差异化 | 什么能让它令人难忘？ |
方框绘制与边框
选择符合美学风格的边框：
Single: ┌─────┐ │ └─────┘ Clean, modern
Double: ╔═════╗ ║ ╚═════╝ Bold, formal, retro
Rounded: ╭─────╮ │ ╰─────╯ Soft, friendly
Heavy: ┏─────┓ ┃ ┗─────┛ Strong, industrial
Dashed: ┄┄┄┄┄┄ ┆ Light, airy
ASCII: +-----+ | +-----+ Retro, universal
Block: █▀▀▀▀█ ▄ ▀▀▀▀▀ Chunky, brutalist
专业提示：使用装饰性转角：◆ ◈ ✦ ⬡ ◢◣◤◥
配色策略
| 策略 | 适用场景 | 技巧 |
|---|---|---|
| ANSI 16 色 | 通用兼容性 | 经典调色板，打造独特组合 |
| 256 色 | 色彩丰富且便于移植 | 渐变、细微变化 |
| 真彩色 | 现代终端 | 全光谱、平滑过渡 |
| 单色 | 优雅的限制 | 单一颜色，变化强度 |
营造氛围：
- 使用背景色块区分区域
- 渐变填充：░▒▓█
- 使用语义化颜色（避免红色代表坏、绿色代表好的老套做法）
- 使用反显突出重点
- 次要内容使用暗色，主要内容使用粗体
字体排印
终端的一切都是字体排印：
| 技巧 | 效果 | 示例 |
|---|---|---|
| ASCII 艺术标题 | 戏剧性的开场 | figlet 风格横幅 |
| 文本粗细 | 建立层级 | 粗体、暗色、常规 |
| 装饰 | 强调重点 | 下划线、斜体、删除线 |
| 字母间距 | 标题 | H E A D E R |
| 大小写 | 语气 | 标题全大写，正文全小写 |
| Unicode 符号 | 丰富视觉效果 | → • ◆ ★ ⚡ λ ∴ ≡ ⌘ ✓ ✗ |
| 自定义项目符号 | 个性表达 | 使用 ▸ ◉ ✓ ⬢ › 代替 - |
Block: ███████╗██╗██╗ ███████╗
Slant: /___ / / // / / ____/
Small: ╔═╗┌─┐┌─┐
Minimal: [ HEADER ]
布局与空间构成
突破单栏输出的限制：
| 元素 | 用途 |
|---|---|
| 面板与窗口 | 使用边框划分不同区域 |
| 栏 | 并排展示信息 |
| 表格 | 对齐数据，使用 Unicode 表格字符 |
| 留白 | 留出充足边距，让界面透气 |
| 信息密度 | 与用途匹配——仪表板信息密集，向导界面简洁 |
| 层级 | 通过视觉区分主要内容、次要内容和界面装饰 |
| 不对称 | 标题偏置、布局侧重 |
动效与动画
| 元素 | 示例 |
|---|---|
| 加载指示器 | ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏, ⣾⣽⣻⢿⡿⣟⣯⣷ |
| 进度条 | ▓░、█▒、[=====> ]、◐◓◑◒ |
| 打字效果 | 逐字显示 |
| 过渡效果 | 擦除效果、随颜色强度渐变 |
| 实时更新 | 流式数据、实时图表 |
数据展示
| 类型 | 技巧 |
|---|---|
| 迷你图 | 使用 ▁▂▃▄▅▆▇█ 绘制行内微型图表 |
| 条形图 | 使用块状字符绘制横向条形 |
| 表格 | 智能调整尺寸、隔行显示、数字对齐 |
| 树形图 | ├── └── │ 层级结构 |
| 状态 | ● 绿色、○ 空、◐ 部分完成、✓ 已完成 |
| 仪表 | [████████░░] 和百分比 |
装饰元素
Dividers: ───── ═════ •••••• ░░░░░░ ≋≋≋≋≋≋
Sections: ▶ SECTION, [ SECTION ], ─── SECTION ───, ◆ SECTION
Textures: · ∙ ░ patterns for backgrounds
Icons: (if Nerd Fonts available)
应避免的反模式
| ❌ 避免 | ✅ 应采用 |
|---|---|
| 未格式化的纯文本 | 有意设计的样式化输出 |
| 默认颜色 | 协调统一的配色 |
| 通用的 [INFO] 前缀 | 带图标的样式化前缀 |
| 简单的 ---- 分隔线 | Unicode 分隔线 ───── ═════ |
| 大段纯文本 | 结构化面板和分区 |
| 通用进度指示 | 别具创意的旋转指示器和进度条 |
| 枯燥的帮助信息 | 格式化且对齐的帮助文本 |
| 间距不一致 | 精确对齐 |
库快速参考
| 语言 | 库 |
|---|---|
| Python | Rich、Textual、curses、prompt_toolkit |
| Go | Bubbletea、Lipgloss |
| Rust | Ratatui |
| Node.js | Ink、Blessed、cliui |
| 纯实现 | ANSI 转义码 |
ANSI 转义码
\x1b[1m Bold
\x1b[3m Italic
\x1b[4m Underline
\x1b[31m Red foreground
\x1b[38;2;R;G;Bm True color (RGB)
\x1b[2J Clear screen
\x1b[H Cursor home
实现模式
- 先选择美学风格（赛博朋克、禅意、复古等）
- 定义配色方案（2–3 种颜色 + 背景色）
- 选择边框样式（单线、双线、圆角、块状）
- 创建可复用组件（面板、表格、状态）
- 在所有输出中保持一致
资源
| 文件 | 何时加载 |
|---|---|
| references/box-drawing.md | 需要边框字符参考时 |
| references/ansi-codes.md | 需要转义码参考时 |
| references/color-palettes.md | 需要预定义配色方案时 |
退出标准（代码已验证）
- 输出具有经过刻意设计的美学风格（而非通用样式）
- 始终使用协调统一的配色方案
- 边框和字体排版与所选风格一致
- 不包含未经格式化的纯文本
- 避免反模式
评论
支持 Markdown