终端命令行(移动)Terminal CLI (Mobile)
矩阵绿单色文字、等宽字体、扫描线与块状光标,输入即命令。信息密度高、风格极强,移动端需放大触控目标。
典型场景开发者工具 · 运维应用 · 极客彩蛋
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质,决定了界面的气质。
同一副骨架,演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现(数据标注:浅色 不建议,深色 支持)。
风格描述
矩阵绿单色文字、等宽字体、扫描线与块状光标,输入即命令。信息密度高、风格极强,移动端需放大触控目标。
关键词
效果与动效
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
框架兼容
能力矩阵
实现要点
落地清单
- 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.