Skills 仓库实战：用 dither-laser-dark-mode 技能提示词复刻 Cedar Lodges 暗色激光演示页

导读

本文围绕 Skills 仓库中 dither-laser-dark-mode 这一 Web 设计技能的演示提示词文件 demo/PROMPT.md 展开：它定义了"暗色高端设计系统 + 有序抖动纹理 + 纤细强调色激光氛围"这一完整视觉方向，并通过 Minimal / Recreate / Remix 三档提示词，把一份真实的 Neuform 参考页（Cedar Lodges）变成可复刻、可再创作、可复用的 Agent 任务。读完本文，你将掌握该技能提示词的结构与用法、配套 SKILL.md 中的完整设计规范与调优旋钮，并能结合 demo/index.html 的源码实现，理解"提示词 → 设计系统 → 可运行 HTML"的完整落地链路。

一、这份提示词文档在仓库中的定位

在 Skills 仓库的目录约定中（见 DEMOS.md），每个具备视觉或交互证明价值的技能都需要携带 demo/ 目录，其中 PROMPT.md 承担"精确复刻提示词 + 简短再创作提示词"两个职责，与 index.html（完整独立 HTML）、preview.jpg（1280×720 浏览器渲染截图）、source.json（Neuform 来源与排名快照）配套存放。

dither-laser-dark-mode 的演示目录结构如下：

agent-skills/web-design/dither-laser-dark-mode/
  SKILL.md            # 技能本体：何时使用、工作流、视觉目标、调优旋钮
  demo/
    PROMPT.md         # 三档提示词（本文核心）
    index.html        # 可运行的完整演示页
    preview.jpg       # 1280×720 渲染截图
    source.json       # Neuform 来源、排名与资源清单快照
    assets/           # 8 张本地化的 Unsplash 图片

这套结构意味着：提示词不是装饰，而是与 HTML 演示一一对应的"再生产说明书"。任何 Agent（Codex、Claude、Cursor 等）拿到 PROMPT.md 后，应当能独立重建出同等视觉质量与交互完成度的页面，这正是仓库 README 所强调的"prompts are assets"（提示词即资产）理念。

二、三档提示词的完整拆解

原文档 PROMPT.md 的核心骨架是三种递进强度的提示词，Agent 可根据任务目标选择使用。

2.1 Minimal prompt：最小可复刻指令

原文为单句指令，全文继承如下：

Use $dither-laser-dark-mode to create a responsive standalone HTML design with the same visual confidence, hierarchy, and interaction finish as the included Neuform reference.

这句话虽短，却定义了四个硬性验收维度：

• 技术形态：responsive standalone HTML——响应式、单文件、无构建步骤（对应 DEMOS.md 中"Keep HTML, CSS, and JavaScript in demo/index.html"的约定）；
• 视觉自信（visual confidence）：页面必须有明确的主次层级，而非拼凑素材；
• 交互完成度（interaction finish）：悬停、滚动、入场动效等都要打磨到位；
• 参考基准：以仓库内附的 Neuform 参考为准，而不是"宽松的情绪板"。

2.2 Recreate the demo：完整复刻指令（核心）

这是文档的主体，原文明确要求：以 demo/index.html 为视觉与交互参考，复刻 Cedar Lodges | Where the Mountains Breathe 的完整响应式 HTML。它由四部分组成，以下逐段完整继承。

Product brief（产品简报）

• 页面概念：Cedar Lodges | Where the Mountains Breathe；
• 用途定位：Cedar Lodges 背景效果——用于交付视觉处理或沉浸式背景效果，关键特性包括氛围视觉（atmospheric visuals）、运动纵深（motion depth）、灵活的呈现分层（flexible presentation layering），适合视觉优先页面、动效研究和氛围首屏（atmospheric hero）处理；
• 内容锚点：Cedar Lodges · "Eight can sleep here but the mountain feels infinite." · Suites in the Sky · Presidential Suite · Forest Chalet；
• 可用主题标签：background, animated, webgl, threejs, dither, effect。

从标签可以看出，该演示的预期技术栈是 WebGL/Three.js + 抖动纹理 + 动效，这与解码后 index.html 中实际引入的 three.js r128、GSAP 3.12.2 + ScrollTrigger、Iconify、Tailwind 运行时完全吻合（见下文源码佐证）。

Skill direction（技能方向）

• 构建一个暗色高端设计系统：近黑表面 + 微妙的有序抖动（ordered-dither）纹理 + 一条纤细强调色激光氛围；
• 作用范围：作为完整设计系统方向，贯穿背景、表面、面板、控件、间距、边框与动效；
• 适用场景：界面需要呈现高端（premium）、技术感（technical）、氛围感（atmospheric）与暗色基调，并带克制的激光母题与微妙抖动纹理；
• 关键边界：这不是单纯的后台背景效果——整个 UI 都应统一在暗色纵深、精确取景与克制的发光强调之上。

Visual target（视觉目标）

• 在近黑或炭黑（charcoal）基底上，叠加高档暗色表面层；
• 在背景或低优先级表面层引入微妙的有序抖动、粗像素（coarse pixel）或柔和数字颗粒（soft digital grain）纹理，让暗色"有材质感"而非死黑一片；
• 以细激光束或扫描线氛围作为聚焦视觉母题，用设计的主强调色或最强强调色着色，而不是写死的蓝色；
• 激光保持电影感与克制：窄而白热的芯线（white-hot core）+ 柔和强调色光晕（halo）+ 轻度体积雾/泛光（volumetric haze/bloom），而非粗厚霓虹条；
• 氛围背景必须搭配利落的面板、玻璃暗色卡片、克制描边、边框渐变与选择性发光，让 UI 呈现"精密的指挥台表面"（polished command surface）质感。

Fidelity target（保真目标）

• 匹配参考页的构图、信息密度、字号比例、间距节奏、表面处理、色彩关系与动效克制程度；
• 保留最强的交互与动画背景行为，不要用泛化的淡入淡出或装饰性位移替换它们；
• 首屏（first screen）要做艺术化编排（art-directed），并把同一套设计逻辑延续到每个支撑区块；
• 结果必须：移动端到桌面端全响应式、键盘可达（keyboard accessible）、开启减少动效（reduced motion）时保持稳定；
• 交付物：一个完整的 index.html；页面自有的图片、视频、模型、纹理放入 demo/assets/；外部运行时库在源页面依赖时允许保留为固定版本（pinned）的 CDN 依赖。

这一条直接对应仓库的演示校验规则（见 scripts/validate-skill-demos.mjs）：校验脚本会检查 doctype、viewport meta、单一 h1、prefers-reduced-motion 回退、以及"本地生成 demo 不得包含远程 URL"等硬性约束——Neuform 来源的 demo 则允许保留固定 CDN 运行时，这与文档中的保真目标互为印证。

Reference snapshot（参考快照）

文档记录了该演示的来源与排名依据：

• 来源：Neuform 页面 cedar-lodges-where-the-mountains-breathe-6；
• 同步时在 dither-laser-dark-mode 技能下排名 #1；
• 热度数据：322 次浏览 · 18 次收藏 · 3 次二次创作（remix）；
• 排名规则：浏览量降序，再按收藏量降序。

这些数值与 demo/source.json 中记录的字段一一对应（view_count: 322、favorite_count: 18、remix_count: 3、usage_count: 103，排序规则 view_count desc → community_favorite_count desc → relation_created_at desc）。source.json 还记录了该演示的运行时依赖清单：Google Fonts（Playfair Display 与 Source Sans 3）、Tailwind CSS（CDN 版）、Iconify 图标、GSAP 3.12.2 + ScrollTrigger、three.js r128，以及 8 张来自 Unsplash 的本地化图片（demo/assets/ 下，从 186 KB 到 1.2 MB 不等）。这些"来源 + 排名 + 依赖"元数据让每次同步/校验都有据可查。

2.3 Remix prompt：二次创作指令

原文要求：仍以 $dither-laser-dark-mode 技能和附带的 Neuform 演示作为质量基准，但替换品牌、主题、文案、配色与内容；同时保留底层的布局逻辑、标志性视觉处理、交互编排、响应式行为与性能约束，使二次创作依然清晰地体现该技能的特征。

这是一条"换皮不换骨"的约束式提示词：风格系统（layout logic + signature treatment）是必须继承的资产，品牌内容是可以替换的变量，防止 Remix 退化为与技能无关的普通页面。

三、配套技能规范：SKILL.md 中的完整设计系统

PROMPT.md 引用的 $dither-laser-dark-mode 技能本体位于 SKILL.md，它把上面的设计方向翻译成 Agent 可执行的规范，是复刻时最重要的执行依据。

3.1 Use When 与 Scope

• Use When：创建"近黑表面 + 微妙有序抖动纹理 + 纤细强调色激光氛围"的暗色高端设计系统时使用；
• Scope：作为完整设计系统方向贯穿背景、表面、面板、控件、间距、边框与动效；适用于"高端、技术、氛围、暗色、克制激光母题 + 微妙抖动"的界面；明确强调不是单一背景效果，而是全局统一的暗色纵深与发光克制。

3.2 Implementation guidance（实现指引）

• 暗色表面要做微妙的色调分离：深黑基底、轻微抬升的面板、安静的半透明覆盖层、细白或强调色描边；
• 抖动/颗粒只在背景、大面积留白或次级填充中克制使用——增加材质与情绪，但不要让界面变脏、变复古或低分辨率；
• 若使用 WebGL / canvas / shader 层，固定在 UI 之后并加 pointer-events: none，内容放在更高层级上下文中（这正是演示页 Three.js 尘埃粒子画布 absolute inset-0 z-0 pointer-events-none opacity-40 的写法）；
• 激光辉光、烟雾或泛光由当前强调色派生，但最亮的光芯尽量接近白色以保证清晰；
• 激光作为构图锚点：中心线、偏移光束、角落汇聚或背景扫掠，支持层级而不是压制内容；
• 面板、仪表盘、导航使用精确间距、轻微模糊、暗淡高光与低调抬升，避免喧闹的玻璃拟态（glassmorphism）或通用卡片。

3.3 Recommended patterns（推荐模式）

• 浮动暗色导航壳：背景模糊、细边框、克制的强调色激活态；
• 取景式仪表盘容器：角标（corner markers）、细网格线或垂直边界线，叠在柔和抖动的暗色场之上；
• 深色玻璃或近不透明卡片：1px 渐变边框、柔和阴影、限量强调发光；
• Hero 区背后、中轴附近或聚焦区域汇聚处的细激光/光束母题，辅以淡烟或雾；
• 数据表面保持白色/中性文字可读，强调色只出现在状态标签、激活标签页、图标、进度条或焦点控件中。

3.4 Tuning knobs（调优旋钮）

旋钮	调优目标
Dither density（抖动密度）	纹理足够丰富背景，但又安静到会消失在内容之后
Laser intensity（激光强度）	光束厚度与光晕宽度分离——光束保持细，辉光可轻柔呼吸
Accent restraint（强调色克制）	品牌色选择性使用，中性暗色主导系统
Surface contrast（表面对比）	拉开车页背景、面板、覆盖层之间的层级差，有纵深但不浑浊
Atmosphere（氛围）	雾、泛光、体积雾只围绕焦点激光区域，而不是铺满全屏

3.5 Avoid（禁区清单）

• 粗厚霓虹激光条、过度泛光或全屏雾导致可读性崩塌；
• 在设计明确使用其他强调色时硬编码靛蓝或青色；
• 全站重抖动，让界面显得脏、复古或低分辨率，而非高端；
• 无纹理、无纵深、无材质分离的死黑布局；
• 忽略激光 + 抖动视觉系统的通用 SaaS 卡片和渐变。

四、源码佐证：demo/index.html 里的实现细节

把 demo/index.html 中 base64 编码的内嵌文档解码后（外层壳负责把本地图片转成 blob URL 注入 iframe，按 security_profile: sandboxed-srcdoc-v1 沙箱运行），可以看到一个 683 行的完整单页，以下实现细节直接印证了提示词与技能规范：

• 排版系统：Playfair Display（衬线大标题，font-playfair）与 Source Sans 3（正文，font-source）双字体搭配，来自 source.json 记录的 Google Fonts 依赖；
• 暗色分层：Hero 背景 bg-[#102018]（深墨绿黑），叠加 from-[#102018]/90 via-[#102018]/20 to-transparent 的垂直与水平渐变，实现"深黑基底 + 透明度分层 + 文字可读性"——对应 Visual target 的暗色纵深要求；
• 强调色克制：全站强调色统一为金棕色 #C5A059（导航 hover 下划线、章节编号、卡片角标、CTA 按钮 #6E4B3A），没有硬编码蓝/青——对应"accent restraint"与 Avoid 清单；
• 动效系统：
  • Ken Burns 慢缩放 @keyframes slow-zoom（20s ease-out，scale 1.0→1.08）用于首屏背景；
  • 餐桌菜单跑马灯 @keyframes ticker（30s linear infinite，translateX 0→-50%）；
  • GSAP ScrollTrigger 驱动的 .gsap-reveal 滚动入场（y:30→0、opacity:0→1、power3.out、start: "top 85%"）与 .parallax-img 视差（yPercent 15）；
  • 导航栏滚动 50px 后切换为 bg-[#1A2F24]/90 backdrop-blur-md 的浮动静默态；
• WebGL 氛围层：Section 1 的 #mist-canvas 使用 three.js r128 绘制 300 个半透明尘埃粒子（PointsMaterial，color 0x6E4B3A、opacity 0.3、AdditiveBlending、pointer-events-none opacity-40 固定在 UI 之后），伴随鼠标缓动视差与慢旋转——这正是"背景氛围层 + pointer-events 隔离 + 动效克制"的落地形态；
• 交互完成度：日期选择器（隐藏原生指示器、整层透明 input 接收点击）、下拉客房类型、Guests 计数、卡片 hover 图片 scale-105、Explore 按钮下划线动画、图标全部由 Iconify 提供。

需要如实说明的是：解码后的 HTML 中并未出现字面的"激光束/扫描线"或"抖动/颗粒"纹理实现（dither、laser、scan、haze、bloom 等关键词出现次数为 0）。该演示实际以暗色山地影像 + 金棕强调 + 微粒雾效 + 精确层级落地，激光与抖动更多作为 SKILL.md 中定义的设计意图方向。这本身印证了 PROMPT.md 的保真目标——"参考的是视觉自信、层级与交互完成度，而非字面元素清单"；若 Agent 需要字面激光/抖动，应依据 SKILL.md 的 Tuning knobs 自行增强。

五、本地运行与复刻验证

按 DEMOS.md 的通用方式，在本仓库任意位置执行以下命令即可启动该演示：

python3 -m http.server 4173 -d agent-skills/web-design/dither-laser-dark-mode/demo

然后访问 http://localhost:4173（注意需通过 HTTP 服务访问，以便 iframe 沙箱正确加载本地图片资产）。复刻/验证流程建议：

1. 阅读 PROMPT.md 选定提示词档位（Minimal / Recreate / Remix）；
2. 将 PROMPT.md 中的技能方向、视觉目标、保真目标逐条转为验收清单；
3. 让 Agent 生成 index.html，图片放 demo/assets/，外部库按 source.json 记录保持固定版本；
4. 对照 SKILL.md 的 Tuning knobs 与 Avoid 清单逐项检查（抖动密度、激光强度、强调色克制、表面对比、氛围分布）；
5. 运行 scripts/validate-skill-demos.mjs 做结构校验（doctype、单一 h1、viewport、reduced-motion 回退、无远程 URL 等）。

六、适用场景小结

从 PROMPT 与 SKILL 的"Use When"看，这套技能最适合以下任务：暗色高端产品页/品牌页的氛围首屏、技术感仪表盘与数据界面、需要"材质化暗色"而非死黑的设计、以及希望通过一条克制的激光/光束母题建立构图锚点的视觉优先页面。它明确不适用于：明亮轻快风格、需要厚霓虹/强泛光的赛博风格、以及全屏重抖动的复古低保真风格。在 Remix 场景中，只需保持布局逻辑与标志性视觉处理，即可把 Cedar Lodges 的品牌内容替换为任意其他主题，而让输出仍稳定地体现"暗色 + 抖动 + 激光"的技能指纹。