Design & UI Claude Code skills

Anthropic's anti-generic UI skill: aesthetic direction, typography and layout guidance for production-grade interfaces that do not look templated; exists both in anthropics/skills and as a plugin in the official directory.

Creative trio for visual output: fixed-canvas design (posters, slides), 10 ready-made or generated color/font themes applicable to any artifact, and enforcing a company brand system across deliverables.

Builds elaborate self-contained HTML artifacts (multi-component single-file pages) reliably, the official recipe behind rich claude.ai artifacts.

Chart and dashboard design guidance loaded into context: chart-type selection, color-by-role, layout rules, plus a runnable palette validator for colorblind safety and contrast; shipped 2026-07-01.

Converts your repo's React design system and uploads it to Claude Design so generated designs use your real components; first sync verifies every component.

22 web-design skills specialized in 3D graphics and animation (Three.js, R3F, GSAP, Babylon.js, PixiJS, Rive, Spline, Lottie) with 50+ boilerplate slash commands and 27 agents; the best dedicated 3D/motion web design pack.

Design direction for distinctive, non-templated UI: deliberate palette, typography, and layout choices grounded in the subject of the brief.

Create original static visual art and posters as .png or .pdf by first writing a design philosophy, then expressing it on canvas.

Generate algorithmic and generative art with p5.js (flow fields, particle systems) using seeded randomness and an interactive parameter viewer.

Apply one of 10 preset color/font themes (or generate a new one) to any artifact: slides, docs, reports, or landing pages.

Apply Anthropic's official brand colors and typography to artifacts; a template for encoding any company's visual identity as a skill.

Create interactive single-file HTML playgrounds with visual controls and live preview; includes templates for design playgrounds, data explorers, concept maps, and document critique.

Plugin packaging of the frontend-design skill for distinctive UI/UX implementation in Claude Code.

iOS 26 Liquid Glass design system for SwiftUI, UIKit, and WidgetKit interfaces.

Audit UI designs against 17 professional rules (typography, WCAG contrast, spacing) with a score out of 100.

Generate favicons, app icons, and social media images for web projects.

Create data visualizations in d3.js with correct idioms for scales, axes, and transitions.

Vercel's web interface guidelines for auditing and building UI: accessibility, spacing, states, and interaction details checked against a concrete rule list.

Large searchable UI/UX knowledge pack (named styles, palettes, font pairings, UX rules) used to pick a coherent design direction before building.

Anti-slop frontend skill for landing pages, portfolios, and redesigns: infers the right design direction from the brief and audits before redesigning, with a strict pre-flight check.

Paul Bakaus's design language system: one skill plus 23 commands and 45 detector rules that flag and fix cheap-looking UI patterns.

Defines the exact fonts, spacing, shadows, card structures, and animations of high-end agency work, and blocks the common defaults that make AI designs look generic.

Extracts a reusable design system (colors, typography, spacing, component patterns) from an existing site or screenshots.

Emil Kowalski's design-engineering taste for React UI: animation timing, easing, and interaction polish details.

REST API design patterns including resource naming, status codes, pagination, filtering, error responses, versioning, and rate limiting for production APIs.

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, a

Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment.

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, se

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controll

Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE : generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel lik

iOS 26 Liquid Glass design system : dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

Dark editorial premium design system for art galleries, single-piece e-commerce, and high-end portfolios. Distilled from Aceternity UI, Godly/recent.design, Refero, and Mobbin. Use when building or auditing a premium dark site where the artwork or product must

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

Use when the user wants to design a mobile app, create screens, build UI, or interact with their Sleek projects. Covers high-level requests ("design an app that does X") and specific ones ("list my projects", "create a new project", "screenshot that screen").

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards : strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.

Clone a game template from the gallery as a starting point. Use when the user says "use a template", "start from a template", "clone flappy-bird", "use the platformer template", or wants to quickly bootstrap a game from an existing example. Do NOT use for crea

This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design,

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.