industrial-brutalist-ui

Generates CSS-based blueprints for high-density dashboards and landing pages with brutalist styling.

Updated Apr 17, 2026
One-click install
npx skills add https://github.com/djkloop/n --skill industrial-brutalist-ui-djkloop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/djkloop/n/tree/main/.trae/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/djkloop/n --skill industrial-brutalist-ui-djkloop

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing data-heavy dashboards and portfolios with an industrial-brutalist visual language that conveys precision, density, and mechanical clarity.

Core Features & Use Cases

  • Rigid modular grids and visible compartmentalization for clear information hierarchy.
  • Extreme typographic scale contrast and utilitarian color to emphasize data and telemetry.
  • Analog degradation effects (halftones, CRT-like scanlines) to evoke declassified blueprints for technical contexts.
  • Use Case: Create dashboards, portfolios, or editorial sites that require a technical, blueprint-like aesthetic.

Quick Start

Design a data-heavy dashboard mockup using the chosen brutalist scheme to demonstrate the visual system.

Frequently Asked Questions about industrial-brutalist-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design data-dense dashboards with an industrial-brutalist aesthetic?▼

Design data-dense dashboards by applying rigid modular CSS grids, extreme typographic scale contrast, and utilitarian color substrates to achieve mechanical clarity. This industrial-brutalist approach ensures precise information hierarchy for data-heavy interfaces.

What is industrial-brutalist UI design and when should I use it?▼

Industrial-brutalist UI is a design approach using rigid grids, macro typography, and analog degradation effects to convey density and mechanical clarity. Use it for portfolios, editorial sites, and technical dashboards requiring a blueprint-like aesthetic.

Can I create analog degradation effects like CRT scanlines using CSS and SVG?▼

Yes, you can create analog degradation effects like CRT scanlines and halftones using CSS and SVG. These degradation effects evoke declassified blueprints and technical contexts within industrial-brutalist data visualization layouts.

Does this brutalist UI approach work for data visualization and editorial sites?▼

Yes, this brutalist UI approach works effectively for data visualization and editorial sites. It uses visible compartmentalization and rigid grids to handle dense information while maintaining a technical, blueprint-like visual hierarchy.

What are the limitations of using brutalist UI for dashboards?▼

Limitations of brutalist dashboards include the rigid grids and extreme typographic scale contrast potentially reducing readability for non-technical users. This approach prioritizes mechanical clarity and data density over conventional, user-friendly interface aesthetics.