复古 ASCII 终端界面

要解决什么问题

很多「复古终端」界面只做了深绿背景加等宽字体，缺少 CRT 磷光管那种近黑画布、P1 绿主色、琥珀/红仅作告警 LED，以及面板靠 1px 描边和 bracket 直角角标分层的质感。Dashboard、Landing Page 或 Web App 若要对齐 hacker / green screen / phosphor 语境，需要一套可复用的设计 token 与组件命名，而不是每次临时拼 CSS。

技能如何工作

本技能面向编辑器内的界面搭建流程，强调先读 references/design-tokens.md，再按固定原则落地：

• 画布与色板：#05090A tar-black 底、#00FF6A 主强调、#FFB000 / #FF3B3B 仅用于 WARN/FATAL，正文 #B8FFB8，面板 #0F1F14 描边
• typography：全局 JetBrains Mono，表格化字号（Display 34px、Clock 26px、Body 12px 等）；文本节点必须显式设置 fill，否则不可见
• 几何规则：cornerRadius 恒为 0，不用阴影做层级（.ra-dot 的 glow 除外），间距走 4px 网格
• 工作流：fetch_editor_state → locate_available_space → 写入 design tokens → 先建 .ra-panel、.ra-chip、.ra-dot、.ra-meter、.ra-cursor、.ra-line 等组件 → 再组屏，并在每个逻辑区块后用 capture_screenshot 校验
• 面板签名：每个 .ra-panel 在左上、右下放置 7×7 bracket 向量，不可省略

扩展新控件时沿用 .ra- 前缀、同一色板与 chip/dot/meter 模式（按钮、输入框、表格、Modal 等见 SKILL 中的 Common Extensions 表）。

适用边界

• 适合：明确要 retro / ASCII / terminal / CRT 美学的暗色界面
• 不适合：圆角卡片、照片主视觉、装饰性琥珀红、非 JetBrains Mono 字体、用 transition 做数字滚动（数值展示应 step 动画，如光标 1200ms blink）
• 文案风格：标题/标签倾向 ALL CAPS，技术标签用 //、::、[ OK ] 等终端惯用格式