Every design skill for AI coding agents.

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics.

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels.

Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.

Create a clean modern design system with a luminous blue sky atmosphere, soft drifting cloud light, minimal white framing, and serene premium typography.

Create a clean dark glass layout system with a thin blue laser atmosphere, frosted premium shells, and polished dashboard structure.

Create an archival book-reader design system with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame.

Create a bright-green technical design system with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone.

Create a clean minimal beige light-mode design system with warm neutral shells, quiet process grids, restrained accent color, and elegant low-contrast structure.

Create a dark-blue clean design system with strong contrast, cobalt gradient feature blocks, crisp framed structure, and restrained premium glow.

Create a dark glass layout system with frosted premium shells, clean multi-column workspace structure, floating data cards, and restrained atmospheric depth.

Create a dark premium design system that combines near-black surfaces, subtle ordered-dither texture, and a thin accent-colored laser atmosphere.

Create a framed dark technical design system with border-gradient shells, asymmetrical grid panels, mono utility labeling, and restrained monochrome atmosphere.

Create a dark container-led technical design system with fuchsia-purple accents, layered rounded shells, crisp frame lines, and playful futuristic focal objects.

Build dark-mode glassmorphism interfaces with readable contrast, frosted surfaces, and gradient borders using a pseudo-element mask.

Create a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.

Create a high-contrast clean skeuomorphic design system with molded dark surfaces, crisp light separation, tactile inset depth, and restrained signal accents.

Create an image-led grid design system with full-bleed photography, structural guide lines, anchored content blocks, and restrained technical overlays.

Create a light-mode technical design system with warm paper surfaces, dark outer framing, subtle diagonal texture, precise bracketed geometry, and restrained accent signals.

Create a futuristic, premium, clean dark-blue mesh-gradient design system across background rendering, hero shell, navigation, floating nodes, framed sections, CTAs, and motion.

Create a clean agency design system built from nested containers, with an outer editorial shell, inset dark feature blocks, rounded premium cards, and restrained accent color.

Create a clean paper-toned SaaS design system with warm neutrals, orange accent signals, rounded premium forms, and polished product illustration surfaces.

Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details.

Create a technical split-screen design system with dual panels, fine frame lines, mono metadata, quiet editorial typography, and premium inset surfaces.

Create a modern dark-mode technical design system with matte-black surfaces, emerald signal accents, mono system labeling, framed dashboard cards, and restrained glow.

Create a monochrome technical wireframe design system with exploded 3D structure, connector annotations, sparse information labels, and precise dark diagnostic framing.

Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.

Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.

High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.

Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.

Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.

Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.

Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.

Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.

A research-journal aesthetic printed on warm stone , authoritative, editorial, almost achromatic.

Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.

Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.

A radically minimal, blank-canvas interface built as a pure edge-to-edge surface, with almost no color and typography carrying the visual weight.

Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.

Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.

Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.

Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.

Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.

Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.

Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.

High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.

Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.

Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.

Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.

Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.

A playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations , warm cream backgrounds, big bold custom display typography, saturated brand color blocks, th

Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.

Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.

Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.

Geometric, structured design with clean typography, neutral colors, precise shapes, and intuitive layouts that stay out of the way.

Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.

Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.

An immersive, interactive, exhibit-style interface that blends storytelling, animation, and gamified elements to create a playful, experience-driven journey.

A modern, graphic, editorial-poster aesthetic , warm and confident , built on alternating cream and burnt orange sections, an amber brand color.

Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.

Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.

Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns.

A cyber-slick, dark-only Matrix-inspired interface defined by minimalist fashion, high-tech digital elements

Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.

Contemporary editorial style with serif typography, minimal palettes, and clean layouts for polished digital products.

Monospace-driven, matrix-inspired design with high-contrast elements, compact density, and a hacker-chic aesthetic.

Modern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces.

Electric neon glow effects with high-contrast color pairings for bold, attention-grabbing interfaces.

Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.

Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.

Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.

Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.

High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for premium brand experiences.

Apple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.

Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.

Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.

Carefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes.

Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.

A playful, joyful, two-color risograph print aesthetic built on a single warm off-white paper surface running through every section

App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.

A playful, arcade-inspired interface for games , built on the VT323 pixel typeface, hard-edged 0px corners, chunky pill buttons that physically press into solid offset blocks

Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.

A friendly, hand-drawn sketch interface inspired by pencil illustrations on warm cream paper.

Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.

Modern minimalist aesthetic with clean lines, intentional color palette, subtle interactions, and consistent spacing.

Generous whitespace, consistent padding, and grid-based layouts for clean, readable, and breathing interfaces.

Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.

Clean, high-contrast enterprise design for data-driven workflows with intuitive drag-and-drop patterns and structured layouts.

Narrative-driven design using visuals, copy, and interaction to guide users through engaging, emotionally resonant journeys.

A sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent.

Classic block-game inspired design with playful colors, bold display fonts, and compact, high-energy layouts.

Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.

1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (

UI/UX design intelligence for web and mobile.

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

Anti-slop frontend skill for landing pages, portfolios, and redesigns.

The original v1 taste-skill, preserved for projects depending on its exact behavior.

Elite UX/UI & Advanced GSAP Motion Engineer.

Teaches the AI to design like a high-end agency.

Upgrades existing websites and apps to premium quality.

Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original reference-inspired imagery, standout heroes, GSAP choreography, one smoo

Turn a completed daily UI inspiration capture into exactly five original landing-page builds, one per separate Codex task, using Sites.

Covers prompt structure, constraints, variations, typography/spacing rules, and iteration workflow for consistent UI outputs.

Create or redesign creative agency, production studio, architecture, culture, and portfolio websites with billboard typography, hard black-and-white chapters, exposed grids, documentary imag

Create or redesign creative-studio, agency, photographer, artist, and portfolio websites where project work leads the story.

Blend editorial magazine composition with precision product-tech detailing using asymmetrical grids, cinematic media bands, mono utility labels, and restrained accent color.

Covers structure, layout patterns, conversion strategies, copywriting, SEO/AEO, and common pitfalls.

Webgl landing steering.

Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词（任意组合），先产出一份标准化 DESIGN.md 设计规范，用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端：Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX

Complete system for building high converting landing pages: intake questions, page structure, layout selection, conversion copywriting, SEO, plus strict visual rules for typography, spacing,

Upgrade an existing website or app to premium quality without breaking functionality , audit the current design, identify generic/AI tells, then apply taste and system rules surgically.

Produce thoughtful, high-fidelity design artifacts in HTML , landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations.

Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes.

Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.

Create premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis.

Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scr

Includes patterns for smooth motion, performance, and common pitfalls.

Build cinematic sticky product storytelling with GSAP ScrollTrigger, progressive UI reveals, scroll-synced animation, smooth interpolation, and immersive section transitions.

Apply seamless infinite marquee loops using duplicated items.

Create masked staggered word reveals on scroll with GSAP ScrollTrigger.

Build cursor-following spotlight reveals that expose a second aligned image through a soft radial mask.

Turn any ordered process into a data-driven vertical or horizontal scroll story with a base line, progress fill, active step states, responsive collapse, semantic fallback, and reduced-motio

Build reversible scroll-controlled visual transformations with a pinned or sticky stage, normalized progress, and video, image-sequence, canvas, SVG, or DOM renderers.

Reveal marked-up text word by word as scroll progress advances, while preserving semantic inline links, emphasis, responsive line wrapping, and reduced-motion readability.

Turn an article, case study, brand narrative, product journey, or long-form story into a cinematic scroll-driven landing page using one of three renderers: scrubbed video, a real-time Three.

Create subtle editorial word-by-word text reveal animations where each word fades and rises into place once it enters the viewport.

Add the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples a

Add a restrained particle atmosphere inside one section with configurable shapes, density, gravity, wind, sway, rotation, recycling or settling, pointer disturbance, visibility pausing, resp

Create a perspective WebGL background grid with fading lines, subtle particle haze, slow forward drift, and gentle camera parallax.

js).

Create a corner-anchored laser composition with thin beams, a bright emitter node, bloom, and atmospheric glow or fog.

gl (Globe.GL) for 3D globe data visualization with WebGL/ThreeJS, including setup, data layers (points, arcs, polygons, labels), and integration patterns in plain HTML or React.

Create a globe-like 3D particle visualization with a dense luminous spherical core and thinner orbital ring or flattened disc.

Add and tune animated liquid-metal WebGL borders with the React `metal-fx` package.

js, including Engine/World setup, Render/Runner configuration, adding bodies and constraints, and scroll/interaction-friendly canvas scenes.

Add cursor-following fluid WebGPU distortion over an existing image with the Shaders library's ImageTexture and CursorRipples components.

js (scene/camera/renderer, lights/materials, GLTF loading, controls, performance).

Unicorn studio.

js (setup, parameters, resizing, performance, integration in React/Next.js).

Create a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion.

Create a fixed full-screen WebGL laser background effect with a thin white-hot vertical core, restrained brand-colored halo, and soft smoky fog around the beam.

Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow.

Create or redesign appointment-based service websites for salons, barbers, spas, wellness studios, clinics, and hospitality brands.

Create or redesign enterprise AI, automation, security, and operations product pages that explain system boundaries, approvals, auditability, exceptions, and rollback.

Includes checklists, templates, and common pitfalls.

Create or redesign SaaS and AI product landing pages where a real workflow, interface, or deterministic demo is the central proof.

Add accessible animated AI loading and agent-status indicators with the React thinking-orbs library.

Designing interactive calculators (ROI calculators, pricing estimators, savings projections, mortgage calculators, custom assessments) that deliver real decision-support value while serving

Designing conversational flows for website chatbots and AI agents.

Designing side-by-side comparison tools (plan-compare, product-compare, alternative-compare) that help users decide rather than just listing features.

Design forms that convert, validate well, resist spam, and integrate cleanly with downstream systems.

Designing in-product tours, tooltips, and contextual help that teach product capabilities without becoming friction.

Designing lead magnets that earn the email.

Designing forms with multiple steps, progress indicators, conditional logic, and save-and-resume mechanics.

Designing first-run product onboarding wizards that get users to the ah-ha moment without overwhelming them.

Designing build-your-own product configurators (Tesla-style, custom-pricing, plan-builders) with constraint logic, real-time pricing, validation, and save-and-share mechanics.

Designing quizzes, personality assessments, and recommendation tools that segment users into actionable categories rather than generating clicks for clicks' sake.

Designing free-to-paid conversion flows for SaaS products.

Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation.

Add vertical container-size guide lines with mini corner squares for precise, structured web layouts.

Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells.

Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering.

Create minimal framed grid layouts with thin visible boundary lines, L-shaped corner brackets, subtle diagonal line texture, and strict section alignment.

Create a container-in-container layout system using nested frames.

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel.

Brand voice, visual identity, messaging frameworks, asset management, brand consistency.

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations.

Generate multiple original brand campaign worlds from a supplied visual reference while controlling how close the new work feels without copying protected signature elements.

Apply pre-composed aesthetic archetype defaults to jumpstart brand design work covering color, typography, layout, voice, and imagery direction.

Run upstream brand discovery covering audience research, competitive landscape, category dynamics, problem space, and positioning territory exploration.

Generate, evaluate, and narrow brand concepts during early ideation including positioning territories, naming candidates, mood directions, and narrative angles.

Build or audit a comprehensive brand style guide that documents the full brand system including story, logo system, color, typography, imagery, voice, applications, and dos/don'ts.

Develop or document a complete brand voice and tone system covering voice attributes, tone shifts by context, vocabulary preferences, grammar rules, and copy examples.

Create or refine a creative brief that bridges discovery and execution.

Generate logo variants for a brand, producing multiple production-grade marks across different architectures (wordmark, lockup, symbol-only, letterform-as-symbol, monogram) with rationale, a

Generate a complete, accessible brand design system from a brief , primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single th

根据品牌名称从 getdesign.md 自动获取设计规范并生成匹配风格的 UI 代码。支持 62 个顶级品牌风格（苹果/Apple、Notion、Claude、Stripe 等），支持中英文品牌名、混搭风格。当用户提到"XX风格"、"做成XX的感觉"、"参考XX设计"时触发。

Guide for creating logos, brand identities, and visual assets using AI tools , covers tool selection, prompt engineering, vectorization pipelines, mockups, automation, and IP safety.

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration.

Create beautiful visual art in .png and .pdf documents using design philosophy.

Knowledge and utilities for creating animated GIFs optimized for Slack.

Design banners for social media, ads, website heroes, creative assets, and print.

Elite website image-to-code skill for Codex.

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows.

Elite frontend image-direction skill for generating premium, conversion-aware website design references.

build/assets) similar to Unsplash for design mockups and marketing: backgrounds, abstract wallpapers, architecture, portraits, and headshots.

Use Iconify Simple Icons logos (64x64) instead of text logos.

Use Iconify Solar Duotone Bold icon style.

Unsplash asset images.

Plan and run a media pipeline for images, video, and downloadable assets.

Turn a reference image, screenshot, or mockup into token-driven, accessible code , infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it

Toolkit for styling artifacts with a theme.

Token architecture, component specifications, and slide generation.

Apply a visual direction , an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, m

Generate production-ready, accessible, token-driven component code for ANY framework , React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutte

Design a UI component spec to the house quality bar , anatomy, variants, sizes, the 8 states, token mapping, and accessibility.

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component).

Keep Figma and code in sync , map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, and verify component parity (va

Govern how the design system evolves , SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication.

Map this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…) , adopt their look, build on th

Set up or run the token build pipeline , transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compos

Overrides default LLM truncation behavior.

Audit a website or digital experience against its supplied source references for originality and plagiarism risk.

Profile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, m

Run a comprehensive WCAG accessibility audit covering perceivable, operable, understandable, and robust principles.

Audit the brand, UX, and site design of the leading sites in a vertical as a set of observable cross-site patterns, producing the experience bar a new build must meet or beat.

Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes.

Set up or run design QA gates , token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist.

Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table.

Optimize UI performance against Core Web Vitals , LCP, INP, CLS , with loading/code-split strategy, layout-shift prevention, and animation performance rules.

Create a dark atmospheric background with drifting vertical light folds, screen-blended glow, and a concentrated luminous corner or lower-edge bloom.

Apply CSS alpha masking with linear-gradient for horizontal or vertical edge fades (mask-image and -webkit-mask-image).

Apply subtle gradient-border treatments for premium web surfaces.

Create a gooey blob system using SVG filters where multiple shapes merge into a single fluid form.

Add decorative 01, 02, 03 numeric detail markers.

Create a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness.

Includes quick recipes and conventions for clean, consistent web design.

Plan and execute user research including research planning, recruiting, interview design, qualitative synthesis, and translating findings into product decisions.

Plan and run usability tests on existing or prototype designs including test design, task scripts, moderation, observation, and findings synthesis.

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts.

Write or review UI copy , buttons, errors, empty states, microcopy, notifications, labels , using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error

Semantic Design System Skill for Google Stitch.

Create polished 60 fps 4:3 4K browser screen-recording style videos from Codex in-app browser captures, with browser-only crop, natural macOS cursor styling, deliberate click choreography, z

Create a recurring daily UI inspiration capture.

Convert a supplied HTML page or generated HTML reference into a screenshot-backed article containing multiple reusable interaction prompts.

Capture or repair reliable full-page screenshots for lazy-loaded, scroll-animated, Framer, WebGL/canvas, or reveal-heavy web pages.

Turn a reference video into a super detailed recreation or inspiration prompt.