Neo-Brutalist Design Prompts
AI prompts for bold, raw, anti-design interfaces with thick borders, hard shadows, no rounded corners, and high-contrast colors.
About This Topic
Neo-Brutalist design embraces raw, unpolished aesthetics with bold black borders, hard-edge shadows, zero border-radius, high-contrast color combinations, and intentionally 'imperfect' layouts. It rejects the polished, cookie-cutter look of modern web design in favor of personality and directness. Despite its raw appearance, effective neo-brutalist design requires careful attention to hierarchy and usability.
Prompt Examples
AI Prompt Examples
Copy these prompts to generate Neo-Brutalist Design Prompts designs with your favorite AI tool.
Brutalist Portfolio
GeneralDesign a neo-brutalist portfolio website. All elements: 3px solid black borders, no border-radius, hard shadows (4px 4px 0px #000). Background: #ffffff. Accent colors: hot pink (#ff006e) and electric yellow (#ccff00). Typography: monospace for body, bold condensed sans-serif for headings. Layout: intentionally asymmetric grid, overlapping elements, rotated cards (-2 to 2 degrees). Navigation: brutalist text links with underline offset animation. Project cards with image, bold title, and raw HTML-style tags.
Brutalist App for v0
v0Build a neo-brutalist task manager using shadcn/ui with overridden styles. Override all components: border-radius to 0, borders to 2px solid black, shadows to '4px 4px 0px black'. Cards with yellow (#fbbf24) and pink (#f472b6) accent backgrounds. Buttons with black background, white text, and transform: translate(-2px, -2px) on hover with shadow change. Include: task list, add task form, priority tags (raw colored labels), and a drag-to-reorder interface.
Brutalist Blog for Cursor
CursorCreate a neo-brutalist blog in Next.js. Design tokens: border-width 3px, border-color black, border-radius 0, shadow '5px 5px 0px #000'. Implement a CSS utility .brutal-card that applies the standard brutalist treatment. Header: oversized site title with a colored highlight background. Post cards in a masonry grid with varying accent colors (rotate through: #ff006e, #ccff00, #00d9ff, #ff9500). Each card tilts slightly on hover. Code blocks with monospace font and a visible line-number gutter.
Brutalist Components for Claude
ClaudeGenerate a neo-brutalist React component library with TypeScript. Components: BrutalButton (variants: primary/secondary/danger, all with thick borders and hard shadows), BrutalCard (no radius, thick border, accent color strip at top), BrutalInput (thick bottom border only, monospace placeholder), BrutalBadge (inline-block, uppercase, small, colored background), BrutalModal (centered, thick border, no backdrop blur - use a solid color overlay instead). All interactive elements shift shadow on click (4px 4px to 2px 2px). Use Tailwind CSS.
Related Styles
Related Styles
Explore these styles for ready-made tokens and components.
Use Cases
Best Use Cases
Creative Agency Sites
Design studios and agencies that want to showcase boldness and creative confidence.
Developer Portfolios
Programmers showcasing projects with a raw, technical aesthetic.
Indie Products
Indie apps and tools that stand out through unconventional, memorable design.
Event & Conference Sites
Tech conferences and creative events with bold, eye-catching branding.
FAQ
Frequently Asked Questions
Want the complete design system?
StyleKit offers 120+ visual styles, each with complete design tokens, component recipes, and exportable AI Rules.