web-prototype-taste-brutalist

nexu-io/open-design · design-templates/web-prototype-taste-brutalist/SKILL.md

Swiss industrial-print web prototype. Newsprint canvas, monolithic black grotesque, viewport-bleeding numerals, hairline grid dividers, hazard-red accent, ASCII syntax decoration. Distilled from Leonxlnx/taste-skill `brutalist-skill` (Swiss Industrial Print mode).

Design & CreativeNo license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

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

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/web-prototype-taste-brutalist · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/design-templates/web-prototype-taste-brutalist" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/design-templates/web-prototype-taste-brutalist" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/web-prototype-taste-brutalist

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so web-prototype-taste-brutalist is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

web-prototype-taste-brutalist

nexu-io/open-design · design-templates/web-prototype-taste-brutalist/SKILL.md

Design & CreativeNo license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

Web Prototype — Industrial Brutalist (Swiss Print)

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

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/web-prototype-taste-brutalist · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/design-templates/web-prototype-taste-brutalist" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/design-templates/web-prototype-taste-brutalist" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/web-prototype-taste-brutalist

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so web-prototype-taste-brutalist is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

web-prototype-taste-brutalist

What this skill does

Web Prototype — Industrial Brutalist (Swiss Print)

Source

Hard rules

Banned

Required components

Motion

Pre-flight

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

web-prototype-taste-brutalist

What this skill does

Web Prototype — Industrial Brutalist (Swiss Print)

Source

Hard rules

Banned

Required components

Motion

Pre-flight

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits