bright-green-tech-system-webgl

亮绿色科技系统 WebGL 技能

使用场景

• 打造亮绿色科技设计系统，采用结构化的分栏布局、带硬朗边框的深色表面、等宽字体工具标签，以及醒目的 WebGL 可视化区域。

工作流

适用范围

• 将此设计方向应用于布局、框架、字体、控件、元数据和嵌入式 WebGL 可视化区域，构建完整的设计系统。
• 当界面需要呈现鲜明的科技感、实验性和结构感，并以亮绿色为信号色，且展示实时视觉引擎时，使用此设计方向。
• 这不是通用的深色 SaaS 风格，也不是柔和的玻璃拟态。整体应呈现活跃的合成控制台或构建系统界面质感。

视觉目标

• 使用深炭灰或近黑色作为页面底色，并清晰呈现结构线、容器边框、角标和内部隔线。
• 使用明亮的酸橙绿、荧光绿或信号绿作为主导强调色，用于指示器、进度状态、焦点细节、高亮和重要标签。
• 保持绿色鲜明且使用克制，将其用于信号、焦点字体、强调色填充和 WebGL 高亮，而非铺满所有表面。
• 采用分栏构图：一侧承载内容、元数据和说明，另一侧设置 WebGL 或 Three.js 可视化区域。
• WebGL 区域应融入整个系统，而非仅作装饰：它应呈现为通电的仪表面板、合成地球、粒子引擎或实时几何视口。

实现指南

• 优先使用醒目的外层容器框架，搭配细线条、微妙的背景模糊、清晰可见的角标，以及中央分隔线或明确的分栏布局。
• 主要内容使用简洁的无衬线字体；标签、状态读数、流程步骤、百分比和系统元数据使用等宽字体。
• 添加间距精准、边框层级分明的小型框架模块、提示面板、进度轨道或状态块。
• 使用蒙版交错显现、向上淡入区块或受控的依次显示，让布局富有活力但保持克制。
• 将 WebGL 面板视为核心组件：尽可能使用真实画布或 Three.js 渲染，并加入受亮绿色强调色映衬的发光粒子、合成几何体或轨道形态。
• 让可视化效果富有氛围感和高级感：叠加发光、轻微雾效、平缓的镜头运动和柔和的鼠标响应都很合适；避免混乱的运动和过度嘈杂的效果。

推荐模式

• 分屏主视觉：左侧放置内容和系统提示词，右侧设置沉浸式 WebGL 视口。
• 边缘硬朗的框架容器，带外边框、内嵌分隔线和角落处的小型括号标记。
• 使用等宽字体的流程导航，包含编号阶段、系统标签或编译步骤，并突出显示一个绿色激活状态。
• 使用亮绿色作为活跃运行色的进度条、微型实时指示点和状态摘要。
• 采用发光粒子、行星结构、节点场或几何运动构建 WebGL 场景，并呼应界面的强调色。

调整参数

• 绿色亮度：保持鲜明且充满活力，同时与深色中性色平衡，让页面保持高级质感。
• 结构密度：根据系统需要呈现的仪表感，增加或减少参考线、括号、分隔线和框架盒。
• WebGL 显著程度：选择让可视化成为占据半屏的主视觉，还是更收敛的技术面板。
• 动态强度：保持运动平滑且有意为之；调整显现时序、粒子速度和悬停响应，让系统充满活力但不显得躁动。
• 背景纹理：使用淡淡的斜线或网格纹理丰富外层框架，但不要喧宾夺主，影响核心结构。

避免

• 缺乏布局规范的通用黑底绿字黑客风格。
• 整个 UI 过度使用亮绿色，导致界面失去层次感。
• 将 WebGL 当作与设计系统脱节的随意 Hero 装饰。
• 与锐利、带边框的技术风格外壳格格不入的柔和圆角消费级应用风格。
• 过多杂乱的粒子、快速运动，或过多发光层，导致可读性降低。