终端极客风Terminal Aesthetic
你可能会说
像黑客终端那样：黑底绿字、等宽字体、敲命令的感觉。
终端极客风是一种借用命令行界面元素的网页视觉风格它常用等宽字体、提示符、命令输出、ASCII 分隔线和有限色彩，适合开发者工具与 API 文档。命令应保留为可复制的真实文字，整页也不必全部做成黑底绿字。
左右滑动查看完整示例
▣ release/consoleprod · ap-east-109:42:18
checkout-api
v2.14.0
canary 25% · checks are watching p95 and error rate.
$ deploy promote --to=100%
✓ bundle 1.2s✓ migrations skipped○ metrics window 02:14 left
设计原则 · Principles
- 等宽字体用于命令、数据和短标签，长正文保持易读
- 建立克制的基础色，让命令内容始终清楚
- 提示符和状态符号只用于帮助识别结构
- ASCII 分隔线可以组织内容，但不能增加阅读负担
- 闪烁光标只作轻量提示，并响应减少动效设置
什么时候用
- 命令行工具官网，让网页延续产品语言$ npx create-ai-appCLI 工具官网可沿用命令行的内容线索
- 开发者文档首页，强调目录和命令示例docs/ ├─ quickstart.md └─ api.md文档站用等宽字体,目录都像命令输出
- API 与云服务页面，展示状态和技术信息POST /v1/chat成功响应 · 示例延迟
- 工程团队招聘页，面向熟悉命令行的受众$ whoami → 后端工程师(远程)可表达工程文化，岗位与投递信息仍需直接
什么时候不用
- 面向非技术用户却不解释终端符号家庭相册应用也使用黑底绿字非技术场景可能难以从该风格中获得任务线索
- 暗色背景配低对比、小字号正文暗绿配黑底,字号再一缩,内容难以识别
- 把命令做成图片，导致无法复制和搜索首屏放置终端截图，文字无法选择或搜索命令应保留为可复制、可搜索的真实文字
- 同时加入大量不相关的玻璃和拟物材质$ run毛玻璃气泡
组成结构 · Anatomy
iiii = mmmm+
绿字黑底+
$ run+
──┤ ├─+
用于命令、路径和数据对齐；长正文不必强制使用
以少量基础色突出输出状态，同时保证对比度和状态含义
提示符可标明命令上下文；关键操作、状态和错误仍需文字或稳定图标
────── ┤标题├ ──────,字符代替图形分隔
可作为装饰性运行提示；不要持续干扰阅读，并支持减少动效
AI 提示词 · Prompt
做一个部署观察控制台，帮助工程师查看服务健康状态、灰度发布进度，并提供继续发布或回滚入口。命令和日志要能复制、搜索和阅读，状态不能只靠颜色表达。这次只实现界面，不执行真实发布或回滚；真实操作必须先确认授权、目标环境和当前状态。
典型使用场景
部署观察控制台
左右滑动查看完整示例
▣ release/consoleprod · ap-east-109:42:18
checkout-api v2.14.0
canary 25% · p95 stable · error rate 0.08%
$ deploy promote --to=100%
promote →rollback ↶AI CLI 工具官网
左右滑动查看完整示例
开发者文档首页
左右滑动查看完整示例
API 产品落地页
左右滑动查看完整示例
工程师招聘页
左右滑动查看完整示例