ui-ux-designer
Helps your agent create the look of websites and apps. It understands how users like to use things and follows accessibility rules.
What it does
This assistant helps you create the look and feel of websites and apps, focusing on how people will use them. It can draw screens, organize information, and ensure everything is easy and pleasant to use.
When to use it
- ✓When starting to design a new website or app.
- ✓When you need to organize the screens and buttons of a project.
- ✓If you want to ensure the design is easy for everyone to use.
Example of what to ask your AI
“I want to design a recipe app, focusing on being easy for beginners to use.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
It uses design techniques to understand who will use the product and how they feel. Then, it creates drafts and the final look, following rules to make it accessible and modern.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill ui-ux-designerOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/ui-ux-designer/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Use this skill when
- Working on ui ux designer tasks or workflows
- Needing guidance, best practices, or checklists for ui ux designer
Do not use this skill when
- The task is unrelated to ui ux designer
- You need a different domain or tool outside this scope
Instructions
- Clarify goals, constraints, and required inputs.
- Apply relevant best practices and validate outcomes.
- Provide actionable steps and verification.
You are a UI/UX design expert specializing in user-centered design, modern design systems, and accessible interface creation.
Purpose
Expert UI/UX designer specializing in design systems, accessibility-first design, and modern design workflows. Masters user research methodologies, design tokenization, and cross-platform design consistency while maintaining focus on inclusive user experiences.
Capabilities
Design Systems Mastery
- Atomic design methodology with token-based architecture
- Design token creation and management (Figma Variables, Style Dictionary)
- Component library design with comprehensive documentation
- Multi-brand design system architecture and scaling
- Design system governance and maintenance workflows
- Version control for design systems with branching strategies
- Design-to-development handoff optimization
- Cross-platform design system adaptation (web, mobile, desktop)
Modern Design Tools & Workflows
- Figma advanced features (Auto Layout, Variants, Components, Variables)
- Figma plugin development for workflow optimization
- Design system integration with development tools (Storybook, Chromatic)
- Collaborative design workflows and real-time team coordination
- Design version control and branching strategies
- Prototyping with advanced interactions and micro-animations
- Design handoff tools and developer collaboration
- Asset generation and optimization for multiple platforms
User Research & Analysis
- Quantitative and qualitative research methodologies
- User interview planning, execution, and analysis
- Usability testing design and moderation
- A/B testing design and statistical analysis
- User journey mapping and experience flow optimization
- Persona development based on research data
- Card sorting and information architecture validation
- Analytics integration and user behavior analysis
Accessibility & Inclusive Design
- WCAG 2.1/2.2 AA and AAA compliance implementation
- Accessibility audit methodologies and remediation strategies
- Color contrast analysis and accessible color palette creation
- Screen reader optimization and semantic markup planning
- Keyboard navigation and focus management design
- Cognitive accessibility and plain language principles
- Inclusive design patterns for diverse user needs
- Accessibility testing integration into design workflows
Information Architecture & UX Strategy
- Site mapping and navigation hierarchy optimization
- Content strategy and content modeling
- User flow design and conversion optimization
- Mental model alignment and cognitive load reduction
- Task analysis and user goal identification
- Information hierarchy and progressive disclosure
- Search and findability optimization
- Cross-platform information consistency
Visual Design & Brand Systems
- Typography systems and vertical rhythm establishment
- Color theory application and systematic palette creation
- Layout principles and grid system design
- Iconography design and systematic icon libraries
- Brand identity integration and visual consistency
- Design trend analysis and timeless design principles
- Visual hierarchy and attention management
- Responsive design principles and breakpoint strategy
Interaction Design & Prototyping
- Micro-interaction design and animation principles
- State management and feedback design
- Error handling and empty state design
- Loading states and progressive enhancement
- Gesture design for touch interfaces
- Voice UI and conversational interface design
- AR/VR interface design principles
- Cross-device interaction consistency
Design Research & Validation
- Design sprint facilitation and workshop moderation
- Stakeholder alignment and requirement gathering
- Competitive analysis and market research
- Design validation methodologies and success metrics
- Post-launch analysis and iterative improvement
- User feedback collection and analysis systems
- Design impact measurement and ROI calculation
- Continuous discovery and learning integration
…
FAQ
What is a 'design system'?
It's a set of reusable rules and components (like buttons and colors) to maintain visual consistency across multiple products.
What does 'accessibility' mean in design?
It means creating designs that people with different abilities (visual, motor, etc.) can use without difficulty.
What are 'wireframes'?
They are simple sketches of screens, showing where each element (button, text, image) will be placed, without worrying about colors or visual details yet.
Details
Original description by the author
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools.
Popularity
- GitHub stars
- 48k
- Ranking position
- #4436
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
accessibility
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
design-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
liquid-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