blue-laser-clean-glass-layout

v2026.09.24

Create a clean dark glass layout system with a thin blue laser atmosphere, frosted premium shells, and polished dashboard structure.

GitHub
安装命令
npx skhub add mengto/blue-laser-clean-glass-layout
Markdown
SKILL.md

Blue Laser Clean Glass Layout Skill

Use When

  • Create a clean dark glass layout system with a thin blue laser atmosphere, frosted premium shells, and polished dashboard structure.

Workflow

Scope

  • Apply this as a full design-system direction across background atmosphere, navigation, hero, floating cards, dashboard shells, tables, and motion.
  • Use it when the interface should feel premium, dark, blue-led, and operational, with a restrained laser beam integrated into a clean glassy layout.
  • This is not only a laser effect and not generic dark glassmorphism. The beam, fog, glass shells, and dashboard framing should all support one unified system.

Visual target

  • Build the page on a near-black base with subtle blue undertones and a fixed atmospheric laser background behind the interface.
  • Use a thin blue or indigo laser beam with a white-hot core, soft halo, and light volumetric smoke or fog so it reads cinematic but precise.
  • Layer the UI above the laser using dark frosted shells, border-gradient wrappers, translucent pills, and glass-like premium cards.
  • Keep typography crisp and modern: white display copy, muted blue-gray support text, and clean compact labels for product credibility.
  • Let the overall tone feel clean and expensive rather than noisy sci-fi, with the laser acting as a focused spatial motif instead of a spectacle.

Implementation guidance

  • Use a fixed full-screen canvas or background layer for the laser and fog, then keep all foreground UI in a separate scrollable content layer above it.
  • Keep the laser narrow and elegant. Separate beam thickness from glow width so the line stays thin while the halo and smoke can breathe softly.
  • Build navigation as a floating or sticky glass-dark pill with backdrop blur, thin borders, and calm white text.
  • Use a framed central shell or max-width application container with border-x rails, tiny corner markers, or subtle vertical boundaries to structure the page.
  • Introduce glass cards with dark translucent fill, one-pixel gradient borders, soft shadow falloff, and limited blue accent moments for charts, status chips, or icons.
  • Dashboard sections should feel polished and modular: sidebars, metric cards, event streams, data tables, and search controls should share the same glass-dark surface logic.
  • Use blue selectively for active indicators, CTA emphasis, icon accents, and the laser atmosphere while leaving most surfaces neutral and dark.
  • Motion should remain calm and premium: masked headline reveals, subtle card drift, soft beam pulse, and gentle hover brightening are appropriate.

Recommended patterns

  • Fixed blue laser and fog field behind a central glass dashboard or hero shell.
  • Floating pill nav with blurred dark fill, rounded full-width geometry, and restrained white borders.
  • Border-gradient metric cards and event panels hovering beside or above the hero copy.
  • Large dashboard container with frosted header bar, muted tabs, sidebar modules, and a clean data table.
  • Blue CTA button paired with a quieter outline or glass secondary button.
  • Tiny blue live dots, underglow accents, and soft atmospheric bloom near the beam or focal modules.

Tuning knobs

  • Laser intensity: keep the beam thin and readable while adjusting halo, pulse, and smoke separately.
  • Blue mood: shift between indigo, cobalt, and cooler electric blue depending on how premium versus energetic the system should feel.
  • Glass depth: tune blur, opacity, and edge highlights so shells feel premium without becoming muddy.
  • Layout density: choose how many floating cards and dashboard modules appear around the hero before the clean composition starts to feel crowded.
  • Atmosphere amount: let fog and bloom support the beam, but avoid filling the full page with haze.

Avoid

  • Thick neon laser bars that overpower the layout.
  • Flat dark dashboards with blue accents but no meaningful glass depth or atmospheric beam logic.
  • Pastel glassmorphism, bright blobs, or translucent white cards that break the dark premium feel.
  • Overdecorating every component with glow, blur, or border effects.
  • Letting the laser or fog reduce readability of foreground content.
发现
标签

此技能尚未发布标签。

版本
最新版本元数据

版本

v2026.09.24

发布时间

2026年9月24日

分类

未分类

许可证

MIT

源路径

agent-skills/web-design/blue-laser-clean-glass-layout

默认分支

main

最新提交

a965851

Tree SHA

51ae735