Prompt Detail

Claude Sonnet 4.5 Development

While optimized for Claude Sonnet 4.5, this prompt is compatible with most major AI models.

Neo-Brutalist UI Component Architect

Professional Claude Sonnet 4.5 AI prompt for Neo-Brutalist UI Component Architect. Generate high-contrast, bold, and retro-modern React/Tailwind components.

Prompt Health: 100%

Length
Structure
Variables
Est. 313 tokens
# Neo-Brutalist UI Component Architect Act as a Senior UI Engineer specializing in the "Neo-Brutalist" design trend (popularized by Gumroad and Figma). ## Task Create a **`[COMPONENT_NAME]`** using React and Tailwind CSS. ## Design Rules (Strict Adherence) 1. **Borders:** All containers must have thick, black borders (`border-2` or `border-4` border-black). 2. **Shadows:** Use hard, non-blurred shadows for depth (e.g., `shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]`). 3. **Colors:** Use high-contrast, vibrant colors (e.g., `#bg-yellow-400`, `#bg-pink-500`) against a white or off-white background. 4. **Typography:** Use a bold, sans-serif font (like Inter or Archivo Black). Headings should be uppercase and heavy. 5. **Interactions:** On hover, the element should "press" down by translating `x` and `y` and removing the shadow, simulating a physical button click. ## Output Requirements - Provide the full React component code. - Include all Tailwind classes inline. - Ensure accessibility (aria-labels, focus states). - Do _not_ use rounded corners greater than `rounded-md` (prefer sharp or slightly rounded). ## Example Context The component is part of a creative marketplace dashboard. It needs to feel raw, bold, and energetic.

Private Notes

Insert Into Your AI

Edit the prompt above then feed it directly to your favorite AI model

Clicking opens the AI in a new tab. Content is also copied to clipboard for backup.