---
title: "the Vibing Company"
canonical: "https://vibing.inc/library/c/design-tools-and-generators"
site: "the Vibing Company"
---

The Vibeary — collection

# Design Tools & Generators

Generators are the fastest shortcut in interface work: instead of hand-writing a gradient, a blob, a wave divider or a type scale, you tune it in a browser and paste the output straight into your project. This shelf collects the generators worth bookmarking — colour and typography tooling, SVG and CSS makers, mockup and screenshot studios, icon sets and illustration kits. Most are free, most run entirely client-side, and every one of them was picked because it beats writing the same code by hand.

[Search all gems](https://vibing.inc/library)[Newest additions](https://vibing.inc/library/new)

## Inside Design Tools & Generators

- Typography 28
- Color 25
- SVG generators (fffuel) 22
- Icons 21
- SVG generators 17
- CSS generators (Temani Afif) 14
- Illustration 14
- Mockups & screenshots 14
- CSS generators 12

## Gems in this collection

[### Pattern Monster Library of parametric seamless SVG patterns with per-pattern controls for stroke, scale, spacing, rotation and colors. Naveen CS free](https://vibing.inc/library/pattern-monster-vg-0786)[### Josh Comeau Gradient Generator Generates smooth CSS gradients with selectable interpolation colour space (LRGB, HSL, HCL, LAB), easing curve and stop precision. Josh W. Comeau (@joshwcomeau) free](https://vibing.inc/library/josh-comeau-gradient-generator-vg-0675)[### ggglitch Generates glitchy, displaced shape backgrounds with RGB-split and slice effects as SVG. fffuel free](https://vibing.inc/library/ggglitch-vg-0714)[### fffuel Suite of roughly seventy single-purpose SVG generators covering noise, grain, waves, blobs, patterns, spirals and gradients. fffuel free](https://vibing.inc/library/fffuel-vg-0779)[### rrready Support chart for CSS and web platform features, showing what is safe to ship today. fffuel free](https://vibing.inc/library/rrready-vg-0809)[### ssscribble Generates background scribble textures as lightweight SVG line art, with controls for density, roughness and stroke weight. fffuel free](https://vibing.inc/library/ssscribble-vg-0811)[### nnneon Generates futuristic glowing neon SVG shapes with layered blur and stroke controls. fffuel free](https://vibing.inc/library/nnneon-vg-0715)[### SVG to CSS Shape Converts an SVG path into an equivalent CSS clip-path or mask so shapes stay resolution-independent. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/svg-to-css-shape-vg-0703)[### Future Fonts Marketplace selling typefaces while still in progress at reduced prices, with free upgrades as the family develops. Future Fonts paid](https://vibing.inc/library/future-fonts-vg-0827)[### Black Illustrations Free illustration packs specifically depicting Black people, created to fix representation gaps in stock illustration. John D. Saunders free](https://vibing.inc/library/black-illustrations-vg-0740)[### Maskable.app Editor Editor for PWA maskable icons showing live previews across Android icon mask shapes with safe-zone guides. Tiger Oakes (@Not_Woods) Apache-2.0](https://vibing.inc/library/maskable-app-editor-vg-0784)[### ssspill Generates spill and melting-drip SVG shapes for section dividers, overlays and playful page transitions between colour blocks. fffuel free](https://vibing.inc/library/ssspill-vg-0813)[### pppalette Generates custom colour palettes from a chosen base colour, with exportable swatches and copyable CSS variable output. fffuel free](https://vibing.inc/library/pppalette-vg-0806)[### Grainient Generator for unlimited grainy, animated and AI-assisted gradient backgrounds with high-resolution export. Basit A. Khan (@basit_designs) freemium](https://vibing.inc/library/grainient-vg-0717)[### Pryzm Studio for generating animated and static background gradients and visual effects, exportable for web use. Ava Thiery (@ava_thiery) freemium](https://vibing.inc/library/pryzm-vg-0646)[### Fonts In Use Archive of typography in the wild, indexed by typeface, industry and format, with editorial notes from type experts. Sam Berlow, Stephen Coles & Nick Sherman free](https://vibing.inc/library/fonts-in-use-vg-0823)[### Animated CSS Patterns Animated variants of the css-pattern collection: moving CSS-gradient backgrounds with no JS or images. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/animated-css-patterns-vg-0692)[### Coolors Spacebar-driven palette generator with 10M+ browsable palettes, image colour extraction, contrast checking, gradient tools and palette mockup previews. Fabrizio Bianchi (@fabrizio_bianchi) freemium](https://vibing.inc/library/coolors-vg-2020)[### cccoil Generates SVG spiral wave shapes with adjustable turns, stroke thickness and taper, useful as decorative background art. fffuel free](https://vibing.inc/library/cccoil-vg-0796)[### 3D Perspective Grid Generator Creates vanishing-point perspective grids exportable as SVG for retro and synthwave layouts. MagicPattern free](https://vibing.inc/library/3d-perspective-grid-generator-vg-0769)[### ttten Pattern generator based on the classic 10 PRINT maze algorithm, output as tileable SVG. fffuel free](https://vibing.inc/library/ttten-vg-0768)[### Colors.lol Curated overly descriptive color palettes with names and hex codes, built as a design-inspiration source rather than a generator. Adam Fuhrer (@adamfuhrer) free](https://vibing.inc/library/colors-lol-vg-0653)[### Fancy Frames Produces ornamental CSS frames around images using masks and gradients instead of images. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/fancy-frames-vg-0696)[### Get Waves Generates SVG wave dividers with controls for amplitude, complexity and randomness, exportable as markup or file. Z Creative Labs free](https://vibing.inc/library/get-waves-vg-0780)[### Whimsical Animations Interactive course and playground on building playful, physical web animations, with runnable demos throughout. Josh W. Comeau (@joshwcomeau) paid](https://vibing.inc/library/whimsical-animations-vg-0767)[### InclusiveColors Builds custom palettes in the HSLuv color space with live WCAG and APCA contrast checks, exporting to Tailwind, CSS and Figma. Sean Wilson (@seanw_org) free](https://vibing.inc/library/inclusivecolors-vg-0661)[### NEAT Free generator for animated three-dimensional gradient backgrounds with a live editor and web export. FireCMS free](https://vibing.inc/library/neat-vg-0642)[### dddepth Library of AI-generated 3D shape renders, free to download and drop into layouts. fffuel free](https://vibing.inc/library/dddepth-vg-0798)[### Humaaans Mix-and-match illustration system for human figures with swappable heads, bodies, poses and clothing. Pablo Stanley (@pablostanley) free](https://vibing.inc/library/humaaans-vg-0743)[### UI Colors Tailwind palette generator that builds full colour scales from one hex and previews them across cards, dashboards and full pages. Erik de Vries freemium](https://vibing.inc/library/ui-colors-vg-0673)[### Free Vintage Illustrations Public-domain vintage engravings and etchings, cleaned and vectorised, from the Heritage Type archive. Heritage Type Co. free](https://vibing.inc/library/free-vintage-illustrations-vg-0742)[### CSS Selectors Visual Guide Interactive reference where every CSS selector is demonstrated live against a sample DOM you can modify. fffuel free](https://vibing.inc/library/css-selectors-visual-guide-vg-0682)[### mmmotif Generates isometric 3D-looking SVG patterns from tileable motifs, with control over tile size, angle and colour. fffuel free](https://vibing.inc/library/mmmotif-vg-0804)[### Mimicly Editor for faking screens of forty-plus apps — iMessage, WhatsApp, Instagram, Discord, ChatGPT — and exporting them as images or video. Mimicly freemium](https://vibing.inc/library/mimicly-vg-0753)[### OKLCH Color Picker & Converter Interactive OKLCH picker showing the P3 and sRGB gamut slices live, so you can see which colors are unreachable. Evil Martians free](https://vibing.inc/library/oklch-color-picker-converter-vg-0663)[### iiisometric Isometric scene builder that stacks and arranges isometric blocks into an exportable SVG illustration, no 3D tool needed. fffuel free](https://vibing.inc/library/iiisometric-vg-0802)[### Khroma Trains on colors you personally like, then generates unlimited palettes, gradients and type samples in your own taste. George Hastings free](https://vibing.inc/library/khroma-vg-0662)[### Neumorphism CSS Generator Produces soft-UI dual-shadow CSS with controls for distance, blur, intensity and surface color contrast. Marko Denic free](https://vibing.inc/library/neumorphism-css-generator-vg-0689)[### Colourco.de Pick colors by dragging across a hue field and instantly get monochromatic, analogic and triadic sets with lightness control. Toni Wagner free](https://vibing.inc/library/colourco-de-vg-0654)[### Harmonizer Evil Martians generator that produces color scales with matched perceptual contrast across hues using OKLCH and APCA math. Evil Martians free](https://vibing.inc/library/harmonizer-vg-0658)[### Dev Fonts Side-by-side comparison of monospace coding typefaces rendered in a real code sample with ligature toggles. Gafi free](https://vibing.inc/library/dev-fonts-vg-0818)[### God Rays Generator Single-purpose generator producing volumetric god-ray light beam graphics with adjustable angle, spread and colour. MagicPattern free](https://vibing.inc/library/god-rays-generator-vg-0712)[### Open Props Supersized collection of CSS custom properties covering colour, easing, shadows, gradients and animations. Adam Argyle (@argyleink) MIT](https://vibing.inc/library/open-props-vg-0679)[### Blobmaker Generates smooth random organic blob shapes with complexity and contrast sliders, exportable as SVG. Z Creative Labs free](https://vibing.inc/library/blobmaker-vg-0777)[### Section Divider Generates CSS-only section dividers — waves, zigzags, arrows — that scale without image assets. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/section-divider-vg-0701)[### Colorion Around thirty thousand tagged colour palettes with one-tap hex copying, favourites, image-to-palette extraction and JSON export. Csaba Kissi (@csaba_kissi) free](https://vibing.inc/library/colorion-vg-0670)[### Wordmark.it Renders any word in every font installed on your machine at once so you can pick a wordmark visually. Wordmark OÜ free](https://vibing.inc/library/wordmark-it-vg-0840)[### Duo Two-color pairing tool that shows every combination rendered as real UI so you can judge legibility, not swatches. Alex Pate free](https://vibing.inc/library/duo-vg-0656)[### Realtime Colors Paste a palette and preview it instantly on a full fake landing page, with export to Tailwind, CSS variables and Figma. Juxtopposed (@juxtopposed) open-source](https://vibing.inc/library/realtime-colors-vg-0666)[### Custom Borders Generates CSS-only decorative borders — corner brackets, partial frames and offset outlines — with no extra markup. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/custom-borders-vg-0694)[### RealFaviconGenerator Generates the full favicon and app-icon set across platforms with per-platform previews and an HTML snippet. Philippe Bernard free](https://vibing.inc/library/realfavicongenerator-vg-0787)[### crd-ui Credit and debit card React component with automatic brand detection and a 3D flip interaction. Juanda (juanda.co) open-source](https://vibing.inc/library/crd-ui-vg-0677)[### Shotsnapp Generates device-framed product screenshots with configurable perspective, background and shadow, exporting high-resolution PNG. Gaddafi Rusli (@gaddafirusli) free](https://vibing.inc/library/shotsnapp-vg-0764)[### Open Doodles Free sketch-style illustrations of people in poses, editable and recolorable, released with no attribution requirement. Pablo Stanley (@pablostanley) free](https://vibing.inc/library/open-doodles-vg-0746)[### Ribbon Shapes Generates CSS ribbon and banner shapes for badges and callouts using single-element techniques. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/ribbon-shapes-vg-0700)[### Phosphor Icons Icon family of about nine thousand glyphs across six weights including duotone and fill, with packages for most frameworks. Phosphor Icons (Helena Zhang & Tobias Fried) MIT](https://vibing.inc/library/phosphor-icons-vg-0732)[### Boring Avatars Generates deterministic SVG avatars from a name string in several geometric styles, as a React component or API. Hayk An, Javi Sánchez-Marín, Enric Pallerols & Josep Martins MIT](https://vibing.inc/library/boring-avatars-vg-0741)[### Wakamai Fondue Drop a font file in and get every OpenType feature, variable axis, glyph and language it supports, with live testing. Roel Nieskens (@PixelAmbacht) free](https://vibing.inc/library/wakamai-fondue-vg-0839)[### Compressor.io Browser image compressor handling JPEG, PNG, SVG, GIF and WebP with lossy or lossless modes, resizing and EXIF stripping. Compressor.io freemium](https://vibing.inc/library/compressor-io-vg-0751)[### apcach JavaScript library that generates colors from a target APCA contrast value instead of picking a color and checking after. Evil Martians MIT](https://vibing.inc/library/apcach-vg-0649)[### Goodbrief Generates randomised creative briefs by discipline and industry — logo, branding, packaging, illustration — and exports them as PDF or image. Manu (manu.coffee) free](https://vibing.inc/library/goodbrief-vg-0771)[### ooorganize Grid pattern generator covering dot, line, cross and mixed grid backgrounds as SVG. fffuel free](https://vibing.inc/library/ooorganize-vg-0805)[### ppperspective Generates SVG shapes converging on a vanishing point for depth and tunnel effects. fffuel free](https://vibing.inc/library/ppperspective-vg-0807)[### gggrain Combines soft color blobs with an SVG noise filter to produce the grainy gradient backgrounds used across modern landing pages. fffuel free](https://vibing.inc/library/gggrain-vg-0781)[### Wavy Divider Builds tunable wavy edge dividers in pure CSS with amplitude and frequency controls. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/wavy-divider-vg-0705)[### CSS Shapes Generator producing complex CSS clip-path and shape-outside values with a visual point editor. Temani Afif (@Afif13) free](https://vibing.inc/library/css-shapes-vg-0707)[### Tabler Icons Over five thousand consistently stroked SVG icons on a 24px grid with filled variants and framework packages. Paweł Kuna (@codecalm) MIT](https://vibing.inc/library/tabler-icons-vg-0737)[### Fancy Border Radius Generator Visual editor for the eight-value border-radius syntax, producing organic squircle and blob shapes from real CSS. 9elements MIT](https://vibing.inc/library/fancy-border-radius-generator-vg-0687)[### FarbVelo Generative random-color explorer with perceptual distance controls, color-blindness preview and a genuinely playful interface. David Aerne (@meodai) free](https://vibing.inc/library/farbvelo-vg-0657)[### bbblurry Creates soft blurry blob background shapes exportable as SVG, sized and coloured in the browser. fffuel free](https://vibing.inc/library/bbblurry-vg-0647)[### Impeccable One agent skill with twenty commands plus a curated list of frontend design anti-patterns to avoid. Paul Bakaus (@pbakaus) open-source](https://vibing.inc/library/impeccable-vg-0775)[### Tint & Shade Generator Generates mathematically exact 10% tints and shades of a hex color, the way brand guidelines usually specify them. Michael Edelstone (@edelstone) free](https://vibing.inc/library/tint-shade-generator-vg-0667)[### ffflux Produces fluid, turbulence-displaced SVG gradient backgrounds using feTurbulence filters, with live colour and distortion controls. fffuel free](https://vibing.inc/library/ffflux-vg-0713)[### Velvetyne Type Foundry French libre type foundry releasing experimental, characterful open-source typefaces used widely in cultural design work. Velvetyne Type Foundry open-source](https://vibing.inc/library/velvetyne-type-foundry-vg-0838)[### Dither Generator Converts images to dithered, halftone-style output with control over algorithm, dot size and palette. MagicPattern free](https://vibing.inc/library/dither-generator-vg-0710)[### 3dicons Open-source library of 3D rendered icons in multiple styles and camera angles, free in PNG and Blender source. Vijay Verma (@realvjy) MIT](https://vibing.inc/library/3dicons-vg-0722)[### sssurf SVG wave generator producing layered wave dividers and backgrounds with adjustable amplitude and complexity. fffuel free](https://vibing.inc/library/sssurf-vg-0843)[### CSS Shadow Gradients Gallery of layered box-shadow recipes that create gradient-like glows, each copyable as plain CSS. Álvaro Trigo free](https://vibing.inc/library/css-shadow-gradients-vg-0683)[### Custom Corners Generates notched, scooped and cut-corner CSS shapes on a single element, without pseudo-element hacks or image assets. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/custom-corners-vg-0695)[### ccclaymoji Claymorphism-style emoji maker producing soft 3D clay emoji as downloadable artwork, with adjustable colour and lighting. fffuel free](https://vibing.inc/library/ccclaymoji-vg-0795)[### Blob Shapes Generates organic blob shapes as CSS border-radius or clip-path values, so blobs stay resolution-independent and animatable. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/blob-shapes-vg-0693)[### tttexture Free grunge and vintage texture overlays supplied as ready-to-use image assets for adding wear to flat interfaces. fffuel free](https://vibing.inc/library/tttexture-vg-0814)[### Tooltips & Speech Bubbles Generates speech-bubble and tooltip shapes with arbitrary tail position and border in pure CSS. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/tooltips-speech-bubbles-vg-0704)[### Layoutit Grid Interactive CSS Grid builder supporting named areas, nested grids and live HTML plus CSS export. Leniolabs MIT](https://vibing.inc/library/layoutit-grid-vg-0688)[### WebTUI CSS library that styles the web to look and behave like a terminal user interface, with proper character grids. @IroncladDev open-source](https://vibing.inc/library/webtui-vg-0816)[### Trianglify Generates low-poly triangle mesh backgrounds from a seed and palette, available as a site and a JS library. Quinn Rohlf (@qrohlf) MIT](https://vibing.inc/library/trianglify-vg-0792)[### Fontsource Self-hostable npm packages for open-source fonts, including variable and subset builds, so you avoid third-party font CDNs. Fontsource MIT](https://vibing.inc/library/fontsource-vg-0825)[### Devicon Icon set of programming language, framework and tool logos in original-color and plain variants, as font and SVG. Devicon contributors MIT](https://vibing.inc/library/devicon-vg-0725)[### Pika Screenshot beautifier with device frames, browser chrome, backgrounds and templates, plus an API for automated generation. Rishi Mohan (@thelifeofrishi) freemium](https://vibing.inc/library/pika-vg-0759)[### Easing Gradients Generates multi-stop CSS gradients that follow an easing curve, eliminating the grey mush in the middle of fades. Andreas Larsen (@larsenwork) MIT](https://vibing.inc/library/easing-gradients-vg-0685)[### eeencode Encodes SVG markup to Base64 or URL-encoded form for use in CSS background-image. fffuel free](https://vibing.inc/library/eeencode-vg-0800)[### Open Peeps Hand-drawn illustration library of mix-and-match people components, free for commercial use, also available as a Figma file. Pablo Stanley (@pablostanley) free](https://vibing.inc/library/open-peeps-vg-0747)[### Random CSS Loader Serves a random single-element CSS loader on each visit as a browsing interface into the 600-loader set. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/random-css-loader-vg-0698)[### Circum Icons Single-weight open-source icon set of around three hundred icons, deliberately small and consistent, with React and Vue packages. Circum open-source](https://vibing.inc/library/circum-icons-vg-0723)[### Starburst Shapes Generates starburst and sunburst CSS shapes with adjustable spike count and depth. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/starburst-shapes-vg-0702)[### shadowLab Interactive playground for designing layered box shadows and exporting them for both web CSS and React Native. Mocarski free](https://vibing.inc/library/shadowlab-vg-0773)[### hhholographic Generates iridescent holographic background gradients with adjustable hue sweep and grain. fffuel free](https://vibing.inc/library/hhholographic-vg-0721)[### Gradient Shadows Generates multi-colour gradient box-shadows in pure CSS with live preview and copyable output. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/gradient-shadows-vg-0697)[### dddoodle Hand-drawn doodle collection delivered as editable vector SVG assets you can recolour and combine into illustration sets. fffuel free](https://vibing.inc/library/dddoodle-vg-0799)[### Indie Icons Free hand-made icon set from Visiwig with unusual, characterful shapes distinct from standard icon libraries. Visiwig free](https://vibing.inc/library/indie-icons-vg-0731)[### pppointed SVG arrow maker for hand-drawn and geometric pointer shapes with adjustable curvature. fffuel free](https://vibing.inc/library/pppointed-vg-0808)[### hhhorizon Cyberpunk-inspired SVG background generator combining horizon grids, glow gradients and scan lines into a single exportable file. fffuel free](https://vibing.inc/library/hhhorizon-vg-0801)[### Huetone Desktop-grade web app for building color scales in LCh with live APCA contrast readouts and Figma-ready export. Alexey Ardov (@ardov) MIT](https://vibing.inc/library/huetone-vg-0660)[### cccolor HEX, RGB and HSL colour picker with harmony suggestions and copyable CSS values. fffuel free](https://vibing.inc/library/cccolor-vg-0797)[### Who Can Use Enter a foreground and background pair and see, per vision-type, which real groups of people can actually read it. Corey Ginnivan & Ally Palanzi free](https://vibing.inc/library/who-can-use-vg-0669)[### bbburst Confetti and burst SVG generator producing celebratory particle arrangements as static vector art for success and empty states. fffuel free](https://vibing.inc/library/bbburst-vg-0794)[### Utopia Fluid Space Calculator Companion tool generating a fluid spacing scale with one-up pairs, giving consistent responsive gaps from clamp values. James Gilyead & Trys Mudford free](https://vibing.inc/library/utopia-fluid-space-calculator-vg-0835)[### Utopia Fluid Type Scale Calculator Generates a type scale that interpolates smoothly between two viewport widths, outputting CSS clamp custom properties. James Gilyead & Trys Mudford free](https://vibing.inc/library/utopia-fluid-type-scale-calculator-vg-0836)[### Interface Craft Working library of interface patterns and details for people designing with deliberate, uncommon care. Unknown free](https://vibing.inc/library/interface-craft-vg-0772)[### Mockuphone Free device mockup generator covering a very long tail of phone, tablet, laptop and TV models including older hardware. Oursky free](https://vibing.inc/library/mockuphone-vg-0758)[### Fractal Glass Effect Generator Generates fractal-glass refraction distortion overlays that can be applied to images and backgrounds. MagicPattern free](https://vibing.inc/library/fractal-glass-effect-generator-vg-0711)[### IconPark ByteDance icon system where a single SVG source can be rendered in outline, filled, two-tone or multi-color themes. ByteDance Apache-2.0](https://vibing.inc/library/iconpark-vg-0728)[### Womp Browser-based collaborative 3D modelling tool built around soft, blobby, designer-friendly modelling. Womp, Inc. freemium](https://vibing.inc/library/womp-vg-0636)[### wwwatercolor Generates soft watercolour-style background washes as SVG using layered filter effects. fffuel free](https://vibing.inc/library/wwwatercolor-vg-0842)[### Ikonate Fully customisable open-source SVG icons where stroke width, size and corner radius are adjustable before download. Mikołaj Dobrucki (@mikolajdobrucki) MIT](https://vibing.inc/library/ikonate-vg-0730)[### rrrepeat Generator for repeating SVG shape grids with control over spacing, rotation and scale. fffuel free](https://vibing.inc/library/rrrepeat-vg-0810)[### Sketchling TypeScript language giving LLMs hand-drawn primitives, IK rigging, camera and particles; renders deterministically via rough.js and GSAP. Anay Garodia MIT](https://vibing.inc/library/sketchling-vg-2013)[### Iconoir Fully open-source icon library of over sixteen hundred icons with a consistent grid, no premium tier and no attribution. Luca Burgio (@lucaburgio) MIT](https://vibing.inc/library/iconoir-vg-0727)[### llline SVG stroke and line generator for decorative rules, underlines, connectors and dividers, with adjustable curvature and thickness. fffuel free](https://vibing.inc/library/llline-vg-0803)[### ssshape Organic blob shape generator producing editable SVG paths, with sliders for complexity, irregularity and corner smoothing. fffuel free](https://vibing.inc/library/ssshape-vg-0812)[### Ember Terminal, chart, heatmap and UI palettes engineered to stay distinguishable after aggressive Redshift or Night Shift warm-screen filtering. carpdiem MIT](https://vibing.inc/library/ember-vg-2007)[### Taste Skill Open-source skill files that steer AI coding agents toward better frontend visual and interaction decisions. Leon Lin (@lexnlin) & blueemi (@blueemi99) open-source](https://vibing.inc/library/taste-skill-vg-0637)[### Screeener Open-source utility that batch-generates App Store and Play Store screenshot sets from source images and templates. Zeh Fernandes (@zehfernandes) MIT](https://vibing.inc/library/screeener-vg-0762)[### FontDrop Browser font inspector that reads glyph coverage, metrics and OpenType data from a dropped file with no upload. Viktor Nübel & Ulrike Rausch free](https://vibing.inc/library/fontdrop-vg-0822)[### Animockup Open-source tool for creating animated product mockups and device-framed videos entirely in the browser. Alyssa X (@alyssaxuu) MIT](https://vibing.inc/library/animockup-vg-0754)[### Holosticker Browser studio that turns artwork into holographic foil stickers with interactive tilt-reactive shine. jal-co open-source](https://vibing.inc/library/holosticker-vg-0774)[### Mesurer Browser tool for measuring and inspecting interface spacing, sizes and rhythm directly on live pages. Julien Thibeaut (@ibelick) free](https://vibing.inc/library/mesurer-vg-0752)[### Random CSS Tip Serves a random modern-CSS technique with runnable demo, as a daily learning surface. Temani Afif (@ChallengesCss) free](https://vibing.inc/library/random-css-tip-vg-0699)[### UI Skills Set of agent skill files aimed at polishing interfaces produced by AI coding agents. @ibelick open-source](https://vibing.inc/library/ui-skills-vg-0638)[### PostSpark Code Turns code snippets into styled screenshots with themes, window chrome, backgrounds and adjustable padding. Unknown freemium](https://vibing.inc/library/postspark-code-vg-0760)[### Absurd Design Surreal hand-drawn illustration collection with a deliberately strange visual language, free and paid tiers. Diana Valeanu freemium](https://vibing.inc/library/absurd-design-vg-0739)[### Fluid Functionalism Open-source UI component set built around fluid, functionalist motion and layout principles. @micka_design open-source](https://vibing.inc/library/fluid-functionalism-vg-0676)[### Iconbuddy Icon aggregator with cross-set search, live color and stroke editing, and export to SVG, PNG or component code. SimpleBytes freemium](https://vibing.inc/library/iconbuddy-vg-0726)[### SmolCSS Collection of minimal modern CSS layout and component solutions, each just a few lines with live demos. Stephanie Eckles (@5t3ph) open-source](https://vibing.inc/library/smolcss-vg-0706)[### Easy Easings Generates CSS linear() easing functions and keyframe blocks for non-cubic-bezier curves like bounces and springs. Maurici Abad free](https://vibing.inc/library/easy-easings-vg-0686)[### Vercel OG Image Playground Live editor for Satori-based OG images where you write JSX and see the rendered social card update instantly. Vercel free](https://vibing.inc/library/vercel-og-image-playground-vg-0766)[### Anatomy of AI Input Written breakdown of the AI chat input component — attachments, modes, model pickers, send states — with annotated examples. Julien Thibeaut (@ibelick) free](https://vibing.inc/library/anatomy-of-ai-input-vg-0641)[### Mega Doodles Pack Open-source pack of hand-drawn doodle objects and characters in SVG and Sketch, free for any use. Maria Letta (@MariaLetta) free](https://vibing.inc/library/mega-doodles-pack-vg-0745)[### Border Beam Configurable React component that animates a light beam travelling around an element's border, with live controls and copyable code. Jakub Antalík (@jantalik) free](https://vibing.inc/library/border-beam-vg-0648)[### FakeClients Randomised client briefs for logo, web, UX, graphic design, illustration and writing, with a feedback board for finished work. August van de Ven freemium](https://vibing.inc/library/fakeclients-vg-0770)[### Typewolf Ongoing catalogue of real websites annotated with the exact fonts used, plus font-pairing and alternative recommendations. Jeremiah Shoaf (@typewolf) free](https://vibing.inc/library/typewolf-vg-0833)[### System UIcons Icon set drawn specifically for dense product interfaces, with an unusual visual restraint and steady release cadence. Corey Ginnivan free](https://vibing.inc/library/system-uicons-vg-0736)[### Sinwaver Purpose-built generator for mathematically precise SVG sine waves with frequency, amplitude and phase controls. Hugo Duprez free](https://vibing.inc/library/sinwaver-vg-0789)[### OKLCH.fyi Convert, generate and explore OKLCH colours and build perceptually even palettes from them. Jakub Krehel (@jakubkrehel) free](https://vibing.inc/library/oklch-fyi-vg-0674)[### Design Prompts Thirty-one visual styles rendered from identical data, each paired with the AI prompt needed to reproduce that aesthetic. Design Prompts free](https://vibing.inc/library/design-prompts-vg-0639)[### Gradient Border Plugin Tailwind CSS plugin that adds proper gradient borders without the usual pseudo-element and background-clip hacks. Florian Kiem MIT](https://vibing.inc/library/gradient-border-plugin-vg-0815)[### Fontshare Free-for-commercial-use typeface library from Indian Type Foundry, with variable fonts and full family downloads. Indian Type Foundry free](https://vibing.inc/library/fontshare-vg-0824)[### The League of Moveable Type The original open-source type foundry, still shipping well-hinted free webfont families with proper licensing. The League of Moveable Type open-source](https://vibing.inc/library/the-league-of-moveable-type-vg-0831)[### AI Glossary Plain-language glossary of AI interface and model terminology aimed at designers and design engineers. Julien Thibeaut (@ibelick) free](https://vibing.inc/library/ai-glossary-vg-0640)[### Interactive SVG Animations Interactive mini-course teaching SVG animation techniques with editable inline examples. Nanda Syahrasyad freemium](https://vibing.inc/library/interactive-svg-animations-vg-0678)[### soundcn Library of 700+ curated UI sound effects packaged for use in modern web applications. Unknown free](https://vibing.inc/library/soundcn-vg-0643)[### Smooth Shadows Alternative layered box-shadow generator with light-source positioning and a live preview on a configurable surface. Unknown free](https://vibing.inc/library/smooth-shadows-vg-0691)[### aaabstract Abstract holographic background generator producing layered iridescent SVG artwork you can recolour and export at any size. fffuel free](https://vibing.inc/library/aaabstract-vg-0793)[### CSS Spring Easing Generator Converts spring physics parameters into a CSS linear() easing string you can paste straight into a transition. Kevin Grajeda free](https://vibing.inc/library/css-spring-easing-generator-vg-0684)[### Web Interface Guidelines Non-exhaustive checklist of concrete details that separate a good web interface from a mediocre one. Rauno Freiberg (@raunofreiberg) free](https://vibing.inc/library/web-interface-guidelines-vg-0720)[### Hashvatar Generates deterministic identicon-style avatars from a wallet address or username, no server or storage needed. Médhy Chabour free](https://vibing.inc/library/hashvatar-vg-0645)[### userinterface.wiki Living manual of interface craft covering design principles, motion, spacing and component behaviour. Raphael Salaja (@raphaelsalaja) free](https://vibing.inc/library/userinterface-wiki-vg-0844)[### Colormason Agent skill that turns one brand hex into OKLCH ramps, WCAG-checked semantic tokens, and Tailwind or CSS output offline. @vladzima MIT](https://vibing.inc/library/colormason-vg-2206)[### Shiny Sticker Figma plugin that turns any layer into a WebGL holographic sequin sticker with die-cut edge and foil presets. Rikki Janae (@rikkijanae) MIT](https://vibing.inc/library/shiny-sticker-vg-2208)[### vintage-latex Twenty LuaLaTeX and MetaPost examples of vintage scientific-paper aesthetics: plates, star charts, log tables, knots. @Foadsf open-source](https://vibing.inc/library/vintage-latex-vg-2210)[### Super Prototyping Copy any app UI into plain HTML artboards on a local canvas with measured colors and metrics, no design tool required. ReScienceLab Apache-2.0](https://vibing.inc/library/super-prototyping-vg-2211)[### Spotkit Claude Code skill that writes themable SVG product illustrations in one family from a feature description. Devesh Shirsath (@Devesh-Shirsath) MIT](https://vibing.inc/library/spotkit-vg-2207)[### Astrotypes Curated font pairings for Astro with one-command install via the Astro Fonts API, Tailwind or plain CSS. Michael Andreuzza (@michael-andreuzza) MIT](https://vibing.inc/library/astrotypes-vg-2186)[### icofon Rust CLI that builds an icon font and matching stylesheet from a folder of SVG files, with a live glyph preview. @JWo1F MIT](https://vibing.inc/library/icofon-vg-2187)[### playgrnd Collection of 33 free, single-purpose generative design tools for patterns, backgrounds, posters and textures — all run in-browser with no accounts or uploads. playgrnd free](https://vibing.inc/library/playgrnd-vg-2164)[### Stash Icons MIT 24×24 SVG icon set in five styles (duotone, light, regular, solid, editor) as React packages, with a Figma source. Pingback (Rachel Andrade, Pedro Ladeira) MIT](https://vibing.inc/library/stash-icons-vg-2155)[### Trazor Client-side PNG-to-SVG vectorizer with per-colour Potrace-class curves, seam-free cutouts and centerline tracing for vinyl and plotters. Fabien Ménager (@PhenX) MIT](https://vibing.inc/library/trazor-vg-2149)[### HandDrawnFont Browser font creator and SwiftUI package that draws letters from real pen strokes, keeping original stroke order and timing. Jip van der Velde (@jipvandervelde) unknown](https://vibing.inc/library/handdrawnfont-vg-2150)[### IconMind Compiler-driven icon set for agents, MCP and RAG, with six validated drawings per concept and an MCP server of real names. IconMind MIT](https://vibing.inc/library/iconmind-vg-2154)[### UI-Anatomist Chrome extension that scans a rendered web UI's observable styles, states and icons, plus a Figma plugin that rebuilds them as editable variables and components. Su JiaYi (@SuJiaYi27) Apache-2.0](https://vibing.inc/library/ui-anatomist-vg-2145)[### Stamp Studio Browser tool that turns uploaded artwork into a postage stamp: perforation gauge, aged paper, struck postmark, exported as transparent PNG. @jalcowastaken MIT](https://vibing.inc/library/stamp-studio-vg-2138)[### Forma Icon Creator Browser vector workspace that reshapes icons from Tabler, Lucide, Phosphor, Iconoir and Heroicons into custom app icons, exporting SVG or PNG. Unknown free](https://vibing.inc/library/forma-icon-creator-vg-2113)[### Topo Browser generator for topographic contour-line patterns with adjustable parameters and export, for backgrounds, posters and section dividers. Unknown free](https://vibing.inc/library/topo-vg-2094)[### VibePrompt 251 UI layout prompts across 15 page-section categories — auth, pricing, dashboards, onboarding — each with a preview and copy-paste Tailwind markup. VibePrompt free](https://vibing.inc/library/vibeprompt-vg-2069)[### YouWorkForThem Fonts Type marketplace carrying 250,000+ fonts from independent designers and foundries, with one-time desktop and web licensing and no subscription. YouWorkForThem paid](https://vibing.inc/library/youworkforthem-fonts-vg-2061)[### IconsRoom Searchable front-end for 250,000+ open-source icons across 150+ sets, with colour and stroke customisation and SVG, PNG, React or Vue export. @mdanassaif free](https://vibing.inc/library/iconsroom-vg-2045)[### Buttery Minimal icon set drawn for interface work, with a browsable library, changelog and per-icon requests. Rachel How (@rachelhxw) freemium](https://vibing.inc/library/buttery-vg-2044)[### instantshader Zero-dependency WebGL library for animated mesh-gradient backgrounds: seamless loops, mounts to any element, exports frames. @ugo_builds MIT](https://vibing.inc/library/instantshader-vg-2035)[### Desktop Colors Archive of every solid desktop background colour shipped by classic operating systems: 194 colours across 22 platforms, 1985 to 2024. vlow free](https://vibing.inc/library/desktop-colors-vg-2006)[### Viz Palette Tests a categorical chart palette for color-blind confusion, low-contrast pairs, and how it reads at small mark sizes. Susie Lu free](https://vibing.inc/library/viz-palette-vg-0668)[### Bunny Fonts Drop-in privacy-respecting replacement for the Google Fonts API with an identical URL structure and no tracking. BunnyCDN free](https://vibing.inc/library/bunny-fonts-vg-0817)[### Dimmy.club Drops screenshots into clean device frames in a range of colors and orientations, exporting transparent PNG. Unknown free](https://vibing.inc/library/dimmy-club-vg-0756)[### Squircley Generates superellipse squircle shapes as SVG with curvature, rotation and gradient fill controls. Shape Factory free](https://vibing.inc/library/squircley-vg-0790)[### Indestructible Type Small open-source foundry producing carefully drawn free typefaces, each with full documentation of its design intent. Owen Earl open-source](https://vibing.inc/library/indestructible-type-vg-0828)[### Mesher Mesh gradient designer with draggable color points, blur controls and export to CSS, PNG or SVG. CSSHero free](https://vibing.inc/library/mesher-vg-0718)[### FontSpark Rapid-fire font discovery that shows one random typeface at a time so you judge by feel instead of scrolling a grid. Unknown free](https://vibing.inc/library/fontspark-vg-0826)[### Robohash URL-based API that deterministically generates a unique robot, monster or cat avatar from any string. Colin Davis free](https://vibing.inc/library/robohash-vg-0748)[### Font Style Matcher Side-by-side tool for matching a web font's metrics to a fallback font to eliminate layout shift on load. Monica Dinculescu (@notwaldorf) free](https://vibing.inc/library/font-style-matcher-vg-0821)[### Tiff Overlays two typefaces on top of each other so you can see exactly where their letterforms differ. Winnie Mu MIT](https://vibing.inc/library/tiff-vg-0832)[### CSS Grid Generator Draw a grid visually by setting columns, rows and gaps, then drag child areas and copy the generated CSS. Sarah Drasner (@sarah_edo) MIT](https://vibing.inc/library/css-grid-generator-vg-0681)[### Variable Font Playground Side-by-side variable font specimen tester with per-axis sliders and instant CSS font-variation-settings output. Unknown free](https://vibing.inc/library/variable-font-playground-vg-0837)[### Threed.io Browser-based 3D mockup generator that maps your artwork onto rotatable 3D device and object models. Unknown freemium](https://vibing.inc/library/threed-io-vg-0765)[### ColorBox Lyft's tool for generating color ramps by curve-editing hue, saturation and luminosity independently across the scale. Lyft Design free](https://vibing.inc/library/colorbox-vg-0652)[### Doodad Pattern Generator Generates seamless SVG and CSS background patterns from configurable primitives, with a fully offline-capable interface. Unknown free](https://vibing.inc/library/doodad-pattern-generator-vg-0778)[### Frrames Free pack of realistic device and browser frames as editable Sketch and Figma assets for compositing screenshots. Craftwork Studio free](https://vibing.inc/library/frrames-vg-0757)[### Palettte App Edits existing palettes by plotting hue, saturation and brightness curves, letting you smooth an inherited messy color set. Gabriel Adorf free](https://vibing.inc/library/palettte-app-vg-0664)[### Paaatterns Collection of hand-drawn style SVG patterns with a live color editor, from the LS Graphics studio. LS Graphics free](https://vibing.inc/library/paaatterns-vg-0785)[### Smooth Shadow (shadows.brumm.af) Builds layered multi-step box-shadows that approximate real light falloff, with sliders for spread, opacity and easing. Philipp Brumm free](https://vibing.inc/library/smooth-shadow-shadows-brumm-af-vg-0690)[### css.gg Icon set of seven hundred icons built entirely from CSS with no SVG or font, also available as SVG and React. Astrit Malsija (@astrit) MIT](https://vibing.inc/library/css-gg-vg-0724)[### Fluid Type Scale Calculator Open-source clamp-based type scale generator with configurable ratios, naming, rounding and direct CSS or Sass export. Aleksandr Hovhannisyan MIT](https://vibing.inc/library/fluid-type-scale-calculator-vg-0819)[### IRA Design Illustration builder with combinable hand-drawn objects and gradient backgrounds, editable directly in the browser. Creative Tim MIT](https://vibing.inc/library/ira-design-vg-0744)[### Devices by Facebook Design Free, accurate vector device templates for phones, tablets, laptops and wearables, maintained by Meta's design team. Facebook Design free](https://vibing.inc/library/devices-by-facebook-design-vg-0755)[### Icônes Search interface across two hundred thousand icons from every Iconify set, with copy as SVG, JSX, or component. Anthony Fu (@antfu) MIT](https://vibing.inc/library/ic-nes-vg-0729)[### Shape Divider Library of section-divider shapes with flip, invert, height and layering controls, output as inline SVG plus CSS. Unknown free](https://vibing.inc/library/shape-divider-vg-0788)[### Avataaars Generator Web generator for the Avataaars illustrated character set, free for commercial use and downloadable as SVG. Pablo Stanley (@pablostanley) and Fang-Pen Lin free](https://vibing.inc/library/avataaars-generator-vg-0644)[### Gradienta Curated set of animated and static CSS gradient backgrounds, each copyable as pure CSS with no images. Unknown free](https://vibing.inc/library/gradienta-vg-0716)[### Data Color Picker Generates sequential and diverging palettes for charts, interpolating in a perceptual space so steps read as even. Erik Kennedy free](https://vibing.inc/library/data-color-picker-vg-0655)[### Huemint Uses a machine-learning model trained on real designs to generate palettes constrained to a chosen layout or brand context. Jack Qiao free](https://vibing.inc/library/huemint-vg-0659)[### Picular Type any word and get the dominant colors from image search results, turning language directly into hex values. Future Memories free](https://vibing.inc/library/picular-vg-0665)[### DialKit Floating React control panel with sliders, toggles and colour pickers for tweaking values live in a running app. Josh Puckett (@joshpuckett) open-source](https://vibing.inc/library/dialkit-vg-0708)[### Design Tokens Generator Generates a complete set of CSS custom property design tokens for colour, type and spacing from a few inputs. LayoutIt free](https://vibing.inc/library/design-tokens-generator-vg-0709)[### Screenshot.rocks Converts screenshots into browser or phone mockups with 3D tilt, gradient backdrops and instant download. Unknown free](https://vibing.inc/library/screenshot-rocks-vg-0763)[### SVG Path Editor Node-level editor for raw SVG path data with live command list, transforms, arc visualisation and path optimisation. Yann Armelin (@Yqnn) Apache-2.0](https://vibing.inc/library/svg-path-editor-vg-0791)[### Font Playground Experimental interface for variable fonts with novel axis controls, letting you explore designspace beyond simple sliders. Wenting Zhang free](https://vibing.inc/library/font-playground-vg-0820)[### Libre Fonts by Womxn Curated index of libre typefaces designed by women and non-binary type designers, with direct source links. Unknown open-source](https://vibing.inc/library/libre-fonts-by-womxn-vg-0829)[### UNCUT Curated library of contemporary free and libre typefaces, presented as a proper type catalogue rather than a download farm. Unknown free](https://vibing.inc/library/uncut-vg-0834)[### Modern Fluid Typography Editor Visual editor for fluid type that graphs the clamp curve as you drag, making the math visible instead of guessed. Unknown free](https://vibing.inc/library/modern-fluid-typography-editor-vg-0830)[### MeshGradient by Visualy Mesh gradient generator with noise and grain overlays, exporting PNG or CSS-ready output at chosen resolution. Visualy free](https://vibing.inc/library/meshgradient-by-visualy-vg-0719)[### Clippy Drag-and-drop clip-path editor supporting polygon, circle, ellipse and inset with live CSS output over your own image. Bennett Feely free](https://vibing.inc/library/clippy-vg-0680)[### Remix Icon Neutral-style icon system of over two thousand icons designed as a matched set in both line and fill variants. Remix Design Apache-2.0](https://vibing.inc/library/remix-icon-vg-0734)[### Servier Medical Art Three thousand free medical and biological illustrations covering anatomy, cells and lab equipment, licensed CC BY. Servier free](https://vibing.inc/library/servier-medical-art-vg-0749)[### google-webfonts-helper Generates self-hosting bundles for any Google Font: woff2, woff, ttf, eot files plus the matching @font-face CSS. Mario Ranftl (@majodev) MIT](https://vibing.inc/library/google-webfonts-helper-vg-0841)[### Colorable Minimal matrix that cross-checks every color in a palette against every other for WCAG contrast in one glance. Brent Jackson (@jxnblk) MIT](https://vibing.inc/library/colorable-vg-0651)[### ColorSpace Palette and gradient generator that expands a single input colour into matching schemes, including three-colour gradient output. MyColorSpace (@mycolorspace) free](https://vibing.inc/library/colorspace-vg-0672)[### BGJar Free SVG background generator covering waves, polygons, blobs, grids and noise with per-shape parameter control. @zhangshine free](https://vibing.inc/library/bgjar-vg-0776)[### Łukasz Adam Illustrations Free and paid illustration packs from a single illustrator, with a consistent line and character style across sets. Łukasz Adam freemium](https://vibing.inc/library/ukasz-adam-illustrations-vg-0750)[### Sargam Icons Open-source icon set with a distinct rounded geometry, available in line and fill, with framework packages. @planetabhi MIT](https://vibing.inc/library/sargam-icons-vg-0735)[### Rotato Desktop app that renders 3D animated device mockups and screen recordings with real camera moves and lighting. Morten Just (@mortenjust) paid](https://vibing.inc/library/rotato-vg-0761)[### Atmos Playground Color system builder that generates full tonal scales from a few seeds and checks WCAG and APCA across every pairing. Atmos freemium](https://vibing.inc/library/atmos-playground-vg-0650)


---

Source: https://vibing.inc/library/c/design-tools-and-generators · Agent docs: https://vibing.inc/for-agents · MCP: https://vibing.inc/api/public/mcp