Industrial Brutalist UI Skill: Swiss and Terminal Styles

What is the industrial-brutalist-ui skill?

Industrial-brutalist-ui is the install name of the brutalist-skill folder in the leonxlnx/taste-skill repository. The SKILL.md describes interfaces that mix mid-century Swiss typography, industrial manuals and retro terminal screens. Its description lists data-heavy dashboards, portfolios and editorial sites as the targets.

What changes in your agent's output

• The agent commits to one of two modes per project: Swiss Industrial Print on a light paper background, or Tactical Telemetry on a dark CRT-style background. It must not mix them.
• Headlines become massive, uppercase, tightly tracked heavy sans-serif, sized with clamp(), with line height between 0.85 and 0.95.
• Metadata, navigation and unit IDs switch to small uppercase monospace with wide tracking.
• Layouts are visible grids with solid 1px or 2px dividers, and every corner is exactly 90 degrees.
• Gradients, soft shadows and translucency are prohibited, and red is the only accent color.

What the visual system covers

Beyond layout and type, the skill specifies texture. It asks for halftone and 1-bit dithering on images, CRT scanlines made with a repeating linear gradient, and a low-opacity noise filter over the page root, so the result looks printed or phosphor-lit rather than clean digital.

Who the industrial-brutalist-ui skill is for

Best for

• Telemetry, ops and monitoring dashboards that should look like instruments.
• Portfolios and editorial pages that want a Swiss poster feel.
• Teams that already know they want a hard, anti-consumer look and need the agent to hold it consistently.

Not for

• Soft, friendly or luxury brands. For that direction see high-end-visual-design.
• Products that need gradients, rounded cards or glass. The skill prohibits them outright.
• Choosing a direction from a brief. design-taste-frontend infers one, while this skill assumes you have already chosen.

Use it with UiChemy

The skill outputs front-end code built on CSS Grid, borders and type. To bring an AI-built page like this into WordPress, UiChemy AI to WordPress imports the build, and Composer edits it in Elementor or Gutenberg. Click Get Started on uichemy.com.

How to install Industrial Brutalist UI Skill: Swiss and Terminal Styles

git clone https://github.com/leonxlnx/taste-skill.git

1. Clone the repository

   Run git clone https://github.com/leonxlnx/taste-skill.git.

2. Copy the skill folder

   Copy skills/brutalist-skill into the folder where your agent loads skills. The folder name is brutalist-skill, and the frontmatter name is industrial-brutalist-ui.

3. Pick a mode in your prompt

   Say whether you want the light Swiss print mode or the dark terminal mode. The skill expects one, not both.

4. Ask for UI work

   Request a dashboard, a portfolio or an editorial page and check the first result against the grid and color rules.

Check that it loaded

Ask for a status dashboard. You should see uppercase monospace labels, solid divider lines, square corners, one red accent and no gradients or soft shadows.

Read the official instructions on GitHub

Key features

• Two commit-to-one modesSwiss Industrial Print is a light, newsprint-style mode. Tactical Telemetry & CRT Terminal is dark-only with dense tabular data. The skill says to pick one and never alternate.
• Macro typographyHeavy neo-grotesque headings in uppercase, sized with clamp(4rem, 10vw, 15rem), with letter spacing from -0.03em to -0.06em and line height 0.85 to 0.95.
• Micro typographyMonospace labels at 10px to 14px, uppercase, with 0.05em to 0.1em tracking, used for metadata, navigation, unit IDs and coordinates.
• Sparing serif contrastA high-contrast serif may appear exceedingly sparingly, and the skill wants it degraded with halftone or dithering to contrast with the clean sans-serif.
• Utilitarian colorLight mode uses #F4F4F0 or #EAE8E3 paper with #050505 to #111111 ink. Dark mode uses #0A0A0A or #121212 with #EAEAEA text. Red #E61919 or #FF2A2A is the only accent.
• Blueprint grid layoutElements anchor to CSS Grid tracks with visible 1px or 2px borders and full-width rules. Layouts alternate between dense monospace clusters and large empty space.
• Industrial symbologyASCII framing such as [ DELIVERY SYSTEMS ], arrows like >>>, registration and copyright marks used as shapes, crosshairs at grid intersections and fake revision strings.
• Analog degradation effectsHalftone and dithering, CRT scanlines through repeating-linear-gradient, and a global low-opacity noise filter.
• Semantic engineering rulesA display: grid; gap: 1px trick draws thin dividers. Markup favors <data>, <samp>, <kbd>, <output> and <dl>, and clamp() is reserved for macro type.

Frequently asked questions