Tools for making visual ideas real.
A curated collection of the tools, libraries, references and production resources worth knowing — for designing, building, generating, testing and shipping visual work. Each one comes with what it's good for, where it falls short, and how current it is.
Curated, not comprehensive. We include what earns a place and say why.
181 resources across 15 categories
-
Onlook
Design canvas
Open-source 'Cursor for designers': visually edit a live Next.js/Tailwind app, writes code back.
Best for Designing on a canvas that hands back real code.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Edits real code, not a design file, which suits a no-CMS model.
- Open Source
- Open source
- Desktop
- Desktop app
-
OpenDesign
Design canvas
Apache-2.0 agent-driven design daemon; BYOK any model.
Best for Designing on a canvas that hands back real code.
- Verified Sep 2026
More
Why it's here Could not verify a public GitHub repo at the paths cited; treat as early.
Less suited to Could not verify a public GitHub repo at the paths cited.
- Open Source
- Open source
- Desktop
- Desktop app
-
Paper (paper.design)
Design canvas
Agentic design canvas w/ MCP; works with multiple agents, real content from DBs/CMS.
Best for Designing on a canvas that hands back real code.
- Verified Sep 2026
More
- Freemium
- MCP
- Desktop
- MCP
- Desktop app
-
Pencil (pen.dev) — DESIGN CANVAS IN IDE
Design canvas
Figma-like infinite canvas in VS Code, Cursor or a desktop app; design files live in the repo and AI coding agents can read and write the canvas via a local MCP, so manual edits cost no tokens.
Best for Designing on a canvas that hands back real code.
- Verified Sep 2026
More
Why it's here A design canvas that AI coding agents can both read and write, with manual edits costing no tokens. Trade-offs: closed-source, no autosave, currently free.
- Freemium
- MCP
- CLI
- Desktop
- VS Code
- MCP
- CLI
- Desktop app
-
Penpot
Design canvas
Open-source Figma alternative; design tokens native; has MCP/plugin ecosystem.
Best for Designing on a canvas that hands back real code.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Mature Figma replacement, but agent integration is weaker than Pencil.
- Freemium
- Open source
- MCP
- Desktop
- MCP
- Plugin
- Desktop app
-
Ark UI
Headless / foundation components
Headless, multi-framework.
Best for Building accessible components from unstyled primitives.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Active; useful only if you need Vue/Solid parity.
Less suited to Useful only if you need Vue/Solid parity.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
Base UI (MUI)
Headless / foundation components
Unstyled accessible components; shadcn's newer base.
Best for Building accessible components from unstyled primitives.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here The direction shadcn is heading.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
Cult UI
Animated component kit
Best for Adding high-impact animated marketing sections.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Animated shadcn-compatible components for expressive interfaces.
- Open Source
- Open source
- Web
- Installs for AI agents
-
daisyUI
Styled component kit
Best for Assembling interfaces from ready-made styled components.
- Verified Sep 2026
- Maintenance: Active
More
Less suited to Watermelon UI: small, verify activity.
- Free
- Web
- Reference URL
-
Flowbite
Styled component kit
Tailwind components + blocks.
Best for Assembling interfaces from ready-made styled components.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Generic look.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
HeroUI (ex NextUI)
Styled component kit
Polished React components.
Best for Assembling interfaces from ready-made styled components.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Active; strong for dashboards.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
HyperUI
Animated component kit
Free Tailwind marketing/app snippets.
Best for Adding high-impact animated marketing sections.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here A large set of free Tailwind component patterns.
- Open Source
- Open source
- Web
- Reference URL
-
Kibo UI
Styled component kit
Composable shadcn components (gantt, kanban, editor…).
Best for Assembling interfaces from ready-made styled components.
- Verified Sep 2026
- Maintenance: Slowing
More
Why it's here May 2026; app-UI oriented.
- Open Source
- Open source
- Web
- Installs for AI agents
-
Magic UI
Animated component kit
150+ animated marketing components (marquee, beams, bento).
Best for Adding high-impact animated marketing sections.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Installs through the shadcn registry, so AI coding agents can pull its animated sections directly.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
Motion Primitives
Animated component kit
Subtle, expensive-feeling Motion-based components.
Best for Adding high-impact animated marketing sections.
- Verified Sep 2026
- Maintenance: Slowing
More
Why it's here Author now focused on ui-skills. Components still work.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
Nuxt UI
Styled component kit
Vue/Nuxt system.
Best for Assembling interfaces from ready-made styled components.
- Verified Sep 2026
- Maintenance: Active
More
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
Origin UI
Styled component kit
Large clean shadcn-style component collection.
Best for Assembling interfaces from ready-made styled components.
- Verified Sep 2026
- Maintenance: Active
More
- Open Source
- Open source
- Web
- Installs for AI agents
-
Preline UI
Styled component kit
Tailwind components/templates.
Best for Assembling interfaces from ready-made styled components.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here A broad Tailwind component library for standard interface needs.
- Freemium
- npm
- npm
- Installs for AI agents
-
PrimeVue
Styled component kit
Comprehensive Vue systems.
Best for Assembling interfaces from ready-made styled components.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here app-oriented.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
Radix Primitives
Headless / foundation components
Accessible headless primitives (under shadcn).
Best for Building accessible components from unstyled primitives.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Stable but commits slowing () as shadcn shifts toward Base UI.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
React Aria
Headless / foundation components
Adobe's a11y primitives.
Best for Building accessible components from unstyled primitives.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Gold-standard a11y but heavier mental model than Radix/Base.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
React Bits
Animated component kit
Creative animated components & backgrounds.
Best for Adding high-impact animated marketing sections.
- Verified Sep 2026
- Maintenance: Active
More
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
Sections
Styled component kit
Best for Assembling interfaces from ready-made styled components.
- Verified Sep 2026
- Maintenance: Active
More
Less suited to Watermelon UI: small, verify activity.
- Free
- Web
- Reference URL
-
shadcn/ui
Styled component kit
Open-source component collection you copy into your own codebase rather than install as a dependency.
Best for Owning your UI primitives outright, with full control over markup and styling.
- Verified Sep 2026
- Maintenance: Active
More
Less suited to Anyone wanting a batteries-included component library they never have to maintain.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
tweakcn
Styled component kit
Visual shadcn theme editor → CSS vars.
Best for Assembling interfaces from ready-made styled components.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Fastest way to give each client a distinct shadcn theme.
- Open Source
- Open source
- Web
- Browser only
-
Vue Bits
Styled component kit
Best for Assembling interfaces from ready-made styled components.
- Verified Sep 2026
- Maintenance: Active
More
Less suited to Watermelon UI: small, verify activity.
- Free
- Web
- Reference URL
-
Vuetify
Styled component kit
Comprehensive Vue systems.
Best for Assembling interfaces from ready-made styled components.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here app-oriented.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
Watermelon UI
Styled component kit
Best for Assembling interfaces from ready-made styled components.
- Verified Sep 2026
- Maintenance: Active
More
Less suited to Watermelon UI: small, verify activity.
- Free
- Web
- Reference URL
-
Fontpair
Type pairing / scale tool
Pairing suggestions and real-world typography.
Best for Pairing typefaces and building type scales.
- Verified Sep 2026
- Licence not verified
More
Why it's here Reference for DESIGN.md.
- Free
- Web
- Reference URL
-
Fonts In Use
Type pairing / scale tool
Pairing suggestions and real-world typography.
Best for Pairing typefaces and building type scales.
- Verified Sep 2026
- Licence not verified
More
Why it's here Reference for DESIGN.md.
- Free
- Web
- Reference URL
-
Fontshare
Typeface / font host
Indian Type Foundry free commercial fonts (Satoshi, General Sans…).
Best for Sourcing and self-hosting fonts for the web.
- Verified Sep 2026
- Licence not verified
More
Why it's here The 'why does this site look expensive' font source.
- Free
- Web
- Reference URL
-
Fontsource
Typeface / font host
Npm-installable fonts.
Best for Sourcing and self-hosting fonts for the web.
- Verified Sep 2026
- Licence not verified
More
Why it's here AI coding agents can install fonts without you.
- Free
- npm
- npm
-
Google Fonts
Typeface / font host
Free web fonts.
Best for Sourcing and self-hosting fonts for the web.
- Verified Sep 2026
- Licence not verified
More
Why it's here Baseline.
- Free
- Web
- Reference URL
-
Type Scale
Type pairing / scale tool
Modular type scales.
Best for Pairing typefaces and building type scales.
- Verified Sep 2026
- Licence not verified
More
Why it's here Output goes in DESIGN.md.
- Free
- Web
- Reference URL
-
Typewolf
Type pairing / scale tool
Pairing suggestions and real-world typography.
Best for Pairing typefaces and building type scales.
- Verified Sep 2026
- Licence not verified
More
Why it's here Reference for DESIGN.md.
- Free
- Web
- Reference URL
-
Coolors
Color / palette tool
Palette gen, extract from image, contrast.
Best for Building palettes, shades and accessible color tokens.
- Verified Sep 2026
More
Why it's here Fine.
- Freemium
- Web
- Browser only
-
OKLCH.com
Color / palette tool
Perceptual (OKLCH) palette and Tailwind-shade generation.
Best for Building palettes, shades and accessible color tokens.
- Verified Sep 2026
More
Why it's here Builds perceptually even colour scales that map cleanly to modern CSS.
- Free
- Web
- Browser only
-
Radix Colors
Color / palette tool
Generate Tailwind 50–950 shades / perceptual palettes.
Best for Building palettes, shades and accessible color tokens.
- Verified Sep 2026
More
Why it's here This class of tool → Tailwind shades in seconds.
- Free
- Web
- Browser only
-
Realtime Colors
Color / palette tool
Preview palette + fonts on a live page.
Best for Building palettes, shades and accessible color tokens.
- Verified Sep 2026
More
Why it's here Fastest client-facing palette decision tool.
- Free
- Web
- Browser only
-
uicolors.app
Color / palette tool
Generate Tailwind 50–950 shades / perceptual palettes.
Best for Building palettes, shades and accessible color tokens.
- Verified Sep 2026
More
Why it's here This class of tool → Tailwind shades in seconds.
- Free
- Web
- Browser only
-
WebAIM Contrast Checker
Color / palette tool
WCAG contrast.
Best for Building palettes, shades and accessible color tokens.
- Verified Sep 2026
More
- Free
- Web
- Browser only
-
Adobe Firefly
AI image generation
Image generation trained on licensed and public-domain content, positioned for commercial safety.
Best for Commercial work where training-data provenance matters.
- Verified Sep 2026
- Licence not verified
More
Why it's here The clearest option when a project needs assurance about the provenance of generated imagery.
Less suited to Casual or exploratory generation where a free tool is sufficient.
- Paid
- Web
- Browser only
-
Artboard Studio
Mockups / device frames
Device mockups.
Best for Presenting screens in device and scene mockups.
- Verified Sep 2026
- Licence not verified
More
Why it's here Browser-based mockup and scene composition.
- Freemium
- Web
- Browser only
-
Artgrid
Stock video
Cinematic footage + music + SFX, perpetual licence.
Best for Sourcing footage for backgrounds and motion.
- Verified Sep 2026
- Licence not verified
More
Why it's here Best quality; overkill for small-budget sites.
Less suited to Overkill for small-budget sites.
- Paid
- Web
- Reference URL
-
Artlist
Stock video
Cinematic footage + music + SFX, perpetual licence.
Best for Sourcing footage for backgrounds and motion.
- Verified Sep 2026
- Licence not verified
More
Why it's here Best quality; overkill for small-budget sites.
Less suited to Overkill for small-budget sites.
- Paid
- Web
- Reference URL
-
BGJar
Backgrounds / patterns
Patterns, noise, gradients.
Best for Generating textures, patterns and background art.
- Verified Sep 2026
- Licence not verified
More
Why it's here Fffuel is the most versatile; pick one.
- Free
- Web
- Browser only
-
Blush
Illustration
Free customisable illustrations.
Best for Adding editable vector illustration.
- Verified Sep 2026
- Licence not verified
More
Why it's here Instantly recognisable as 'free illustration'.
- Freemium
- Web
- Reference URL
-
Brandmark
Logo generation
Neural logo generator, less templatey.
Best for Generating logo and wordmark starting points.
- Verified Sep 2026
- Licence not verified
More
- Paid
- Web
- Browser only
-
ComfyUI
AI image generation
Unlimited local generation.
Best for Generating original imagery from a prompt.
- Verified Sep 2026
- Maintenance: Active
- Licence not verified
More
Why it's here Only if you have a GPU and patience.
Less suited to Only if you have a GPU and patience.
- Free
- Desktop
- Desktop app
-
Coverr
Stock video
Loop-friendly website backgrounds; now has AI Studio.
Best for Sourcing footage for backgrounds and motion.
- Verified Sep 2026
- Licence not verified
More
Why it's here Purpose-built for website heroes.
- Free
- Web
- Reference URL
-
Dareful
Stock video
Larger/niche libraries.
Best for Sourcing footage for backgrounds and motion.
- Verified Sep 2026
- Licence has conditions
More
Why it's here Attribution requirements make them awkward for client sites.
Less suited to Attribution requirements make them awkward for client sites.
- Freemium
- Web
- Reference URL
-
DrawKit
Illustration
Free customisable illustrations.
Best for Adding editable vector illustration.
- Verified Sep 2026
- Licence not verified
More
Why it's here Instantly recognisable as 'free illustration'.
- Freemium
- Web
- Reference URL
-
fffuel
Backgrounds / patterns
Patterns, noise, gradients.
Best for Generating textures, patterns and background art.
- Verified Sep 2026
- Licence not verified
More
Why it's here Fffuel is the most versatile; pick one.
- Free
- Web
- Browser only
-
Flux
AI image generation
Unlimited local generation.
Best for Generating original imagery from a prompt.
- Verified Sep 2026
- Maintenance: Active
- Licence not verified
More
Why it's here Only if you have a GPU and patience.
Less suited to Only if you have a GPU and patience.
- Free
- Desktop
- Desktop app
-
Free Pixel
Icons
Large mixed-licence SVG libraries.
Best for Adding a consistent icon system.
- Verified Sep 2026
- Licence not verified
More
Less suited to Per-icon licences.
- Free
- Web
- Reference URL
-
Google Gemini (Nano Banana)
AI image generation
Google’s image generation, offered with daily free usage rather than a credit balance.
Best for Fast, good-quality general image generation, including reliable in-image text.
- Verified Sep 2026
- Licence not verified
More
Why it's here A strong, low-friction default among free image generators, with unusually good text rendering.
Less suited to Work requiring guaranteed licensed-training provenance for sensitive commercial use.
- Freemium
- Web
- Browser only
-
Haikei
Backgrounds / patterns
Blobs, waves, gradients, meshes.
Best for Generating textures, patterns and background art.
- Verified Sep 2026
- Licence not verified
More
Why it's here Best of the SVG background tools.
- Free
- Web
- Browser only
-
Hero Patterns
Backgrounds / patterns
Patterns, noise, gradients.
Best for Generating textures, patterns and background art.
- Verified Sep 2026
- Licence not verified
More
Why it's here Fffuel is the most versatile; pick one.
- Free
- Web
- Browser only
-
Heroicons
Icons
Tailwind team icons / brand logos (Simple Icons).
Best for Adding a consistent icon system.
- Verified Sep 2026
- Maintenance: Slowing
More
- Open Source
- Open source
- npm
- npm
-
Hugeicons
Icons
Huge set, many styles.
Best for Adding a consistent icon system.
- Verified Sep 2026
- Licence not verified
More
Why it's here Free set is generous; Pro needed for all styles.
- Freemium
- npm
- npm
-
Humaaans
Illustration
Free customisable illustrations.
Best for Adding editable vector illustration.
- Verified Sep 2026
- Licence not verified
More
Why it's here Instantly recognisable as 'free illustration'.
- Freemium
- Web
- Reference URL
-
Iconify
Icons
Every open icon set via one API.
Best for Adding a consistent icon system.
- Verified Sep 2026
- Maintenance: Active
- Licence not verified
More
Why it's here Ends 'which set has X?'.
- Free
- npm
- npm
-
Iconoir
Icons
Tailwind team icons / brand logos (Simple Icons).
Best for Adding a consistent icon system.
- Verified Sep 2026
- Maintenance: Slowing
More
- Open Source
- Open source
- npm
- npm
-
Ideogram
AI image generation
Best text-in-image; wordmarks, posters.
Best for Generating original imagery from a prompt.
- Verified Sep 2026
- Licence not verified
More
Why it's here Free tier is thin now.
- Paid
- Web
- Browser only
-
Inkscape
Logo generation
Free open-source vector editor.
Best for Generating logo and wordmark starting points.
- Verified Sep 2026
- Licence not verified
More
Why it's here Free Illustrator for cleaning AI SVG output.
- Free
- Open source
- Desktop
- Desktop app
-
Krea
AI image generation
Real-time gen, enhance, video.
Best for Generating original imagery from a prompt.
- Verified Sep 2026
- Licence not verified
More
Why it's here Good for exploration.
- Freemium
- Web
- Browser only
-
Leonardo AI
AI image generation
150 tokens/day, Flux + Phoenix, no watermark.
Best for Generating original imagery from a prompt.
- Verified Sep 2026
- Licence not verified
More
Why it's here Most generous free tier for volume.
- Paid
- Web
- Browser only
-
LogoDiffusion
Logo generation
Prompt-native generative logos.
Best for Generating logo and wordmark starting points.
- Verified Sep 2026
- Licence not verified
More
Why it's here Most 'design-tool-like' of the bunch.
- Paid
- Web
- Browser only
-
Looka
Logo generation
Brand kit generator.
Best for Generating logo and wordmark starting points.
- Verified Sep 2026
- Licence not verified
More
Why it's here Best template-based option; 'exploration only' for a designer.
- Freemium
- Web
- Browser only
-
Lucide
Icons
Open-source icon set with a large, consistent library and first-class React support.
Best for A clean, consistent default icon system for interface work.
- Verified Sep 2026
- Maintenance: Active
- Licence not verified
More
Why it's here The default icon set shipped with shadcn/ui and a reliable baseline for most interfaces.
Less suited to Projects needing highly illustrative or multi-weight icon families.
- Free
- npm
- npm
-
Mazwai
Stock video
Larger/niche libraries.
Best for Sourcing footage for backgrounds and motion.
- Verified Sep 2026
- Licence has conditions
More
Why it's here Attribution requirements make them awkward for client sites.
Less suited to Attribution requirements make them awkward for client sites.
- Freemium
- Web
- Reference URL
-
Mixkit
Stock video
Curated cinematic clips, templates, music.
Best for Sourcing footage for backgrounds and motion.
- Verified Sep 2026
- Licence not verified
More
Why it's here Best-looking free video for hero backgrounds; read each clip's licence label.
Less suited to Read each clip's licence label.
- Free
- Web
- Reference URL
-
Mockuuups Studio
Mockups / device frames
Device mockups.
Best for Presenting screens in device and scene mockups.
- Verified Sep 2026
- Licence not verified
More
Why it's here A deep library of device and scene mockups for presentation.
- Freemium
- Web
- Browser only
-
Namelix
Logo generation
AI business-name generator.
Best for Generating logo and wordmark starting points.
- Verified Sep 2026
- Licence not verified
More
Why it's here For founder-led clients without a name yet.
- Free
- Web
- Browser only
-
Noun Project
Icons
Large mixed-licence SVG libraries.
Best for Adding a consistent icon system.
- Verified Sep 2026
- Licence not verified
More
Less suited to Per-icon licences.
- Free
- Web
- Reference URL
-
Open Peeps
Illustration
Free customisable illustrations.
Best for Adding editable vector illustration.
- Verified Sep 2026
- Licence not verified
More
Why it's here Instantly recognisable as 'free illustration'.
- Freemium
- Web
- Reference URL
-
Openverse
Stock photo
Search CC-licensed media.
Best for Sourcing free, commercially usable photography.
- Verified Sep 2026
- Licence not verified
More
- Free
- Web
- Reference URL
-
PatternPad
Backgrounds / patterns
Patterns, noise, gradients.
Best for Generating textures, patterns and background art.
- Verified Sep 2026
- Licence not verified
More
Why it's here Fffuel is the most versatile; pick one.
- Free
- Web
- Browser only
-
Pexels (photo + video)
Stock video
Largest free library, 4K video, no attribution, API.
Best for Sourcing footage for backgrounds and motion.
- Verified Sep 2026
- Licence not verified
More
Why it's here Default first stop.
- Free
- API
- Web
- API
- Reference URL
-
Phosphor
Icons
Flexible, 6 weights.
Best for Adding a consistent icon system.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here A flexible icon family with multiple weights for warmer interfaces.
- Open Source
- Open source
- npm
- npm
-
Pixabay
Stock photo
Broad; includes AI-generated clips.
Best for Sourcing free, commercially usable photography.
- Verified Sep 2026
- Licence not verified
More
Why it's here Variety over quality.
- Free
- Web
- Reference URL
-
Recraft
AI image generation
True editable SVG vectors, icon sets, styles, mockups; MCP available.
Best for Generating original imagery from a prompt.
- Verified Sep 2026
- Maintenance: Active
- Licence not verified
More
Why it's here Fills a persistent gap: brand-consistent, genuinely editable vector illustration from a prompt.
- Paid
- MCP
- Web
- MCP
- Browser only
-
Remix Icon
Icons
Tailwind team icons / brand logos (Simple Icons).
Best for Adding a consistent icon system.
- Verified Sep 2026
- Maintenance: Slowing
More
- Open Source
- Open source
- npm
- npm
-
Screely
Mockups / device frames
Device mockups.
Best for Presenting screens in device and scene mockups.
- Verified Sep 2026
- Licence not verified
More
Why it's here A fast way to drop a screenshot into a clean browser frame.
- Freemium
- Web
- Browser only
-
Shots.so
Mockups / device frames
Beautiful (and animated) mockups.
Best for Presenting screens in device and scene mockups.
- Verified Sep 2026
- Licence not verified
More
Why it's here Portfolio and case-study images.
- Freemium
- Web
- Browser only
-
Simple Icons
Icons
Tailwind team icons / brand logos (Simple Icons).
Best for Adding a consistent icon system.
- Verified Sep 2026
- Maintenance: Slowing
More
- Open Source
- Open source
- npm
- npm
-
Stable Diffusion
AI image generation
Unlimited local generation.
Best for Generating original imagery from a prompt.
- Verified Sep 2026
- Maintenance: Active
- Licence not verified
More
Why it's here Only if you have a GPU and patience.
Less suited to Only if you have a GPU and patience.
- Free
- Desktop
- Desktop app
-
Storyblocks
Stock video
Unlimited downloads.
Best for Sourcing footage for backgrounds and motion.
- Verified Sep 2026
- Licence not verified
More
Why it's here Best paid value once you do 5+ video heroes/month.
- Paid
- Web
- Reference URL
-
Storyset
Illustration
Free customisable illustrations.
Best for Adding editable vector illustration.
- Verified Sep 2026
- Licence not verified
More
Why it's here Instantly recognisable as 'free illustration'.
- Freemium
- Web
- Reference URL
-
SVG Backgrounds
Backgrounds / patterns
Patterns, noise, gradients.
Best for Generating textures, patterns and background art.
- Verified Sep 2026
- Licence not verified
More
Why it's here Fffuel is the most versatile; pick one.
- Free
- Web
- Browser only
-
SVG Repo
Icons
Large mixed-licence SVG libraries.
Best for Adding a consistent icon system.
- Verified Sep 2026
- Licence not verified
More
Less suited to Per-icon licences.
- Free
- Web
- Reference URL
-
Tabler Icons
Icons
5k+ consistent icons.
Best for Adding a consistent icon system.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here A large, consistent free icon set.
- Open Source
- Open source
- npm
- npm
-
unDraw
Illustration
Free customisable illustrations.
Best for Adding editable vector illustration.
- Verified Sep 2026
- Licence not verified
More
Why it's here A widely recognised source of free, recolourable vector illustration.
- Freemium
- Web
- Reference URL
-
Unsplash
Stock photo
Editorial-quality photos, API.
Best for Sourcing free, commercially usable photography.
- Verified Sep 2026
- Licence not verified
More
Why it's here The strongest free source for editorial-quality photography.
Less suited to Its best-known images are widely reused, so distinctive selection matters.
- Freemium
- API
- Web
- API
- Reference URL
-
Upscayl
AI image generation
Free open-source upscaler.
Best for Generating original imagery from a prompt.
- Verified Sep 2026
- Maintenance: Slowing
- Licence not verified
More
Why it's here Solves 'client sent a 400px logo'.
- Free
- Open source
- Desktop
- Desktop app
-
Videezy
Stock video
Larger/niche libraries.
Best for Sourcing footage for backgrounds and motion.
- Verified Sep 2026
- Licence has conditions
More
Why it's here Attribution requirements make them awkward for client sites.
Less suited to Attribution requirements make them awkward for client sites.
- Freemium
- Web
- Reference URL
-
Videvo
Stock video
Larger/niche libraries.
Best for Sourcing footage for backgrounds and motion.
- Verified Sep 2026
- Licence has conditions
More
Why it's here Attribution requirements make them awkward for client sites.
Less suited to Attribution requirements make them awkward for client sites.
- Freemium
- Web
- Reference URL
-
Wikimedia Commons
Stock photo
Search CC-licensed media.
Best for Sourcing free, commercially usable photography.
- Verified Sep 2026
- Licence not verified
More
- Free
- Web
- Reference URL
-
Anime.js v4
Animation engine
Lightweight JS animation.
Best for Animating interfaces in code.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Overlaps GSAP/Motion.
Less suited to Overlaps GSAP/Motion.
- Open Source
- Open source
- npm
- npm
-
AutoAnimate
Animation engine
Zero-config list/layout transitions.
Best for Animating interfaces in code.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Tiny, nice.
- Open Source
- Open source
- npm
- npm
-
dotLottie
Designer-authored animation
Vector animations; dotLottie is ~80% smaller.
Best for Bringing designer-authored animation into a build.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Use dotlottie-react, not lottie-react.
- Freemium
- npm
- npm
-
GSAP + ScrollTrigger
Animation engine
Professional-grade animation toolkit for timelines, scroll-driven sequences and SVG, now fully free.
Best for Elaborate timeline and scroll choreography that goes beyond simple component transitions.
- Verified Sep 2026
- Maintenance: Slowing
More
Why it's here The long-standing professional standard for serious web animation, with its full plugin set now free.
Less suited to Small, incidental UI motion where a lighter library is enough.
- Free
- npm
- npm
-
Lenis
Animation engine
Smooth scroll to pair with GSAP ScrollTrigger.
Best for Animating interfaces in code.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here The agency-scroll feel.
- Open Source
- Open source
- npm
- npm
-
LottieFiles
Designer-authored animation
Vector animations; dotLottie is ~80% smaller.
Best for Bringing designer-authored animation into a build.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Use dotlottie-react, not lottie-react.
- Freemium
- npm
- npm
-
Motion (ex Framer Motion)
Animation engine
Production animation library for React and JavaScript, covering transitions, gestures and layout animation.
Best for Component-bound interface motion in React projects.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here The mainstream successor to Framer Motion, and the default reach for most interface animation.
Less suited to Complex timeline choreography or scroll-driven narrative, where a dedicated timeline tool fits better.
- Open Source
- Open source
- npm
- npm
-
PixiJS
Animation engine
Performant 2D rendering.
Best for Animating interfaces in code.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Active; niche for marketing sites.
- Open Source
- Open source
- npm
- npm
-
React Spring
Animation engine
Physics-based.
Best for Animating interfaces in code.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Active; Motion covers most cases.
- Open Source
- Open source
- npm
- npm
-
Rive
Designer-authored animation
Tool and runtime for interactive, state-driven vector animation that responds to input at runtime.
Best for Interactive animation — controls, characters and logos that react to state or input.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Covers genuinely interactive motion that play-once formats like Lottie cannot express.
Less suited to Simple play-once animations, where a lighter Lottie file suffices.
- Open Source
- Open source
- npm
- Desktop
- npm
- Desktop app
-
Spline
Designer-authored animation
Browser-based 3D design tool with interactive embeds for the web.
Best for Adding approachable interactive 3D without a full WebGL toolchain.
- Verified Sep 2026
- Maintenance: Stale
More
Why it's here The most approachable on-ramp to interactive 3D for designers who do not write shader code.
Less suited to Performance-critical pages, where heavy 3D embeds are a liability.
- Freemium
- npm
- Desktop
- npm
- Desktop app
-
drei
library
WebGL 3D in React.
Best for Creating and embedding 3D on the web.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here All three active. Heavy — only for hero moments.
- Open Source
- Open source
- npm
- npm
-
React Three Fiber
library
WebGL 3D in React.
Best for Creating and embedding 3D on the web.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here All three active. Heavy — only for hero moments.
- Open Source
- Open source
- npm
- npm
-
Three.js
library
WebGL 3D in React.
Best for Creating and embedding 3D on the web.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here All three active. Heavy — only for hero moments.
- Open Source
- Open source
- npm
- npm
-
CapCut
Video editing
Fast social/web edits, captions.
Best for Editing and finishing video.
- Verified Sep 2026
- Licence not verified
More
Why it's here Fine for reels; export licensing of effects can be murky.
- Freemium
- Desktop
- Desktop app
-
DaVinci Resolve
Video editing
Pro-grade free editor.
Best for Editing and finishing video.
- Verified Sep 2026
- Licence not verified
More
Why it's here Given a production background this is the one.
- Freemium
- Desktop
- Desktop app
-
Descript
Video editing
Transcript-based editing, screen recording.
Best for Editing and finishing video.
- Verified Sep 2026
- Licence not verified
More
Why it's here Good for Loom-style client walkthroughs.
- Freemium
- Desktop
- Desktop app
-
Kling
AI video
Generative video when no stock exists.
Best for Generating or presenting video with AI.
- Verified Sep 2026
- Licence not verified
More
Why it's here Don't pay for more than one; use free credits until a project needs it.
- Freemium
- Web
- Browser only
-
Luma
AI video
Generative video when no stock exists.
Best for Generating or presenting video with AI.
- Verified Sep 2026
- Licence not verified
More
Why it's here Don't pay for more than one; use free credits until a project needs it.
- Freemium
- Web
- Browser only
-
Motion Canvas
Programmatic video
TypeScript animation editor.
Best for Rendering video programmatically from code.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here More explainer-video oriented.
- Open Source
- Open source
- npm
- npm
-
Pika
AI video
Generative video when no stock exists.
Best for Generating or presenting video with AI.
- Verified Sep 2026
- Licence not verified
More
Why it's here Don't pay for more than one; use free credits until a project needs it.
- Freemium
- Web
- Browser only
-
Remotion
Programmatic video
Make videos in React (case-study reels, product walkthroughs).
Best for Rendering video programmatically from code.
- Verified Sep 2026
- Maintenance: Active
- Licence not verified
More
- Freemium
- npm
- npm
-
Runway
AI video
Generative video when no stock exists.
Best for Generating or presenting video with AI.
- Verified Sep 2026
- Licence not verified
More
Why it's here Don't pay for more than one; use free credits until a project needs it.
- Freemium
- Web
- Browser only
-
CVA
Dev utility
Class variance utility (inside shadcn).
Best for Supporting the development workflow.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Comes with shadcn.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
Formspree
Forms
Form endpoints for static sites.
Best for Handling form state, validation and submissions.
- Verified Sep 2026
More
Why it's here Web3Forms free tier is the least restrictive for client contact forms.
- Freemium
- API
- API
- Connects to AI agents
-
nuqs
Dev utility
Type-safe URL state for Next.
Best for Supporting the development workflow.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here For filterable galleries/directories.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
React Hook Form
Forms
Form state + schema validation.
Best for Handling form state, validation and submissions.
- Verified Sep 2026
- Maintenance: Active
More
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
Repomix
Dev utility
Pack a repo into one AI-readable file.
Best for Supporting the development workflow.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Packs a whole repository into a single file so AI agents can take in a legacy codebase at once.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
Resend
Transactional email
Email API + React Email.
Best for Sending transactional email.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Pairs with React Email templates.
- Freemium
- npm
- API
- npm
- API
- Connects to AI agents
-
Tally
Forms
Form endpoints for static sites.
Best for Handling form state, validation and submissions.
- Verified Sep 2026
More
Why it's here Web3Forms free tier is the least restrictive for client contact forms.
- Freemium
- API
- API
- Connects to AI agents
-
Web3Forms
Forms
Form endpoints for static sites.
Best for Handling form state, validation and submissions.
- Verified Sep 2026
More
Why it's here Web3Forms free tier is the least restrictive for client contact forms.
- Freemium
- API
- API
- Connects to AI agents
-
Zod
Forms
Form state + schema validation.
Best for Handling form state, validation and submissions.
- Verified Sep 2026
- Maintenance: Active
More
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
21st MCP (formerly Magic MCP)
MCP server
Search 10k+ shadcn-style components, generate UI, install into project.
Best for Extending what AI coding agents can do inside a project.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Makes a large component marketplace directly reachable by AI coding agents.
- Freemium
- npm
- API
- CLI
- npm
- API
- CLI
- Connects to AI agents
-
Canva MCP
MCP server
Search/create Canva designs from Claude.
Best for Extending what AI coding agents can do inside a project.
- Verified Sep 2026
More
Why it's here Official. Useful for social/collateral, not for site UI.
Less suited to Useful for social/collateral, not for site UI.
- Freemium
- MCP
- API
- CLI
- MCP
- API
- CLI
- Connects to AI agents
-
Chrome DevTools MCP
MCP server
Console, network, DOM, performance traces, device emulation.
Best for Extending what AI coding agents can do inside a project.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Google-maintained, . Pair with Playwright: Playwright tests, DevTools explains WHY.
- Open Source
- Open source
- MCP
- CLI
- MCP
- CLI
- Installs for AI agents
-
Cloudflare MCP
MCP server
Workers, R2, DNS, Images.
Best for Extending what AI coding agents can do inside a project.
- Verified Sep 2026
- Maintenance: Active
More
- Open Source
- Open source
- API
- API
- Connects to AI agents
-
Context7
MCP server
Live, version-accurate documentation for libraries, delivered to AI coding agents so generated code matches current APIs.
Best for Keeping AI-generated code aligned with the current version of fast-moving libraries.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Directly attacks one of the most common failure modes in AI-assisted builds: code written against outdated API signatures.
Less suited to Situations where you need a human-browsable docs site rather than machine-delivered context.
- Freemium
- MCP
- CLI
- MCP
- CLI
- Installs for AI agents
-
Exa MCP
MCP server
Semantic web search + page fetch for agents.
Best for Extending what AI coding agents can do inside a project.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Firecrawl is better for full-site crawls, Exa for finding sources.
- Usage-based
- MCP
- API
- CLI
- MCP
- API
- CLI
- Connects to AI agents
-
Figma MCP (official)
MCP server
Read frames, variables, tokens, layout from Figma.
Best for Extending what AI coding agents can do inside a project.
- Verified Sep 2026
More
Why it's here Official; Read-only — cannot write to canvas (that's Pencil's job).
- Paid
- MCP
- API
- CLI
- MCP
- API
- CLI
- Connects to AI agents
-
Firecrawl MCP
MCP server
Crawl any site → clean markdown (client's old site, competitors, inspiration).
Best for Extending what AI coding agents can do inside a project.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Very active. Best tool for 'read the client's current site before redesigning it'.
- Freemium
- MCP
- API
- CLI
- MCP
- API
- CLI
- Connects to AI agents
-
GitHub MCP (official)
MCP server
Issues, PRs, Actions, code search.
Best for Extending what AI coding agents can do inside a project.
- Verified Sep 2026
- Maintenance: Active
More
- Open Source
- Open source
- MCP
- API
- CLI
- MCP
- API
- CLI
- Connects to AI agents
-
Playwright MCP
MCP server
Browser-automation server that lets AI coding agents drive, inspect and screenshot a real browser.
Best for Letting an agent verify its own UI work — navigating, screenshotting and testing across viewports.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Turns "build it" into "build it and check it," which is the difference between plausible and verified front-end output.
Less suited to Teams wanting a purely visual, no-code testing tool.
- Open Source
- Open source
- MCP
- CLI
- MCP
- CLI
- Installs for AI agents
-
Recraft MCP
MCP server
Generate_image, vectorize, remove_background, upscale via Recraft API.
Best for Extending what AI coding agents can do inside a project.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Official but only . Strong idea (brand-consistent SVG illustration from AI coding agents) — test on one project first.
- Usage-based
- MCP
- API
- CLI
- MCP
- API
- CLI
- Connects to AI agents
-
shadcn MCP (official CLI)
MCP server
Official shadcn MCP: browse/install registry items incl. third-party registries.
Best for Extending what AI coding agents can do inside a project.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Official; supersedes the two community shadcn MCPs below.
- Open Source
- Open source
- MCP
- npm
- CLI
- MCP
- npm
- CLI
- Installs for AI agents
-
Spline MCP
MCP server
Claude drives the Spline desktop editor.
Best for Extending what AI coding agents can do inside a project.
- Verified Sep 2026
More
Why it's here Only Spline itself can confirm current state; treat as experimental until you've tried it.
- Freemium
- MCP
- Desktop
- MCP
- Desktop app
-
Storybook MCP
MCP server
Lets Claude read your existing stories/components.
Best for Extending what AI coding agents can do inside a project.
- Verified Sep 2026
- Maintenance: Active
More
- Open Source
- Open source
- Web
- Installs for AI agents
-
Supabase MCP
MCP server
DB, auth, storage from Claude.
Best for Extending what AI coding agents can do inside a project.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Only for sites needing a backend (forms, bookings). Use read-only mode on client production data.
- Free
- MCP
- API
- CLI
- MCP
- API
- CLI
- Connects to AI agents
-
Vercel MCP (official)
MCP server
Deployments, build logs, domains, env vars.
Best for Extending what AI coding agents can do inside a project.
- Verified Sep 2026
More
Why it's here A high-leverage integration for projects deployed on Vercel, giving AI agents access to deployments and logs.
Less suited to Projects hosted outside the Vercel platform.
- Free
- MCP
- API
- CLI
- MCP
- API
- CLI
- Connects to AI agents
-
60fps.design
Inspiration gallery
Landing pages / one-pagers / award sites / motion.
Best for Researching real-world visual and interaction reference.
- Verified Sep 2026
More
Why it's here A gallery focused on motion and interaction reference.
- Free
- Web
- Reference URL
-
Awwwards
Inspiration gallery
Landing pages / one-pagers / award sites / motion.
Best for Researching real-world visual and interaction reference.
- Verified Sep 2026
More
Why it's here A high bar of real-world reference for ambitious visual and interaction design.
- Free
- Web
- Reference URL
-
Firecrawl (as inspiration extractor)
Inspiration → code extractor
Crawl a landing page you like → structured markdown → Claude extracts design language.
Best for Turning existing sites into structured reference for a build.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Most flexible way to 'copy a landing page into AI coding agents' without literally cloning it.
- Freemium
- MCP
- API
- MCP
- API
-
getdesign.md
Inspiration → code extractor
Ready-made DESIGN.md files for well-known brands (palette, type, layout, tone), formatted for AI coding agents.
Best for Turning existing sites into structured reference for a build.
- Verified Sep 2026
More
Why it's here A landing-page-style library you copy straight into AI coding agents. Free.
- Free
- Web
- Reference URL
-
Land-book
Inspiration gallery
Landing-page gallery filterable by section/style.
Best for Researching real-world visual and interaction reference.
- Verified Sep 2026
More
Why it's here Best for section-level research.
- Freemium
- Web
- Reference URL
-
Lapa Ninja
Inspiration gallery
Landing pages / one-pagers / award sites / motion.
Best for Researching real-world visual and interaction reference.
- Verified Sep 2026
More
Why it's here A focused gallery of landing-page reference.
- Free
- Web
- Reference URL
-
Mobbin
Inspiration gallery
Real product UI flows & patterns.
Best for Researching real-world visual and interaction reference.
- Verified Sep 2026
More
Why it's here Best for 'how do good products do X'; more app than marketing.
- Freemium
- Web
- Reference URL
-
One Page Love
Inspiration gallery
Landing pages / one-pagers / award sites / motion.
Best for Researching real-world visual and interaction reference.
- Verified Sep 2026
More
Why it's here A long-running collection specifically of one-page site reference.
- Free
- Web
- Reference URL
-
Recent.design (formerly Godly)
Inspiration gallery
High-end site gallery.
Best for Researching real-world visual and interaction reference.
- Verified Sep 2026
More
Why it's here Best modern gallery; note the rename — many lists still say Godly.
- Free
- Web
- Reference URL
-
Refero
Inspiration gallery
Web + product UI references.
Best for Researching real-world visual and interaction reference.
- Verified Sep 2026
More
Why it's here Overlaps Mobbin.
Less suited to Overlaps Mobbin.
- Freemium
- Web
- Reference URL
-
same.new (Same)
Inspiration → code extractor
Paste a URL → AI rebuilds the site as code you can edit.
Best for Turning existing sites into structured reference for a build.
- Verified Sep 2026
More
Why it's here Popular 'clone any landing page' tool; output is a starting point, not production.
- Usage-based
- Web
- Browser only
-
screenshot-to-code
Inspiration → code extractor
Screenshot/URL → HTML/Tailwind/React.
Best for Turning existing sites into structured reference for a build.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here AI coding agents + a screenshot now does this natively, so mostly redundant.
- Freemium
- Desktop
- Desktop app
-
SiteInspire
Inspiration gallery
Landing pages / one-pagers / award sites / motion.
Best for Researching real-world visual and interaction reference.
- Verified Sep 2026
More
Why it's here A curated gallery with a consistently high visual bar.
- Free
- Web
- Reference URL
-
axe DevTools
Accessibility testing
Automated a11y checks.
Best for Testing accessibility.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Wire into Playwright so AI coding agents tests a11y itself.
- Freemium
- Open source
- MCP
- npm
- MCP
- npm
- Installs for AI agents
-
axe-core
Accessibility testing
Automated a11y checks.
Best for Testing accessibility.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Wire into Playwright so AI coding agents tests a11y itself.
- Freemium
- Open source
- MCP
- npm
- MCP
- npm
- Installs for AI agents
-
BackstopJS
Visual regression
Open-source screenshot diffing.
Best for Catching unintended visual changes.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Useful for 'did my update break the client's site'.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
ffmpeg
Asset optimization
Programmatic image/SVG/video optimisation.
Best for Optimizing images and media for the web.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here AI coding agents can batch-optimise every asset without you.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
Lighthouse
Performance testing
Core Web Vitals, SEO, a11y.
Best for Measuring performance and Core Web Vitals.
- Verified Sep 2026
More
Why it's here A standard, automatable audit for performance, accessibility and SEO.
- Free
- MCP
- npm
- MCP
- npm
- Installs for AI agents
-
pa11y
Accessibility testing
CLI a11y runner.
Best for Testing accessibility.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here CI-friendly.
- Free
- Open source
- npm
- npm
- Installs for AI agents
-
PageSpeed Insights
Performance testing
Core Web Vitals, SEO, a11y.
Best for Measuring performance and Core Web Vitals.
- Verified Sep 2026
More
Why it's here AI coding agents can run it and fix what it finds.
- Free
- MCP
- npm
- MCP
- npm
- Installs for AI agents
-
Responsively App
Accessibility testing
All breakpoints side by side.
Best for Testing accessibility.
- Verified Sep 2026
More
Why it's here Nice for client demos.
- Free
- Open source
- Desktop
- Desktop app
-
sharp
Asset optimization
Programmatic image/SVG/video optimisation.
Best for Optimizing images and media for the web.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Lets a build pipeline batch-optimise every asset automatically.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
Storybook
Visual regression
Component workshop.
Best for Catching unintended visual changes.
- Verified Sep 2026
- Maintenance: Active
More
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
SVGO
Asset optimization
Programmatic image/SVG/video optimisation.
Best for Optimizing images and media for the web.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here AI coding agents can batch-optimise every asset without you.
- Open Source
- Open source
- npm
- npm
- Installs for AI agents
-
WAVE
Accessibility testing
Browser a11y evaluator.
Best for Testing accessibility.
- Verified Sep 2026
More
Why it's here Human check after axe.
Less suited to Human check after axe.
- Free
- Web
- Browser only
-
Google Rich Results Test
SEO / structured data
Structured data validation.
Best for Validating structured data and search readiness.
- Verified Sep 2026
More
- Free
- Web
- Browser only
-
opengraph.xyz
SEO / structured data
Preview how a page’s social cards will render.
Best for Checking Open Graph and social-share previews before launch.
- Verified Sep 2026
More
Why it's here A quick way to verify social-card output without deploying.
- Free
- Web
- Browser only
-
RealFaviconGenerator
SEO / structured data
Generate a complete favicon and app-icon set from a single source image.
Best for Producing a full cross-platform favicon set.
- Verified Sep 2026
More
Why it's here Covers the full range of favicon formats modern platforms expect.
- Free
- Web
- Browser only
-
Schema.org
SEO / structured data
Structured data validation.
Best for Validating structured data and search readiness.
- Verified Sep 2026
More
- Free
- Web
- Browser only
-
Plausible
tool
Cookieless analytics.
Best for Measuring site traffic with privacy-friendly analytics.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Lightweight, cookieless analytics that avoids consent-banner overhead.
- Free
- API
- API
-
Umami
tool
Cookieless analytics.
Best for Measuring site traffic with privacy-friendly analytics.
- Verified Sep 2026
- Maintenance: Active
More
Why it's here Privacy-friendly analytics that can be self-hosted, avoiding cookie banners.
- Free
- API
- API
-
Cal.com
Client delivery
Booking + async client walkthroughs.
Best for Delivering work to clients and recording walkthroughs.
- Verified Sep 2026
More
- Freemium
- Web
- Browser only
-
Loom
Client delivery
Booking + async client walkthroughs.
Best for Delivering work to clients and recording walkthroughs.
- Verified Sep 2026
More
- Freemium
- Web
- Browser only
-
Screen Studio
Client delivery
Booking + async client walkthroughs.
Best for Delivering work to clients and recording walkthroughs.
- Verified Sep 2026
More
- Freemium
- Web
- Browser only
-
Tella
Client delivery
Booking + async client walkthroughs.
Best for Delivering work to clients and recording walkthroughs.
- Verified Sep 2026
More
- Freemium
- Web
- Browser only
No resources match that yet. Try a broader term, or browse by category.
Browse by category
-
Design & UI
5 resourcesDesign tools and canvases — including tools that hand back real, editable code.
Design canvas
-
Components & Libraries
23 resourcesComponent libraries — from unstyled accessible primitives to ready-made animated sections.
Headless / foundation components · Styled component kit · Animated component kit
-
Typography
7 resourcesTypefaces to use, and tools for pairing them and setting type scales.
Typeface / font host · Type pairing / scale tool
-
Color
6 resourcesTools for building palettes, shades and accessible colour tokens.
Color / palette tool
-
Images & Visual Assets
57 resourcesWhere images come from — stock, AI generation, illustration, icons, backgrounds, mockups and logos.
Stock photo · Stock video · AI image generation · Illustration · Icons · Backgrounds / patterns · Mockups / device frames · Logo generation
-
Motion & Interaction
11 resourcesAnimation engines, designer-authored motion, and lightweight CSS motion.
Animation engine · Designer-authored animation
-
3D
3 resourcesCreating and embedding interactive 3D on the web.
-
Video
9 resourcesGenerating, rendering and finishing video — from AI generation to programmatic rendering to editing.
AI video · Programmatic video · Video editing
-
Development
9 resourcesFrameworks, forms, backend, content management and developer utilities.
Forms · Dev utility · Transactional email
-
AI & Agents
16 resourcesPlugins, skills, MCP servers and directories that extend what AI coding agents can do.
MCP server
-
Research & Inspiration
13 resourcesGalleries and reference archives for studying real-world visual and interaction work — and tools that turn existing sites into structured reference.
Inspiration gallery · Inspiration → code extractor
-
QA & Testing
12 resourcesAccessibility, visual-regression, performance and asset-optimization testing.
Accessibility testing · Visual regression · Performance testing · Asset optimization
-
SEO & Discovery
4 resourcesValidating structured data, metadata and search readiness.
SEO / structured data
-
Analytics
2 resourcesPrivacy-friendly and self-hostable web analytics.
-
Production & Workflow
4 resourcesDelivering work to clients and recording walkthroughs.
Client delivery
Compare tools for a job
15 of the categories carry a comparison: a set of options read against the same questions for one specific job, with cost, maintenance and access side by side. They live inside the category pages rather than as separate routes.
- Design canvases an AI agent can read and write in Design & UI
- Ready-made animated sections in Components & Libraries
- Generating images, free options first in Images & Visual Assets
- Building custom animation in Motion & Interaction
- Rendering video programmatically in Video
- Handling form submissions in Development
- Browser testing and QA in AI & Agents
- Landing-page reference you can hand to an AI agent in Research & Inspiration
- Accessibility testing in QA & Testing
- Privacy-friendly analytics in Analytics