neobrutalist-web-designer

仓库: erichowens/some_claude_skills
安装量: 52
排名: #14345

安装

npx skills add https://github.com/erichowens/some_claude_skills --skill neobrutalist-web-designer
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) Indie creator platforms and portfolios Startup landing pages and MVPs Educational platforms seeking approachable boldness Music, art, and social media apps Any UI that needs to "shout" rather than whisper Do NOT use for: Glassmorphism/blur effects → use vaporwave-glassomorphic-ui-designer Windows 3.1 retro → use windows-3-1-web-designer Windows 95 retro → use windows-95-web-designer Soft shadows/neumorphism → use native-app-designer Subtle corporate design → use web-design-expert Gradient-heavy aesthetics → NOT neobrutalism Neobrutalism vs Similar Styles Feature Neobrutalism Glassmorphism Neumorphism Win31/95 Shadows Hard (no blur) Soft glow Subtle inset Beveled Borders Thick black strokes Subtle/none None Beveled Colors Bold primaries Frosted/pastel Muted System gray Background Solid flat Blur/transparent Soft gradient Solid Philosophy Raw, exposed Ethereal, hidden Realistic Functional Core Design System The Three Pillars of Neobrutalism Hard Shadows - Offset, no blur, usually black Bold Borders - Thick (2-4px) black strokes High Contrast - Primary colors against neutral backgrounds Color Palette Color Hex CSS Variable Usage Black

000000

--neo-black Borders, shadows, text White

FFFFFF

--neo-white Backgrounds, contrast Cream/Beige

F5F0E6

--neo-cream Soft background alternative Red

FF5252

--neo-red Danger, emphasis Yellow

FFEB3B

--neo-yellow Highlights, warnings Blue

2196F3

--neo-blue Links, primary actions Pink

FF4081

--neo-pink Accent, playful Green

4CAF50

--neo-green Success states Orange

FF9800

--neo-orange CTAs, attention Purple

9C27B0

--neo-purple Creative, premium Color Rules: ✅ Bold primaries with high saturation ✅ Black and white for maximum contrast ✅ Beige/cream for warmth without softness ❌ NO gradients (use flat colors only) ❌ NO transparency/opacity (stay opaque) The Signature Hard Shadow THE defining neobrutalist element - offset shadow with zero blur: .neo-shadow { / THE neobrutalist shadow formula / box-shadow : 4 px 4 px 0

000000

; } .neo-shadow--deep { box-shadow : 8 px 8 px 0

000000

; } .neo-shadow--subtle { box-shadow : 2 px 2 px 0

000000

; } / Hover: shadow grows / .neo-shadow :hover { box-shadow : 6 px 6 px 0

000000

; transform : translate ( -2 px , -2 px ) ; } / Active: shadow shrinks (pressed) / .neo-shadow :active { box-shadow : 2 px 2 px 0

000000

; transform : translate ( 2 px , 2 px ) ; } Bold Border System .neo-border { border : 3 px solid

000000

; } .neo-border--thick { border : 4 px solid

000000

; } .neo-border--thin { border : 2 px solid

000000

; } / Colored borders for emphasis / .neo-border--accent { border : 3 px solid var ( --neo-pink ) ; } Typography Use Font Suggestion Fallback Style Headlines Archivo Black Impact, sans-serif Bold, condensed Body Space Grotesk Arial, sans-serif Clean, geometric Accent Lexend Mega Trebuchet, sans-serif Wide, bold Mono JetBrains Mono Courier New Code, retro Display Bebas Neue Impact All-caps impact Typography Rules: :root { --font-neo-display : 'Archivo Black' , 'Impact' , sans-serif ; --font-neo-body : 'Space Grotesk' , 'Arial' , sans-serif ; --font-neo-accent : 'Lexend Mega' , sans-serif ; --font-neo-mono : 'JetBrains Mono' , 'Courier New' , monospace ; } / Headlines are BOLD and often oversized / h1 { font-family : var ( --font-neo-display ) ; font-size : clamp ( 3 rem , 8 vw , 6 rem ) ; line-height : 0.9 ; letter-spacing : -0.02 em ; text-transform : uppercase ; } / Body maintains readability / body { font-family : var ( --font-neo-body ) ; font-size : 1.125 rem ; line-height : 1.6 ; } Modern Extrapolations SaaS Dashboard: The Gumroad Paradigm Neobrutalism for SaaS emphasizes function over flourish : ┌────────────────────────────────────────────────────────┐ │ ██████████████████████████████████████████████████████ │ │ █ DASHBOARD [?] [⚙] [👤] █│ │ ██████████████████████████████████████████████████████ │ ├────────────────────────────────────────────────────────┤ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ ████████████ │ │ ████████████ │ │ ████████████ │ │ │ │ REVENUE │ │ CUSTOMERS │ │ PRODUCTS │ │ │ │ ════════════ │ │ ════════════ │ │ ════════════ │ │ │ │ $12,450 │ │ 1,234 │ │ 12 │ │ │ │ ↑ 23% │ │ ↑ 15% │ │ → 0% │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ │ ┌────────────────────────────────────────────────────┐│ │ │ RECENT SALES [View All]││ │ │ ════════════════════════════════════════════════════││ │ │ ▓ Product A $49.00 Jan 31, 10:23 ││ │ │ ▓ Product B $29.00 Jan 31, 09:45 ││ │ │ ▓ Product A $49.00 Jan 31, 08:12 ││ │ └────────────────────────────────────────────────────┘│ └────────────────────────────────────────────────────────┘ Key patterns: Cards with hard shadows Bold section headers High-contrast data display Black borders on everything Flat, solid background colors E-Commerce: The Raw Shopping Experience .neo-product-card { background : var ( --neo-white ) ; border : 3 px solid var ( --neo-black ) ; box-shadow : 6 px 6 px 0 var ( --neo-black ) ; padding : 0 ; overflow : hidden ; } .neo-product-card :hover { box-shadow : 8 px 8 px 0 var ( --neo-black ) ; transform : translate ( -2 px , -2 px ) ; } .neo-product-card__image { border-bottom : 3 px solid var ( --neo-black ) ; width : 100 % ; aspect-ratio : 1 ; object-fit : cover ; } .neo-product-card__content { padding : 1 rem ; } .neo-product-card__price { font-family : var ( --font-neo-display ) ; font-size : 1.5 rem ; background : var ( --neo-yellow ) ; display : inline-block ; padding : 0.25 rem 0.5 rem ; border : 2 px solid var ( --neo-black ) ; } .neo-add-to-cart { width : 100 % ; background : var ( --neo-black ) ; color : var ( --neo-white ) ; border : 3 px solid var ( --neo-black ) ; padding : 0.75 rem ; font-family : var ( --font-neo-display ) ; text-transform : uppercase ; cursor : pointer ; } .neo-add-to-cart :hover { background : var ( --neo-pink ) ; color : var ( --neo-black ) ; } Landing Page: Bold First Impressions ╔══════════════════════════════════════════════════════════════╗ ║ ║ ║ ████████ WE BUILD ║ ║ ████████ BOLD ║ ║ ████████ PRODUCTS ║ ║ ║ ║ ┌─────────────────────────────────────────────────────────┐║ ║ │ │║ ║ │ No more boring SaaS. We create tools that │║ ║ │ stand out, work hard, and make you money. │║ ║ │ │║ ║ └─────────────────────────────────────────────────────────┘║ ║ ║ ║ ╔═══════════════════════════════════════╗ ║ ║ ║ → START FREE TRIAL ║ ║ ║ ╚═══════════════════════════════════════╝ ║ ║ ║ ╚══════════════════════════════════════════════════════════════╝ Responsive: Bold at Every Size Breakpoint Adjustments Mobile (<640px) Shadow: 3px 3px, Border: 2px, Font scale down Tablet (640-1024px) Shadow: 4px 4px, Border: 3px, Standard fonts Desktop (>1024px) Shadow: 6px 6px, Border: 4px, Oversized headlines / Mobile-first approach / :root { --neo-shadow-size : 3 px ; --neo-border-width : 2 px ; } @media ( min-width : 640 px ) { :root { --neo-shadow-size : 4 px ; --neo-border-width : 3 px ; } } @media ( min-width : 1024 px ) { :root { --neo-shadow-size : 6 px ; --neo-border-width : 4 px ; } } .neo-card { border : var ( --neo-border-width ) solid var ( --neo-black ) ; box-shadow : var ( --neo-shadow-size ) var ( --neo-shadow-size ) 0 var ( --neo-black ) ; } Component Patterns Buttons .neo-button { background : var ( --neo-white ) ; color : var ( --neo-black ) ; border : 3 px solid var ( --neo-black ) ; box-shadow : 4 px 4 px 0 var ( --neo-black ) ; padding : 0.75 rem 1.5 rem ; font-family : var ( --font-neo-display ) ; font-size : 1 rem ; text-transform : uppercase ; cursor : pointer ; transition : all 0.1 s ease ; } .neo-button :hover { box-shadow : 6 px 6 px 0 var ( --neo-black ) ; transform : translate ( -2 px , -2 px ) ; } .neo-button :active { box-shadow : 2 px 2 px 0 var ( --neo-black ) ; transform : translate ( 2 px , 2 px ) ; } / Primary variant / .neo-button--primary { background : var ( --neo-yellow ) ; } / Danger variant / .neo-button--danger { background : var ( --neo-red ) ; color : var ( --neo-white ) ; } / Ghost variant / .neo-button--ghost { background : transparent ; box-shadow : none ; } .neo-button--ghost :hover { background : var ( --neo-black ) ; color : var ( --neo-white ) ; box-shadow : none ; transform : none ; } Cards .neo-card { background : var ( --neo-white ) ; border : 3 px solid var ( --neo-black ) ; box-shadow : 6 px 6 px 0 var ( --neo-black ) ; padding : 1.5 rem ; } .neo-card__header { border-bottom : 2 px solid var ( --neo-black ) ; padding-bottom : 1 rem ; margin-bottom : 1 rem ; } .neo-card__title { font-family : var ( --font-neo-display ) ; font-size : 1.25 rem ; text-transform : uppercase ; } / Feature card with accent color / .neo-card--featured { background : var ( --neo-yellow ) ; } / Highlighted state / .neo-card--highlight { border-color : var ( --neo-pink ) ; box-shadow : 6 px 6 px 0 var ( --neo-pink ) ; } Form Elements .neo-input { background : var ( --neo-white ) ; border : 3 px solid var ( --neo-black ) ; padding : 0.75 rem 1 rem ; font-family : var ( --font-neo-body ) ; font-size : 1 rem ; width : 100 % ; } .neo-input :focus { outline : none ; box-shadow : 4 px 4 px 0 var ( --neo-black ) ; } .neo-input ::placeholder { color :

888

;
}
/ Labels are bold and uppercase /
.neo-label
{
font-family
:
var
(
--font-neo-display
)
;
text-transform
:
uppercase
;
font-size
:
0.875
rem
;
margin-bottom
:
0.5
rem
;
display
:
block
;
}
/ Checkbox/Radio /
.neo-checkbox
{
appearance
:
none
;
width
:
24
px
;
height
:
24
px
;
border
:
3
px
solid
var
(
--neo-black
)
;
background
:
var
(
--neo-white
)
;
cursor
:
pointer
;
}
.neo-checkbox
:checked
{
background
:
var
(
--neo-black
)
;
}
.neo-checkbox
:checked
::after
{
content
:
'✓'
;
color
:
var
(
--neo-white
)
;
font-size
:
16
px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
}
Navigation
.neo-nav
{
background
:
var
(
--neo-black
)
;
border-bottom
:
4
px
solid
var
(
--neo-black
)
;
padding
:
1
rem
2
rem
;
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
}
.neo-nav__logo
{
font-family
:
var
(
--font-neo-display
)
;
font-size
:
1.5
rem
;
color
:
var
(
--neo-white
)
;
text-transform
:
uppercase
;
}
.neo-nav__links
{
display
:
flex
;
gap
:
1.5
rem
;
}
.neo-nav__link
{
color
:
var
(
--neo-white
)
;
text-decoration
:
none
;
font-family
:
var
(
--font-neo-body
)
;
font-weight
:
600
;
padding
:
0.5
rem
0
;
border-bottom
:
3
px
solid
transparent
;
}
.neo-nav__link
:hover
{
border-bottom-color
:
var
(
--neo-yellow
)
;
}
.neo-nav__link--active
{
border-bottom-color
:
var
(
--neo-pink
)
;
}
Anti-Patterns
Anti-Pattern: Soft Shadows
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 #ddd
Reality
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 CSS Variables Template :root { / Core palette / --neo-black :

000000

; --neo-white :

FFFFFF

; --neo-cream :

F5F0E6

; / Primary colors / --neo-red :

FF5252

; --neo-yellow :

FFEB3B

; --neo-blue :

2196F3

; --neo-pink :

FF4081

; --neo-green :

4CAF50

; --neo-orange :

FF9800

; --neo-purple :

9C27B0

; / Typography / --font-neo-display : 'Archivo Black' , 'Impact' , sans-serif ; --font-neo-body : 'Space Grotesk' , 'Arial' , sans-serif ; --font-neo-mono : 'JetBrains Mono' , 'Courier New' , monospace ; / Spacing / --neo-spacing-xs : 0.25 rem ; --neo-spacing-sm : 0.5 rem ; --neo-spacing-md : 1 rem ; --neo-spacing-lg : 1.5 rem ; --neo-spacing-xl : 2 rem ; / Shadows & Borders / --neo-shadow-size : 4 px ; --neo-border-width : 3 px ; --neo-shadow : var ( --neo-shadow-size ) var ( --neo-shadow-size ) 0 var ( --neo-black ) ; } The Quick Test If your component has: ❌ Any blur in shadows → NOT neobrutalism ❌ Any gradients → NOT neobrutalism ❌ Transparency/opacity → NOT neobrutalism ❌ Thin (1px) borders → NOT neobrutalism ❌ Soft/muted colors → NOT neobrutalism ❌ Heavy border-radius (16px+) → NOT neobrutalism It should have: ✅ Hard shadows (Xpx Ypx 0 #000) ✅ Bold borders (3-4px solid black) ✅ High contrast color combinations ✅ Flat, solid colors ✅ Bold typography ✅ Sharp or minimal corners ✅ Physical hover/active feedback Accessibility Considerations Despite its boldness, neobrutalism can be highly accessible: High contrast - Black borders on white/colored backgrounds pass WCAG Clear focus states - Shadow/border changes are obvious Readable typography - Large, bold text is easy to scan No motion dependency - Transforms are enhancers, not requirements / Ensure focus is visible / .neo-button :focus-visible { outline : 3 px solid var ( --neo-blue ) ; outline-offset : 2 px ; } / Reduce motion if preferred / @media ( prefers-reduced-motion : reduce ) { .neo-button { transition : none ; } .neo-button :hover { transform : none ; box-shadow : var ( --neo-shadow ) ; / Keep shadow, skip animation / } } References /references/component-library.md - Full CSS for all neobrutalist components /references/color-combinations.md - Tested color pairings with contrast ratios /references/typography-pairings.md - Font combinations for different contexts /references/real-world-examples.md - Analysis of Gumroad, Figma, and other implementations Pairs With web-design-expert - For brand direction alongside bold style color-contrast-auditor - Ensure accessibility with bold colors design-system-creator - For generating full design token systems typography-expert - For advanced type pairing Sources Design research based on: NN/G: Neobrutalism Definition and Best Practices Bejamas: Neubrutalism Web Design Trend Onething Design: Neo Brutalism UI Trend Nestify: Principles of Neo Brutalism CC Creative: Brutalism vs Neubrutalism

← 返回排行榜