← Back to Skills / Marketplace / mech
SKL · 25PRO

Mech.

A light-background sci-fi HUD aesthetic built on clinical precision — thin line work, targeting reticles, dot-matrix numerals, and a single warning-light accent color.

UNLOCK WITH PRO →
● Live preview · Mech demo
This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

Mech is the sci-fi HUD aesthetic — light, clinical, precise. Think the cockpit display of an Evangelion unit, a military drone feed, or a near-future aerospace instrument panel: white and cool-gray surfaces covered in thin line work, circular targeting reticles, dot-matrix readouts, and a single accent color that only shows up when something actually matters. The light palette is unexpected in sci-fi UI, and that's exactly why it stops people.

● Looks Like
Neon Genesis Evangelion's cockpit interfacesPacific Rim's Jaeger displaysMilitary drone operator screensNear-future aviation HUDsThe UI concepts you see in high-end motion graphics reelsGundam's instrument panelsAerospace engineering visualization software
02 · Best For / Avoid If
＋ Best For
+Dashboards and monitoring tools where precision is the whole point
+Data visualization platforms with lots of real-time numbers
+Drone, robotics, or hardware product interfaces
+Security and operations tools
+Any app where the user needs to feel like they're operating something powerful
+Portfolios for engineers, product designers, and technical founders who want something that looks genuinely different
× Avoid If
×Your audience needs warmth or approachability — this aesthetic is deliberately clinical and doesn't do cozy
×Your product is consumer-facing in a casual context — shopping, social, entertainment
×You have a lot of text content to display — the aesthetic works for data and numbers, not long-form reading
×Dark mode is non-negotiable for your users — Mech is almost entirely a light-background system
03 · Design Philosophy
01

Light is the defining choice

The light background is Mech's defining choice. A near-white surface forces every element to earn its place through precision and line weight, producing interfaces that feel like engineering instruments.

02

The circle is the primary shape

Radial elements — targeting reticles, arc gauges, circular progress rings, rotating dials — are the defining structural element of this aesthetic. They're the primary way information is organized and displayed. A Mech interface reads circular data naturally the same way other interfaces read left-to-right text, and that unfamiliar reading pattern is part of what makes it feel genuinely technical.

03

One accent color, used like a warning light

The orange-red accent in Mech is a signal. It appears on active states, critical values, and the single most important interactive element on any given screen. Everything else stays in grays and whites. The restraint is what gives the accent its weight; when it appears, your eye goes there immediately without any conscious effort.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — mention the skill name to invoke it automatically
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Overloading the radial elements
Circular gauges and reticles are striking the first time and exhausting if every metric gets one. Reserve the full radial treatment for your two or three most important data points and use simpler horizontal bars for everything else.
! WARNING
Forgetting that empty space is doing work
The screenshots that make this aesthetic look incredible are mostly empty. All that white space is structural — it makes the precise technical elements read as intentional. Fight the urge to fill it.
! WARNING
Using the accent color more than three times per screen
The moment it shows up on five or six elements, it stops being a signal and becomes just another color. Count the times you're using it and cut until it only appears where something genuinely needs attention.
! WARNING
Wrong typography
This aesthetic lives on condensed monospace fonts, tiny annotation text, and dot-matrix style numerals for big data displays. Standard sans-serif body fonts completely break the atmosphere. Ask Claude specifically for monospace labels, condensed display numbers, and annotation-style text at very small sizes.
● 07 · Download

Beautiful designs in minutes.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →