【免费下载链接】Skills
Agent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents
本篇技术指南围绕 Skills 仓库中blue-laser-clean-glass-layout技能及其演示文档 demo/PROMPT.md 展开，讲解如何用一套可复用的提示词契约，让 AI 编码 Agent（Codex、Claude、Cursor 等）从零生成一个"细蓝激光氛围 + 磨砂玻璃壳 + 精致仪表盘"的单页演示。读完本文，你将掌握该技能的完整提示词体系、交付物契约、验收标准，以及 demo/index.html 中对应的底层实现原理与运行方式。
技能定位：它是什么，在什么场景下使用
blue-laser-clean-glass-layout是仓库 agent-skills/web-design/ 分类下的一套 Agent Skill，其 SKILL.md 给出的能力定义是：
Create a clean dark glass layout system with a thin blue laser atmosphere, frosted premium shells, and polished dashboard structure.
即"干净的暗色玻璃布局系统 + 细蓝激光氛围 + 磨砂高级玻璃壳 + 精致的仪表盘结构"。需要注意该技能的使用边界（来自 SKILL.md 的 Scope 一节）：
- 它是一套完整的设计系统方向，覆盖背景氛围、导航、Hero、悬浮卡片、仪表盘外壳、表格与动效的全局统一；
- 适用于需要高级、暗色、蓝色主导、运营感的界面，且要求将一根克制的激光束自然融入干净的玻璃布局中；
- 它不是单纯的激光特效，也不是泛化的暗色玻璃拟态——光束、雾效、玻璃壳与仪表盘框架必须服务于同一个统一系统。
在本文讨论的演示场景中，对应的配套文档是 demo/PROMPT.md：它是该技能的标准演示提示词文件，按 DEMOS.md 中定义的目录契约，每个演示目录都应包含index.html、PROMPT.md与preview.jpg，其中PROMPT.md存放"精确复刻提示词 + 简短混排（remix）提示词"。
演示提示词体系：从 Minimal 到 Recreate 再到 Remix
PROMPT.md将演示提示词组织为三层递进结构，每一层对应不同的调用强度。
最小提示词（Minimal prompt）
用于快速验证技能是否可用，只声明技能引用与交付形态：
Use
$blue-laser-clean-glass-layoutto create a polished standalone HTML example that clearly demonstrates the skill.
一句话即可触发 Agent：调用该技能，产出一个打磨过的、能清楚演示技能能力的独立 HTML 示例。
复刻提示词（Recreate the demo）
用于精确重建参考演示，是本文档的核心段落。它要求：
Use
$blue-laser-clean-glass-layoutto build a responsive reference demo for this capability: Create a clean dark glass layout system with a thin blue laser atmosphere, frosted premium shells, and polished dashboard structure.
复刻提示词由三部分构成，下文逐一拆解。
Direction（方向约束）
- 使用全出血（full-bleed）的程序化画布氛围，置于精确的界面框架之后；
- 构图要经过"艺术指导"（art-directed）：只有一个清晰的视觉焦点、克制的辅助文案，同时保留足够的周边界面，以展示该技术如何在一个真实的产品或落地页中运转。
这实际上对应了 SKILL.md 中"Visual target"的设计要求：近黑基底 + 微妙蓝色基调，细蓝/靛蓝激光束带白热核心、柔和光晕与轻微体积烟雾，让整体"电影感但精确"；界面层叠在激光之上，使用暗色磨砂壳、渐变描边包裹层、半透明药丸与玻璃质感卡片；字体保持现代锐利——白色展示性文案、克制的蓝灰辅助文字、干净的紧凑标签。
Canonical example（标准示例规格）
这是提示词中最具可操作性的部分，直接规定了画布动画的"标准答案"：
- 渲染十八条缓慢运动的程序化波带（procedural wave bands）与一条窄幅移动信号光束（moving signal beam）；
- 将动画场置于紧凑的实时系统元数据（live-system metadata）之后。
在 demo/index.html 的 JavaScript 实现中，可以找到与之一一对应的代码证据（第 32 行内联脚本的 canvas 渲染分支）：
for(let i=0;i<18;i++)绘制 18 条正弦波带，每条的透明度随Math.sin(time+i*.4)呼吸变化，位移由Math.sin(x*.012+i*.54+time*3)*18*Math.sin(i/17*Math.PI)驱动，形成"两端收敛、中段起伏"的波场；- 移动光束是一条 3px 宽的竖直光带，横坐标
width*(.52+.16*Math.sin(time*.6))左右摆动，配合createLinearGradient实现"透明→白色→透明"的白热渐变核心； - 页面 DOM 中
<div class="vizMeta">将动画场与Live field / 72.4 / Live signal这类实时元数据并排展示，印证了"动画场放在紧凑元数据之后"的构图要求。
Deliverable（交付物契约）
复刻提示词明确限定了产物形态，避免 Agent 过度自由发挥：
- 创建
demo/index.html作为独立文档（standalone document）； - CSS 与 JavaScript 全部内联在同一个 HTML 文件中；
- 任何必需的图片、字体、模型、纹理或第三方文件放入
demo/assets/； - 不引入框架、包管理器、构建步骤或 node_modules；
- 仅当控件有助于检视或回放技术效果时才添加控件。
这套契约与仓库 README.md 中描述的目录规范一致：demo/index.html内联 HTML/CSS/JavaScript、demo/assets/存放本地资源、使用相对路径且无构建步骤。
Acceptance checks（验收标准）
这是提示词中最具工程约束力的一段，逐条列出复刻结果必须通过的质量门槛：
- 响应式：从 390px 到 1440px 均保持良好表现；
- 无障碍：使用语义化 HTML、可见的焦点状态（visible focus states）、处理
prefers-reduced-motion（减弱动效偏好）； - 单文件：所有 HTML、CSS、JavaScript 都留在
demo/index.html内； - 资源路径：只使用相对本地资源路径；
- 降级可用：画布保持装饰性，即使渲染不可用，内容仍然可读；
- 性能：限制设备像素比（device pixel ratio），并在文档隐藏时暂停动画。
这些验收项在 demo/index.html 中均有可验证的对应实现：
- 响应式：CSS 中
@media(max-width:760px)将intro/layoutStudy/pricing/iconGrid/contactSheet/surfaceStudy从多列折叠为单列，容器宽度min(1280px,calc(100% - 40px))自适应； - 减弱动效：脚本开头
const reduced=matchMedia("(prefers-reduced-motion: reduce)").matches，动画分支整体跳过 canvas 初始化；CSS 中@media(prefers-reduced-motion:reduce)将 marquee、字词入场、时间线、轨道动画全部禁用； - 焦点可见：按钮
:focus-visible提供 2px 轮廓 +outline-offset:3px，并配合蓝色描边； - DPR 上限：
const ratio=Math.min(devicePixelRatio||1,2)，将画布物理分辨率限制在 2x 以内，避免高 DPI 屏幕过度消耗 GPU； - 隐藏暂停：
document.addEventListener("visibilitychange", ...)在document.hidden时cancelAnimationFrame(frame)，恢复可见时再继续绘制。
混排提示词（Remix prompt）
用于在保留实现契约的前提下做创意变体：
Use
$blue-laser-clean-glass-layoutand keep the same implementation contract, but change the subject, copy, palette, and content hierarchy. Preserve the core technique, accessibility behavior, responsive rules, and performance constraints demonstrated by the reference.
核心思路是"只改主题/文案/配色/内容层级，不破坏技术骨架"：激光波场技术、无障碍行为、响应式规则与性能约束都必须原样保留。这与仓库 README 中"change 1–2 things only"的迭代哲学一脉相承——用约束驱动一致输出，而不是反复重掷。
从提示词到实现：演示页的源码级原理
为了让读者既"会提示"也"看得懂产物"，这里结合 demo/index.html 剖析演示页的关键实现层次。
设计令牌：一个变量驱动的统一系统
页面在<style>中定义了全套 CSS 变量，将"暗色玻璃 + 蓝激光"体系固化为可调参数：
:root{--bg:#080a0f;--panel:rgba(18,21,29,.72);--panelStrong:#121620; --ink:#f2f5f7;--muted:#929aa7;--line:rgba(255,255,255,.14); --accent:#5d8dff; ...}--bg：近黑基底，对应"near-black base with subtle blue undertones"；--accent:#5d8dff：统一的蓝色强调色，用于激光、活动指示、图标点缀与按钮；--line：1px 白色半透明描边，贯穿所有玻璃壳、表格线与栅格。
canvas 动画运行时通过getComputedStyle(...).getPropertyValue("--accent")读取该令牌，保证画布中的激光颜色与界面强调色始终一致，这正是 SKILL.md 强调的"统一系统"在实现层的体现。
玻璃质感的关键三件套
演示页的"磨砂高级玻璃壳"主要靠三组 CSS 手法叠加：
backdrop-filter: blur(22px)配合半透明白色渐变填充，模拟磨砂透光；box-shadow: inset 0 1px rgba(255,255,255,.25)制造玻璃顶部内高光，0 28px 80px rgba(0,0,0,.34)提供柔和阴影衰减；- 叠加 48px 间距的 1px 栅格线背景（
background-image: linear-gradient(...)），让玻璃壳透出结构感。
激光氛围则由.showcase::after伪元素完成：width:2px的细线配合三层box-shadow（0 0 8px #fff白热核心 +0 0 26px var(--accent)+0 0 80px var(--accent)光晕）形成"细光束 + 宽光晕"的层次，与 SKILL.md 中"Separate beam thickness from glow width"（将线宽与光晕宽度分离）的指导完全一致。
动效与性能护栏
页面动效保持"平静而高级"：主标题使用maskLine字词掩膜入场（transform:translateY(110%)起始 + cubic-bezier 缓动逐行揭示）、时间线grow生长动画、以及 canvas 波场的柔和呼吸。同时内建三处性能护栏：DPR 上限 2、visibilitychange暂停、prefers-reduced-motion整体降级。
调参旋钮：五组可独立调节的方向
SKILL.md 的 "Tuning knobs" 一节为复用该技能提供了五组独立的调参维度，在做 Remix 时可以按需微调：
| 调参项 | 说明 |
|---|---|
| Laser intensity（激光强度） | 保持光束细而清晰，单独调节光晕（halo）、脉冲（pulse）与烟雾（smoke） |
| Blue mood（蓝色基调） | 在靛蓝（indigo）、钴蓝（cobalt）与更冷的电光蓝（electric blue）之间切换，对应"高级"到"有活力"的情绪 |
| Glass depth（玻璃深度） | 调 blur、opacity 与边缘高光，让玻璃壳高级但不浑浊 |
| Layout density（布局密度） | 控制 Hero 周围悬浮卡片与仪表盘模块的数量，避免构图拥挤 |
| Atmosphere amount（氛围量） | 让雾与泛光支撑光束，但避免整页布满雾霾 |
负面清单：五个必须避开的坑
SKILL.md 的 "Avoid" 节给出了明确的负向约束，同样是复刻与混排时应遵守的底线：
- 不要使用粗壮的霓虹激光条压垮布局；
- 不要做"只加蓝色点缀的扁平暗色仪表盘"，必须保留玻璃深度与氛围光束逻辑；
- 避免粉彩玻璃拟态、明亮色块或半透明白卡片破坏暗色高级感；
- 不要给每个组件都叠加发光、模糊或描边效果；
- 不要让激光或雾效降低前景内容可读性。
如何运行与查看演示
演示遵循仓库 DEMOS.md 中统一的"零构建"运行方式，在本地用静态服务器即可打开：
python3 -m http.server 4173 -d agent-skills/web-design/blue-laser-clean-glass-layout/demo浏览器访问http://localhost:4173即可看到完整的单文件演示；同时可对照以下文件深入研读：
- 技能定义：SKILL.md
- 演示源码：demo/index.html
- 复刻/混排提示词：demo/PROMPT.md
- 演示预览图：demo/preview.jpg
- 目录契约与运行说明：DEMOS.md
小结
blue-laser-clean-glass-layout的演示体系本质上是一份"可复现 + 可混排"的双重提示词契约：Minimal 提示词负责快速触发，Recreate 提示词通过 Direction、Canonical example、Deliverable 与 Acceptance checks 四个小节把艺术方向、技术规格、交付形态与质量门槛全部固化，Remix 提示词则在保留技术骨架的前提下开放创意自由度。配合 demo/index.html 中变量化设计令牌、玻璃质感三件套、18 波带 + 信号光束的 canvas 实现，以及 DPR 上限、隐藏暂停、减弱动效等性能与无障碍护栏，这套体系可以直接迁移到真实产品页与仪表盘项目中，作为"高级、暗色、蓝色主导、运营感"界面的一体化实现范式。
【免费下载链接】Skills
Agent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents
相关推荐
Glass Dark Mode Clock 技能实战指南：用 $glass-dark-mode-clock 复刻暗色玻璃仪表盘界面
Glass Dark Mode Clock 技能实战指南：用 $glass dark mode clock 复刻暗色玻璃仪表盘界面 本篇指南围绕开源仓库 Ski
Blue Laser Clean Glass Layout：用蓝色激光氛围构建深色毛玻璃仪表盘设计系统（Skills 仓库实战指南）
Blue Laser Clean Glass Layout：用蓝色激光氛围构建深色毛玻璃仪表盘设计系统（Skills 仓库实战指南） 本篇技术指南基于 Skil
geektime-books 快速上手指南：156 本极客时间电子书如何挑出 10 本读起来
geektime books 快速上手指南：156 本极客时间电子书如何挑出 10 本读起来 geektime books 是极客时间电子书合集仓库，156 本
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
