anthropic-frontend-designCreate distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Combines the design intelligence of UI/UX Pro Max with Anthropic's anti-slop philosophy. Use for building UI components, pages, applications, or interfaces with exceptional attention to detail and bold creative choices.
Install via ClawdBot CLI:
clawdbot install Qrucio/anthropic-frontend-designThis skill guides the creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. It integrates structured design intelligence (accessibility, UX rules, stack guidelines) with a bold, intentional aesthetic philosophy.
Claude (and all AI agents) are capable of extraordinary creative work, yet often default to safe, generic patterns. This skill MANDATES breaking those patterns.
Before coding, understand the context and commit to a BOLD aesthetic direction:
Use the internal search tool to gather palettes, font pairings, and UX guidelines. CRITICAL: You MUST filter the results through the Anti-AI Slop lens. If the tool suggests "Inter" or "Roboto", you are REQUIRED to ignore it and pick a distinctive alternative.
# Generate a complete design system
python scripts/search.py "<product_type> <industry> <keywords>" --design-system
# Search specific domains (style, typography, color, ux, chart, landing)
python scripts/search.py "<keyword>" --domain <domain>
# Get stack-specific guidelines (html-tailwind, react, nextjs, shadcn, etc.)
python scripts/search.py "<keyword>" --stack <stack_name>| Rule | Do | Don't |
|------|----|----- |
| Icons | Use SVG (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
| Typography | Beautiful, unique Google/Custom fonts | Inter, Roboto, Arial, System fonts |
| Hover | Stable transitions (color/opacity/shadow) | Scale transforms that shift layout |
| Cursor | Add cursor-pointer to all interactive items | Leave default cursor on buttons/cards |
| Contrast | Minimum 4.5:1 for accessibility | Low-contrast "vibes" that are unreadable |
Before delivering code, verify every item:
cursor-pointer.Commit to ONE direction and execute it fully—no half measures.
Generated Mar 1, 2026
Redesign a fashion e-commerce site to stand out from generic templates, using a luxury/refined aesthetic with serif fonts, gold accents, and intentional motion to enhance product discovery and checkout flow, ensuring high contrast and accessibility.
Create a distinctive analytics dashboard for a fintech startup, adopting a retro-futuristic style with neon colors, chrome effects, and asymmetric layouts to break away from typical SaaS slop, while maintaining clear data visualization and responsive design.
Develop a playful, toy-like interface for a children's learning app, featuring bright pastels, bouncy animations, and rounded corners to engage users, with strict adherence to accessibility rules like high text contrast and no emoji icons.
Transform a news website with an editorial/magazine aesthetic, using bold typography, grid-based layouts, and clean hierarchy to improve readability and visual appeal, ensuring responsive breakpoints and no horizontal scroll on mobile.
Build a brutally minimal portfolio for a creative professional, employing monochrome palettes, extreme white space, and sparse typography to highlight work, with stable hover states and SVG icons to avoid generic design patterns.
Offer custom frontend design packages to clients seeking unique, anti-slop interfaces, charging project-based fees for full implementations from wireframes to production code, with upsells for ongoing maintenance.
Sell premium, distinctive UI templates and components on platforms like ThemeForest or Gumroad, targeting developers who want to avoid generic designs, with recurring revenue from template updates and support.
Provide consulting services to tech companies on integrating anti-AI slop principles into their design systems, supplemented by workshops and training sessions for design teams to foster bold creativity.
💬 Integration Tip
Integrate this skill by using the design intelligence tool for context-specific references and adhering to the pre-delivery checklist to ensure visual quality and accessibility in all outputs.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.