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.

Learn when to drop, rail, or embed captions as overlays on video.

Master velocity-matched transition techniques for cinematic motion graphics and kinetic text.

Design continuous camera motion across multi-scene animations using vector rules and momentum laws.

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.

Create 40+ diagram types as branded HTML, SVG, or PNG files.

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 product screenshots by automating browser capture with AI verification.

Create reusable templates for design, slides, and video projects.

Reverse-engineer design tokens, components, and patterns from live products or screenshots.

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.

Optimize marketing funnels and conversion rates with AI-powered analysis.

Embed HTML visualizations directly in chat messages without opening panels.

Create custom visual designs and styling for HTML pages, reports, and interactive tools.

Generate interactive HTML diagrams to visualize relationships, sequences, and structures.

Generate low-fidelity HTML wireframes to test layout, navigation, and task flow before design.

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

Check web interfaces for WCAG compliance and keyboard, screen-reader, and focus accessibility.

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

Create systematic product designs grounded in research, from UI screens to visual identities.

Optimize landing pages for influencer traffic and boost conversion rates.

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

Convert raster logos to animated SVG with Disney animation principles applied.

Generate systematic checklists to verify design implementations match specifications.

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

Generate and edit images from text prompts at 1K, 2K, or 4K resolution.

Generate flat favicons from prompts and export as PNG, ICO, and WebP files.

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

Plan and structure AI-generated short films with storyboards, shot lists, and visual prompts.

Edit local video projects with timeline, captions, and motion graphics tools.

Generate or edit images using OpenAI's image models.

Build UI components following Penguin Harness web app conventions and patterns.

Check your UI against WCAG 2.2 standards and identify accessibility issues with fixes.

Apply a design direction—archetype or brand system—to match a specific look and feel.

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.

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

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

Automate browser interactions and render web pages for visual evidence.

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.

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

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

Recreate award-winning creative websites with forensic precision by reverse-engineering their code.

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.

Define your game's complete visual style, camera work, characters, colors, and audio direction.

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.

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

Generate framework-aware code from Figma designs using your project's existing components and tokens.

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

Install and wire reusable blocks and components into HyperFrames compositions.

Reference guide for GSAP animation methods, easing, timelines, and performance optimization.

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 native mobile app screens with production-quality design and UX.

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.

Generate images and animations using your ChatGPT or Gemini subscription.

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.

Find the exact name for any web animation or motion effect from a vague description.

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 polished, production-ready web components and pages with distinctive design.

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

Verify that rendered UI components actually use your design system tokens and catch styling violations.

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

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

Create and refine 32×32 pixel-art avatar faces for animated agent personas.

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

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

Add, fix, or remove animations from your UI with purpose and restraint.

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.

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.

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.

Design WCAG-compliant accessibility tests for keyboards and assistive tech.

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

Remove AI-generated patterns and add handcrafted polish before shipping.

Generate animated logo reveal videos with 3D effects and branding elements.

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

Create accessible UI designs with token compliance, responsive layouts, and WCAG standards.

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.

Design flexible, reusable content schemas for headless CMSes.

Render Portable Text to React, Vue, HTML, Markdown, and plain text.

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.

Create custom color schemes for MulmoTerminal terminals and save them to your config.

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

Build Android TV apps that work with only a d-pad remote control.

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.

Convert your website or PWA into an iOS app with App Store submission strategy and release guidance.

Design polished landing pages, dashboards, and UI copy that users understand instantly.

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.

Add, search, and customize shadcn components in your UI projects.

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

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

Determine if preview changes are real regressions or just unstable rendering.

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.

Install the ClaraConverts AI voice chat widget on any website — one line of code, or provision a free trial via MCP if there's no account yet.