UI Kit

Accessibility

✅ Basic Skills

Alt Text Ally – Write Meaningful Alternative Text

Clarity Champion – Use Clear and Understandable Language

Contrast Guardian – Meet Accessible Colour Contrast Standards

Error Guide – Improve Error Communication

Focus Finder – Improve Visible Focus States

Inclusive Observer – Identify Accessibility Barriers

Keyboard Scout – Test Keyboard Navigation

Structure Steward – Use Semantic Content Organization

Zoom Defender – Design for Magnification

Colour

✅ Basic Skills

Brand Builder – Create a Branded Colour Palette

Colour Minimalist – Design Using Three Colours or Fewer

Contrast Champion – Create a High-Contrast Interface

Cool Operator – Use a Cool Colour Scheme

Hierarchy Painter – Use Colour to Direct Attention

Monochrome Explorer – Use a Monochromatic Colour Scheme

Mood Maker – Use Colour to Create a Specific Emotional Tone

Signal Sender – Use Colour to Communicate Status

Warmth Weaver – Use a Warm Colour Scheme

Communication & Storytelling

✅ Basic Skills

Audience Adapter – Tailor Communication for a Specific Audience

Call-to-Action Crafter – Strengthen a Call to Action

Hierarchy Storyteller – Create a Clear Information Priority

Information Organizer – Improve Content Structure

Message Maker – Communicate One Key Idea Effectively

Microcopy Explorer – Improve Interface Microcopy

Plain Language Champion – Rewrite Content Using Plain Language

Tone Builder – Establish a Consistent Voice and Tone

Visual Narrator – Tell a Story Through Design

Constraints & Experimentation

✅ Basic Skills

Colourless Creator – Design Without Using Colour for Meaning

Double Vision – Create Two Different Solutions to the Same Problem

First Contact – Design for First-Time Users

Grey Matter – Design Using Only Grayscale

Mature Mavin – Design for Older Adults

Minimalist Monk – Work Within a Strict Visual Limit

Mobile Survivor – Design for a Small Mobile Screen

Rule Breaker – Challenge a Common Design Convention

Design Systems & Consistency

✅ Basic Skills

Component Creator – Create a Reusable UI Component

Consistency Detective – Audit a Project for Inconsistencies

Familiar Face – Reuse Existing Design Conventions

Naming Navigator – Establish Clear Naming Conventions

Pattern Protector – Reuse an Interface Pattern Consistently

Rule Keeper – Define Basic Design Rules

Spacing Sentinel – Create a Consistent Spacing System

Style Steward – Maintain Consistent Visual Styles

Variant Builder – Create Component Variations

Execution

✅ Basic Skills

Asset Assembler – Create Supporting Design Assets

Consistency Keeper – Maintain Visual Consistency

Detail Detective – Improve Small Interface Details

Feedback Responder – Apply Feedback to Improve a Design

Flow Finisher – Complete a Full User Flow

Pixel Polisher – Refine Layout and Alignment

Progress Tracker – Document Design Progress

Prototype Builder – Create a Functional Prototype

Version Voyager – Explore Multiple Design Iterations

Interaction Design

✅ Basic Skills

Error Rescuer – Help Users Recover from Mistakes

Button Builder – Design Effective Buttons

Choice Designer – Improve Decision-Making Through Interaction

Confirmation Crafter – Design Meaningful Confirmation Messages

Feedback Finder – Provide Visual Feedback for User Actions

Flow Facilitator – Design a Task-Based Interaction Flow

Microinteraction Maker – Create a Purposeful Microinteraction

Progress Presenter – Communicate Progress During Tasks

State Shaper – Design Multiple Component States

Layout & Grid

✅ Basic Skills

Alignment Adept – Improve Alignment Throughout a Layout

Balance Builder – Create a Balanced Layout

Column Commander – Design Using Multiple Columns

Content Organizer – Group Related Information

Grid Builder – Use a Grid System

Pattern Spotter – Establish Repeating Layout Patterns

Priority Planner – Organize Content by Importance

Spacing Steward – Create Consistent Spacing

Whitespace Wanderer – Use Whitespace Intentionally

Navigation & Information Architecture

✅ Basic Skills

Breadcrumb Builder – Help Users Understand Their Location

Category Curator – Organize Content into Meaningful Groups

Choice Simplifier – Reduce Navigation Complexity

Content Cartographer – Create a Sitemap

Flow Mapper – Visualize a User Journey

Label Librarian – Create Clear Navigation Labels

Mental Model Mapper – Organize Content Around User Expectations

Path Finder – Create a Clear Navigation Menu

Search Supporter – Design for Findability

Research & Testing

✅ Basic Skills

Assumption Hunter – Identify Design Assumptions

Audience Investigator – Define a Target Audience

Curiosity Seeker – Conduct Background Research

Feedback Collector – Gather Informal User Feedback

Insight Recorder – Document Research Findings

Journey Mapper – Create a User Journey Map

Observation Scout – Observe Real User Behaviour

Persona Pathfinder – Create a User Persona

Question Crafter – Develop Effective Research Questions

Strategy

✅ Basic Skills

Audience Advocate – Align Design Decisions with User Needs

Context Explorer – Consider Environmental and Situational Factors

Goal Setter – Define Clear Project Goals

Opportunity Scout – Identify an Untapped Design Opportunity

Priority Keeper – Identify Primary and Secondary Goals

Problem Finder – Define the Core Problem to Solve

Stakeholder Interpreter – Consider Multiple Stakeholder Perspectives

Success Mapper – Define Success Metrics

Value Builder – Define a Value Proposition

Typography

✅ Basic Skills

Alignment Adept – Use Strong Typographic Alignment

Emphasis Expert – Create Emphasis Without Colour

Hierarchy Herald – Create Typographic Hierarchy Using Size

Readability Ranger – Improve Reading Comfort

Rhythm Rider – Use Consistent Spacing Around Text

Scale Seeker – Apply a Type Scale

Type Tamer – Limit Yourself to Two Typefaces

Typeface Tracker – Explore a New Typeface

Voice Builder – Match Typography to Brand Personality

Visual Hierarchy

✅ Basic Skills

Attention Architect – Establish a Clear Visual Focal Point

Content Ranker – Organize Information by Importance

Contrast Commander – Use Contrast to Differentiate Content

Cue Creator – Use Visual Cues to Guide Users

Layer Builder – Create Visual Depth

Priority Painter – Emphasize Important Content

Scanning Specialist – Design for Quick Scanning

Size Strategist – Use Scale to Create Hierarchy

Spotlight Operator – Draw Attention to a Call to Action

Select Skills

Accessibility

Colour

Communication & Storytelling

Constraints & Experimentation

Design Systems & Consistency

Execution

Interaction Design

Layout & Grid

Navigation & Information Architecture

Research & Testing

Strategy

Typography

Visual Hierarchy