Mmcp.market

web-prototype-taste-brutalist skill

by nexu-io·nexu-io/open-design·98k stars·Apache-2.0

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).

A100/100content scan

Is the web-prototype-taste-brutalist skill safe?

Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.

No findings.

Install the web-prototype-taste-brutalist skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design
mkdir -p ~/.claude/skills
cp -r /tmp/open-design/design-templates/web-prototype-taste-brutalist ~/.claude/skills/web-prototype-taste-brutalist
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

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 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

More skills from nexu-io/open-design

  • Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
  • Acard-twitterTwitter quote or data card designed to pair with a post.
  • Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
  • Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.

All agent skills → · MCP servers