Install this skill
npx skills add anthropics/skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
The frontend-design skill generates high-fidelity, distinct web interfaces by prioritizing intentional visual language over standard UI patterns. Instead of defaulting to generic system fonts or predictable layout templates, this agent focuses on building immersive environments defined by bold, cohesive creative directions. Whether aiming for brutalist architecture, maximalist visual density, or high-end minimalist luxury, the skill handles the translation from stylistic intent to functional code. It emphasizes craftsmanship through advanced CSS techniques, expressive typography pairings, and deliberate spatial decisions. By avoiding the pitfalls of AI-typical gradients and stock component libraries, the agent creates production-ready code that feels hand-curated. Users receive performant HTML, CSS, and component structures that serve as both a functional interface and a visually arresting piece of digital communication, tailored precisely to the requested mood and audience.
When to Use This Skill
- •Prototyping a landing page for a creative agency that requires a brutalist aesthetic
- •Building an immersive, retro-futuristic portfolio site with custom hover states
- •Designing a high-end luxury e-commerce interface with generous negative space and refined typography
- •Creating an interactive exhibition page featuring complex, non-linear grid layouts
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “Build a landing page with a gritty, retro-futuristic aesthetic
- “Create a maximalist portfolio interface using an organic, fluid visual style
- “Design a product page that prioritizes luxury typography and extreme negative space
- “Construct a brutally minimal interface that challenges standard grid layouts
- “Develop a component with a nostalgic, art-deco inspired color palette and structure
Pro Tips
- 💡Clearly define your desired aesthetic direction (e.g., 'brutally minimal', 'maximalist chaos', 'retro-futuristic') in your prompt to guide the AI towards a truly distinct outcome.
- 💡Provide specific context about the target audience, purpose, and emotional tone you want to convey to help the AI craft a more meaningful and differentiated UI design.
- 💡Iterate on specific design elements like typography, color palette, spacing, and interaction patterns to refine the overall visual impact and ensure it avoids generic AI aesthetics.
What this skill does
- •Generates custom CSS architectures that enforce a singular aesthetic direction
- •Selects and implements unique, high-impact font pairings beyond standard system sets
- •Constructs sophisticated layouts utilizing asymmetry, grid-breaking, and layered depth
- •Integrates CSS-based micro-interactions and staggered animation sequences
- •Applies non-standard visual textures, noise overlays, and custom spatial composition
When not to use it
- ✕Building strictly functional, data-heavy internal admin dashboards that prioritize density over aesthetics
- ✕Scenarios requiring rapid iterations based on standard design system libraries like MUI or Ant Design
Example workflow
- Define the target aesthetic tone and primary audience for the project
- Select a conceptual direction such as maximalist chaos or refined minimalism
- Identify distinctive typography pairings that align with the mood
- Generate component-based code using CSS variables for consistent visual theming
- Refine the spatial composition, adjusting animations and layout constraints
- Perform a final visual audit to remove any generic or default-looking elements
Pitfalls & limitations
- !Over-prioritizing aesthetics at the expense of necessary accessibility features
- !Developing complex animations that may impact load times on constrained hardware
- !Confusing excessive visual clutter with a intentional maximalist direction
FAQ
Does this skill work with existing design systems?
The skill is optimized to avoid generic design systems to ensure a unique, bespoke output. It prefers custom CSS or tailwind-based implementations tailored to your specific aesthetic goals.
How does it handle accessibility?
While the focus is on visual impact, the agent produces production-grade code that maintains core structural accessibility standards unless specific stylistic choices dictate otherwise.
Can I request specific frameworks like React or Vue?
Yes, you can specify your preferred tech stack in your prompt, and the agent will map the aesthetic design to your chosen framework's component architecture.
What is the best way to prompt for a specific look?
Provide a clear conceptual anchor such as '1970s print media,' 'brutalist engineering,' or 'soft-pastel luxury' to guide the agent toward the right visual vocabulary.
How it compares
Generic prompts typically result in 'AI slop' using predictable layouts and default system fonts; this skill specifically filters out those cliches to force a bespoke, high-quality aesthetic output.
📄 Full skill instructions — original source: anthropics/skills
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
## Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- **Constraints**: Technical requirements (framework, performance, accessibility).
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
## Frontend Aesthetics Guidelines
Focus on:
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
## Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- **Constraints**: Technical requirements (framework, performance, accessibility).
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
## Frontend Aesthetics Guidelines
Focus on:
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
By Anthropic
How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/frontend-design/ - Save the file as
SKILL.md - The agent will automatically discover the skill based on its description.
Option B: Global Installation (All Agents)
Save the file to these locations to make it available across all projects:
- Claude Code:
~/.claude/skills/anthropics/skills/frontend-design/SKILL.md - Cursor:
~/.cursor/skills/anthropics/skills/frontend-design/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/anthropics/skills/frontend-design/SKILL.md
🚀 Install with CLI:npx skills add anthropics/skills
Recommended Rules
View more rules →Tailwind CSS Expert
Tailwind CSSCSSStyling
You are an expert in Tailwind CSS utility-first styling. Key Principles: - Utility-first workflow - Design directly in markup - Consistency via confi...
Visual Regression Testing
TestingVisualUI/UX
You are an expert in Visual Regression Testing. Key Principles: - Catch unintended visual changes - Pixel-perfect validation - Automate UI review pro...
Semantic HTML & Accessibility Expert
HTMLAccessibilitySEO
You are an expert in semantic HTML and web accessibility. Key Principles: - Use semantic HTML5 elements - Implement WCAG 2.1 Level AA standards - Ens...
Recommended Workflows
View more workflows →React Performance Profiling
ReactPerformanceDebugging
--- description: Identify slow components using React Profiler --- 1. **Install DevTools**: - Install React Developer Tools extension for Chrome/F...
Debug Memory Leaks in React
ReactMemoryPerformance
--- description: Identify and fix memory leaks causing app slowdowns and crashes --- 1. **Take Heap Snapshots**: - Open Chrome DevTools → Memory t...
Fix Next.js Hydration Errors
Next.jsDebuggingHydration
--- description: Systematically debug and fix 'Text content does not match server-rendered HTML' errors --- 1. **Check for Invalid HTML Nesting**: ...
