A small collection of design focused tools.
Search and TOC available on full site: tools.abl.design
116 tools in 15 categories
- Color
- Design & Code
- Design Systems
- Figma plugins
- Iconography
- Image Generation
- Inspiration
- LLMs
- Markdown
- Presentations & storytelling
- Productivity
- Research & Testing
- Typography
- Video & Motion
- Visual Productivity
Palette generators, shade tools, and accessibility checkers.
InclusiveColors
inclusivecolors.com
Accessible palette creator that builds WCAG-compliant color systems.
Tailcolor
tailcolor.com
Tailwind color tool for customizing and previewing palettes.
Tailwind Shades
tailwindshades.com
Tailwind CSS shade generator for color scales.
Tints.dev
tints.dev
Generates tint and shade scales from a base color.
UI Colors
uicolors.app
Tailwind-compatible color palette generator.
AI tools for generating UI designs, prototypes, and code from prompts or Figma.
Aura
aura.build
AI UI and multi-page site builder with a visual editor, prompt- and image-to-code flows, Tailwind/HTML output, and Figma export.
Bolt
bolt.new
Turns a prompt or Figma import into a full app in the browser.
Builder.io
builder.io
Visual development platform with prompt, website, and Figma-to-code workflows.
Claude Design
claude.ai
Claude workspace for generating and iterating on visual design artifacts from prompts, uploads, and conversational refinement.
Cursor
cursor.com
AI-first code editor for working alongside AI on real codebases.
Figma
figma.com
Collaborative interface design and prototyping in the browser, with design systems, FigJam, and dev handoff.
Fray
fray.design
Imports Figma frames, creates layout variations, and exports clean frames back.
Google Stitch
stitch.withgoogle.com
Google AI design tool for generating app UI from prompts and exporting to code or Figma.
Lovable
lovable.dev
Builds production-ready apps from prompts with Figma import support.
Magic Patterns
magicpatterns.com
Generates code from prompts, images, or Figma and exports to Figma and GitHub.
MagicPath
magicpath.ai
AI design tool for creating, refining, and exploring apps and websites with a prompt-driven workflow.
Paper
paper.design
Connected team canvas on web standards (HTML/CSS) that links agents, code, and real data so design and handoff stay in sync.
Pencil
pencil.dev
Agent-driven MCP canvas for generating and iterating on UI visually.
Relume
relume.io
Turns outlines into website wireframes and exports to Figma, Webflow, and React.
Replit
replit.com
Browser-based IDE with prompt-to-code AI for quick experiments.
Shader Lab
eng.basement.studio
Browser shader playground for stacking retro effects like CRT, dithering, scanlines, and bloom with live controls.
Spline
spline.design
Web-based collaborative 3D design platform for interactive, production-ready experiences.
Subframe
subframe.com
Designs, prototypes, and exports production-ready code with reusable components.
Uizard
uizard.io
Turns prompts, sketches, or screenshots into designs for rapid ideation.
Unicorn Studio
unicorn.studio
No-code WebGL scene builder for interactive, shader-driven graphics in the browser—layers, effects, and export for sites, Framer, Webflow, and video.
UXPilot
uxpilot.ai
AI UX assistant with versatile review and generation tools.
v0
v0.dev
Vercel UI generator that accepts prompts or Figma files and outputs React.
Tools for building, documenting, and scaling design systems.
Component.gallery
component.gallery
Curated index of components across major design systems for research.
Design Systems for Figma
designsystemsforfigma.com
Directory of design system libraries in Figma with implementation language and token notes.
Design Systems Surf
designsystems.surf
Reference hub for notable product design systems, with libraries, components, and articles.
Layout
layout.design
Connects design systems from Figma or websites to AI coding agents with structured context.
Open Design Systems
designsystems.com
Curated directory of open design system kits published on the Figma Community.
Storybook
storybook.js.org
Component documentation and isolated UI development for design system handoff.
Supernova
supernova.io
Design system management, documentation, and code generation platform.
Tokens Studio
tokens.studio
The standard Figma plugin for managing and syncing design tokens.
UIMate
uimate.design
Quickly scaffolds a base design system with starter components.
Zeroheight
zeroheight.com
Living documentation platform for design systems and style guides.
Figma plugins that extend the canvas with automation, AI, and workflow helpers.
A11y — Color Contrast Checker
figma.com
Checks text and UI color contrast against WCAG targets directly inside Figma.
Autoflow
figma.com
Draws user flows and diagrams as editable connector lines between frames and shapes.
Brandfetch
figma.com
Pulls official brand logos, colors, and typography into Figma from Brandfetch.
Dither
figma.com
Applies stylized dithering effects to images for retro, print, and texture-driven visuals.
Export Comments
figma.com
Exports Figma comments for sharing, archiving, and handoff outside the file.
Feather Icons
figma.com
Inserts Feather icons as editable vectors with consistent stroke styling.
Figma Intelligence
figma-intelligence.vercel.app
Free Figma plugin that connects Claude, OpenAI, Gemini, Perplexity, Stitch, and external tools via MCP for design, tokens, accessibility, and code workflows.
Font Awesome Icons
figma.com
Search and place Font Awesome icons directly on the canvas.
HTML to Design
figma.com
Imports live webpages into editable Figma frames using HTML and CSS.
Isometric
figma.com
Transforms layers into isometric projections for illustrative UI mockups.
Lorem Ipsum
figma.com
Generates placeholder text with flexible length and formatting options.
LottieFiles
figma.com
Browse community Lottie animations and insert or export Lottie from Figma.
Map Maker
figma.com
Generates editable map imagery from Google Maps or Mapbox inside Figma frames.
Material Design Icons
figma.com
Adds Google’s Material Symbols / icon set as scalable vectors for UI work.
Pixels
figma.com
Snaps measurements, spacing, and alignment checks while you design in Figma.
Icon libraries and frameworks for UI design and development.
Font Awesome
fontawesome.com
Established icon library with a huge range of icons and styles.
Google Icons
fonts.google.com
Google Material Symbols icon set with adjustable font-based properties.
Hero Icons
heroicons.com
Hand-crafted SVG icons by the Tailwind CSS team.
Iconify
iconify.design
Universal icon framework with more than 200,000 icons from many sets.
Iconshock
iconshock.com
Large library of royalty-free icons in many styles and formats for apps and sites.
Lucide
lucide.dev
Clean and consistent open-source icon set popular in React ecosystems.
Pika Icons
pikaicons.com
Premium icon set with a wide range of styles.
The Noun Project
thenounproject.com
Huge collection of icons for any idea, with SVG and PNG downloads and licensing options.
Untitled UI Icons
untitledui.com
Clean modern icon library with free and pro tiers.
AI image generators and canvas workflows for concept art, mockups, and creative direction.
Adobe Firefly
adobe.com
Adobe image generator trained on licensed content and integrated with Creative Cloud.
Figma Weave
weave.figma.com
Node-based creative platform from Figma that combines multiple AI models with professional editing tools for scalable media workflows.
Flora
flora.ai
Team canvas with 50+ generative models for image-led ideation, reusable flows, and scalable campaign output.
Lummi
lummi.ai
Curated library of free AI stock photos, illustrations, and 3D renders from human creators.
Midjourney
midjourney.com
High-quality AI image generation known for artistic and photographic output.
Reve
reve.art
Fast, high-quality AI image generation for visual exploration.
Curated galleries and learning resources for designers.
Awwwards
awwwards.com
Award-winning web design showcase and benchmark for digital craft.
Dark Design
dark.design
Curated gallery of dark mode interface design references.
Godly
godly.website
Curated showcase of standout website design filtered by style and type.
Minimal Gallery
minimal.gallery
Curated collection of minimal and clean web design references.
Mobbin
mobbin.com
Massive library of real mobile and web UI screenshots searchable by pattern.
Shape of AI
shapeof.ai
Best practices and UI patterns for AI-powered products.
Spotted in Prod
spottedinprod.com
Curated collection of standout iOS product details, interactions, and interface patterns.
General-purpose AI assistants for writing, reasoning, and research.
ChatGPT
chatgpt.com
Full-suite AI assistant by OpenAI for writing, coding, analysis, and more.
Claude
claude.ai
Full-suite AI assistant by Anthropic with strong reasoning and document handling.
Gemini
gemini.google.com
Full-suite AI assistant by Google with deep Workspace integration.
Perplexity
perplexity.ai
AI-powered research and search engine that is great for staying current.
Text-based and markdown-driven tools for wireframes, diagrams, and lo-fi mockups.
Awesome Design MD
github.com
Curated DESIGN.md templates inspired by popular brand design systems—drop-in specs for AI coding agents to match UI conventions.
MarkEdit
github.com
Free open-source Markdown editor for macOS with a native lightweight feel.
Mockdown
mockdown.design
Free browser-based ASCII wireframe editor for lo-fi mockups and quick prototypes.
Obsidian
obsidian.md
Local-first markdown knowledge base for linked notes and long-term thinking.
TAAG
patorjk.com
Classic online text-to-ASCII art generator with dozens of font styles.
AI-assisted decks, narrative sites, and slide-driven storytelling for teams.
Chronicle
chroniclehq.com
AI presentation maker for professional, on-brand decks with a freeform canvas, team collaboration, templates, and export to PPT, PDF, or the web.
Gamma
gamma.app
AI-powered tool for presentations, lightweight websites, and social posts.
Meetings, calendar defense, and notes for people who live in their schedule.
Granola
granola.ai
AI meeting notepad: transcribes from your device audio with no meeting bots, polishes the notes you jot during calls, and helps with follow-ups and summaries.
In Your Face
inyourface.app
Meeting reminder app for Mac, iPhone, and iPad: full-screen alerts before events, calendar sync, and one-tap join for 30+ video services.
Reclaim.ai
reclaim.ai
AI scheduling for Google Calendar: auto-blocks focus time, habits, and meetings while keeping your calendar flexible.
Tools for user research, testing, and product analytics.
Hey Marvin
heymarvin.com
AI-powered research repository for interviews, synthesis, and tagging.
LogRocket
logrocket.com
Session replay and product analytics for understanding user behavior.
Font libraries, pairing tools, and type references for designers.
ABC Dinamo
abcdinamo.com
Berlin-based foundry known for contemporary experimental typefaces.
Adobe Fonts
fonts.adobe.com
Professional font library included with Creative Cloud.
Analyze Any Font
font-stealer.vercel.app
Extracts webfonts from any URL and suggests free open-source alternatives.
Connary Fagen
connary.com
Independent type foundry with versatile display and text typefaces.
Fontjoy
fontjoy.com
ML-powered font pairing generator for finding complementary combinations.
Fonts In Use
fontsinuse.com
Archive of real-world typography across print, digital, and branding.
Fontshare
fontshare.com
Free high-quality fonts from Indian Type Foundry.
Google Fonts
fonts.google.com
Free open-source web font library used across the web.
Klim Type Foundry
klim.co.nz
Historically informed typefaces widely used in editorial and branding.
Kometa
kometa.xyz
Independent foundry producing contemporary, high-quality typefaces.
OH no Type Co
ohnotype.co
Independent foundry known for expressive display and text faces.
Open Foundry
open-foundry.com
Curated platform for open-source typefaces selected for quality.
Pangram Pangram
pangrampangram.com
Type foundry offering free and premium typefaces popular with designers.
Variable Fonts
v-fonts.com
Reference and showcase for variable fonts with rich filtering.
Tools for video generation, animation, and motion design.
Adobe Firefly Video
adobe.com
Adobe video generator built for commercial-safe workflows and Premiere integration.
Descript
descript.com
AI-powered video and podcast editor with transcript-based editing.
Flit
flit.design
Lightweight SVG animation tool for quick motion experiments.
Google Veo
deepmind.google
Google video generation model available through Gemini for cinematic clips.
Jitter
jitter.video
Fast and simple browser-based motion design tool.
LottieFiles
lottiefiles.com
Standard workflow for bringing After Effects animations to web and native apps.
Luma Dream Machine
lumalabs.ai
High-quality AI video generation known for smooth and realistic motion.
Pika
pika.art
Creates, extends, and edits video clips from prompts or images.
Rive
rive.app
Interactive runtime animation tool for production interfaces across platforms.
Runway
runwayml.com
Industry-leading AI video generation and creative editing platform.
Screenshots and on-screen measurement for polish and QA.
Xnapper
xnapper.com
Mac screenshot app for quickly creating polished screenshots with automatic balancing and redaction.
xScope
xscopeapp.com
Screen measurement and inspection toolkit for testing on-screen graphics and layouts.