Web Design Claude skills

Build production-grade web components and interfaces with distinctive, polished design.

Apply professional color and font themes to slides, docs, and web pages.

Build complex React artifacts with Tailwind CSS and shadcn/ui components.

Anthropic's official skill for building real, distinctive UIs — not the generic AI default.

Apply professional color and font themes to slides, docs, and web pages.

Build multi-component React artifacts with Tailwind CSS and shadcn/ui components.

Create animated GIFs optimized for Slack messages and custom emojis.

Create original visual art and posters in PNG and PDF formats.

Apply Anthropic's official brand colors and typography to any design or artifact.

Garry Tan's 23-role Claude Code stack — CEO, designer, eng, QA, security, release, all as slash commands.

Create design tokens, component specs, and branded presentations from a systematic token architecture.

Create logos, brands, design tokens, banners, and social media graphics.

Create strategic HTML presentations with charts, responsive layouts, and copywriting optimization.

Score a design against Dieter Rams' principles and create a plan to improve it.

Understand slide format, navigation, and structure in HTML presentations.

Reference CSS classes and HTML patterns for presentation components.

Generate a complete long-form article with masthead, hero image, and related posts.

Generate music, voiceovers, and sound effects as audio files.

Generate and edit images from text descriptions using AI.

Audit digital products for WCAG compliance and identify accessibility barriers.

Build interactive 3D scenes and product configurators for web browsers.

Kills generic AI design — gives your interfaces deliberate taste, motion, and polish.

Review UI code for compliance with web interface best practices and accessibility standards.

Optimize React and Next.js code following Vercel's performance best practices.

Build flexible, maintainable React components using composition techniques.

Animate page and component transitions using React's native View Transition API.

Create animation-rich HTML presentations from scratch or convert PowerPoint files.

Compress images to WebP or PNG format with automatic tool selection.

Three sliders that tune Claude's UI output. Stops the generic AI look.

Build and optimize React and Next.js applications with performance analysis and accessibility.

Scan code for accessibility violations and generate WCAG 2.2 compliance reports.

Build immersive scroll-driven websites with parallax effects, text animations, and interactive depth.

Create minimal presentation slides with arrow-prefixed lists and keyboard navigation hints.

Create horizontal-swipe presentation decks with eight professional Replit themes.

Create beautiful dark-themed presentation decks with animated knowledge graphs and code highlighting.

Add 3D models, cinematic cameras, and advanced layouts to PowerPoint presentations.

Create PowerPoint presentations with smooth cross-slide animations and shape continuity.

Design production-grade interfaces, components, and visual layouts with modern polish.

Transform content into styled PNG cards with seven layout templates.

Create generative art with p5.js using algorithms, randomness, and interactive parameters.

Generate, edit, and refine images from text prompts with design templates.

Deploy static files to IPFS or full-stack web projects with backend APIs and databases.

Generate minimalist, scalable vector logos using geometric shapes and negative space.

Create cinematic product videos from shot templates, screenshots, and audio assets.

Extract colors, fonts, and design tokens from any website into multiple formats.

Score and diagnose Google Ads landing pages to improve conversion rates and Quality Score.

Optimize landing pages for influencer traffic and boost conversion rates.

Fetch brand logos and cloud service icons as ready-to-use SVG files.

Generate systematic checklists to verify design implementations match specifications.

Identify and prioritize design inconsistencies and structural problems in your product.

Generate or edit images using OpenAI's image models.

Embed HTML visualizations directly in chat messages without opening panels.

A design review from Emil Kowalski — catches the small things that make UIs feel right.

Audit websites for conversion issues and design A/B tests based on visitor behavior.

Apply professional color and font themes to slides, docs, and web pages.

Create complex React artifacts with Tailwind CSS and shadcn/ui components.

Design cohesive visual stories for GitHub READMEs with custom SVG assets.

Create flowcharts, architecture diagrams, and visual sketches with Excalidraw.

Create interactive HTML mockups to design and plan UI layouts visually.

Convert online presentation templates into reusable style prompts and layouts.

Build accessible design systems with tokens, components, and intent-first principles.

Build accessible, brand-aligned design systems with tokens and component specs.

Generate on-brand marketing copy with structured output for websites and products.

Learn universal design principles for visual hierarchy, typography, interaction, and accessibility.

Extract design systems from UI screenshots and generate implementation-ready design prompts.

Generate elegant article cover images with customizable colors, styles, and layouts.

Review components for accessibility issues and WCAG compliance.

Automatically update component documentation when source code changes.

Explain what code does in plain English.

Scaffold a new React component with a matching test file.

Create interactive UI mockups, prototypes, and wireframes as self-contained HTML.

Create and update terminal demo GIFs for mcpc using VHS scripts.

Review design specs and prototypes against aesthetic standards and anti-AI-slop guidelines.

Design and build beautiful websites, cinematic scroll animations, and complete design systems.

Define visual style, composition, and audio direction for game production from design specs.

Review UI code for compliance with web design and accessibility best practices.

Build AI chat interfaces with pre-made conversation and message components.

Search and retrieve SVG icons from 200+ libraries instantly.

Generate professional system architecture diagrams as shareable HTML and SVG files.

Generate beautiful blog cover images with typography, logos, and current web context.

Evaluate screens for usability issues using Nielsen's heuristics and mobile best practices.

Add loading, success, error, and empty states to your components.

Audit components for WCAG accessibility issues and get fixes.

Generate accessible alt text descriptions for images and data visualizations.

Create and apply brand.yml files for consistent branding across Shiny and Quarto projects.

Review designs, write UI copy, build systems, and check accessibility.

Get design feedback by comparing your screen to real examples and improvement ideas.

Critique and rewrite paywall call-to-action copy with conversion-tested alternatives.

Find unexpected design inspiration by exploring patterns from unrelated industries and domains.

Design refined, purposeful UI animations for hovers, transitions, and micro-interactions.

Render interactive SVG diagrams, charts, and HTML widgets directly in chat.

Generate shadcn/ui-styled status badges for project documentation.

Create or edit Power Apps canvas applications from requirements and specifications.

Generate scalable vector graphics from text descriptions.

Design and iterate UI layouts, components, and flows on an infinite canvas.

Generate PNG, JPEG, or WebP images using your ChatGPT account without an API key.

Build production-grade web components and interfaces with polished, distinctive design.

Build presentation slide decks as HTML pages with fixed dimensions and layout.

Build and render academic conference posters to print-ready PDF.

Generate browser-rendered pages and components with dark mode and theme support.

Run a comprehensive WCAG compliance audit and generate a remediation plan.

Audit and build accessible web interfaces meeting WCAG standards for news and academic sites.

Capture and display screenshots of web pages or specific elements.

Create original visual designs and artwork as PNG or PDF files.

Review UI code for compliance with web design and accessibility best practices.

Apply Anthropic's official brand colors and typography to your designs.

Fix crowded layouts, inconsistent spacing, and weak visual hierarchy in designs.

Make bland designs more visually interesting and engaging while keeping them usable.

Add strategic color to dull interfaces to increase visual engagement and warmth.

Add purposeful animations and micro-interactions to enhance UI usability and delight.

Extract design tokens and variables from Figma and generate ready-to-use QML code.

Apply your project's design system to UI, styling, and copy decisions automatically.

Generate a comprehensive UX architecture bible by auditing your app's code and design patterns.

Plan UI features with design specs, accessibility, and navigation before coding.

Choose and implement a modern UI design style with tokens, components, and accessibility guidelines.

Design accessible iOS and Android interfaces following platform guidelines and modern best practices.

Build WCAG 2.2 compliant web apps with keyboard navigation and screen reader support.

Generate, review, and integrate AI-built UI components into design systems.

Build accessible animations and page transitions with Motion library patterns.

Build animated React components for Next.js with Tailwind CSS and Framer Motion.

Review UI code for visual hierarchy, spacing, typography, accessibility, and responsiveness issues.

Write and run automated accessibility tests for web apps using Playwright and axe-core.

Scan web pages for WCAG compliance issues and accessibility violations using automated testing.

Guide visual style searches with branching prompts, feedback loops, and direction selection.

Optimize GSAP animations for smooth 60fps with transforms, opacity, and batching.

Add, search, and style shadcn components in your project.

Extract design tokens and starter files from any public website.

Generate custom TipTap nodes for edit, preview, and PDF modes.

Scan code for WCAG 2.1 AA and EU accessibility compliance issues.

Run automated accessibility tests and fix issues in your CI pipeline.

Test and improve web accessibility for WCAG compliance and inclusive design.

Turn code or descriptions into Figma designs using your existing design system.

Audit and fix Flutter widgets for WCAG 2.2 accessibility compliance.

Build polished, production-grade web components and interfaces with distinctive design.

Apply professional color and font themes to slides, docs, and web pages instantly.

Turn product specs into design prompts for web UI generators like Figma and v0.

Replicate a website's design and visual style for your own product.

Create animated videos by writing HTML, CSS, and GSAP timelines.

Generate branded interfaces and assets following Honeycomb design guidelines and components.

Get nine pre-built Home Assistant dashboard styles with ready-to-copy CSS and templates.

Build polished, designed UI that avoids generic AI defaults with design tokens and visual QA.

Reverse-engineer a website into a working local implementation with audit artifacts.

Extract a website's design tokens and generate a spec-compliant DESIGN.md file.

Convert screenshots and diagrams into editable SVG and PowerPoint files.

Create pitch decks, one-pagers, objection docs, and demo scripts to help close deals.

Maintain dashboard translations and locale-aware formatting across HitKeep.

Create a professional portfolio website or presentation homepage with responsive design.

Convert design prototypes to production React, Vue, or Svelte code.

Create original visual designs as PNG or PDF files using design philosophy principles.

Apply Anthropic's official brand colors and typography to your designs.

Generate, upscale, and edit images using AI with multiple quality and cost options.

Design beautiful, on-brand UIs instead of generic AI-generated interfaces.

Turn concepts into beautiful brand-matched illustrations by recoloring unDraw artwork.

Analyze SwiftUI app flows to find navigation issues and broken user paths.

Generate and edit images with text or reference images using Gemini's native models.

Build AI chat interfaces with pre-built UI components for Next.js apps.