01
设计气质 DNA
终端命令行AI开发者工具游戏化交互式
一个用于游戏化AI编程挑战的未来主义终端界面
02
色彩
#2a8a2aAccent#c8c8c8Ink#000000BG#666666Mutedrgba(68, 68, 68, 1)Line高对比度暗色终端主题，使用绿色强调色标示活动元素
03
字体
- display
36px · 400 - h1
16px · 400
所有文字使用等宽字体 · 主要操作和状态指示使用绿色 · 警告和次要元素使用红色/橙色 · 背景和弱化信息使用灰色
04
间距
4px8px12px16px24px32px48px紧凑的终端风格间距，留白极少
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 6px
pill · 999px
1px solid #333333
06
布局
640container
1columns
16pxgutter
768breakpoints
单列终端风格布局，居中于屏幕
07
动效与交互
150msmicro
300mssmall
600msmedium
lineareasing
活动元素的光标闪烁 · 文本像输入一样依次出现 · 活动状态的微妙脉动
交互元素的颜色变化 · 按钮按下的视觉反馈
08
组件
- button 实心绿色按钮，带有箭头指示器，用于主要操作
- card 深色终端窗口，带有微妙边框和窗口控件
- chip 等宽文本，带有背景高亮以显示键盘快捷键
- input 基于文本的界面，具有命令行美学
- hero ASCII艺术标题，附带警示消息和操作提示
09
文案语气与禁用清单
- 语气 俏皮但紧急的终端界面
- 标题风格 ASCII艺术与等宽文本
- 按钮文案 命令行风格，带有箭头指示器
- 不要使用无衬线字体——截图显示全部为等宽字体
- 不要使用明亮背景——截图显示深色 #000000 背景
- 不要使用圆角现代UI组件——截图显示棱角分明的终端风格元素
- 不要使用复杂的多列布局——截图显示单列居中布局
- 不要使用多种强调色——截图主要使用绿色强调色，搭配红色/橙色警告
- 不要使用装饰性图片或插图——截图使用ASCII艺术代替
- 避免: 正式语言
- 避免: 复杂布局
- 避免: 装饰性元素
- 避免: 明亮色彩方案
- 避免: 衬线字体
- 避免: 圆角现代UI模式
11
System Prompt
一个模拟终端环境的游戏化AI编程挑战界面。设计采用深色 #000000 背景，全部使用等宽字体，营造真实的命令行感觉。关键颜色包括文字用 #c8c8c8，主要操作用 #2a8a2a，警告用红色/橙色。布局为单列并居中，具有终端窗口样式，包括窗口控件。关键禁忌：切勿使用无衬线字体，避免明亮背景，不要创建圆角现代UI元素，不要使用复杂布局，不要引入多种强调色，避免装饰性插图。该界面支持交互并提供键盘快捷键，保持一种适合基于时间的编程挑战的俏皮但紧急的语调。