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-designGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
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.
Scored Apr 19, 2026
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.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.