Modern web applications with authentic neobrutalist aesthetic. Bold typography, hard shadows (no blur), thick black borders, high-contrast primary colors, raw visual tension. Extrapolates neobrutalism to SaaS dashboards, e-commerce, landing pages, startup MVPs. Activate on 'neobrutalism', 'neubrutalism', 'brutalist', 'bold borders', 'hard shadows', 'raw aesthetic', 'anti-minimalism', 'gumroad style', 'figma style'. NOT for glassmorphism (use vaporwave-glassomorphic-ui-designer), Windows retro (use windows-3-1-web-designer or windows-95-web-designer), soft shadows, gradients, neumorphism.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Modern web applications with authentic neobrutalist aesthetic. Bold typography, hard shadows (no blur), thick black borders, high-contrast primary colors, raw visual tension. Extrapolates neobrutalism to SaaS dashboards, e-commerce, landing pages, startup MVPs. Activate on 'neobrutalism', 'neubrutalism', 'brutalist', 'bold borders', 'hard shadows', 'raw aesthetic', 'anti-minimalism', 'gumroad style', 'figma style'. NOT for glassmorphism (use vaporwave-glassomorphic-ui-designer), Windows retro (use windows-3-1-web-designer or windows-95-web-designer), soft shadows, gradients, neumorphism.
allowed-tools
Read,Write,Edit,Glob,Grep
metadata
{"category":"Design & Creative","tags":["neobrutalist","web","designer"],"pairs-with":[{"skill":"web-design-expert","reason":"Neobrutalism is a specific web design trend requiring general web design foundations"},{"skill":"typography-expert","reason":"Bold, oversized typography is the defining visual element of neobrutalist design"},{"skill":"windows-95-web-designer","reason":"Both share retro-inspired thick borders and high-contrast aesthetics with different era references"}]}
Neobrutalist Web Designer
Creates modern 2026 web applications with authentic neobrutalist aesthetic. Not recreating brutalist architecture—extrapolating neobrutalism to modern digital contexts: SaaS products, e-commerce, indie creator platforms, and startup MVPs that need to stand out.
When to Use
Use for:
SaaS dashboards that need bold differentiation (Gumroad, Figma style)
E-commerce with memorable, raw aesthetic (Tony's Chocolonely style)
Novice thinking: box-shadow: 0 4px 6px rgba(0,0,0,0.1)Reality: Neobrutalism uses HARD shadows with zero blur
Instead: box-shadow: 4px 4px 0 #000000
Anti-Pattern: Gradients
Novice thinking: background: linear-gradient(to right, #ff5252, #ffeb3b)Reality: Neobrutalism is FLAT. No gradients, no blending.
Instead: Pick ONE solid color. Embrace the flatness.
Anti-Pattern: Rounded Corners Everywhere
Novice thinking: border-radius: 16px on everything
Reality: Neobrutalism prefers sharp corners or minimal rounding (4px max)
Instead: border-radius: 0 or border-radius: 4px for subtle softening
Anti-Pattern: Thin Borders
Novice thinking: border: 1px solid #dddReality: Neobrutalist borders are BOLD (3-4px) and BLACK
Instead: border: 3px solid #000000
Anti-Pattern: Low Contrast Colors
Novice thinking: Subtle pastels on white background
Reality: Neobrutalism demands HIGH contrast
Instead: Bold primaries (#FF5252, #FFEB3B) on white/black
Anti-Pattern: Transparency/Opacity
Novice thinking: background: rgba(255,255,255,0.8)Reality: Neobrutalism is OPAQUE. No see-through elements.
Instead: background: #FFFFFF (solid, no alpha)
Anti-Pattern: Hover Blur Effects
Novice thinking: filter: blur(2px) on hover
Reality: Hover states in neobrutalism are physical (translate + shadow change)
Instead: transform: translate(-2px, -2px) + increased shadow
Quick Decision Tree
Is it a container element?
├── Card/Panel? → 3px black border + hard shadow
├── Section? → Full-width, solid background color
├── Modal? → Heavy shadow (8px+), thick border
└── Nav? → Black background or thick bottom border
Is it interactive?
├── Button? → Hard shadow that responds to hover/active
├── Link? → Underline or bottom border, color change on hover
├── Input? → Thick border, shadow on focus
└── Checkbox? → Thick border, solid fill when checked
Is it typography?
├── Headline? → Oversized, bold display font, uppercase optional
├── Body? → Clean geometric sans, good line height
├── Label? → Bold, uppercase, smaller size
└── Code? → Monospace, possibly with background
Is it a status indicator?
├── Success? → Green background or border
├── Error? → Red background or border
├── Warning? → Yellow background or border
└── Info? → Blue background or border
