Skip to content
Get packs

Blue Laser Clean Glass Layout

Design dark, glassy web layouts with a thin blue laser backdrop and polished dashboard shells

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

When installed, the agent follows a specific visual style for web pages and app interfaces: a near-black background with a thin blue laser beam and soft fog behind the content, frosted dark glass cards and navigation bars, and tidy dashboard layouts. Instead of producing generic designs, it applies this one cohesive look across the hero section, navigation, cards, tables and subtle motion. It is a set of design instructions rather than a tool that changes anything on its own.

Great for

  • Front-end developers who want a premium dark dashboard or landing page look
  • Designers prototyping a dark, blue-accented SaaS interface
  • Anyone asking an AI agent to build a sleek glassmorphism-style page without specifying every detail

Skip it if

  • Projects needing a bright, light-themed or brand-specific design, since the style is dark and blue-led by design
  • Accessibility-critical interfaces: the skill warns against haze reducing readability but does not itself verify contrast, and motion/glow effects may need review

Try asking

  • “Build a landing page hero with a blue laser beam background and frosted glass cards”
  • “Create a dark analytics dashboard with a glass sidebar, metric cards and a data table in this style”
  • “Turn my existing React page into the clean glass dark look with a floating pill navigation”
Step-by-step guide: how to use Blue Laser Clean Glass LayoutInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    blue-laser-clean-glass-layout.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip blue-laser-clean-glass-layout.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip blue-laser-clean-glass-layout.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the target stack (for example HTML/CSS, Tailwind or React) so the agent knows how to implement the canvas and blur effects.
  • Open demo/index.html in a browser to preview the intended look before asking the agent to replicate it.
  • Mention how much glow or motion you want, since the skill asks for restraint and you may want it stronger or weaker.

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.