Best skills for UI/UX designer
As a UI/UX designer, your job is to craft intuitive, user-centered experiences. But mastering design tools alone isn't enough—you need to bridge the gap between visual design and development reality. The AI coding skills on this page are curated to help you do exactly that. Take Domain-Driven Design (DDD): it gives you a shared language with developers so your interfaces reflect the actual business domain, not just aesthetic choices. Then there's the Definition of Done (DoD) for platforms—a skill that lets you clearly define when a design feature is truly complete, cutting down ambiguity and rework. And while NClaude Chat's multi-session communication might sound technical, it's a practical way to manage design feedback across multiple contexts without losing the thread. A common pitfall? Overcomplicating DDD upfront—start small, with a simple event storming session. These skills won't turn you into a developer, but they will make you a more effective collaborator. Dive in and find the ones that fit your design process.
24 skills selected
Design Craft: Creating Delightful User Experiences
Development
Focuses on the emotional and aesthetic details that transform functional apps into delightful experiences. Covers empty state patterns that welcome users, loading states that reduce perceived wait time, and micro-interactions that provide polished feedback. Helps developers bridge the gap between visually polished interfaces and truly loved products.
Datagrok UI Building Guidelines
Development
Rules and patterns for building Datagrok TypeScript UI: lazy tabs, grids, viewers, layouts, dialogs, and popup toggle menus.
Personal Brand Guidelines Generator
Content
Walks a user through brainstorming and generating a custom personal brand guidelines document with structured questions and style directions.
Figma to Lumos token conversion
Development
Build a page or fill Lumos for Astro variables from a Figma file, handling messy designs and reconciling tokens with clear conversion rules.
Frontend Design
Development
Create distinctive, production-grade frontend interfaces with exceptional attention to aesthetic details and creative choices.
Fix a Design-System Finding
Development
Fix a specific design-system integration finding in a Figma screen or component, including missing shared components, local overrides, and unbound tokens.
Trust & Reliability Animations
Development
Guidelines for creating predictable, credible UI animations that build user trust through controlled motion and consistent timing.
Sync Figma Design Tokens Locally
Development
Extract design tokens and component definitions from a Figma file via the Figma MCP server and save them as local JSON files for use by hp-gen.
Figma API - Design File Data Extraction
Development
Extracts design file data from Figma using the REST API. Retrieves file structure, node properties, and style information such as colors, typography, and effects. Useful for automating design token extraction or inspecting component details without manually opening the file.
Figma Integration
Development
This skill lets you read Figma files, export assets, and manage comments. Use it to fetch designs, export images, or work with Figma components via terminal commands.
Figma Design Analyzer
Development
Analyzes Figma designs against code conventions for implementation readiness. Checks design-code parity, semantic token usage, and property naming consistency. Use when reviewing a Figma component before coding.
Figma Integration Skill
Development
Comprehensive Figma integration for implementing designs as production-ready code, connecting components via Code Connect, and generating design system rules.
Brainstorming Ideas Into Designs
Development
Guides users through collaborative dialogue to refine ideas into approved designs and specs before implementation, with a structured checklist and review process.
Jetpack Compose Best Practices
Development
Best practices for Jetpack Compose UI development: state hoisting, modifier usage, performance optimizations, theming, and previews.
CLI UX Polish with Interactive Prompts
Development
Improve your Node.js CLI's user experience with @clack/prompts for interactive flows, update-notifier for version checks, and enhanced Commander.js help text with examples and colors.
Discovery-First Development Workflow
Development
This skill implements a discovery-first development workflow: before creating worktrees for non-trivial features, it asks clarifying questions, proposes approaches with trade-offs, incrementally validates the design, and generates an executable implementation plan with verification commands. Use it when requirements are unclear, the task touches multiple files, or significant refactoring is needed.
INOV8 Orthopedics Design System
Content
Applies the INOV8 Orthopedics brand system: color and type tokens, components, and strict brand rules for any page, slide, or production UI.
Design System Style Guide
Development
Design system reference for building UI: colors, typography, spacing, components, and light/dark themes. Use existing tokens instead of inventing new values.
UI Accessibility Audit
Development
Audit StyleSeed components and pages for WCAG 2.2 AA issues, then apply safe accessibility fixes for touch targets, focus, contrast, labels, and reduced motion.
Capture Webpage to Figma
Development
Captures a live webpage as a Figma design using Playwright and a configured Figma design MCP. It handles both external sites (by bypassing CSP) and local servers (by injecting a capture script), then polls for completion. Useful for quickly turning any live page into a Figma frame for design review.
Unity UI Panel with DOTween Animations
Development
Pattern for implementing UI panels with show/hide lifecycle and DOTween animations, including singleton pattern, inspector configuration, and game event reactions.
Figma Design
Development
Interacts with Figma design files through the browser using the Figma Plugin API. Can create shapes, modify properties, and extract information from a design file. Helps automate design tasks or retrieve data from mockups.
Figma Spacing System
Development
Create a complete spacing and layout token system for a Figma design system, including grid and component conventions.
Web Design
Development
Web visual design skill. Two-phase workflow: first output a DESIGN.md spec for user approval, then generate UI/UX, visual, animation, responsive code.
How to choose
- How are these skills selected?
- An algorithm picks them among the published skills that match this page's criteria, such as category, tags or compatible tools. It ranks them by the quality score a language model gave them. On ranking pages, it also weighs GitHub stars and the security rating. Nobody reviews them one by one.
- What do the security ratings mean?
- A language model reads the SKILL.md file, without running it, and gives it a rating. Safe means it sees no meaningful execution risk. Caution means the skill uses powerful tools such as bash, docker or the network for a legitimate purpose. Risky means it asks for destructive actions, for secrets to be sent out, or for obfuscated code to run; a skill rated Risky is never published. The rating does not replace your own reading of the file.
- How do I install a skill?
- Open any skill page and follow its install instructions for your tool — Claude Code, Cursor or Copilot. Each skill lists the exact steps so you can get it running in a couple of minutes.