UXFU.com Master the craft.

UX Tools

Free interactive tools to speed up your design and development workflow.

🥋

Kata Sequences

Master workflows, not just tools. Each Kata chains tools together in the order that solves a real design problem.

Layout Kata

White Belt

Build a responsive, grid-based layout

Grid Calculator → Spacing Calculator → Breakpoint Tester
~15 min Start Kata →

Form Design Kata

Yellow Belt

Build an accessible, fillable form

Input States Generator → Contrast Checker → Touch Target Checker
~15 min Start Kata →

Typography Kata

Blue Belt

Create a readable, scalable type system

Font Pairing → Typography Scale Calculator → Line Length Checker → Readability Scorer
~20 min Start Kata →

Motion Kata

Brown Belt

Design consistent, natural motion

Easing Curve Playground → Microinteraction Timing Generator → Loading Skeleton Generator
~15 min Start Kata →

Research Kata

Brown Belt

Build a grounded research plan

User Persona Builder → User Interview Script Builder → Cognitive Load Scorer
~20 min Start Kata →

Accessibility Kata

Black Belt

Ensure WCAG-compliant interactions

Contrast Checker → Touch Target Checker → Fitts's Law Calculator
~15 min Start Kata →
Loading Skeleton Generator icon
Motion intermediate

Loading Skeleton Generator

Build skeleton loading states for cards, lists, and dashboards. Preview animations and export production code.

Open tool →
User Interview Script Builder icon
Research intermediate

User Interview Script Builder

Generate structured interview scripts based on research goal, audience, and format. Export to Markdown or PDF.

Open tool →
Responsive Breakpoint Tester icon
Layout intermediate

Responsive Breakpoint Tester

Compare framework breakpoints, map real devices, find coverage gaps.

Open tool →
User Persona Builder icon
Research beginner

User Persona Builder

Create structured user personas with demographics, goals, frustrations, and scenarios.

Open tool →
Microinteraction Timing Generator icon
Motion advanced

Microinteraction Timing Generator

Calculate optimal animation durations and easing curves for UI microinteractions.

Open tool →
Readability Score Checker icon
Content beginner

Readability Score Checker

Analyze text readability using proven scoring methods. Optimize UX writing for your audience.

Open tool →
Easing Curve Playground icon
Motion advanced

Easing Curve Playground

Visualize and customize CSS cubic-bezier curves. 12 platform presets, draggable control points, live UI preview. Export as CSS, Tailwind, Framer Motion, or Swift.

Open tool →
Cognitive Load Scorer icon
Psychology advanced

Cognitive Load Scorer

Score your UI complexity across 10 factors. Get an objective 0-100 cognitive load rating with specific recommendations to reduce mental effort.

Open tool →
Input States Generator icon
Components beginner

Input States Generator

Design consistent form inputs with all 7 states: default, hover, focus, filled, error, disabled, read-only. 4 style presets, 6 element types.

Open tool →
Shadow & Elevation Scale Builder icon
Components intermediate

Shadow & Elevation Scale Builder

Build a 5-level shadow elevation system for your design. Soft, crisp, colorful glow, or border-only styles. Export as CSS variables, Tailwind config, or Figma values.

Open tool →
Button States Generator icon
Components beginner

Button States Generator

Preview and export all interactive button states: default, hover, focus, active, and disabled.

Open tool →
Font Pairing Preview icon
Typography beginner

Font Pairing Preview

Preview curated font combinations in realistic UI contexts. SaaS, editorial, e-commerce, mobile – see your fonts in action before committing.

Open tool →
Color Accessibility Palette Generator icon
Accessibility intermediate

Color Accessibility Palette Generator

Generate accessible color palettes that pass WCAG contrast requirements across all combinations.

Open tool →
WCAG Contrast Checker icon
Accessibility beginner

WCAG Contrast Checker

Check color contrast ratios against WCAG 2.2 AA and AAA standards. Real-time pass/fail results.

Open tool →
UX Audit Checklist Builder icon
Research intermediate

UX Audit Checklist Builder

Build and export custom UX audit checklists based on heuristics and project type.

Open tool →
Fitts's Law Target Calculator icon
Psychology intermediate

Fitts's Law Target Calculator

Calculate interaction time based on target size and distance. 6 real-world scenarios, WCAG/Material/Apple compliance check, visual simulation.

Open tool →
Hick's Law Calculator icon
Psychology intermediate

Hick's Law Calculator

Estimate decision time based on the number of choices using Hick's Law formula.

Open tool →
Typography Scale Calculator icon
Typography intermediate

Typography Scale Calculator

Generate a harmonious type scale based on a base size and ratio. Export as CSS variables.

Open tool →
UX Writing Linter icon
Content beginner

UX Writing Linter

Analyze button labels, error messages, tooltips, and empty states for UX writing best practices. Instant feedback with specific fixes.

Open tool →
Meta Tag & Social Preview icon
Content beginner

Meta Tag & Social Preview

Preview how your page appears on Google, Facebook, Twitter/X, and LinkedIn. Generate meta tags and OG tags with live social card previews.

Open tool →
Grid System Calculator icon
Layout intermediate

Grid System Calculator

Design column grids with custom gutters and breakpoints. Export as CSS.

Open tool →
Spacing System Generator icon
Layout intermediate

Spacing System Generator

Build a consistent spacing scale for your design system using 4pt or 8pt grids.

Open tool →
Touch Target Size Checker icon
Accessibility beginner

Touch Target Size Checker

Verify that interactive elements meet minimum touch target size requirements (44×44px).

Open tool →
Line Length Calculator icon
Typography beginner

Line Length Calculator

Calculate optimal characters per line for any font and container width. Live preview with zone indicator – too short, optimal, or too long.

Open tool →