← Back to Skills / Marketplace / cyber-brutalism
SKL · 22PRO

Cyber Brutalism.

Raw brutalist structure meets technical systems aesthetic. Massive condensed headlines, exposed grid lines, coordinate readouts as decoration, and electric accents — for products where 'function over form' is a real value.

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

Cyber Brutalism is what you get when raw brutalist design meets a technical systems aesthetic — massive condensed headlines, numbered sections like /01 and /02, coordinate readouts and system status panels used as decoration, and CTAs with diagonal arrows that feel like they were built by engineers who also happened to have taste. It comes in two flavors: black-on-white with purple accents, or dark with electric lime — both equally aggressive, both equally intentional. If your product is for builders, developers, or anyone who finds "clean and minimal" kind of boring, this is the skill.

● Looks Like
Vercel's bolder marketing momentsLinear's rawer edgesThe best-looking developer tool sites of 2025–2026Awwwards winners in the tech/creative agency categoryAgency sites that list Vercel, Supabase, and Replicate as clients
02 · Best For / Avoid If
＋ Best For
+Developer tools, APIs, and infrastructure products
+Creative and design agencies with a technical audience
+Web3 and crypto-adjacent products that want brutalist edge without full crypto aesthetic
+AI tools and platforms targeting a technical audience
+Any product where 'function over form' is an actual brand value, not just something you say
× Avoid If
×Your product needs to feel warm, approachable, or consumer-friendly — this aesthetic is deliberately confrontational and unapologetic about it
×You have a non-technical audience who might find the raw grid aesthetic confusing or off-putting
×Your brand relies on soft colors, rounded shapes, or any kind of gentleness
03 · Design Philosophy
01

The grid is the aesthetic

Cyber Brutalism puts its structure on display. Section dividers, cross markers (+), corner dots, numbered zones, and exposed grid lines are all visible and intentional. Every structural element is doing visual work — the layout skeleton is the design.

02

Technical data as decoration

Coordinate readouts like X_36.17 / Y_-86.76, system timestamps, and status indicators signal "this was built by people who think in systems." The technical vocabulary creates credibility before a word of copy does any work.

03

Type does the heavy lifting

The headline font is massive, condensed, and ultra-bold — it fills the screen on purpose. Typography is the visual event here. Everything else on the page exists to support it.

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
Forgetting the section numbering system
The /01 /02 /03 section labels are structural to this aesthetic, not optional decoration. Without them the layout loses its systematic character and starts looking like generic bold design.
! WARNING
Wrong font ruining the scale
The headline only works at this scale with a very specific kind of font — ultra-bold, condensed, zero personality. A slightly rounded or humanist grotesque immediately softens the whole thing and kills the edge.
! WARNING
Mixing both color modes on one page
The light (white/purple) and dark (black/lime) versions are distinct systems — choose one and commit to it. Mixing them on the same page looks like a mistake, not a creative choice.
! WARNING
Fake system data that looks real
The decorative coordinates and status panels work as atmosphere when they're clearly non-functional. If they're too realistic, users will try to interact with them or wonder what they mean. Keep them visually distinct from actual UI.
● 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 →