【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载本篇技术指南围绕 Skills 仓库中blue-laser-clean-glass-layout技能及其演示文档 demo/PROMPT.md 展开讲解如何用一套可复用的提示词契约让 AI 编码 AgentCodex、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 再到 RemixPROMPT.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 i0;i18;i)绘制 18 条正弦波带每条的透明度随Math.sin(timei*.4)呼吸变化位移由Math.sin(x*.012i*.54time*3)*18*Math.sin(i/17*Math.PI)驱动形成两端收敛、中段起伏的波场移动光束是一条 3px 宽的竖直光带横坐标width*(.52.16*Math.sin(time*.6))左右摆动配合createLinearGradient实现透明→白色→透明的白热渐变核心页面 DOM 中div classvizMeta将动画场与Live field / 72.4 / Live signal这类实时元数据并排展示印证了动画场放在紧凑元数据之后的构图要求。Deliverable交付物契约复刻提示词明确限定了产物形态避免 Agent 过度自由发挥创建demo/index.html作为独立文档standalone documentCSS 与 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 reducedmatchMedia((prefers-reduced-motion: reduce)).matches动画分支整体跳过 canvas 初始化CSS 中media(prefers-reduced-motion:reduce)将 marquee、字词入场、时间线、轨道动画全部禁用焦点可见按钮:focus-visible提供 2px 轮廓 outline-offset:3px并配合蓝色描边DPR 上限const ratioMath.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统一的蓝色强调色用于激光、活动指示、图标点缀与按钮--line1px 白色半透明描边贯穿所有玻璃壳、表格线与栅格。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-shadow0 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与烟雾smokeBlue 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 上限、隐藏暂停、减弱动效等性能与无障碍护栏这套体系可以直接迁移到真实产品页与仪表盘项目中作为高级、暗色、蓝色主导、运营感界面的一体化实现范式。赞分享【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载相关推荐Glass Dark Mode Clock 技能实战指南用 $glass-dark-mode-clock 复刻暗色玻璃仪表盘界面Glass Dark Mode Clock 技能实战指南用 $glass dark mode clock 复刻暗色玻璃仪表盘界面 本篇指南围绕开源仓库 SkiBlue Laser Clean Glass Layout用蓝色激光氛围构建深色毛玻璃仪表盘设计系统Skills 仓库实战指南Blue Laser Clean Glass Layout用蓝色激光氛围构建深色毛玻璃仪表盘设计系统Skills 仓库实战指南 本篇技术指南基于 Skilgeektime-books 快速上手指南156 本极客时间电子书如何挑出 10 本读起来geektime books 快速上手指南156 本极客时间电子书如何挑出 10 本读起来 geektime books 是极客时间电子书合集仓库156 本上一篇Android-ObservableScrollView FAQ 全解析构建环境、问题排查与低版本兼容的实战指南下一篇QuickBMS的CallDLL与内嵌TinyCC编译器给提取脚本扩展任意功能的进阶实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考