Ui Ux Designer
Shape screens, wireframes, and token-based design systems with accessibility and research baked in before you implement UI in code.
Overview
ui-ux-designer is an agent skill most often used in Build (also Validate prototype and Idea audience research) that guides wireframes, design systems, and accessible UI/UX for solo builders.
Install
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill ui-ux-designerWhat is this skill?
- Atomic design and design-token workflows (Figma Variables, Style Dictionary)
- Component libraries with documentation and multi-brand system scaling
- Accessibility-first patterns and inclusive UX checks
- User research methodology guidance before locking UI decisions
- Governance and maintenance playbooks via resources/implementation-playbook.md
Adoption & trust: 1.6k installs on skills.sh; 40.1k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need professional interface structure and system thinking but only have an agent and scattered Figma or code notes.
Who is it for?
SaaS or app founders defining MVP UI, refreshing a component library, or baking WCAG-minded patterns into a new screen flow.
Skip if: Pure marketing copy, LinkedIn posts, or tasks with no interface or design-system angle.
When should I use this skill?
Working on UI/UX designer tasks or workflows, or needing guidance, best practices, or checklists for ui ux designer.
What do I get? / Deliverables
You leave with clarified constraints, research-aligned UI direction, token and component guidance, and verifiable steps—or a path to the implementation playbook for deeper specs.
- Wireframe or layout direction
- Design-token and component guidance
- Verification checklist aligned to accessibility and system rules
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Interface and design-system work is where solo builders spend most visual product time, so Build → frontend is the canonical shelf even though research and prototyping happen earlier. Outputs are components, tokens, and layouts that map directly to frontend implementation—not backend APIs or launch copy.
Where it fits
Frame research questions and personas before you sketch the first dashboard layout.
Turn a landing or app prototype into wireframes with explicit accessibility constraints.
Define tokens and component specs your agent can implement in React or mobile UI.
Cross-check implemented UI against inclusive design and system consistency before release.
How it compares
Use for design-system and UX methodology in chat—not as a Figma plugin or automated screenshot generator.
Common Questions / FAQ
Who is ui-ux-designer for?
Solo and indie builders shipping web or mobile products who want agent-guided UX research, design tokens, and accessible UI patterns without a dedicated design org.
When should I use ui-ux-designer?
During Validate when scoping prototype screens, in Build when implementing frontend components, or in Idea when framing audience needs before you commit to a visual direction.
Is ui-ux-designer safe to install?
It is procedural design guidance from the community catalog; review the Security Audits panel on this Prism page before installing in a sensitive environment.
SKILL.md
READMESKILL.md - Ui Ux Designer
## 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. - If detailed examples are required, open `resources/implementation-playbook.md`. 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