Design & Creative Bundle

UI/UX design systems, prototyping, animation, 3D modeling, accessibility, and creative workflow skills.

Browse all skill bundles

Included Skills (80)

UI UX Pro Max — UI UX Pro Max provides a local, searchable database of UI styles, color palettes, font pairings, chart types, and UX guidelines, enabling AI coding agents to generate a design system from a product description. Designers and developers use the tool to select styles, palettes, and typography, refine user flows, redesign interfaces, and create polished, intuitive forms and navigation. The skill streamlines the creation and improvement of UI/UX assets for professional teams.
Expo Design System — The Expo Design System skill generates and maintains a reusable theme of design tokens—including color, spacing, typography, radius, shadow, and motion—within an Expo app, ensuring consistent component structures across variants, sizes, and states. It extracts repeated views into shared components so that both hand‑crafted and AI‑generated screens appear polished and native. Designers, developers, and product teams benefit from standardized styles, library extensions, and drift audits that produce cohesive, high‑quality interfaces.
Design Theme Guide — Design-token register: colour, typography, spacing and radius tokens with light and dark values, contrast ratio and WCAG level. Use for design system documentation.
Frontend Design System — This skill provides mechanical implementation invariants for frontend developers to ensure consistent token architecture, typography, and motion across all UI components and pages.
Tailwind Design Architect — This skill helps developers build scalable, accessible, and production-ready design systems by standardizing UI patterns and component libraries using Tailwind CSS.
Aceternity UI — Aceternity UI supplies a curated library of animated React components—including 3D cards, spotlight effects, background beams, moving borders, and wavy backgrounds—built with Tailwind CSS and the motion library. Developers integrate them into React or Next.js projects via the shadcn CLI, enabling rapid deployment of dynamic hero sections, 3D tilt cards, and glowing backgrounds. Front‑end engineers benefit from polished, ready‑to‑use animations that enhance user engagement.
Impeccable — The Impeccable skill refines frontend interfaces—websites, dashboards, app shells, and forms—by optimizing visual hierarchy, accessibility, performance, and responsiveness. It addresses UX review, information architecture, typography, spacing, color, motion, micro‑interactions, and reusable design systems, ensuring designs are clear, engaging, and technically sound. Designers and product teams benefit from polished, user‑centric interfaces that balance boldness with subtlety while meeting internationalization and edge‑case requirements.
Web Animation Specialist — This tool helps developers build accessible, GPU-efficient CSS animations and motion design patterns to enhance user interface interactions and overall visual storytelling.
UI UX Designer — Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools.
Figma To Code — The Figma To Code skill converts Figma designs into production‑ready React, Vue, or HTML components with responsive layouts and design‑system code. By ingesting a Figma URL, screenshot, or exported tokens, it delivers pixel‑perfect UI implementations that developers and designers can deploy immediately. This streamlines design handoff and accelerates the conversion of mockups into deployable code for teams.
Antigravity Design Expert — Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.
Rayden UI Generator — This tool generates production-quality React and Tailwind CSS code using the Rayden UI library to help developers build consistent, design-system-compliant interfaces quickly.
Premium UI Architect — This skill helps developers and designers create high-end, agency-grade interfaces featuring sophisticated motion, refined typography, and polished spatial layouts for luxury digital products.
Frontend Design System — This skill provides a cohesive visual framework and design philosophy to help developers create polished, production-grade web interfaces that avoid generic AI aesthetics.
Design System Enforcer — This skill helps frontend developers and AI agents maintain design consistency by prioritizing local components and product-specific requirements over generic UI patterns.
Dark Mode UI — Build sophisticated dark-themed React applications using Tailwind CSS and Framer Motion for developers creating modern, high-performance dashboards and data-rich interfaces.
UI UX Design Assistant — This comprehensive design guide assists developers and designers in creating accessible, responsive, and aesthetically consistent web and mobile application interfaces.
Stitch Design Architect — This tool generates semantic DESIGN.md systems for Google Stitch, helping frontend developers enforce premium visual standards and prevent generic AI UI patterns.
Liuguang Banlan UI — Builds two parameterized UI modes—流光溢彩白 (iridescent white) and 五彩斑斓黑 (colorful black)—with OKLCH, WebGL/CSS fallback, vision gating, screenshot QA, and total/per-color intensity reports. Use when a UI request names either mode or needs measured color parameters.
Design System Auditor — This tool helps frontend developers ensure UI code adheres to design system tokens, component conventions, and accessibility standards for consistent, high-quality interfaces.
Animation Quality Auditor — This tool helps frontend developers evaluate animation and motion code for performance, accessibility, and interaction quality to ensure a polished user experience.
UX UI Evaluator — This tool helps developers and designers audit interfaces against research-backed principles to detect antipatterns and improve overall user experience quality.
Design Engineering Assistant — This tool helps frontend developers and designers craft polished, high-quality user interfaces with expert guidance on motion, interaction, and component design.
Duotone Design System — This guide helps designers and developers implement high-contrast, two-color aesthetic schemes for web and mobile applications using modern CSS techniques.
Design System Architect — This tool generates bespoke, editorial-grade design systems and token libraries to help developers and designers build consistent, intentional, and premium digital product interfaces.
Gpt Taste — Gpt Taste delivers meticulously engineered UX/UI and GSAP motion, ensuring each layout varies through Python-driven randomization while adhering to a strict AIDA structure. It applies wide editorial typography, gapless bento grids, and precise GSAP ScrollTriggers for pinning, stacking, and scrubbing, creating seamless, engaging page flows. Designers and developers benefit from its disciplined, high-performance implementation that enhances visual storytelling and interaction quality.
Design System Assistant — This tool assists developers in maintaining UI consistency by enforcing the use of standardized design tokens and core component library patterns.
Rayden Design Assistant — This tool enables designers and developers to build, maintain, and audit Rayden UI components in Figma while ensuring strict design system token compliance.
Visual Emotion Engineer — Create a visual direction brief for color, typography, imagery, and hierarchy when design must support a defined emotion, culture, and accessibility needs.
Minimalist UI Architect — This tool helps frontend developers design refined, editorial-style interfaces using warm monochrome palettes, crisp borders, and restrained motion for a professional aesthetic.
UI Screenshot Converter — This tool transforms UI screenshots and design mockups into functional, responsive front-end code, helping developers rapidly prototype and recreate visual interfaces with precision.
Color Palette Generator — This tool extracts dominant colors from images or websites to create accessible, professional design palettes for developers and UI designers.
Typography System Architect — This tool helps designers and developers build consistent, scalable typographic systems by auditing existing styles and generating optimized tokens, Tailwind configurations, and CSS.
Material UI — The Material UI skill integrates the @mui/material React component library into React or Next.js App Router projects, enabling developers to add prebuilt UI components such as buttons, forms, dialogs, tables, and layout grids. It offers a theming system that lets teams create brand themes with createTheme and ThemeProvider, style components with the sx prop, and implement dark mode via CSS theme variables. The skill also supports upgrading legacy v5–v7 code to the current v9 API with official codemods, streamlining maintenance for modern web applications.
Uxkin Research — Research how real products handle a screen, flow or visual style before designing it: search UXKIN's real iOS screens, user journeys and website design systems, compare several and report what they share.
Radix UI — Build accessible UI primitives with Radix UI. Use when creating accessible dropdowns, dialogs, popovers, tabs, tooltips, or building a design system with unstyled, composable components.
Design System Architect — This tool helps developers and designers build scalable design systems by generating standardized tokens, base components, and configuration files for modern web projects.
Motion System Architect — This tool helps designers and developers establish cohesive motion language systems, generating standardized tokens, Framer Motion variants, and CSS for consistent product animation.
Expo Native UI — The Expo Native UI skill enables developers to create polished, native‑looking screens for Expo apps using Apple HIG styling, semantic colors, native controls, SF Symbols, media, visual effects, gradients, storage, and responsive layout. It streamlines design so teams can focus on functionality while maintaining a consistent, high‑quality user experience. iOS and Android developers benefit from seamless integration with Expo’s ecosystem and the ability to extend navigation and animation through complementary skills.
Frontend Design — The skill provides expert frontend design guidelines that enable the creation of modern, visually appealing user interfaces. It is applied when designing landing pages, dashboards, hero sections, responsive layouts, or improving AI-generated UI quality with design‑system controls. The result is a polished, consistent UI that enhances user experience for web applications.
Design System Wizard — This interactive setup tool guides developers through configuring the StyleSeed design system for new React and Tailwind projects step-by-step.
Tailwind Architecture Guide — This skill provides developers with modern Tailwind CSS v4 best practices, focusing on CSS-first configuration, design token architecture, and high-performance styling patterns.
Typography Design Guide — This guide assists designers and developers in implementing high-impact, text-centric interfaces that prioritize bold typography over traditional UI elements for a minimalist aesthetic.
Design Md — The Design Md skill reads a DESIGN.md file from the project root and extracts a plain‑text design system. It then produces pixel‑perfect UI components that strictly follow the specified design, ensuring consistency across all AI‑generated elements. This capability benefits teams building interfaces with AI, allowing them to maintain design uniformity or accurately replicate the look of existing websites.
UI Interaction Enhancer — This tool provides curated micro-interactions and creative design patterns to help developers transform standard interfaces into memorable, high-quality digital experiences for their users.
Isometric Design Guide — This guide assists developers in implementing parallel projection aesthetics for technical illustrations and 3D-style UI elements without using complex vanishing points.
Spatial Interface Designer — This skill provides implementation guidelines for developers creating immersive 3D UI elements, perspective effects, and interactive spatial depth for web and mobile applications.
Stitch Prompt Optimizer — Refines vague UI concepts into structured, high-quality prompts for Stitch, helping designers and developers achieve consistent and professional design system results.
Design System Assistant — Enforces consistent UI development by guiding developers to utilize standardized design tokens and core components instead of hard-coded values.
Image Analysis — The Image Analysis skill extracts actionable data from an image, including file properties, color palettes with area coverage, and the colors and sizes of individual elements, and produces structured layout descriptions and outputs CSS variables, a Tailwind theme block, or a written brief. Designers, developers, and marketers use it to quickly pull color schemes, match CSS to mockups, and diagnose visual inconsistencies.
Apple-Level Product Design — This skill provides expert guidance on creating high-end product design systems, UX flows, and accessible visual languages for professional product designers and developers.
UI States — Design and build the UI states agents forget: first use, empty, loading, error, offline, no results, long content, permission denied and success.
Iconsax Design Assistant — This skill provides developers and designers with access to a premium icon library and AI-driven generation tools for consistent, high-quality UI interfaces.
Premium Landing Composer — This tool helps developers build bespoke, high-conversion landing pages using Next.js, Tailwind, and Framer Motion with human-crafted copy and professional design systems.
Premium UI Architect — This skill empowers AI to engineer high-end, agency-level digital experiences by enforcing sophisticated design systems, fluid motion, and premium aesthetic standards for professional developers.
Illustrator Automation Expert — This skill provides expert guidance for writing, debugging, and optimizing ExtendScript automation to streamline complex Adobe Illustrator workflows and document manipulation tasks.
Brand Guidelines — The skill creates and updates comprehensive brand style guides that enforce a consistent visual identity across every touchpoint. It defines colors, typography, and design system elements, producing clear standards documentation for designers, marketers, and product teams. By serving as a single source of truth, it streamlines brand consistency and accelerates onboarding for new projects.
Blog Article Design — The skill designs and implements high‑quality blog post and article page layouts, using professional typography, spacing, and visual hierarchy. It is applied to blog pages, article templates, technical documentation readers, use‑case pages, and long‑form content layouts, ensuring a cohesive look across all formats. The designs support both dark and light themes, providing a polished experience for readers and content creators alike.
Free Design Resources — Design resource register: resource and provider, licence type, commercial-use and attribution rules, export format, lock-in risk, free tier limit and accessibility notes. Use for tool vetting.
Magicui — Magicui offers a curated collection of animated React components built on Tailwind CSS and shadcn/ui, including marquees, number tickers, shimmer buttons, confetti, globes, and animated beams. Designers and developers use the library to quickly embed engaging visual effects, particle or meteor backgrounds, text animations, and dynamic counters into landing pages. The result is striking hero sections and interactive UI elements that captivate users.
Contrast Check — The Contrast Check skill computes WCAG 2.x contrast ratios for any two colors, grades them against AA and AAA thresholds for body text, large text, and non‑text UI elements, and recommends the nearest shade that meets the standard. Designers, developers, and accessibility auditors use it to verify readability, correct low‑contrast text, audit design tokens, and enforce contrast compliance in CI pipelines. It accepts hex, rgb(), alpha values, full palettes, and works with both light and dark themes.
UI From Screenshot — Turn a screenshot or mockup into matching UI with the project's own components, then compare the result side by side with the image and fix the differences.
Build UI — Step-by-step workflow for UI work: read the project, follow the plan for the job (new screen, dashboard, polish, simplify, review), then render, fix and check again.
UI Style Router — Routes frontend development tasks to forty-eight distinct, opinionated design aesthetics to help developers generate high-quality, non-generic user interfaces for websites and applications.
Animation Craft Reviewer — This tool evaluates animation and motion code against rigorous design engineering standards to ensure high-quality, performant, and polished user interface transitions.
Creative Mood Boarder — This tool helps designers and creative teams compile visual inspiration, color palettes, and typography references to align stakeholders on project aesthetics.
Creative Asset Auditor — This tool helps creative teams and project managers verify that assets meet brand, accessibility, and localization standards before final publication.
Lottie — The Lottie skill renders After Effects vector animations as JSON in the browser with lottie-web, enabling developers to embed motion graphics, animated icons, loading indicators, and micro‑interactions into web applications. It offers playback control, event listening, runtime recoloring, and seamless integration with React, Vue, or vanilla JavaScript. Front‑end engineers and UI designers gain lightweight, high‑quality animation solutions that enhance user experience.
Gradient Design System — This guide assists developers and designers in implementing vibrant, animated gradient aesthetics to create modern, energetic, and visually engaging web and mobile interfaces.
Design System Linter — This tool performs rapid automated scans to identify hardcoded design violations, helping developers maintain consistent styling across their codebase.
Accessibility Auditor — The Accessibility Auditor evaluates web pages and components against WCAG 2.2 standards, identifying issues such as screen reader incompatibilities, color contrast deficiencies, and keyboard navigation failures. It provides actionable insights that help developers, designers, and compliance teams meet regulations like the European Accessibility Act and ADA. The service streamlines the audit process, enabling teams to deliver accessible digital experiences efficiently.
Design Engineering Consultant — This skill applies Emil Kowalski's design engineering philosophy to help developers build polished, high-quality interfaces through meticulous attention to detail and animation.
Animation Implementation Specialist — This skill helps design engineers craft high-quality, purposeful motion implementations that adhere to professional animation standards and design philosophies for web components.
Design Prototyping Tool — This tool helps developers quickly build throwaway prototypes to validate complex logic or explore UI design variations before committing to production code.
Design Token Manager — This tool enables developers to efficiently view, add, and modify design tokens within the StyleSeed system to maintain consistent UI styling.
Retro Aesthetic Designer — This skill provides implementation guidelines for vintage 60s-80s web aesthetics, helping developers create nostalgic layouts using warm color palettes, classic typography, and analog textures.
Blender Grease Pencil — The skill allows users to programmatically create and manipulate Grease Pencil objects in Blender, drawing strokes, building 2D animations, and managing layers and frames via Python. It supports applying modifiers, setting up drawing guides, and scripting any 2D animation workflow. Artists, animators, and developers benefit from precise, code‑driven control over their 2D projects.
Monochromatic UI Designer — This guide assists designers and developers in creating elegant, high-contrast interfaces by utilizing a single-hue color palette and strict visual discipline.
Makepad 2 0 Animation — Makepad 2.0 guidance for animation; use when building or debugging Makepad UI code.
Material Design Guide — This guide assists developers in implementing Google's Material Design aesthetic, focusing on elevation, motion, and consistent component structures for web applications.