Skip to the usage guide
industrial-brutalist-uiby Leonxlnx

Industrial Brutalist UI Skill.

A Claude Code and Codex skill for UI design: brutalist interfaces fusing Swiss typography with terminal aesthetics.

  • Web & UI
  • UI code
Leonxlnx/taste-skill · skills/brutalist-skill/SKILL.mdSKILL.md
--- name: industrial-brutalist-ui description: Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints. --- ## 1. Skill Meta ## 2. Visual Archetypes ## 3. Typographic Architecture ## 4. Color System ## 5. Layout and Spatial Engineering ## 6. UI Components and Symbology
Front matter and section headings read from the upstream file on 2026-09-14 · 8,450 characters in full

01 What it does

What the industrial-brutalist-ui Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill architects web interfaces that synthesize mid-century Swiss typographic design, industrial manufacturing manuals, and retro-futuristic aerospace/military terminal interfaces. It requires absolute mastery over rigid modular grids, extreme typographic scale contrast, purely utilitarian color palettes, and programmatic simulation of analog degradation including halftones, CRT scanlines, and bitmap dithering.

The objective is to construct digital environments projecting raw functionality, mechanical precision, and high data density while deliberately discarding conventional consumer UI patterns. Used for data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

What it produces

  • Web interfaces with rigid modular grids, extreme typographic scale contrast, and utilitarian color palettes
See the example prompt ↗

How It Works

  1. 01
    Select One Visual Archetype and Commit

    Choose either Swiss Industrial Print (high-contrast light modes with heavy sans-serif typography) or Tactical Telemetry & CRT Terminal (dark mode with monospaced typography and technical framing).

  2. 02
    Engineer Extreme Typographic Scale Contrast

    Deploy macro-typography at massive scales using fluid typography with tight tracking and compressed leading, exclusively uppercase.

  3. 03
    Choose One Substrate Palette Consistently

    Select either light mode using matte unbleached documentation paper backgrounds with carbon ink text, or dark mode using deactivated CRT backgrounds with white phosphor text.

  4. 04
    Build on Blueprint Grid Architecture

    Construct layouts with strict CSS Grid where elements are anchored precisely to grid tracks and intersections.

  5. 05
    Apply Analog Degradation Effects

    Simulate physical media limitations through halftone and 1-bit dithering on images, CRT scanlines via repeating linear gradients, and mechanical noise filters applied globally to introduce unified physical grain across the interface.

02 Find your fit

When to Use the industrial-brutalist-ui Skill

Use the industrial-brutalist-ui skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Data-heavy dashboards requiring high data density and mechanical precision

Know the Boundaries

  • Projects requiring conventional consumer UI patterns

03 Inside the skill

Rules the industrial-brutalist-ui Skill Gives Claude Code and Codex

5 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. No Gradients or Soft Shadows

    Gradients, soft drop shadows, and modern translucency are strictly prohibited to simulate physical media or primitive emissive displays.

  2. Macro-typography Parameters

    Deploy macro-typography exclusively in uppercase with extremely tight tracking (-0.03em to -0.06em) and highly compressed leading (0.85 to 0.95) at massive scales using clamp functions.

  3. Micro-typography Constraints

    Use monospace fonts exclusively in uppercase at fixed small scales (10px to 14px) with generous tracking (0.05em to 0.1em) for all metadata, navigation, unit IDs, and coordinates.

  4. Terminal Green single-element Limit

    Terminal green can only be used for one specific UI element such as a single status indicator or data readout. If it does not serve a clear purpose, omit it entirely.

  5. Grid Determinism for Dividing Lines

    Utilize display grid with gap 1px and contrasting parent/child background colors to generate mathematically perfect, razor-thin dividing lines without complex border declarations.

04 Put it to work

Install industrial-brutalist-ui in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add industrial-brutalist-ui to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill industrial-brutalist-ui

Generic skills CLI form for skills/brutalist-skill/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Build a tactical telemetry dashboard interface for [SYSTEM NAME] monitoring [DATA TYPE] across [NUMBER] operational units. Use CRT terminal aesthetics with dark substrate, monospaced data readouts, ASCII bracket framing, and simulated scanline degradation. Display real-time metrics in tight grid compartments with aviation red accent for critical alerts. Include crosshair markers at grid intersections and randomized unit IDs.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

Before accepting the output, look for these in the transcript and the files:

  • The result is delivered as UI code, as the catalog lists for this skill.
  • The agent names the industrial-brutalist-ui skill in its plan or transcript before producing the result.
  • Your own content, names and numbers appear unchanged in the output.

In OpenDesign import industrial-brutalist-ui from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Branch main
Skill file
skills/brutalist-skill/SKILL.md Content checksum recorded at verification; commit ccbc156
License
MIT From LICENSE.
Repository stars
86,946 GitHub snapshot taken 2026-09-14 for the whole Leonxlnx/taste-skill repository, which contains 11 skills in this catalog. Not a rating or usage count for industrial-brutalist-ui.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. Skill MetaDefines the skill as advanced proficiency in Swiss typographic and military terminal interface synthesis
  2. Visual ArchetypesEstablishes two distinct modes: Swiss Industrial Print (light) and Tactical Telemetry & CRT Terminal (dark)
  3. Typographic ArchitectureSpecifies macro-typography, micro-typography, and textural contrast implementation parameters including fonts, scale, tracking, and casing
  4. Color SystemDefines uncompromising substrate palettes for light and dark modes with aviation red accent and optional terminal green
  5. Layout and Spatial EngineeringMandates strict CSS Grid architectures with visible compartmentalization, bimodal density, and 90-degree geometry
  6. UI Components and SymbologyReplaces standard UI with ASCII syntax decoration, industrial markers, and technical assets like crosshairs and warning stripes
  7. Textural and Post-Processing EffectsEngineers analog degradation through halftone dithering, CRT scanlines, and mechanical noise filters
  8. Web Engineering DirectivesProvides concrete implementation instructions for grid determinism, semantic HTML tags, and typography clamping
The Skill's Own Description
“Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.”

Front-matter description from SKILL.md. The full file is about 8,450 characters. Read the full file on GitHub.

06 Before you install

Questions About the industrial-brutalist-ui Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

What fonts should I use for this style?

For macro-typography (structural headers), use neo-grotesque heavy sans-serifs like Neue Haas Grotesk Black, Inter Extra Bold/Black, Archivo Black, Roboto Flex Heavy, or Monument Extended.

For micro-typography (data and telemetry), use monospace fonts like JetBrains Mono, IBM Plex Mono, Space Mono, VT323, or Courier Prime. High-contrast serifs like Playfair Display are used sparingly with heavy post-processing.

Industrial Brutalist UI

Run industrial-brutalist-ui on a Real UI Design Task.

Download OpenDesign, import industrial-brutalist-ui from its SKILL.md link, paste the prompt above, and read the plan before the result.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill industrial-brutalist-ui

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows