bright-green-tech-system-webgl

name	bright-green-tech-system-webgl
description	打造一套亮绿色技术风设计系统：结构化的分栏布局、硬边框的深色面板、等宽功能性标签，以及一个醒目的 WebGL 可视化区域。

Bright Green Tech System WebGL Skill

何时使用

• 打造一套亮绿色技术风设计系统：结构化的分栏布局、硬边框的深色面板、等宽功能性标签，以及一个醒目的 WebGL 可视化区域。

工作流程

适用范围

• 将其作为一套完整的设计系统方向，贯穿布局、边框、排版、控件、元数据以及内嵌的 WebGL 可视化区域。
• 当界面应显得锐利技术感、实验性且结构分明，带一个亮绿色信号色和一个可见的实时视觉引擎时使用。
• 这不是通用的深色 SaaS，也不是柔和的玻璃拟态。它应当像一台运作中的合成控制台或构建系统界面。

视觉目标

• 在深炭灰或近黑的基底上构建页面，配以高度可见的结构线、容器边框、角括号和内部分隔线。
• 用一个亮柠檬绿、酸性绿或信号绿强调色作为主导的激活色，用于指示器、进度态、聚焦细节、高亮和重要标签。
• 让绿色鲜明而有意图，但把它的使用限制在信号、焦点排版、强调填充和 WebGL 高光上，而非铺满每一个面板。
• 建立分栏构图：一侧承载内容、元数据和说明，另一侧托放一个 WebGL 或 Three.js 可视化区域。
• WebGL 区域应显得融入系统、而非装饰性：它应读起来像一块通电的仪表盘、合成的地球、粒子引擎或实时几何视口。

实现指引

• 优先采用强外层容器外壳，配细描边、微妙的背景模糊、可见的角括号，以及文本与可视化之间的中央分隔线或明确分栏。
• 主内容用干净的无衬线排版，标签、状态读数、流程步骤、百分比和系统元数据用等宽文本。
• 引入小型带框模块、提示面板、进度导轨或状态区块，配以精确的间距和清晰的边框层级。
• 使用遮罩式错落显现、上浮淡入区块或受控的顺序节奏，让布局既有生气又有纪律。
• 把 WebGL 面板当作核心组件对待：尽可能使用真实 canvas 或 Three.js 渲染，配以发光粒子、合成几何或轨道形态，并染上亮绿色强调色。
• 让可视化保持氛围感与高级感：叠加辉光、微妙的雾、轻柔的相机运动和沉静的鼠标响应是好的；混乱的运动和嘈杂的过载不是。

推荐模式

• 分屏主视觉：左侧为内容和系统提示，右侧为沉浸式 WebGL 视口。
• 硬边框的带框容器：外边框、内嵌分隔线，四角带小括号标记。
• 等宽流程导航：用编号阶段、系统标签或编译步骤，配一个激活的绿色态。
• 进度条、微小的实时圆点和状态摘要，用亮绿色作为激活的运作色。
• 用发光粒子、行星结构、节点场或几何运动构建的 WebGL 场景，呼应界面强调色。

调节旋钮

• 绿色亮度：保持鲜明高能，但用深色中性色平衡它，让页面维持高级感。
• 结构密度：根据系统应显得多"仪表化"，增减辅助线、括号、分隔线和带框盒子。
• WebGL 显著度：选择让可视化成为占据半屏的主导特征，还是一块更收敛的技术面板。
• 动效强度：保持动效平滑而有意图；调节显现时机、粒子速度和悬停响应，让系统有生气而不显狂躁。
• 背景纹理：用淡淡的斜纹或网格纹理丰富外壳，但让它次于核心结构。

应避免

• 缺乏布局纪律的通用绿底黑字黑客美学。
• 让整个 UI 过饱和于亮绿色，直至界面失去层级。
• 把 WebGL 当作与设计系统脱节的随机主视觉装饰。
• 与锐利带框技术外壳相冲突的柔和圆角消费级应用风格。
• 过度嘈杂的粒子、快速运动或过多辉光层，从而降低可读性。