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—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.
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. It accepts a Figma URL, design screenshot, or exported design tokens, producing pixel‑perfect UI implementations for developers and designers. The tool streamlines the design handoff, allowing teams to rapidly transform mockups into deployable code.
Spatial Motion Designer — This expert creates immersive, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS to help developers build highly interactive, spatial UI experiences.
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.
UI UX Designer — This expert assistant helps designers and developers create accessible, user-centered interfaces by leveraging modern design systems, atomic methodology, and scalable token-based architecture.
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.
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.
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 lets developers build polished, native‑looking screens for Expo apps, applying 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.
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.
Article Design System — Designs professional blog and article layouts with optimized typography and spacing, benefiting developers building content-rich web pages.
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. It generates 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.
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.
Frontend Design — The Frontend Design skill applies expert guidelines to create visually appealing, modern interfaces for landing pages, dashboards, hero sections, and responsive layouts. It elevates AI‑generated UI quality through design‑system controls, producing polished, cohesive web applications that meet contemporary standards. Product managers, developers, and designers benefit from high‑quality interfaces delivered quickly.
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 supplies ready‑made animated React components—including marquees, number tickers, shimmer buttons, confetti, globes, and animated beams—built on Tailwind CSS and shadcn/ui. Designers and developers use the library to quickly enhance landing pages with engaging visual effects, particle or meteor backgrounds, text animations, and dynamic counters. The result is impressive hero sections and interactive UI elements that captivate users.
Contrast Check — The Contrast Check skill calculates WCAG 2.x contrast ratios between two colors, grades them against AA and AAA thresholds for body text, large text, and non‑text UI elements, and suggests 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 supports hex, rgb(), alpha values, full palettes, and both light and dark themes.
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 vector animations exported from After Effects and other motion tools as JSON in the browser using the lottie-web player. It enables developers to embed motion graphics, animated icons, loading indicators, and micro‑interactions into web applications, controlling playback, listening to events, recoloring at runtime, and integrating with React, Vue, or vanilla JavaScript. Front‑end engineers and UI designers benefit from 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.
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.
Frontend UI Engineering — The skill builds production‑quality, accessible, responsive user interfaces, creating reusable components, implementing layouts, and managing state. It ensures WCAG compliance while delivering a polished, professional look suitable for production deployments. Developers and product teams benefit from reliable, high‑quality interfaces that accelerate application delivery.
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 Compositing — The skill automates Blender 5.x compositor workflows through Python scripting, allowing artists and technical directors to build node graphs, apply post‑processing effects, color correct, combine render passes, add blur or glare, key green screens, and export multilayer EXR files. It also resolves compatibility issues introduced after Blender 5.0, such as missing scene.node_tree, CompositorNodeComposite, glare_type, and file_slots, ensuring a reliable, script‑based compositing pipeline.
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.
Motion — Motion is a React animation library that animates components through declarative props, enabling fade‑ins, hover and tap effects, exit animations with AnimatePresence, layout and shared‑element transitions, scroll‑linked or scroll‑triggered effects, and staggered lists. Designers and developers use it to create smooth, interactive interfaces and to migrate from framer‑motion to the motion package.
Scroll Animation Specialist — This skill generates production-grade scroll-driven motion effects using GSAP and Framer Motion to help developers implement complex, high-performance animations in web applications.
Rive — The Rive skill lets developers load .riv files, control state machines, and react to user input, embedding interactive animations in web and mobile apps. It is ideal for dynamic UI and character animations, animated icons with hover or click states, and game‑like interactions in production environments. Product designers, UI/UX teams, and mobile developers benefit from seamless, responsive animation integration.
Web Project Brainstorming — Masterclass framework for brainstorming web development projects and page designs. Outlines structural phases for concept, UX flow, styling aesthetics, technical architecture, and SEO.
UI Design Auditor — This tool evaluates frontend code against professional design standards to identify and resolve common aesthetic inconsistencies that make interfaces appear generic or AI-generated.
Design System Synthesizer — This tool analyzes Stitch projects to generate comprehensive DESIGN.md files, helping developers maintain consistent design language across all generated application screens.