Interfaces (UI/UX)
Beautiful interfaces, branding and images. 290 skills
#1accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
#2design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
#3liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC
#4make-interfaces-feel-better
Helps your agent polish interface elements. Makes visual details like spacing and text look more refined and user-friendly.
affaan-m/ECC
#5motion-advanced
Lets your agent create complex interface animations. Helps with effects like drag and drop, gestures, and text or SVG animations.
affaan-m/ECC
#6motion-foundations
Helps your agent set up the foundation for interface animations. Defines rules and standards for animations to work well on different devices.
affaan-m/ECC
#7motion-patterns
Lets your agent animate common interface elements. Helps create smooth transitions for buttons, modals, toasts, and pages.
affaan-m/ECC
#8frontend-design-direction
Sets the design direction for user interfaces (UI) of websites and applications. It's useful for ensuring the product's look and feel is cohesive and aligned with project goals.
affaan-m/ECC
#9frontend-slides
Creates visual presentations with animations from files or from scratch. It helps turn ideas into attractive slides, even for non-designers.
affaan-m/ECC
#10ui-to-vue
Helps your agent convert UI screenshots into Vue 3 components. Useful when you have designs and need to turn them into code.
affaan-m/ECC
#11frontend-design
Guides your agent in creating unique and intentional visual interfaces. Helps define aesthetic direction and choose typography.
anthropics/skills
#12paperclip-capsules
Helps your agent create visuals for 'capsules'. This includes art for agents, status, and visual identification.
paperclipai/paperclip
#13wireframe
Lets your agent sketch simple screen layouts. Useful for planning app appearances before building them.
paperclipai/paperclip
#14design-critique
Lets your agent analyze and suggest improvements for product design. It focuses on enhancing user experience.
paperclipai/paperclip
#15contact-widget
Helps your agent create a floating chat widget. It's easy to use, with a welcome screen and contact options.
nexu-io/open-design
#16critique
Makes your agent analyze a website's design. It evaluates the look and functionality, giving suggestions for improvement.
nexu-io/open-design
#17dashboard
Helps your agent create a control panel. It shows important information and charts in an easy-to-understand format.
nexu-io/open-design
#18dating-web
Makes your agent create a dashboard for dating websites. It displays information about connections and trends visually.
nexu-io/open-design
#19flowai-live-dashboard-template
Creates a dashboard for managing teams with member and activity tabs. Shows important charts and statistics.
nexu-io/open-design
#20gamified-app
Has your agent prototype a gamified mobile app. Features daily quests, levels, and experience (XP).
nexu-io/open-design
#21github-dashboard
Generates a dashboard with GitHub repository analytics. Shows stars, forks, contributors, and recent activity.
nexu-io/open-design
#22html-ppt-taste-brutalist
Lets your agent create presentations with a specific visual style. It uses a dark theme, monospace fonts, and accent colors for a technical, retro look.
nexu-io/open-design
#23html-ppt-taste-editorial
Helps your agent create presentations with an elegant, minimalist editorial style. Useful for those needing clean, professional-looking slides.
nexu-io/open-design
#24html-ppt-zhangzara-editorial-tri-tone
Helps your agent define design systems for magazines. Establishes grids, color palettes, and layout kits for a new visual identity.
nexu-io/open-design
#25mobile-app
Has your agent render a mobile app screen inside an iPhone frame. It's useful for visualizing how an app looks on a phone. It helps create user interfaces for mobile apps.
nexu-io/open-design
#26mobile-onboarding
Helps your agent create an onboarding flow for mobile apps. It shows multiple screens in sequence, like splash, value proposition, and sign-in. It's useful for designing the first user experience in an app.
nexu-io/open-design
#27open-design-landing
Has your agent create a single-page website with an editorial and collage look. It's useful for presenting a brand or product in a unique and attractive way. It creates a visually striking website.
nexu-io/open-design
#28pricing-page
Helps your agent assemble a clear and informative pricing page. It organizes plans, compares features, and includes FAQs to help users choose.
nexu-io/open-design
#29saas-landing
Lets your agent create an attractive SaaS landing page. It includes essential sections like hero, features, social proof, pricing, and a call to action, following visual style.
nexu-io/open-design
#30social-media-dashboard
Lets your agent generate a social media analytics dashboard. It displays key metrics, growth charts, and top posts, helping creators understand their performance.
nexu-io/open-design
#31social-media-matrix-tracker-template
Helps your agent create a social metrics tracking dashboard. It offers multi-platform data, interactive charts, and comparisons, with light and dark themes.
nexu-io/open-design
#32trading-analysis-dashboard-template
Lets your agent create an advanced financial analysis dashboard. It allows viewing market data and simulating trades. Ideal for those needing a high-tech financial terminal.
nexu-io/open-design
#33tweaks
Allows interactive design adjustments. Your agent can create controls to change colors, fonts, and other elements in real time. Useful for exploring layout variations.
nexu-io/open-design
#34waitlist-page
Lets your agent create a simple pre-launch page. It collects emails to capture interest before launch. Perfect for new products or beta programs.
nexu-io/open-design
#35web-prototype-taste-brutalist
Creates a website prototype with a brutalist industrial style. It uses a newsprint look with strong fonts and hazard colors. Ideal for a bold and unique design aesthetic.
nexu-io/open-design
#36web-prototype-taste-editorial
Lets your agent generate a website prototype with an editorial minimalist design. It uses soft colors, serif fonts, and ample whitespace. Good for a clean and elegant look.
nexu-io/open-design
#37web-prototype-taste-soft
Helps your agent create a website prototype with a soft, modern look. It uses light colors, cards with rounded corners, and gentle animations. Ideal for a premium user experience.
nexu-io/open-design
#38web-prototype
Lets your agent create a desktop website prototype. It generates a single HTML file with various layouts. It's the default for marketing, documentation, or SaaS pages.
nexu-io/open-design
#39wireframe-annotated
Creates wireframes with detailed annotations to specify the design. It helps communicate engineering and UX requirements clearly.
nexu-io/open-design
#40wireframe-greybox
Generates blueprint-style wireframes, focusing on structure and layout. It's useful for planning the visual architecture before applying design.
nexu-io/open-design
#41wireframe-mobile-flow
Draws user flows for mobile apps, showing navigation between screens. It helps visualize the user journey and interconnectivity.
nexu-io/open-design
#42wireframe-sketch
Creates sketch-style wireframes, like on a whiteboard. It's useful for quickly exploring ideas and getting initial design feedback.
nexu-io/open-design
#43critique-theater
Performs a five-dimensional design quality review. It helps identify and fix flaws in design artifacts before delivery.
nexu-io/open-design
#44design-extract
Helps your agent extract design information like colors and fonts from code or images. This is useful for ensuring your project's design is consistent.
nexu-io/open-design
#45direction-picker
Helps your agent decide the visual direction of the design automatically. It uses project rules to do this without asking.
nexu-io/open-design
#46figma-extract
Helps your agent grab the design and assets from a Figma file. It organizes everything in your project for easy use.
nexu-io/open-design
#47token-map
Lets your agent connect design information with the project's design system. This creates a standard the agent can use to generate the design.
nexu-io/open-design
#48card-twitter
Lets your agent create cards for Twitter. It's good for sharing quotes or data in a visually appealing way in posts.
nexu-io/open-design