UI/UX Design Bundle | Prompeteer.ai

A bundle of skills to assist with user interface and user experience design tasks.

Browse all skill bundles

Included Skills (100)

React Email Builder — This tool empowers developers to design, preview, and render responsive HTML email templates using React components for seamless transactional and marketing communications.
MCP Create Adaptive Cards — Skill converted from mcp-create-adaptive-cards.prompt.md
Slack Gif Creator — Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack.
Tao Analyze Gaps Visual Changenet — Performs gap analysis on NVIDIA TAO VCN Classify (Visual Component Net) experiments by invoking the pinned TAO data-services container directly via `docker run … gap_analysis vcn_aoi …` — picks the optimal decision threshold, ranks per-sample weakness, and emits a top-K weakest parquet expanded per-lighting for downstream augmentation. Use when analyzing VCN classification failures, picking SDA augmentation targets, or auditing PASS/NO_PASS boundary cases.
FreeCAD Automation Expert — This skill generates production-quality Python scripts and macros for FreeCAD, helping engineers and designers automate parametric modeling, geometry manipulation, and custom GUI development.
Tao Route Visual Changenet Samples — Routes the weakest VCN samples (output of `tao-analyze-gaps-visual-changenet`) into per-augmentation-module
Brand Style Guide — This skill creates and maintains comprehensive brand style guides that define colors, typography, and design elements for designers and developers to ensure visual consistency.
UX Researcher Designer — UX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation, journey mapping, usability testing frameworks, and research synthesis. Use when conducting user research, creating personas, mapping user journeys, planning usability tests, or validating designs.
Article Layout Designer — Creates professional blog and article layouts with optimized typography and visual hierarchy for readability.
Swiftui UI Patterns — The skill builds SwiftUI screens and app architecture using proven patterns for state ownership, navigation shells, enum‑driven routes, and explicit async loading phases. It enables developers to assemble tabbed navigation, searchable lists, form sheets, and deep links while ensuring compatibility with the minimum OS for each API and providing fallbacks for older targets. SwiftUI developers who need to rapidly create robust, maintainable interfaces and navigation flows benefit from this solution.
Azure AI Textanalytics Py — Azure AI Text Analytics SDK for sentiment analysis, entity recognition, key phrases, language detection, PII, and healthcare NLP. Use for natural language processing on text.
Experiment Design Framework — This tool assists product teams in structuring rigorous A/B tests by defining clear hypotheses, calculating sample sizes, and establishing mandatory success metrics.
Aurora UI Designer — This skill provides implementation guidance for creating atmospheric, fluid lighting effects and glassmorphism aesthetics to help developers build visually immersive web interfaces.
Editorial Layout Designer — This tool provides sophisticated typography and magazine-inspired layout guidance to help developers create elegant, high-contrast digital interfaces for content-heavy web applications.
Vaporwave Design Guide — This guide provides developers and designers with implementation patterns for creating nostalgic 90s-inspired web interfaces featuring neon aesthetics and retro computing motifs.
Neo-Brutalism Design Guide — This guide provides developers and designers with implementation standards for creating high-contrast, bold, and structured Neo-Brutalist web and application interfaces.
Makepad Event Action — CRITICAL: Use for Makepad event and action handling. Triggers on: makepad event, makepad action, Event enum, ActionTrait, handle_event, MouseDown, KeyDown, TouchUpdate, Hit, FingerDown, post_action, makepad 事件, makepad action, 事件处理
Controlled Maximalism Designer — This guide assists designers and developers in creating dense, ornate, and highly curated digital interfaces that maintain structural integrity through strict grid layouts.
Cyberpunk UI Designer — This tool provides developers with implementation guidelines for creating high-tech, dystopian-themed interfaces featuring neon aesthetics, sharp geometries, and data-heavy visual elements.
Color Blocking Designer — This tool assists designers and developers in implementing bold, geometric color-blocked layouts using CSS Grid and high-contrast color palettes for striking visual impact.
Semi-Flat Design Guide — This guide provides implementation standards for semi-flat design, helping developers create modern, interactive interfaces with subtle shadows and improved visual depth.
Bento Grid Designer — This tool provides implementation guidelines for developers creating modular, Apple-inspired grid layouts to ensure consistent spacing, rounded compartments, and premium visual aesthetics.
Ubiquitous Language — The skill extracts candidate terms from team conversations, documents, and code, resolves synonyms and overloaded words, and writes concise definitions with examples. It tests these terms in spoken scenarios and produces a glossary file that includes open questions and a code‑rename list. Domain‑driven design teams benefit from consistent terminology across discussions and codebases.
Shadcn UI Manager — Facilitates the installation, configuration, and documentation of shadcn/ui components to help developers efficiently build and maintain consistent, modern design systems.
Makepad Animation — CRITICAL: Use for Makepad animation system. Triggers on: makepad animation, makepad animator, makepad hover, makepad state, makepad transition, "from: { all: Forward", makepad pressed, makepad 动画, makepad 状态, makepad 过渡, makepad 悬停效果
Tilda — Build and customize websites with Tilda — zero-code website builder with advanced customization. Use when someone asks to "build a website with Tilda", "Tilda Publishing", "customize Tilda site", "Tilda API", "landing page builder", "no-code website", "Tilda custom code", or "integrate Tilda with external services". Covers block-based building, custom HTML/CSS/JS, Tilda API, form handling, e-commerce, and integrations.
Synthwave Design Guide — This guide assists developers in implementing 80s-inspired neon aesthetics, dark backgrounds, and outrun grid visuals for web and mobile application interfaces.
Glassmorphism Design Guide — This guide provides developers and designers with technical implementation strategies for creating frosted glass effects, blurred backgrounds, and sleek, transparent interface elements.
Design System Assistant — Enforces consistent UI development by guiding developers to utilize standardized design tokens and core components instead of hard-coded values.
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.
Makepad Widgets — Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19 > > Check for updates: https://crates.io/crates/makepad-widgets
Product Discovery Guidance — Provides expert guidance for product teams to identify assumptions, design experiments, and prioritize validation using established discovery frameworks.
Telegram Bot Builder — Builds Telegram bots using the Bot API (grammy/telegraf/python-telegram-bot). Use when the user wants to create a Telegram bot, handle commands, build inline keyboards, process callbacks, send media, build conversational flows, handle payments (Telegram Stars), or create Mini Apps. Trigger words: telegram bot, telegram integration, telegram commands, inline keyboard, telegram webhook, telegram polling, telegram mini app, telegram payments, BotFather, grammy, telegraf.
Animation System Guide — Provides Makepad 2.0 animation guidance for developers building or debugging UI code.
Claymorphism Design Guide — This guide provides implementation strategies for developers and designers seeking to create soft, tactile, and playful 3D user interface elements.
AI Interface Designer — This guide helps developers implement conversational, adaptive, and aesthetically modern user interfaces tailored for generative AI applications and fluid user experiences.
Minimalist Design Guide — This guide provides implementation strategies for minimalist web and app layouts, helping designers achieve clean aesthetics through whitespace and typography.
Component Scaffolder — Scaffolds production-ready React components with TypeScript, tests, and accessibility.
Frontend Design Engineer — This skill enables developers to craft memorable, high-quality interfaces that adhere to specific aesthetic design systems while maintaining strict technical and performance constraints.
Responsive Layout Architect — This tool assists front-end developers in constructing mobile-first, adaptive web layouts using modern CSS techniques like Grid, Flexbox, and standard media breakpoints.
Kpi Dashboard Design — Comprehensive patterns for designing effective Key Performance Indicator (KPI) dashboards that drive business decisions.
Maximalist Design Guide — This guide provides implementation strategies for designers and developers aiming to create high-energy, sensory-rich web interfaces featuring clashing colors and dense layouts.
Spatial UI Designer — This tool provides implementation guidelines for environment-aware, glass-morphism interfaces to help developers create immersive, mixed-reality aesthetics for web and mobile applications.
Dark Mode Designer — This guide provides developers and designers with best practices for implementing accessible, high-contrast dark mode interfaces that reduce eye strain and improve aesthetics.
Browser Automation — Use when the user asks to automate browser tasks, scrape websites, fill forms, capture screenshots, extract structured data from web pages, or build web automation workflows. NOT for testing — use playwright-pro for that.
Frutiger Aero Designer — This guide assists developers in implementing early 2000s Frutiger Aero aesthetics, featuring glossy textures, nature-inspired motifs, and vibrant, optimistic color palettes.
Referral Program — The skill designs, specifies, and diagnoses referral and affiliate programs for software and subscription businesses, determining launch viability, reward levels, attribution, payout, and abuse prevention within the database and billing system. It measures program effectiveness and delivers actionable insights for improving usage. Clients benefit from a tailored, data‑driven approach that ensures their referral initiatives are profitable, compliant, and scalable.
Blender Addon Dev — Build custom Blender add-ons with Python. Use when the user wants to create a Blender add-on, register operators, build UI panels, add custom properties, create menus, package an add-on for distribution, or extend Blender with custom tools and workflows.
Makepad DSL Guide — Provides syntax guidance for building and debugging Makepad 2.0 UI code.
Flat Design Guide — This guide provides implementation standards for flat design aesthetics, helping developers create clean, two-dimensional interfaces using solid colors and sharp, simple geometric shapes.
Brutalist Typography Guide — This guide provides implementation strategies for brutalist typography, helping designers and developers create aggressive, high-impact layouts using raw, rule-breaking aesthetic principles.
Browser Automation Agent — This tool enables AI-driven browser navigation, form interaction, and data extraction to help developers automate complex web workflows and repeatable tasks.
Threat Actor Navigator — This tool generates MITRE ATT&CK Navigator heatmaps to help security analysts visualize threat actor TTPs, identify detection gaps, and prioritize defensive engineering efforts.
Layered Interface Designer — Provides implementation guidelines for developers creating depth-focused interfaces using overlapping elements, distinct stratification, and parallax effects for sophisticated web and app layouts.
Performance Optimizer — Optimizes application performance for developers facing bottlenecks or slow load times.
Pr Screenshots — Embed before/after screenshots and annotated images in pull request descriptions. Covers PR description patterns, image upload for Azure DevOps and GitHub, and sizing best practices.
Landing — Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth. Forcing intake (product + elevator pitch, audience register, brand overrides, tone) locks down positioning before any copy or markup is written, so the page reflects the actual product rather than generic boilerplate. Use whenever the user says 'landing for X', 'create a landing page', 'build a landing page', 'make a landing page for X', 'I need a web page for Y', or provides product/service details and wants a polished website. Also triggers on 'promotional page', 'product page', 'one-pager', 'web presence', 'sales page'. Outputs a single self-contained HTML file (Claude Code) or HTML artifact (Claude.ai). Supports configurable brand colors via CSS custom property overrides.
Ad Compliance Auditor — This tool performs multi-stage compliance reviews of advertising content against Chinese laws to help marketers identify legal risks and ensure regulatory adherence.
Salesforce Component Auditor — This skill enforces rigorous quality, security, and accessibility standards for Salesforce UI components to help developers build compliant and performant Lightning applications.
Mantine — Build React applications with the Mantine UI component library. Use when a user asks to use Mantine components, configure themes, implement forms with validation, add notifications, or build responsive layouts with Mantine hooks.
Rhino 3D Automation — This skill assists designers and engineers in authoring, debugging, and automating complex modeling tasks within Rhinoceros 3D using Python, VBScript, and RhinoCommon.
Nvflare Autofl Report — Generate a reproducible final report, literature-outcome synthesis, JSON summary, and refreshed progress plot for a stopped or interrupted NVFLARE Auto-FL campaign.
Popup Conversion Optimizer — This tool helps marketers and developers design high-converting, user-friendly popup strategies that capture leads while maintaining brand trust and accessibility standards.
Design System Architect — Creates scalable design systems and accessible interfaces for product teams and developers.
Slack Teams Migrator — This expert system assists developers in migrating Slack bots to Microsoft Teams, facilitating cross-platform bridging, UI conversion, and dual-platform bot development.
Visual Design Generator — Generates original visual designs as .png or .pdf documents based on user requests, creating aesthetic movements and visual philosophies.
Understand Figma — Analyze a Figma file via the Figma REST API and generate an interactive design knowledge graph (pages, screens, components, component sets, instances, design tokens) with a kind:"design" dashboard.
Apple Design Context — This tool maintains a centralized project configuration file to help developers receive tailored Apple Human Interface Guidelines advice across their codebase.
Citation Management — Manage citations systematically throughout the research and writing process.
Accelerator Application Assistant — This tool helps startup founders identify suitable accelerator programs and provides expert guidance for drafting high-quality applications and preparing for competitive interviews.
3D Game Developer — Provides principles for 3D game systems, covering rendering, shaders, physics, and cameras.
AI Elements — Build AI chat interfaces using ai-elements components — conversations, messages, tool displays, prompt inputs, and more. Use when the user wants to build a chatbot, AI assistant UI, or any AI-powered chat interface.
Animation Performance Optimizer — This tool audits and resolves animation performance issues like layout thrashing and jank to help developers create smooth, high-performance user interface transitions.
Conversion Landing Generator — Creates high-converting, performance-optimized Next.js landing pages with strategic copy frameworks to help marketers and developers launch effective lead generation campaigns quickly.
StyleSeed Motion Applier — This tool helps developers apply consistent StyleSeed animations to React components by mapping natural language descriptions to specific motion personality seeds.
Accessibility Auditor — Audits web pages and components for WCAG 2.2 compliance, helping developers fix accessibility issues.
Accesslint Audit — Find and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to a browser-MCP composition or HTML-string audits.
Deep Research — Run autonomous research tasks that plan, search, read, and synthesize information into comprehensive reports.
UI Update — Update StyleSeed engine in your project — analyzes what's outdated and updates safely
Screenshot UI Builder — Transforms mockups into real UI using existing components, then compares and refines the result against the original image.
GitHub Attachment Manager — This tool enables developers to upload local files to GitHub or download existing attachments directly from the terminal using the gh-attach extension.
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.
Chandra OCR Engine — Extract text from complex documents like tables and forms with high accuracy using the Chandra OCR engine.
Marketing Context Manager — This tool centralizes brand positioning and messaging into a single document, helping marketers maintain consistency and avoid repeating foundational information across tasks.
Accessibility Compliance Auditor — This tool audits and resolves HTML accessibility violations to ensure WCAG compliance, helping developers create inclusive and navigable web interfaces for all users.
UI Quality Scorer — Quantifies UI design quality against StyleSeed standards, providing developers with a 0-100 score, category breakdowns, and a prioritized list of necessary fixes.
Testing Library — Test UI components the way users interact with them using Testing Library — query by role, text, and label instead of implementation details. Use when someone asks to "test React components", "Testing Library", "user-centric testing", "test accessibility", "test without implementation details", or "render and query components in tests". Covers React Testing Library, queries, user events, async testing, and accessibility assertions.
Gpt Taste — Use when generating elite GSAP-heavy frontend pages with strict AIDA structure, wide hero typography, and gapless bento grids.
Makepad Dsl — CRITICAL: Use for Makepad DSL syntax and inheritance. Triggers on: makepad dsl, live_design, makepad inheritance, makepad prototype, "<Widget>", "Foo = { }", makepad object, makepad property, makepad DSL 语法, makepad 继承, makepad 原型, 如何定义 makepad 组件
Figma Automation — Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.
Apple Interface Designer — This skill helps web developers implement fluid, gesture-driven interfaces and spring-based animations inspired by Apple's design principles for a more natural user experience.
Webflow Expert Assistant — Assists designers and developers in building responsive websites and dynamic content using Webflow's visual builder and API integrations.
Office Hours — /c-level-agents:office-hours [topic] — YC-style 6-question founder interrogation before any advice. Forces clarity on problem, customer, distribution, defensibility, capital, and founder fit. Use when a founder question is too vague to route — e.g. 'should we grow faster?' — or before drafting a strategy brief.
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.
Visual Tuning Automator — This tool automates subjective visual refinement by using vision models to evaluate rendered variants and iteratively optimize parameters until the desired aesthetic is achieved.
Acceptance Orchestrator — Use when a coding task should be driven end-to-end from issue intake through implementation, review, deployment, and acceptance verification with minimal human re-intervention.
Apple Design Assistant — This tool helps developers implement Apple Human Interface Guidelines for inputs by leveraging existing project context to ensure consistent and accessible design.
Frontend Design Strategist — This skill provides strategic direction and intentionality for frontend developers by applying cross-disciplinary design principles to define purpose, tone, and visual identity.
Hig Components Layout — Apple Human Interface Guidelines for layout and navigation components.
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.