←→ 切换·Esc 返回

终端极客风Terminal Aesthetic

设计风格
借用命令行语言表现直接和工具感

终端极客风使用等宽字体、提示符、命令输出和有限色彩，适合开发者工具与 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
设计原则 · Principles
  • 等宽字体用于命令、数据和短标签，长正文保持易读
    iiii 与 mmmm 一样宽等宽 = 每列对齐,代码感的来源
  • 建立克制的基础色，让命令内容始终清楚
    绿字黑底黑白单色
  • 提示符和状态符号只用于帮助识别结构
    $ vibe deploy --prod
  • ASCII 分隔线可以组织内容，但不能增加阅读负担
    ──────────┤ README ├──────────不用画图标,字符就能做分隔线
  • 闪烁光标只作轻量提示，并响应减少动效设置
    npm run dev闪烁光标 = 这台机器还活着

什么时候用

  • 命令行工具官网，让网页延续产品语言
    $ npx create-ai-appAI CLI 工具官网,工程师一看就亲切
  • 开发者文档首页，强调目录和命令示例
    docs/ ├─ quickstart.md └─ api.md文档站用等宽字体,目录都像命令输出
  • API 与云服务页面，展示状态和技术信息
    POST /v1/chat200 OK · 42ms
  • 工程团队招聘页，面向熟悉命令行的受众
    $ whoami → 后端工程师(远程)招工程师,JD 本身就是一道面试题

什么时候不用

  • 面向非技术用户却不解释终端符号
    给爸妈做的相册 App 也是黑底绿字非技术用户只觉得「坏了吗」
  • 暗色背景配低对比、小字号正文
    暗绿配黑底,字号再一缩,直接隐身
  • 把命令做成图片，导致无法复制和搜索
    hero 贴一张终端截图,文字选不中、搜不到真文本才能复制命令,截图是敷衍
  • 同时加入大量不相关的玻璃和拟物材质
    $ run毛玻璃气泡
组成结构 · Anatomy
iiii = mmmm+ 绿字黑底+ $ run+ ──┤ ├─+
1等宽字体Monospace用于命令、路径和数据对齐；长正文不必强制使用
2克制色板Palette以少量基础色突出输出状态，同时保证对比度和状态含义
3$ 提示符Prompt$ ▲ ✓ → 几个字符就是全部图标系统
4ASCII 分隔线ASCII Divider────── ┤标题├ ──────,字符代替图形分隔
5闪烁光标Blink Cursor可作为装饰性运行提示；不要持续干扰阅读，并支持减少动效
AI 提示词 · Prompt
终端极客部署观察控制台,等宽字体,黑底低饱和绿字,$ 提示符与命令历史,服务健康状态、canary 部署、promote 与 rollback 任务,ASCII 分隔线和轻量闪烁光标,terminal deploy console, monospace, command line vibe
典型使用场景
部署观察控制台
▣ 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 ↶
AI CLI 工具官网
vibe-cli.dev
vibe▮docs · pricing · github ★ 12.4k
用自然语言,把想法跑上线

描述你想要的页面,AI 生成代码并部署。
没有拖拽,没有面板,只有一行命令。

$ npx vibe init ⌘C 复制
1.2s 平均部署 0 配置项 99.99% 可用性
开发者文档首页
──┤ 开始 ├─────
▸ 快速上手
　安装
　第一个项目
──┤ 命令 ├─────
　vibe init
　vibe deploy
# 快速上手
30 秒从安装到上线
$ npm i -g vibe-cli
$ vibe init my-app # 选个模板
$ vibe deploy # ✓ https://my-app.vibe.app
提示:每条命令都可以复制,别贴截图。
API 产品落地页
echo.apistatus: all systems go ●
一个端点,接入所有大模型
POST /v1/chat/completions
{ "model": "auto", "messages": […] }
→ 200 OK · 42ms · $0.0004
免费 100 万 tokens 按量计费 无订阅陷阱
──────┤ uptime 99.99% · 90d ├──────
工程师招聘页
──────┤ man 1 hiring ├──────
$ whoami
→ 后端工程师 · 远程 · 30-50K
$ cat requirements.txt
→ 写过让自己自豪的代码
→ 读得懂别人的屎山,也重构得动
→ 默认远程 OK,不查考勤
$ ./apply --with github
→ 简历免了,repo 链接发来就行