终端极客风Terminal Aesthetic

你可能会说

像黑客终端那样：黑底绿字、等宽字体、敲命令的感觉。

终端极客风是一种借用命令行界面元素的网页视觉风格它常用等宽字体、提示符、命令输出、ASCII 分隔线和有限色彩，适合开发者工具与 API 文档。命令应保留为可复制的真实文字，整页也不必全部做成黑底绿字。

左右滑动查看完整示例

▣ release/consoleprod · ap-east-109:42:18

DEPLOYMENT #8842

checkout-api
v2.14.0

canary 25% · checks are watching p95 and error rate.

$ deploy promote --to=100%

promote →rollback ↶

✓ bundle 1.2s✓ migrations skipped○ metrics window 02:14 left

SERVICES api healthy worker healthy web 1 warning

$ tail deploy.log
✓ migrations skipped
✓ canary healthy
… waiting for approval

设计原则 · 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

DEPLOYMENT #8842

checkout-api v2.14.0

canary 25% · p95 stable · error rate 0.08%

$ deploy promote --to=100%

promote →rollback ↶

SERVICE STATUS● api healthy● worker healthy● web 1 warning

✓ canary healthy
… awaiting approval

AI CLI 工具官网

左右滑动查看完整示例

        
        vibe-cli.dev
      
          vibe▮虚构示例 · docs · pricing
        
用自然语言,把想法跑上线
描述你想要的页面,AI 生成代码并部署。
没有拖拽,没有面板,只有一行命令。

          $ npx vibe init
          ⌘C 复制
        
          虚构演示数据
          展示状态口径
          链接监控来源

开发者文档首页

左右滑动查看完整示例

──┤ 开始 ├─────
▸ 快速上手
　安装
　第一个项目
──┤ 命令 ├─────
　vibe init
　vibe deploy
# 快速上手
安装与部署步骤示例
$ npm i -g vibe-cli
$ vibe init my-app # 选个模板
$ vibe deploy # ✓ https://my-app.vibe.app
提示：命令应支持复制与搜索，不应仅以截图呈现。

API 产品落地页

左右滑动查看完整示例

        echo.apistatus: 示例状态 ●
      
统一接口调用示例
POST /v1/chat/completions
{ "model": "auto", "messages": […] }
→ 成功响应 · 示例延迟 · 示例成本

        试用规则
        计费说明
        订阅规则
      
──────┤ 虚构示例 · 状态数据需链接监控来源 ├──────

工程师招聘页

左右滑动查看完整示例

──────┤ man 1 hiring ├──────
$ whoami
→ 后端工程师 · 工作方式与薪酬以职位说明为准
$ cat requirements.txt
→ 具备可展示的工程实践经验
→ 能阅读、维护和改进既有代码
→ 工作方式以职位说明为准
$ ./apply --with github
→ 按职位要求提交申请材料

终端极客风Terminal Aesthetic

checkout-apiv2.14.0

什么时候用

什么时候不用

checkout-api v2.14.0

checkout-api
v2.14.0