UI/UX Pro Max风格图鉴
Mobile补充默认深色

终端命令行(移动)Terminal CLI (Mobile)

矩阵绿单色文字、等宽字体、扫描线与块状光标,输入即命令。信息密度高、风格极强,移动端需放大触控目标。

典型场景开发者工具 · 运维应用 · 极客彩蛋

编号73 年代Retro-Future 1980s–2020s 复杂度Medium 默认模式深色

效果示例

preview / terminal-cli-mobile
Nova 产品方案定价 开始使用

Design System

同一套组件
不同的性格

色彩、字体、圆角与材质,决定了界面的气质。

主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50

同一副骨架,演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现(数据标注:浅色 不建议,深色 支持)。

风格描述

矩阵绿单色文字、等宽字体、扫描线与块状光标,输入即命令。信息密度高、风格极强,移动端需放大触控目标。

关键词

terminalclimatrix greenmonospacehackerasciicommand linedeveloperweb3cryptosci-fiOLEDretro-futurefield operative

效果与动效

Blinking cursor (500ms opacity loop), typewriter text reveal hook, scanline overlay (repeating lines 0.05 opacity), ASCII art headers, instant color inversion on press (bg-green text-black), haptic on every keystroke, boot sequence splash on launch

设计系统变量

--bg#050505
--fg-primary#33FF00
--fg-amber#FFB000
--fg-muted#1A3D1A
--fg-error#FF3333
--border#33FF00
--radius0px
--fontSpaceMono-Regular or JetBrains Mono
--font-sizes12 14 16 only
--blink-duration500ms
--scanline-opacity0.05

配色方案

色值取自风格数据,不足时补充主题令牌

主色 / Primary

Matrix Green #33FF00, OLED Black #050505

辅色 / Secondary

Amber #FFB000, Muted Green #1A3D1A, Error Red #FF3333, Border Green #33FF00

强调色在页面底色上的对比度约 15.0:1,可用于正文与图标。

适用场景

适合 / Best For

  • Developer tools
  • Web3/blockchain apps
  • geek-culture apps
  • ARG games
  • sci-fi/noir gaming companions
  • hacker/security tools
  • creative studio portfolios

避开 / Do Not Use For

  • Consumer products
  • health apps
  • anything requiring approachability or warmth
  • children's apps
  • standard enterprise contexts

框架兼容

react-nativeexponativewind

能力矩阵

浅色模式不建议
深色模式支持
移动适配原生适配
转化导向弱Low
渲染成本低无额外开销
无障碍风险需实测contrast-text-4.5 / keyboard / visible-focus / reduced-motion

实现要点

落地清单

  • 0px border-radius everywhere,
  • ASCII-style borders on cards,
  • Boot sequence on launch,
  • Blinking cursor component,
  • Typewriter hook for new content,
  • Scanline overlay (0.05 opacity),
  • Haptic on every button press,
  • Footer status bar component,
  • hitSlop on all bracketed buttons (44×44dp),
  • Reduced motion respected

CSS / 技术关键词

borderRadius: 0 (ALL elements), borderWidth: 1, borderColor: '#33FF00', backgroundColor: '#050505', color: '#33FF00', fontFamily: 'SpaceMono-Regular' or JetBrains Mono, fontSize: 12 or 14 or 16 only, lineHeight: 1.2x fontSize, Haptics.impactAsync(Light) on every press, useAnimatedValue blink 500ms, hitSlop: 12px all sides for bracketed buttons

AI 提示词

Design a Terminal CLI (Mobile) mobile interface using terminal, cli, matrix green, monospace, hacker, ascii, command line, developer. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.