仅当用户明确选择或已确认的项目配置指定后,才使用此技能。对于未解释的新 UI 请求,请使用风格选择器(如 ## Style selection),而不是自行决定用户的品味。现有品牌、可访问性和用户覆盖项优先于以下所有示例。以下风格指南不是允许在风格选择前就进行 UI 编码的许可。
风格包:复古终端
ID: retro-terminal
标识: 真实的 CRT 开发者控制台视觉语言,磷光辉光,等宽制表结构,以及现代键盘驱动的实用性。
这是一个风格包,而非强制默认值。仅在显式选择或确认适用的项目风格后加载。项目指令可以覆盖个别选择。保留可访问性、实用性和品牌约束。字体是建议,不是必需的依赖项。一个带有无样式绿色文本的朴素黑色页面不符合复古终端的标准。
适用场景 / 权衡
- 适用场景: 开发者作品集、CLI 云仪表盘、网络安全和开发运维工具、系统监控控制台以及创意编码体验。
- 需要注意: 非技术型消费者受众,他们可能不熟悉严格的等宽数据布局或终端隐喻。
- 参考方向:
- 经典琥珀色 CRT: 黑曜黑背景 (
#0C0D0E),暖调磷光琥珀色 (#FFB000),微妙的扫描线效果,以及高对比度的奶油色标签。 - 磷光矩阵绿: 深石墨画布 (
#0A0F0D),电光磷光绿 (#33FF33),带括号的窗口标题,以及清晰的日志流。 - 赛博深蓝: 高科技终端,带有冷光青色 (
#00F0FF),清晰的制表符边框 (┌─┐),以及快捷键标签 ([ESC])。
- 经典琥珀色 CRT: 黑曜黑背景 (
复古终端保真度门——强制
在调用完复古终端页面之前,打开的视口必须能够被直观地识别为一个真正的、正在工作的终端控制台或命令台。 如果用户选择了此风格,一个带有等宽字体的普通暗色网站将被视为失败,即使 CSS 类中包含 terminal。
一个成功的复古终端实现需要展示所有以下要素:
- 磷光辉光与高对比亮度: 文本和活动指示器展现出微妙的磷光辐射 (
text-shadow: 0 0 6px currentColor),主要输出在黑曜石背景上达到 WCAG AA 对比度。 - 微妙的 CRT 扫描线叠加层: 表面具有受控的、静态的水平扫描线图案 (
repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, transparent 2px)),在不妨碍字符可读性的情况下增加真实的显示深度。 - 结构化的 ASCII / 括号布局框架: 窗口标题、面板框架和状态栏使用清晰的 1px 规则、ASCII 方框字符 (
┌─┐) 或带括号的标签 ([SYS_OK]、[MODE: CLI])。 - 真实的命令提示符和光标: 界面包含一个活跃的 shell 提示行 (
visitor@terminal:~$),带有实心方块光标 (█) 和清晰的命令历史样式。 - 等宽制表对齐: 内容严格沿等宽字符列对齐,用于时间戳、状态代码、进程 ID 和数据读数。
首视口测试: 在桌面截图中,不阅读页面标题的情况下,识别终端提示符、磷光辉光、扫描线栅格和带括号的控制台框架。如果它看起来像一个通用的暗色博客,请添加扫描线覆盖层和终端提示结构。
明确的复古终端扫描线例外——允许磷光辉光
复古终端特定的覆盖: 通用的、反对装饰性叠加层或屏幕纹理的反作弊警告不得被解释为禁止此处微妙的扫描线、磷光辉光或 shell 提示行。这些是材料赋能属性,是 CRT 控制台美学所必需的。
- 允许的材料处理: 等宽制表符边框、磷光文字辉光(
0 0 6px)、静态扫描线栅格叠加层、带括号的状态药丸,以及闪烁/实心方块光标。 - 反作弊边界: 每个命令行或操作都必须是可用的。不要用不可读的矩阵字符雨、假的终端启动错误或充当功能性 UI 的静态装饰性代码片段来淹没屏幕。
- 反作弊解释: 根据命令清晰度、可读性和开发者生产力来评估终端元素,而不是禁止等宽框架。为了满足通用的平面启发式规则而移除扫描线和提示行是一种设计倒退。
排版与打字效果
高可读性等宽字体:JetBrains Mono、IBM Plex Mono、Fira Code 或系统等宽字体(ui-monospace, monospace)。正文:14–15 像素;标题:20–32 像素,粗体(700),并使用大写字母加括号样式(### [SYSTEM_OVERVIEW])。保持严格的字符网格对齐。
色彩方向
- 深色模式(黑曜石 CRT 磷光):
- 画布底色: 黑曜黑(
#0C0D0E或#080A08)。 - 表面面板: 深灰石板色(
#14171A或#111613)。 - 磷光强调色(选择其一):
- 经典琥珀色:
#FFB000(辉光:rgba(255, 176, 0, 0.45)) - 磷光绿:
#33FF33(辉光:rgba(51, 255, 51, 0.45)) - 赛博青:
#00F0FF(辉光:rgba(0, 240, 255, 0.45))
- 经典琥珀色:
- 边框:
1px solid rgba(255, 176, 0, 0.25)或#2A2F35。 - 扫描线: 半透明深色栅格线(
repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, transparent 2px))。
- 画布底色: 黑曜黑(
- 浅色模式(复古羊皮纸电传打字机):
- 画布底色: 暖纸象牙白(
#F4F1EA)。 - 表面面板: 暖燕麦色(
#E8E4DA)。 - 磷光反转色(选择其一):
- 深烧琥珀色:
#5C3A00 - 深终端绿:
#0F4D19 - 碳墨色:
#111613
- 深烧琥珀色:
- 边框:
1px solid #D5D0C3。 - 扫描线: 减弱或关闭(
none或微妙的纸张纹理)。
- 画布底色: 暖纸象牙白(
- 语义状态: 错误红(深色
#FF5555/ 浅色#B91C1C),警告黄(深色#FFCC00/ 浅色#B45309),成功薄荷绿(深色#50FA7B/ 浅色#047857)。 - 主题耦合与防冲突规则: 在浅色模式下,明亮的磷光强调色必须反转成高对比度的碳色/深琥珀色墨水(
#111613或#5C3A00)。在浅色纸张画布上放置明亮的琥珀色#FFB000或霓虹绿#33FF33是直接的对比度冲突,并且被严格禁止。
布局与几何形状
边角是锐利的或最小的(0px–4px);1px 实线终端面板边框;紧凑的垂直节奏(4px/8px 等宽线网格)。面板模拟模块化终端复用器(tmux/screen 风格)。
表面、深度、纹理
- 终端屏幕: 深黑色背景,带有静态扫描线栅格覆盖层。
- 控制台面板: 1px 实线边框(
1px solid rgba(255, 176, 0, 0.3)或#2A2F35),带有微妙的内阴影。 - 活动光标: 方块光标,带 1 秒脉冲或实心活动状态。
组件结构与交互
- 命令行提示符:
user@system:~$ command --flag,带有功能输入和清晰的返回结果。 - 终端按钮/操作: 轮廓线括号按钮(
[ EXECUTE ]或[ CANCEL ]),悬停时颜色反转(background: currentColor; color: #000;)。 - 数据日志流: 表格式行,包含时间戳、日志级别标签和消息。
- 键盘快捷键: 带括号的键指示器(
[⌘+K]、[ENTER]),带有清晰的指针点击备用方案。
动效
默认情况下状态立即变化(0–80 毫秒)。仅对英雄介绍部分可选的可跳过字符打字效果。立即遵循 prefers-reduced-motion。
可选的 Anime.js v4 配方
- 动效决策: 等宽字符类型揭示或终端扫描条扫描;保持帧率稳定。
- 起始持续时间: 每个令牌块 100 毫秒(0 = 立即);根据任务和用户偏好进行调整。
- 避免: 屏幕抖动、人工失真波、持续闪烁循环。
- 依赖项: 默认使用 CSS/原生。仅当请求的交互合理时才使用 Anime.js v4。遵循 Taste Engine
references/motion-engine.md(如可用);独立技能遵循上述减少动画和无装饰循环原则。
UI 写作与微文案
精确、技术性、命令驱动。示例:deploy --prod、status: healthy、4 processes running。避免居高临下的营销噱头。
起始令牌(建议,非完整主题)
| 令牌 | 深色模式默认值 | 浅色模式默认值 |
|---|---|---|
--taste-term-bg | #0c0d0e | #f4f1ea |
--taste-term-surface | #14171a | #e8e4da |
--taste-term-text | #ffb000 | #5c3a00 |
--taste-term-amber | #ffb000 | #5c3a00 |
--taste-term-glow | 0 0 6px rgba(255, 176, 0, 0.45) | none |
--taste-term-border | 1px solid rgba(255, 176, 0, 0.25) | 1px solid #d5d0c3 |
--taste-term-scanline | repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, transparent 2px) | none |
--taste-term-radius | 2px | 2px |
--taste-term-font-mono | JetBrains Mono, IBM Plex Mono, monospace | JetBrains Mono, IBM Plex Mono, monospace |
--taste-term-motion-duration | 80ms | 80ms |
令牌代表一个方向,并不能保证为每个调色板/平台都可复制粘贴。在项目级别定义 --taste-term-*,确保颜色对比度,并通过主题令牌进行适配,而不是散布字面值。
英雄区构成(完整首视口)
当面向公众的作品集/着陆页/主页有英雄区时: 使用一个可视屏幕的页眉+英雄区组合。基础高度为 min-height: 100svh,并回退到 100vh,仅当页眉处于正常流中时才减去真实页眉;让英雄区为可访问性和短移动屏幕展开。不要将此应用于私人仪表盘或其他任务屏幕;直接的用户覆盖优先。风格特定方向: 将首视口构建为一个真实的交互式控制台会话,包含欢迎 ASCII 横幅、系统状态摘要和一个工作的提示行。不要模拟虚假的矩阵雨或不可读的故障循环。请参阅路由器 references/hero-layout.md(如存在)。独立使用遵循相同的响应式和反作弊原则。
风格特定质量门
- 要做的: 验证文本与画布的高对比度(WCAG AA);确保保留等宽对齐;为所有键盘快捷键提供点击备用方案;测试扫描线可读性;验证深色/浅色模式切换,以便磷光颜色在浅色背景上反转为高对比度深色墨水。
- 不要做的: 不要将普通暗色主题视为复古终端;避免不可读的故障动画;不要呈现假的非交互式控制台提示符(这会迷惑用户);避免浅色模式下的主题冲突,例如在羊皮纸上使用霓虹绿或浅琥珀色文本。
- 确认桌面和移动端的一致性;可见的键盘焦点(
:focus-visible);加载、空、禁用、错误和成功状态;减少动效行为(prefers-reduced-motion)。 - 不要将特定风格的假设注入不相关的项目。当组合风格时,显式命名主要风格和借用的特性。
通用反作弊门(自包含)
每个元素都必须有其存在的理由。内容优先于装饰。不要装饰不确定性。 不要虚构余额、指标、推荐、用户、标志、批准、已验证/在线/可用状态、虚假活动或成功确认;改为使用诚实的空/加载/错误状态。仅当请求并明确标记时,演示数据才是可接受的。
不要添加装饰性的卡片套卡片层:嵌套的表面必须代表一个不同的交互或信息边界。避免自动生成的 3 功能网格、4 统计面板、虚假的英雄声明、无目的的图表、徽章/芯片/图标垃圾、不相关的装饰性艺术,以及仅仅为了填充视口而进行的随机循环。更喜欢使用排版、间距、对齐和分隔线进行分组。平等的同级需要有意的视觉平衡。
反作弊文案: 没有通用的“释放你的潜力”、“体验未来”、“提升你的工作流程”、“无缝”等声明或翻译等效词。标题必须传达实际内容,CTA 必须命名操作,空/错误/成功文本必须描述真实的状态和后续步骤。避免虚假的紧迫感、编造的计数、模糊的 AI 炒作、无道理的 emoji 和不可访问的全大写墙。根据此风格和用户的语言调整措辞,而不改变事实。
主题和模式对比度完整性: 当用户请求深色模式或浅色模式(或构建主题切换器)时,背景和前景颜色必须在所有表面、文本、边框、输入和语义标签上同步翻转。切勿将黑色文本留在深色背景上,白色文本留在白色背景上,或留下不可读的低对比度状态药丸。所有状态必须达到 WCAG AA 对比度(正文/正常文本至少 4.5:1,大标题和交互边界至少 3:1)。
响应式和动效: 谨慎地组合移动端,检查长标签、焦点状态和可访问对比度;没有为了适应时尚布局而进行的文本裁剪。默认静态;将动效用于有意义的交互,尊重减少动效偏好,避免没有真实状态的弹跳/浮动/脉冲装饰。
关键/高发现项阻止完成: 必须修复虚构的状态/数据、损坏的操作、不可访问/裁剪的控制、误导性的文案、主题对比度冲突或严重的移动端故障。报告实际验证的内容;不要声称未运行的测试。
不是美学否决: 富有表现力的颜色、阴影、渐变、卡片布局或装饰性处理,当它们是选定美学的有意组成部分并通过可用性检查时,是合理的。不要强行强迫极简主义。
反作弊:风格特定
真实的 CLI 环境,而非黑客壁纸。
- 拒绝: 伪装成终端的通用暗色卡片、装饰性非功能性控制台提示符、刺眼的扫描线覆盖层、浅色纸张背景上的霓虹文本,以及不可读的矩阵雨循环。
- 取而代之: 提供真正的等宽层次、工作的命令行或标签……
……(由于原始内容被截断,后续翻译基于提供的片段完成)