Stop Building Generic UIs: Design Identity Skills for Claude Code (2026)

industrial-brutalist-ui by leonxlnx (108,255 installs, 37,894 GitHub stars — skills.sh registry) is the highest-install design-identity skill in the catalog — a deliberate reaction against the homogenised Inter-font, blue-primary-button SaaS aesthetic that AI code generators produce by default. Pair it with high-end-visual-design (127,031 installs) from the same author to get both the distinctive identity layer and the quality-enforcement layer in a single session. The skills.sh catalog tracks 40+ design-system skills across 25,215 total listings and 91.5 M total installs.

Why does Claude Code produce generic-looking UIs?

Claude Code generates code from the statistical centre of its training data. For UIs, the average of all open-source React and Next.js code is:

• Font: Inter (or system-ui)
• Primary button: bg-blue-500 text-white rounded-md
• Card: bg-white border border-gray-200 rounded-lg shadow-sm
• Spacing: 4px/8px grid, gap-4, p-6

These choices produce a UI that is immediately recognisable as AI-generated. They are not wrong — they are the safe, conventional centre. What they lack is visual identity.

A design-identity skill loads a different set of defaults. industrial-brutalist-ui replaces the conventional centre with: raw borders, high-contrast type, exposed grid structure, deliberate roughness. high-end-visual-design replaces it with: optical spacing, editorial type ratios, premium breathing room.

What is industrial brutalist UI?

Industrial brutalism in web design takes its cues from brutalist architecture: raw materials left visible, structural grids exposed, function over decoration. In UI terms:

• No rounded corners: rounded-none or explicit border-radius: 0
• Raw borders: 1–2px solid #000 or #1a1a1a instead of subtle border-gray-200
• High contrast: Black or near-black on white; white on black; no muted grays
• Monospace typography: font-mono headings signal utility and rawness
• Exposed grid: Visible column lines, rule borders between sections
• Flat shadows: box-shadow: 4px 4px 0 #000 — the "offset solid" shadow unique to brutalism

The style has grown in use for developer tools, technical documentation, and SaaS products that want to signal precision and engineering credibility rather than consumer-product polish.

Which design identity skills are available in Claude Code?

The catalog's top design-identity skills:

Distinctiveness (personality over convention):

• industrial-brutalist-ui by leonxlnx — 108,255 installs, 37,894 GitHub stars. Industrial brutalism: raw borders, monospace, offset shadows, high contrast.
• high-end-visual-design by leonxlnx — 127,031 installs, 37,894 GitHub stars. Premium minimalism: optical spacing, editorial typography, generous white space.
• ckm:ui-styling by nextlevelbuilder — 29,589 installs, 88,743 GitHub stars. Multi-style skill covering brutalism, glassmorphism, neomorphism, and corporate variants.

Foundation (quality before personality):

• tailwind-design-system by wshobson — 48,951 installs. Token layer; load this first before either identity skill.
• normalize by pbakaus — 55,011 installs, 35,911 GitHub stars. Enforces consistent base styles, removes browser defaults, sets a clean foundation.
• web-design-guidelines by vercel-labs — 396,443 installs. Quality and compliance guardrail — WCAG, touch targets, focus indicators.

Component output:

• design-md by google-labs-code — 49,441 installs. Generates a design.md spec file that captures the chosen visual language, reusable by Claude Code across a project's lifetime.

How do I load a design identity skill in Claude Code?

Start a new session with this order:

1. tailwind-design-system — establishes the token layer 2. industrial-brutalist-ui OR high-end-visual-design — applies the visual identity 3. web-design-guidelines — enforces quality and compliance

Then ask Claude Code to generate a component. The skill context overrides defaults; the button becomes border-2 border-black font-mono text-sm rounded-none shadow-[2px_2px_0_#000] instead of bg-blue-500 text-white rounded-md.

For persistent identity across a project, load design-md to generate a design.md file — a machine-readable style spec that Claude Code references in future sessions without reloading the full skill.

Should I use industrial brutalism or premium minimalism?

| Signal | Industrial brutalism | Premium minimalism | |---|---|---| | Audience | Developers, power users | B2B SaaS, fintech, enterprise | | Vibe | Raw, precise, technical | Editorial, confident, spacious | | Typography | Monospace headings, tight tracking | Large optical sizes, generous leading | | Colour | High contrast, black + accent | Muted palette, single accent | | Borders | Thick, visible | Thin or absent | | Skill | industrial-brutalist-ui (108,255 installs) | high-end-visual-design (127,031 installs) |

For developer tools, documentation sites, and technical SaaS: industrial brutalism. For B2B products, fintech, and anything where trust and polish matter more than personality: premium minimalism. For multi-audience products: load ckm:ui-styling (29,589 installs) and specify the variant.

How do I combine design identity with shadcn/ui?

industrial-brutalist-ui and high-end-visual-design both work with shadcn/ui — they operate at the CSS variable layer, so shadcn/ui components inherit the visual identity automatically:

``css /* Industrial brutalist override */ :root { --radius: 0rem; --primary: oklch(10% 0 0); --primary-foreground: oklch(99% 0 0); --border: oklch(10% 0 0); } ``

Load shadcn (193,352 installs) alongside either identity skill, and every generated shadcn/ui component gets the brutalist treatment.

Key takeaways

• industrial-brutalist-ui by leonxlnx (108,255 installs, 37,894 GitHub stars) is the top design-identity skill for Claude Code — it replaces AI's default generic SaaS aesthetic with raw borders, monospace type, and offset shadows.
• high-end-visual-design by the same author (127,031 installs) applies premium minimalism — optical spacing, editorial typography, confident whitespace.
• Load the three-skill foundation — tailwind-design-system + identity skill + web-design-guidelines — to get token layer, personality, and quality compliance in one session.
• Design identity skills operate at the CSS variable layer and are fully compatible with shadcn/ui and Tailwind v4.
• The skills.sh catalog has 40+ design-system skills out of 25,215 total listings; the top three design-identity skills from leonxlnx and nextlevelbuilder total 265,875 combined installs (skills.sh registry, GitHub).

Common questions