New to Claude Skills? Learn how to install them →

Get Claude Skills
nexu-io on GitHub

Web Prototype - Industrial Brutalist

Free

Create striking web prototypes with a Swiss print aesthetic.

by nexu-io84.9k stars on nexu-io/open-design
4 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Web Prototype - Industrial Brutalist does

The Web Prototype - Industrial Brutalist skill is designed for developers and designers looking to create web prototypes that embody the principles of Swiss design. This skill emphasizes a rigorous, editorial style that is particularly suited for projects that require a strong visual impact, such as agency portfolios, manifesto sites, or editorial layouts. By adhering strictly to the guidelines of Swiss industrial print, this skill ensures that your designs communicate a sense of physicality and seriousness, avoiding the friendlier aesthetics common in modern web design.

At its core, this skill operates on a specific substrate of unbleached newsprint with carbon ink, complemented by a singular accent color of aviation red. The design rules are strict: heavy neo-grotesque typefaces are used exclusively in uppercase, with precise typographic settings to maintain clarity and impact. The layout is characterized by a visible CSS grid, ensuring that all elements are mathematically aligned, creating a clean and structured appearance. This attention to detail is crucial for achieving the desired brutalist aesthetic, which is both bold and uncompromising.

The skill is particularly useful for professionals in graphic design and web development who are tasked with creating prototypes that stand out in a crowded digital landscape. It provides a clear framework for implementing the brutalist style, with specific instructions on typography, color usage, and layout. This allows users to focus on the creative aspects of their projects without getting bogged down in the details of design principles, as the skill provides a comprehensive set of guidelines to follow.

However, this skill is not suitable for every project. If your design brief calls for a more friendly or approachable aesthetic, or if you require features such as animations or gradients, this skill may not meet your needs. It is specifically tailored for those who appreciate the stark, mechanical beauty of brutalism and are looking to create designs that reflect that ethos.

When to use it

Use this skill when your project requires a strict adherence to Swiss design principles and a bold visual statement.

When not to use it

Avoid this skill for projects needing a softer, more inviting design or those that require complex animations.

What you can build with it

Creating an Agency Portfolio

Use this skill to design a striking agency portfolio that showcases your work with a bold, editorial style.

Designing a Manifesto Site

Leverage this skill to produce a manifesto site that communicates your vision with clarity and impact.

Developing an Editorial Layout

Utilize this skill for projects that require an editorial layout, emphasizing a rigorous and structured design.

How to install Web Prototype - Industrial Brutalist

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/web-prototype-taste-brutalist --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

Web Prototype — Industrial Brutalist (Swiss Print)

For briefs that ask for "editorial", "newspaper", "agency portfolio", "Swiss design", "manifesto site", or anywhere the goal is to project rigor and physicality rather than friendliness. This skill commits to ONE substrate (light Swiss print) — never mix with the dark CRT mode in the same artifact.

Source

Distilled from Leonxlnx/taste-skill — skills/brutalist-skill/SKILL.md §2.1 (Swiss Industrial Print). For decks that lean into the dark CRT mode, see design-templates/html-ppt-taste-brutalist/.

Hard rules

  • Substrate: unbleached newsprint #F4F4F0 or #EAE8E3. Foreground #050505 carbon ink.
  • Accent: ONE color — aviation/hazard red #E61919. Used on dividing rules, strikes, alerts. Never as a fill on large surfaces.
  • Display type: heavy neo-grotesque (Archivo Black / Inter ExtraBold/Black / Neue Haas Grotesk Black). Fluid scale clamp(4rem, 10vw, 15rem). Tracking -0.04em. Leading 0.88. Uppercase only.
  • Micro type: monospace (JetBrains Mono / IBM Plex Mono). Fixed 10–13px. Tracking 0.1em. Uppercase. Used for navigation, metadata, captions, coordinates.
  • Geometry: border-radius: 0 everywhere. 90° corners only.
  • Grid: visible CSS grid with gap: 1px over an ink-colored background to render mathematically perfect 1px dividers.
  • Negative space: asymmetric — hero has a viewport-bleeding numeral or letterform; data clusters are tightly packed.
  • ASCII syntax: decorate sections with [ LABEL ], >>>, ///, registration ® / trademark ™ as structural ornament.

Banned

  • border-radius above 0.
  • Drop shadows, gradients, glassmorphism, glows.
  • Centred body text. Justify or hard-left only.
  • Color other than ink, paper, and the hazard red.
  • Sans-serif body fonts other than Inter/Archivo/Plex/Mono. No "premium" grotesques here — this aesthetic predates them.
  • Curved or "soft" iconography.
  • AI cliché copy. Use clipped, declarative print-magazine voice.

Required components

  • Top register strip: monospace meta band — issue, date, coordinates — running edge to edge with hairline rules above and below.
  • Hero: giant numeral or single word at viewport-bleeding scale on the left; right column packs three or four monospace metadata blocks.
  • Manifest section: numbered theses (01. / 02.) with hairline <hr> between each, hard-left aligned.
  • Data table or index rendered with display: grid; gap: 1px on an ink background.
  • Specimen block: typography demo — show the family/weight/case at three scales.
  • Closing colophon: monospace block stating press, paper stock, edition, set type.

Motion

This aesthetic is mechanical, not animated. Use motion only as a precision mechanism:

  • IntersectionObserver reveal: instant opacity 0 → 1, no translate/blur.
  • Optional ticker/marquee for the top register strip at constant speed.
  • :active on links: invert ink/paper instantly. No transitions over 120ms.
  • Never animate page-level layout properties.

Pre-flight

  • Substrate is newsprint, foreground is carbon ink, only accent is hazard red
  • All border-radius is 0
  • Display uses heavy grotesque at viewport-bleeding scale (≥ 8vw)
  • Micro UI uppercase monospace at fixed 10–13px, letter-spacing: 0.1em
  • At least one display: grid; gap: 1px ink-background module
  • ASCII syntax decoration appears at least three times ([ ... ], >>>, ///)
  • Numeric data uses tabular-nums + monospace — no proportional figures
  • No emojis, no curves, no gradients, no shadow effects

Frequently asked questions about Web Prototype - Industrial Brutalist

Similar skills

Penpot UI/UX Design

Create professional UI/UX designs in Penpot with ease.

UX Theming

Streamline your VS Code theming process with best practices.

Wireframe

Create low-fidelity UI wireframes in SVG format.

Waitlist Page

Create a clean, focused pre-launch landing page.

Hallmark

Design skill for creating unique, structured UIs.

UI Styling

Create beautiful, accessible user interfaces effortlessly.