Dither Laser Dark Mode 技能指南：用有序抖动与克制激光构建高端暗色设计系统

导读

本指南围绕仓库中的 Dither Laser Dark Mode 技能文档 展开，面向使用 Codex、Claude、Cursor 等 AI 编码 Agent 的设计师与开发者，讲解如何落地一套"近黑基底 + 细密有序抖动纹理 + 克制激光氛围"的高端暗色设计系统。读完本文，你将掌握该技能的适用范围、视觉目标、实现指引、推荐模式与调参旋钮，并能结合仓库内同步的 Cedar Lodges 参考实现与 Bayer 有序抖动算法，直接生成可运行、可复用的暗色产品级界面。

---

一、这个技能解决什么问题：Use When 与 Scope

SKILL.md 的定位非常明确：这不是一个背景特效，而是一套完整的设计系统方向。其 Use When 与 Scope 两节给出了两个层次的适用判定：

• Use When：需要创建同时包含"近黑表面（near-black surfaces）""微妙的 ordered-dither 纹理""细的强调色激光氛围（thin accent-colored laser atmosphere）"三种要素的暗色高端设计系统。
• Scope：这套方向要贯穿背景、表面、面板、控件、间距、边框与动效全链路；适用于"高级感、技术感、氛围感、暗色、克制激光母题 + 微妙抖动纹理"的界面。
• 边界声明：它"不只是背景效果"，整个 UI 应当统一在暗色深度（dark-mode depth）、精确框架（precise framing）与克制发光（luminous accent restraint）三位一体的语言之下。

值得一提的是，原 SKILL.md 的 Workflow 一节为空——技能本身以"设计原则 + 调参指南"的形式交付，具体执行工作流由 Agent 依据配套的 demo/PROMPT.md 中的多阶段提示词驱动（详见下文"从技能到可运行页面"）。

二、视觉目标：让"黑"有材质，让"光"有克制

Visual target 一节定义了四个可量化的审美锚点，这是整个设计系统的核心骨架：

1. 近黑 / 炭灰基底（near-black or charcoal foundation）：在基底之上叠加多层"高级暗色表面"，形成明度阶梯，而不是一块纯黑。
2. 材质化的黑暗（material darkness）：在背景或低优先级表面层引入 subtle ordered-dither、粗像素（coarse pixel）或柔和数字颗粒（soft digital grain），让暗色"有材质感"而非扁平死黑。
3. 细激光/扫描线氛围（thin laser beam or scanning-line）：作为聚焦的视觉母题，必须用设计的主强调色或最强强调色着色，而不是硬编码的蓝色。
4. 电影感而非霓虹感：激光要保持克制——窄的白热核心（narrow white-hot core）、柔和的强调色光晕（soft accent halo）、围绕在周围若有若无的体积雾或 bloom，绝不是粗壮的霓虹条。

最后，把氛围背景与清爽面板（crisp panels）、玻璃暗色卡片（glass-dark cards）、低饱和描边、渐变边框、选择性辉光搭配，让整体像一块"打磨过的命令面板（polished command surface）"。

三、实现指引：六个可执行的落地原则

Implementation guidance 从工程角度给出了直接可照做的原则：

• 色调分层：深黑基底 → 略微抬升的面板 → 安静的半透明覆盖层 → 细的白/强调色边框。用"微妙色调分离"（subtle tonal separation）制造纵深。
• 纹理克制：dither/grain 只出现在背景、大空白区或次要填充里，作用是为界面加质感与情绪，不能让界面变得噪杂或复古游戏风。
• 图层与事件隔离：若使用 WebGL、canvas 或 shader 层，将其固定放在 UI 之后，设置 pointer-events: none，并把内容放在更高 stacking context 中。
• 发光派生自强调色：激光辉光、烟雾、bloom 都由当前活跃强调色派生；但最亮的激光核心要接近白色以保证清晰度。
• 激光是构图锚点：作为中心线、偏移光束、角落汇聚或背景扫掠来使用，支撑层级而非压过内容。
• 面板纪律：面板、仪表盘、导航使用精确间距、微妙模糊、暗调高光与克制的抬升感，拒绝喧哗的玻璃拟态或通用卡片。

仓库实证：demo 源码中的落地方式

仓库同步的参考实现 demo/index.html（沙箱封装内嵌完整页面源码）可以印证以上原则：

• 近黑基底与层级：页面使用 #102018（近黑墨绿）作为 hero 与暗区基底，#1A2F24 作为深面板色，#FDFBF7 作为米白文本，#F4EFE6 / #E5E0D5 作为浅色区块与描边，形成明显的明度阶梯。
• 强调色克制：主强调色为暖棕金 #C5A059，配合焦糖棕 #6E4B3A 用于按钮、状态徽章、活动导航下划线、边框角标与 ticker 文字，中性暗色调占据绝对主导。
• 氛围光而非霓虹条：源码中的 .ambient-ray-1 使用 radial-gradient(circle at center, rgba(197,160,89,0.15) 0%, transparent 70%) 的柔和光晕，配合底部的扫描式 ticker 动画，与技能"细激光/扫描线"的母题一致，而非粗犷激光条。
• 图层隔离：Three.js 尘埃粒子 canvas（#mist-canvas）以 absolute inset-0 pointer-events-none z-0 opacity-40 固定在内容之后，正文内容位于 z-10 / z-20 之上，完全符合"shader 层置于 UI 之下并关闭指针事件"的指引。

四、推荐模式：五类可直接复用的组件范式

Recommended patterns 给出了五类可直接套用的模式，每类都可在 demo 中找到对应实现：

模式	设计要点	demo 印证
浮动暗色导航壳	背景模糊 + 细边框 + 克制的强调色激活态	顶部 #navbar 滚动超过 50px 后切换为 bg-[#1A2F24]/90 backdrop-blur-md shadow-sm，导航项 hover 出现 #C5A059 的 1px 下划线
框架化仪表容器	角标、细网格线或垂直边界规则叠加在柔和 dither 暗场上	Section 1 使用 1px 渐变描边面板 + #C5A059 的 3px 角括号（corner brackets），配滚动显现动画
暗玻璃/近不透明卡片	1px 渐变边框 + 柔和阴影 + 限量强调辉光	预订表单壳使用 p-[1px] bg-gradient-to-br from-white/20 via-white/5 to-transparent + 多层柔和阴影，内部 #1A2F24]/80 模糊面板
细激光/光束母题	置于 hero 之后、围绕中轴或向焦点区域汇聚，伴淡烟/雾	hero 上叠加 #102018 双向渐变压暗与暖金氛围光晕，营造"光束穿透"的克制氛围
可读的数据表面	白/中性文本保证可读，强调色只出现在状态芯片、激活 Tab、图标、进度条与焦点控件	状态徽章 bg-[#1A2F24]/80 border-white/10 text-[#C5A059]，金额与主按钮使用强调色

五、Tuning Knobs：五个关键调参维度

Tuning knobs 是技能给出的调参主轴，使用 Agent 时应逐项校准：

• Dither 密度（Dither density）：纹理可见度足以丰富背景即可，安静到"藏在内容后面消失"。
• 激光强度（Laser intensity）：把光束厚度与光晕宽度分开调，让光束保持细、辉光自由呼吸。
• 强调色克制（Accent restraint）：品牌色要选择性使用，中性暗色调主导整个系统。
• 表面对比（Surface contrast）：调好页面背景、面板、覆盖层之间的落差，让界面有深度又不浑浊。
• 氛围范围（Atmosphere）：haze、bloom、fog 只围绕焦点激光区域添加，不要铺满全屏。

六、红线清单：Avoid 的五项禁忌

原文档明确列出五条不能触碰的底线，这些也适合作为 Agent 输出的自检项：

1. 粗壮霓虹激光条、铺满全屏的 bloom 或破坏可读性的全屏雾。
2. 设计明显使用其他强调色时，硬编码 indigo 或 cyan。
3. 到处堆砌重抖动，让界面显得脏、复古或低分辨率而非高级。
4. 无纹理、无深度、无材质分离的纯黑扁平布局。
5. 无视激光 + 抖动视觉系统的通用 SaaS 卡片与渐变。

七、从技能到可运行页面：Cedar Lodges 参考实现剖析

为了让技能可被验证，仓库在 agent-skills/web-design/dither-laser-dark-mode/demo/ 下同步了一套完整参考实现（产品主题：Cedar Lodges | Where the Mountains Breathe）。这是理解该技能"终极形态"的最佳标本。

7.1 目录结构与运行方式

• demo/index.html：沙箱化演示入口，通过 sandbox="allow-scripts" 的 iframe 注入内嵌页面与 8 张本地图片资源（demo/assets/）。
• demo/PROMPT.md：面向 Agent 的三档提示词（见 7.3）。
• demo/source.json：同步元数据，记录了 HTML 的 sha256 校验、安全配置（sandboxed-srcdoc-v1）以及运行时依赖清单。

7.2 技术栈与运行时依赖（来自 source.json 事实）

参考实现依赖以下运行时，均以固定版本打包在仓库 assets/runtime/ 下供离线引用：

运行时	对应仓库文件	来源版本（记录于 source.json）
Tailwind CSS runtime	runtime-ccc8894b3418-runtime.js	cdn.tailwindcss.com
GSAP	runtime-027051effa47-gsap-min.js	gsap 3.12.2
ScrollTrigger	runtime-689ca8dda44c-scrolltrigger-min.js	gsap 3.12.2 ScrollTrigger
Three.js	runtime-25023b521d77-three-min.js	three.js r128
Iconify	runtime-163ebd087cfc-iconify-icon-min.js	iconify-icon 1.0.7

页面整体以 Tailwind utility class 为主、少量自定义 CSS 为辅（自定义了 slow-zoom、ticker 关键帧与 .ambient-ray-1 氛围光晕），这正是"暗色系统 + 精确间距 + 克制动效"能在单文件 HTML 中高效成型的原因。

7.3 交互与动效清单（可在沙箱 demo 中逐项验证）

从内嵌页面脚本可见其动效编排与技能"克制"主张高度一致：

• 导航滚动状态：scrollY > 50 时切换半透明背景 + 模糊 + 阴影。
• GSAP 滚动显现：.gsap-reveal 元素从 y: 30, opacity: 0 缓入，ScrollTrigger start: "top 85%"，缓动 power3.out。
• 图片视差：.parallax-img 通过 GSAP yPercent: 15 + scrub: true 滚动驱动。
• Three.js 尘埃粒子：300 个 #6E4B3A 半透明粒子组成 Points，随时间缓慢旋转并沿 Y 轴波动，鼠标移动以 0.0005 系数驱动相机级视差缓动——这是"以 WebGL 做氛围层"的典型实现。
• 扫描 ticker：底部无限循环滚动菜品名，配合强调色 #C5A059/80 文字，呼应"扫描线/激光"母题。
• 自定义表单：日期选择通过 ::-webkit-calendar-picker-indicator 透明化后由整块可点击区域接管。

7.4 三档提示词：minimal / recreate / remix

demo/PROMPT.md 给出了 Agent 复现该技能的三种用法：

• Minimal prompt：一句话要求——用 $dither-laser-dark-mode 创建与参考实现同等视觉自信、层级与交互完成度的响应式独立 HTML。
• Recreate the demo：给出完整产品简报（页面概念、目的、内容锚点、主题标签、技能方向、保真度目标），要求把 demo 当"视觉与交互参考"而非松散的 mood board，交付完整 index.html，页面自有图片放入 demo/assets/，外部运行时以固定 CDN 依赖保留。
• Remix prompt：保留底层布局逻辑、标志性视觉处理、交互编舞、响应式行为与性能约束，替换品牌、题材、文案、配色与内容，让 remix 仍然清晰证明该技能。

7.5 保真度目标：可验证的交付标准

PROMPT.md 的 Fidelity target 同时是验收清单：匹配参考稿的构图、信息密度、字体比例、间距节奏、表面处理、色彩关系与动效克制；保留最强的交互与动画背景行为而非退化为通用淡入；首屏艺术指导后，同一设计逻辑贯穿所有支撑区块；从移动端到桌面端响应式、键盘可访问、reduced motion 下保持稳定。

八、底层原理：有序抖动（ordered dither）怎么做

技能要求的"subtle ordered-dither / coarse pixel texture"可以有两种实现路径——静态 CSS/Canvas 纹理或 shader 阈值抖动。仓库的姊妹技能 dither-background 的 SKILL.md 给出了完整可复制的 Canvas 实现，直接可用于本技能的背景层：

const BAYER_4X4 = [
   0,  8,  2, 10,
  12,  4, 14,  6,
   3, 11,  1,  9,
  15,  7, 13,  5,
].map((value) => (value + 0.5) / 16);

其核心原理是：用 4×4 Bayer 阈值矩阵对每个像素的亮度值做空间量化（threshold = BAYER_4X4[(y % 4) * 4 + (x % 4)]），再以 smoothstep 缓和的 fbm 噪声场（wave + cloud + vignette 组合）生成"宽阔有机波浪/云团"而非随机电视雪花，最终落色到一个受限的灰阶调色板（近黑 → 炭灰 → 柔和灰 → 罕见白高光）。dither-laser-dark-mode 技能中的"材质化黑暗"正是这类有序抖动结构在暗色产品界面中的克制应用——放大像素单元、锁定暗色调色板、只在大空白区与次级填充中使用。

九、使用建议：Agent 工作流与自查清单

将以上内容总结为可执行的 Agent 工作流：

1. 判定：界面是否同时需要"高端暗色 + 材质化背景 + 激光母题"？是则应用本技能作为全系统方向，而非仅做背景。
2. 定调：先定近黑基底与 2–3 档暗表面明度阶梯，再定主强调色（从品牌色派生），最后定 dither 密度与激光强度。
3. 构图：把激光/扫描线当作 hero 或焦点区的构图锚点，氛围光只围绕焦点；内容层置于更高 stacking context 并保持 pointer-events: none 隔离。
4. 实现：参考 demo/index.html 的模式清单（浮动导航壳、角标框架容器、1px 渐变边框暗玻璃卡片、状态徽章），动效遵循"慢速、克制、reduced motion 降级"。
5. 自检：对照第六节 Avoid 五项红线逐一检查：无霓虹条、无硬编码蓝、无全屏重抖动、无死黑扁平、无脱离系统的通用 SaaS 卡片。

<输出文章> 以上是关于该技能文档的完整成文。核心事实均来自 SKILL.md 及其配套 demo（PROMPT.md、index.html、source.json）与 dither-background 算法实现，未引入仓库外证据。