Design skills for AI coding agents.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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.

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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.

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

UI/UX design intelligence for web and mobile.

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

Elite UX/UI & Advanced GSAP Motion Engineer.

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

Upgrades existing websites and apps to premium quality.

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

Webgl landing steering.

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

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.

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: A landing page that explains the product faster and gives the primary CTA a job.

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

Result: Transitions that make the interface easier to follow and still feel fast.

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

Result: Transitions that make the interface easier to follow and still feel fast.

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

Result: Transitions that make the interface easier to follow and still feel fast.

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

Result: Transitions that make the interface easier to follow and still feel fast.

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

Result: Transitions that make the interface easier to follow and still feel fast.

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

Result: Transitions that make the interface easier to follow and still feel fast.

Apply seamless infinite marquee loops using duplicated items.

Result: Transitions that make the interface easier to follow and still feel fast.

Create masked staggered word reveals on scroll with GSAP ScrollTrigger.

Result: Transitions that make the interface easier to follow and still feel fast.

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

Result: Transitions that make the interface easier to follow and still feel fast.

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

Result: Transitions that make the interface easier to follow and still feel fast.

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

Result: Transitions that make the interface easier to follow and still feel fast.

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

Result: Transitions that make the interface easier to follow and still feel fast.

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.

Result: Transitions that make the interface easier to follow and still feel fast.

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

Result: Transitions that make the interface easier to follow and still feel fast.

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

Result: A 3D-led interface that supports the message instead of competing with it.

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

Result: A 3D-led interface that supports the message instead of competing with it.

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

Result: A 3D-led interface that supports the message instead of competing with it.

js).

Result: A 3D-led interface that supports the message instead of competing with it.

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

Result: A 3D-led interface that supports the message instead of competing with it.

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.

Result: A 3D-led interface that supports the message instead of competing with it.

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

Result: A 3D-led interface that supports the message instead of competing with it.

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

Result: A 3D-led interface that supports the message instead of competing with it.

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

Result: A 3D-led interface that supports the message instead of competing with it.

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

Result: A 3D-led interface that supports the message instead of competing with it.

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

Result: A 3D-led interface that supports the message instead of competing with it.

Unicorn studio.

Result: A 3D-led interface that supports the message instead of competing with it.

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

Result: A 3D-led interface that supports the message instead of competing with it.

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

Result: A 3D-led interface that supports the message instead of competing with it.

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.

Result: A 3D-led interface that supports the message instead of competing with it.

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

Result: Interfaces that are easier to scan, operate, and extend across real product states.

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

Result: Interfaces that are easier to scan, operate, and extend across real product states.

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

Result: Interfaces that are easier to scan, operate, and extend across real product states.

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

Result: Interfaces that are easier to scan, operate, and extend across real product states.

Includes checklists, templates, and common pitfalls.

Result: Interfaces that are easier to scan, operate, and extend across real product states.

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

Result: Interfaces that are easier to scan, operate, and extend across real product states.

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

Result: Interfaces that are easier to scan, operate, and extend across real product states.

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

Result: Interfaces that are easier to scan, operate, and extend across real product states.

Designing conversational flows for website chatbots and AI agents.

Result: Interfaces that are easier to scan, operate, and extend across real product states.

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

Result: Interfaces that are easier to scan, operate, and extend across real product states.

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

Result: Interfaces that are easier to scan, operate, and extend across real product states.

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

Result: Interfaces that are easier to scan, operate, and extend across real product states.

Designing lead magnets that earn the email.

Result: Interfaces that are easier to scan, operate, and extend across real product states.

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

Result: Interfaces that are easier to scan, operate, and extend across real product states.

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

Result: Interfaces that are easier to scan, operate, and extend across real product states.

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

Result: Interfaces that are easier to scan, operate, and extend across real product states.

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

Result: Interfaces that are easier to scan, operate, and extend across real product states.

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

Result: Interfaces that are easier to scan, operate, and extend across real product states.

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

Result: Layouts that stay coherent as content and viewport size change.

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

Result: Layouts that stay coherent as content and viewport size change.

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

Result: Layouts that stay coherent as content and viewport size change.

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

Result: Layouts that stay coherent as content and viewport size change.

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

Result: Layouts that stay coherent as content and viewport size change.

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

Result: Layouts that stay coherent as content and viewport size change.

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

Result: A product surface that looks recognizably yours, not like a generic UI kit.

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

Result: A product surface that looks recognizably yours, not like a generic UI kit.

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

Result: A product surface that looks recognizably yours, not like a generic UI kit.

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

Result: A product surface that looks recognizably yours, not like a generic UI kit.

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

Result: A product surface that looks recognizably yours, not like a generic UI kit.

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

Result: A product surface that looks recognizably yours, not like a generic UI kit.

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

Result: A product surface that looks recognizably yours, not like a generic UI kit.

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.

Result: A product surface that looks recognizably yours, not like a generic UI kit.

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

Result: A product surface that looks recognizably yours, not like a generic UI kit.

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

Result: A product surface that looks recognizably yours, not like a generic UI kit.

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

Result: A product surface that looks recognizably yours, not like a generic UI kit.

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

Result: A product surface that looks recognizably yours, not like a generic UI kit.

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

Result: A product surface that looks recognizably yours, not like a generic UI kit.

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

Result: A product surface that looks recognizably yours, not like a generic UI kit.

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

Result: Visual assets that support hierarchy and meaning instead of filling empty space.

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

Result: Visual assets that support hierarchy and meaning instead of filling empty space.

Knowledge and utilities for creating animated GIFs optimized for Slack.

Result: Visual assets that support hierarchy and meaning instead of filling empty space.

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

Result: Visual assets that support hierarchy and meaning instead of filling empty space.

Elite website image-to-code skill for Codex.

Result: Visual assets that support hierarchy and meaning instead of filling empty space.

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

Result: Visual assets that support hierarchy and meaning instead of filling empty space.

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

Result: Visual assets that support hierarchy and meaning instead of filling empty space.

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

Result: Visual assets that support hierarchy and meaning instead of filling empty space.

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

Result: Visual assets that support hierarchy and meaning instead of filling empty space.

Use Iconify Solar Duotone Bold icon style.

Result: Visual assets that support hierarchy and meaning instead of filling empty space.

Unsplash asset images.

Result: Visual assets that support hierarchy and meaning instead of filling empty space.

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

Result: Visual assets that support hierarchy and meaning instead of filling empty space.

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

Result: Visual assets that support hierarchy and meaning instead of filling empty space.

Toolkit for styling artifacts with a theme.

Result: A UI language that stays consistent while the product grows.

Token architecture, component specifications, and slide generation.

Result: A UI language that stays consistent while the product grows.

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

Result: A UI language that stays consistent while the product grows.

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

Result: A UI language that stays consistent while the product grows.

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

Result: A UI language that stays consistent while the product grows.

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

Result: A UI language that stays consistent while the product grows.

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

Result: A UI language that stays consistent while the product grows.

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

Result: A UI language that stays consistent while the product grows.

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

Result: A UI language that stays consistent while the product grows.

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

Result: A UI language that stays consistent while the product grows.

Overrides default LLM truncation behavior.

Result: A more usable interface with fewer avoidable contrast, focus, and interaction failures.

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

Result: A more usable interface with fewer avoidable contrast, focus, and interaction failures.

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

Result: A more usable interface with fewer avoidable contrast, focus, and interaction failures.

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

Result: A more usable interface with fewer avoidable contrast, focus, and interaction failures.

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.

Result: A more usable interface with fewer avoidable contrast, focus, and interaction failures.

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

Result: A more usable interface with fewer avoidable contrast, focus, and interaction failures.

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.

Result: A more usable interface with fewer avoidable contrast, focus, and interaction failures.

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

Result: A more usable interface with fewer avoidable contrast, focus, and interaction failures.

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

Result: A more usable interface with fewer avoidable contrast, focus, and interaction failures.

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

Result: More expressive surfaces that remain maintainable and responsive.

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

Result: More expressive surfaces that remain maintainable and responsive.

Apply subtle gradient-border treatments for premium web surfaces.

Result: More expressive surfaces that remain maintainable and responsive.

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

Result: More expressive surfaces that remain maintainable and responsive.

Add decorative 01, 02, 03 numeric detail markers.

Result: More expressive surfaces that remain maintainable and responsive.

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

Result: More expressive surfaces that remain maintainable and responsive.

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

Result: More expressive surfaces that remain maintainable and responsive.

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

Result: Flows that answer user questions earlier and reduce unnecessary friction.

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

Result: Flows that answer user questions earlier and reduce unnecessary friction.

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.

Result: Flows that answer user questions earlier and reduce unnecessary friction.

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

Result: Flows that answer user questions earlier and reduce unnecessary friction.

Semantic Design System Skill for Google Stitch.

Result: Less random iteration and a clearer path from design intent to implementation.

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

Result: Less random iteration and a clearer path from design intent to implementation.

Create a recurring daily UI inspiration capture.

Result: Less random iteration and a clearer path from design intent to implementation.

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

Result: Less random iteration and a clearer path from design intent to implementation.

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

Result: Less random iteration and a clearer path from design intent to implementation.

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

Result: Less random iteration and a clearer path from design intent to implementation.