Teenage Engineering UI 是一套用于塑造界面的设计技能，目标是把软件界面做成看起来像“做工精良的实体仪器”，其美学谱系来自 Dieter Rams 时期的 Braun，并由 Teenage Engineering（OP-1、OP-Z、Pocket Operators、TX-6）延续。文档将其概括为“带着一点俏皮的功能主义”：极度克制、对功能诚实，再用一个自信的强调色和少量趣味性的技术虚构来调和。资料特别说明，它不是通用新拟态，不是皮革与木纹的拟物，也不是扁平的 Material Design。
用途与定位 该技能用于为网页或应用界面提供一整套可复用的设计令牌与组件配方（位于 references/ 目录）。它适合需要呈现硬件感、仪器感或复古未来主义气质的界面项目。
主要能力与设计原则 资料给出六条原则：
- 少而更好：移除一切非必要元素，保留的元素必须优秀；无功能元素只能作为结构（外壳）或刻意的趣味细节存在，不得成为噪音。
- 诚实：控件通过形态传达功能——旋钮有指示线与刻度，主操作是一个大而自信的按钮，凹陷表示按下，凸起表示可按。
- 处处标注：真实仪器布满小型大写标签，应大方用于区块名、控件名、单位、模式，这是最快呈现“硬件感”的方式。
- 一个强调色，克制使用：只选一个醒目颜色（默认 TE 橙 #FF5A00，或红、信号黄），仅用于最重要的操作、激活状态和少量状态点；另允许一套小型的红/绿/蓝/琥珀功能点作为系统。
- 造设备，而非页面：把整个 UI 当作物理单元——外框与边角螺丝、产品名、序列号、电源/就绪 LED，控件分组为带标签的模块，模块间有接缝。
- 加一点俏皮：点缀可信的技术虚构，如 SN 47-Δ、CH 01 · 38400 BAUD、v0.4.2、PWR、无功能的点阵网格；语气冷静、面无表情，不要玩笑化。
视觉系统要点 两套主题：Bone（暖白面板，默认）与 Graphite（暖炭色），每个项目选其一，不要混用。强调色恰为一个主色，默认 #FF5A00，其余全部中性。字体：几何无衬线用于标签与标题（Space Grotesk / Archivo），等宽字体用于数据与小标签（Space Mono / JetBrains Mono），可选像素或七段字体（VT323 / DSEG）用于显示屏；标签为大写，字距 0.12–0.18em，约 10–12px，使用次要色。深度要“脆”不要“糊”：柔和顶部高光加柔和底部投影再加 1px 细缝，凹陷元素反转阴影（inset），阴影配方直接复制令牌文件中的值，不要自创模糊参数。几何采用 4px 间距网格，外壳圆角约 20–24px、模块约 12–16px、按钮/输入框约 8–10px，旋钮与 LED 为完整圆形，模式标签适合用胶囊形。显示屏为鼠尾草绿 LCD（绿底深字）或深色 CRT（近黑底上的绿/琥珀荧光），始终嵌入面板并带淡扫描线与微弱辉光。
组件目录 资料列出核心组件：外壳/设备框（外框、角螺丝、产品字标、序列号、电源 LED）、模块/面板、标签（大写等宽说明，常带前置状态点）、旋钮（指示缺口加刻度环，可选“TURN TO SET”说明）、按钮（中性触感按钮与唯一强调主按钮）、模式选择器（分段胶囊，一个激活态加角落指示点）、拨动开关、LED 指示灯（实心加柔光晕）、输入框（凹陷等宽占位符）、显示屏（凹陷 LCD/CRT 加荧光文字与扫描线）、点阵网格（装饰性格栅）、状态栏（底部条，展示型号、模式、通道、波特率等冷幽默元数据）。各组件的可用 HTML/CSS 配方位于 references/components.md。
使用方式（构建工作流）
- 选主题与强调色；2. 加载字体与令牌，使用 references/design-tokens.md 或引入 assets/te-tokens.css，不硬编码十六进制值而使用变量；3. 先搭设备外框（边框、角螺丝、字标、序列号、电源 LED、点阵格栅），这是风格成立的关键；4. 在网格上铺模块并保持均匀间距；5. 从目录放入控件，保持一致的圆角、阴影与标签；6. 加入俏皮细节（状态栏、序列号、通道/波特率、版本字符串、静态指示点），保持冷面；7. 对照 references/checklist.md 自检，常见失败包括强调色过多、缺少标签、深度发糊、缺少设备外壳。
适用场景与限制 适用于希望呈现仪器感、硬件质感与复古未来主义个性的界面项目，可迁移到 React（把令牌暴露为 CSS 变量并组件化目录项）与原生 UI（直接翻译令牌表）。资料说明美学由令牌与外壳隐喻承载，而非框架；原则是契约，CSS 只是其中一种实现。是否适用于具体平台、有无商业授权或收费信息，资料暂未提供。起步模板位于 assets/starter-template.html，为自包含的可运行设备示例，可作起点或用于校准观感。