Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
nexu-io avatar

Web Prototype Taste Brutalist

nexu-io/open-design

  • 167 installs
  • 83.7k repo stars
  • Updated August 5, 2026
  • nexu-io/open-design

Rapidly prototype brutalist web pages to test bold layout direction, typography, and conversion flows before committing production CSS.

About

Open-design skill for brutalist-taste web prototypes: raw typography, stark grids, and minimal polish HTML mocks to validate visual direction and page structure before full frontend build in nexu-io/open-design.

  • Brutalist taste preset
  • Fast web prototypes
  • Layout direction tests
  • Low-commitment mocks
  • Open-design patterns

Web Prototype Taste Brutalist by the numbers

  • 167 all-time installs (skills.sh)
  • +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #983 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill web-prototype-taste-brutalist

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs167
repo stars★ 83.7k
Last updatedAugust 5, 2026
Repositorynexu-io/open-design ↗

What it does

Rapidly prototype brutalist web pages to test bold layout direction, typography, and conversion flows before committing production CSS.

Files

SKILL.mdMarkdownGitHub ↗

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

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k
Design & UI/UXuiux
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.