dither-laser-dark-mode

name	dither-laser-dark-mode
description	创建一个暗色高级设计系统，融合近黑面板、微妙的有序抖动纹理，以及一道纤细的强调色激光氛围。

Dither Laser Dark Mode Skill

何时使用

• 创建一个暗色高级设计系统，融合近黑面板、微妙的有序抖动纹理，以及一道纤细的强调色激光氛围。

工作流程

范围

• 将其作为一套完整的设计系统方向，贯穿背景、面板、卡片、控件、间距、边框与运动。
• 当界面应显得高级、技术感强、有氛围且暗色，并带有克制的激光母题与微妙抖动纹理时使用。
• 这不只是一个背景特效。整个 UI 都应围绕暗色纵深、精准的框选与克制的发光强调而统一。

视觉目标

• 在近黑或炭灰基底之上，层叠高级暗色面板来构建界面。
• 在背景或低优先级面板层引入微妙的有序抖动、粗像素或柔和数字颗粒纹理，使黑暗显得有材质感而非扁平。
• 用一道纤细的激光束或扫描线氛围作为聚焦的视觉母题，以设计的主色或最强强调色着色，而非硬编码为蓝色。
• 让激光保持电影感与克制：一条窄而白热的核心、柔和的强调光晕，以及围绕其的轻微体积雾或泛光，而非一根厚重的霓虹条。
• 将氛围背景与清晰的面板、暗色玻璃卡片、低调的描边、边框渐变与选择性发光相搭配，使 UI 如同一块打磨过的指挥面板。

实现指引

• 使用带微妙色调分层的暗色面板：深黑基底、略微抬升的面板、安静的半透明叠层，以及纤细的白色或强调色着色边框。
• 在背景、大片空白区域或次要填充上克制地施加抖动或颗粒。它应增添纹理与情绪，而不让界面显得嘈杂或复古游戏风。
• 若使用 WebGL、canvas 或着色器层，将其以 pointer-events: none 固定在 UI 之后，并把内容放在更高的堆叠上下文。
• 让激光辉光、烟雾雾气或泛光从当前强调色派生，但让最亮的激光核心接近白色以保证清晰。
• 将激光作为构图锚点：中线、偏移光束、角落汇聚或背景扫掠。它应支撑层级，而非压过内容。
• 面板、仪表盘与导航应使用精准的间距、微妙的模糊、暗淡的高光与低调的抬升，而非喧闹的玻璃拟态或平庸的卡片。

推荐模式

• 悬浮的暗色导航壳，带背景模糊、纤细边框与克制的强调激活态。
• 框选的仪表盘容器，在柔和抖动的暗色场上带有角标、细网格线或竖向分界线。
• 暗色玻璃或近乎不透明的卡片，使用一像素渐变边框、柔和阴影与有限的强调发光。
• 纤细的激光或光束母题置于主视觉区之后、绕着中轴，或在焦点区附近汇聚并伴有淡淡的烟雾或雾气。
• 数据面板以白色或中性文字保持易读，而强调色出现在状态标签、激活标签页、图标、进度条或焦点控件上。

调节旋钮

• 抖动密度：让纹理足够可见以丰富背景，但又足够安静以隐入内容之后。
• 激光强度：将光束粗细与光晕宽度分离，使光束保持纤细而辉光可柔和地呼吸。
• 强调克制：有选择地使用品牌色，让中性暗调主导整个系统。
• 面板对比：调节页面背景、面板与叠层之间的差距，使界面有纵深而不浑浊。
• 氛围：只在焦点激光区域附近添加雾气、泛光与雾，而非铺满整屏。

避免

• 厚重的霓虹激光条、压倒性的泛光，或毁掉可读性的全屏雾。
• 当设计明显使用其他强调色时，硬编码靛蓝或青色。
• 到处堆砌厚重抖动，使界面显得脏、复古或低分辨率而非高级。
• 没有纹理、纵深或材质分隔的扁平黑色布局。
• 无视这套「激光 + 抖动」视觉系统的平庸 SaaS 卡片与渐变。