stopbookmarking.dev

Best UI, motion and 3D libraries - for you and your agents.

Motion & animation28

  1. Easing Wizardeasingwizard.comGenerator for bezier, spring, bounce and wiggle CSS easing functionsFreeeasingspringscssgenerator
  2. Osmoosmo.supplyVault of production-ready GSAP and Webflow animation componentsPaidgsapwebflowsnippets
  3. easing.deveasing.devCurated easing and spring presets with live previews and copyable codeFreeeasingspringspresets
  4. Hover.devhover.devAnimated React UI components and examples built with MotionFreemiumreactcomponentsexamples
  5. Linear Easing Generatorlinear-easing-generator.netlify.appConverts JS or SVG easing curves into CSS linear() functionsFreeeasingcsssprings
  6. Motion Canvasmotioncanvas.ioTypeScript library and editor for code-driven animated videosOpen sourcetypescriptvideoexplainer
  7. AutoAnimateauto-animate.formkit.comOne-line drop-in animations for list adds, removes and movesOpen sourcelayoutlistszero-config
  8. Lenislenis.devLightweight smooth scroll library that keeps native scroll behaviorOpen sourcescrollsmooth-scrolllibrary
  9. Lottielablottielab.comWeb editor for creating and exporting Lottie animations without After EffectsFreemiumlottieeditorfigma
  10. Theatre.jstheatrejs.comVisual timeline editor for animating DOM and Three.js scenes in codeOpen sourcetimelinethreejseditor
  11. Jitterjitter.videoBrowser-based motion design tool with Figma import and Lottie exportFreemiummotion-designfigmaeditor
  12. Remotionremotion.devMake real MP4 videos programmatically with React componentsFreemiumreactvideoprogrammaticagent skills
  13. Transition.csstransition.styleDrop-in CSS clip-path transitions for revealing elementsOpen sourcecsstransitionsclip-path
  14. Cavalrycavalry.studioProcedural 2D motion design app with Lottie and web exportFreemiumproceduralmotion-designapp
  15. Riverive.appDesign tool and runtime for interactive, state-machine driven animationsFreemiuminteractivestate-machineruntimeeditor
  16. Locomotive Scrollscroll.locomotive.caSmooth scroll with parallax and in-view detection via data attributesOpen sourcescrollparallaxsmooth-scroll
  17. Motionmotion.devAnimation library for React, JS and Vue, formerly Framer MotionOpen sourcereactspringsgestureslibraryexamplesmcp
  18. React Native Reanimateddocs.swmansion.comSmooth UI-thread animations and layout transitions for React NativeOpen sourcereact-nativeanimationmobile
  19. React Springreact-spring.devSpring-physics animation library for React and React Three FiberOpen sourcereactspringsphysics
  20. SVGatorsvgator.comVisual editor for animated SVGs that export as lightweight codeFreemiumsvgeditorno-code
  21. Animistaanimista.netPlayground to tweak and generate CSS keyframe animationsFreecssgeneratorkeyframes
  22. LottieFileslottiefiles.comLottie animation library, players and the Lottie Creator web editorFreemiumlottievectoreditorassetslottie-web
  23. Anime.jsanimejs.comLightweight JS animation engine with timelines, SVG, scroll and text splittingOpen sourcejavascriptsvgtimelinelibrary
  24. Vivusmaxwellito.github.ioAnimate SVG strokes so illustrations look like they are being drawnOpen sourcesvgline-drawingstroke
  25. Animate.cssanimate.styleReady-made cross-browser CSS animation classes you can drop inOpen sourcecsskeyframeslibrary
  26. GSAPgsap.comIndustry-standard JS animation engine: timelines, ScrollTrigger, SplitTextFreejavascripttimelinescrolllibraryagent skills
  27. Easings.neteasings.netVisual cheat sheet of standard easing curves with CSS and JS codeFreeeasingreferencecss
  28. cubic-bezier.comcubic-bezier.comInteractive editor to craft and compare CSS cubic-bezier curvesFreeeasingcsstool

UI libraries49

  1. Animate UIanimate-ui.comFully animated shadcn-style React components installed via the shadcn CLIOpen sourcereactanimatedshadcn
  2. Tailarktailark.comShadcn-based marketing blocks for heroes, pricing, features and footersFreemiumreactblocksmarketing
  3. Kibo UIkibo-ui.comAdvanced shadcn components like kanban, gantt, editors and color pickersOpen sourcereactshadcnadvanced
  4. Skiper UIskiper-ui.comBold animated React components inspired by award-winning sitesFreemiumreactanimatedmotion
  5. Base UIbase-ui.comUnstyled accessible React components from the Radix, MUI and Floating UI teamsOpen sourcereactheadlessaccessibility
  6. 21st.dev21st.devCommunity registry of shadcn-ready React components with one-command installFreemiumreactregistryshadcnmcp
  7. ReUIreui.ioLarge shadcn registry of components, data grids and app patternsOpen sourcereactshadcndashboard
  8. Kokonut UIkokonutui.comModern animated React and Tailwind components for product sitesFreemiumreactanimatedtailwind
  9. Origin UI (coss.com)coss.comHundreds of polished copy-paste shadcn component variantsOpen sourcereacttailwindcopy-paste
  10. Inspira UIinspira-ui.comAnimated Vue and Nuxt components, ports of Aceternity and Magic UI ideasOpen sourcevueanimatedcopy-paste
  11. React Bitsreactbits.devAnimated text, backgrounds and WebGL effects as copy-paste React componentsOpen sourcereactanimatedwebglcopy-paste
  12. SmoothUIsmoothui.devAnimated React components focused on smooth micro-interactionsOpen sourcereactanimatedmicro-interactions
  13. Cult UIcult-ui.comCurated animated shadcn-compatible components and AI-app blocksFreemiumreactanimatedshadcn
  14. Aceternity UIui.aceternity.comFlashy animated React and Tailwind sections for landing pagesFreemiumreactanimatedtailwindcopy-paste
  15. Bits UIbits-ui.comHeadless accessible component primitives for Svelte 5Open sourcesvelteheadlessaccessibility
  16. Spartanspartan.ngshadcn-style accessible primitives and styled components for AngularOpen sourceangularheadlesscopy-paste
  17. Park UIpark-ui.comStyled Ark UI components for React, Vue and Solid with Panda or TailwindOpen sourcereactvuesolid
  18. Vaulvaul.emilkowal.skiNative-feeling drawer component for React with gesture physicsOpen sourcereactdraweranimated
  19. Magic UImagicui.design150+ free animated React components built with Tailwind and MotionFreemiumreactanimatedcopy-paste
  20. shadcn-vueshadcn-vue.comCommunity Vue port of shadcn/ui on Reka UI and TailwindOpen sourcevuecopy-pastetailwind
  21. Reka UIreka-ui.comUnstyled accessible Vue primitives, formerly Radix VueOpen sourcevueheadlessaccessibility
  22. shadcn-svelteshadcn-svelte.comSvelte port of shadcn/ui built on Bits UI and TailwindOpen sourcesveltecopy-pastetailwind
  23. Sonnersonner.emilkowal.skiOpinionated, beautifully animated toast component for ReactOpen sourcereacttoastanimated
  24. shadcn/uiui.shadcn.comCopy-paste React components on Radix and Tailwind that you own and editOpen sourcereacttailwindcopy-pastemcp
  25. Skeletonskeleton.devAdaptive design system and components for Svelte and React on TailwindOpen sourcesveltetailwindthemes
  26. Ark UIark-ui.comHeadless state-machine components for React, Vue, Solid and SvelteOpen sourceheadlessreactvuesvelte
  27. Tremortremor.soCopy-paste React charts and dashboard components on TailwindOpen sourcereactchartsdashboard
  28. Uiverseuiverse.ioCommunity library of free HTML and CSS UI elements, also as TailwindFreecssvanillafreeanimated
  29. Flowbiteflowbite.comTailwind components with React, Vue, Svelte and Angular portsFreemiumtailwindmulti-framework
  30. Nuxt UIui.nuxt.comFree Vue and Nuxt components on Reka UI and Tailwind, Pro now openOpen sourcevuenuxttailwind
  31. Open Propsopen-props.styleCSS custom property tokens for color, easing, shadows and animationsOpen sourcecsstokensvanilla
  32. HeroUIheroui.comPolished React and Tailwind components on React Aria, formerly NextUIOpen sourcereacttailwindanimated
  33. Mantinemantine.devFull-featured React library with 100+ components and 50+ hooksOpen sourcereacthooksstyled
  34. Radix Primitivesradix-ui.comUnstyled, accessible React primitives for dialogs, menus, popovers and moreOpen sourcereactheadlessaccessibilitythemescolors
  35. daisyUIdaisyui.comTailwind plugin adding semantic component classes and themes, any frameworkOpen sourcetailwindcssthemes
  36. Headless UIheadlessui.comSmall set of unstyled accessible React and Vue components by Tailwind LabsOpen sourcereactvueheadlesstailwind
  37. React Ariareact-aria.adobe.comAdobe's hooks and components for building fully accessible custom UIOpen sourcereactheadlessaccessibility
  38. Naive UInaiveui.comTypeScript-first Vue 3 library with 90+ themeable componentsOpen sourcevuetypescript
  39. Tailwind Plustailwindcss.comOfficial premium Tailwind UI blocks, templates and Catalyst kitPaidtailwindreactblocks
  40. Chakra UIchakra-ui.comAccessible, themeable React components with style props and recipesOpen sourcereactthemingaccessibility
  41. PrimeVueprimevue.devHuge Vue component suite with styled and unstyled modesFreemiumvueenterprisedatatable
  42. Web Awesomewebawesome.comFramework-agnostic web components from the Shoelace and Font Awesome teamFreemiumweb componentsvanilla
  43. Angular Materialmaterial.angular.devOfficial Angular components and CDK behaviors following Material DesignOpen sourceangularmaterialcdk
  44. Vuetifyvuetifyjs.comMaterial Design component framework for Vue with rich themingOpen sourcevuematerial
  45. Floating UIfloating-ui.comPositioning engine for tooltips, popovers and dropdownsOpen sourcetooltipspopoverspositioning
  46. PrimeNGprimeng.devComprehensive Angular component suite with themes and data tablesFreemiumangularenterprisedatatable
  47. Quasarquasar.devVue framework with components plus SPA, SSR, PWA and mobile buildsOpen sourcevuecross-platform
  48. Ant Designant.designEnterprise-grade React components with a complete design languageOpen sourcereactenterprisedashboard
  49. Material UI (MUI)mui.comMature React components implementing Material Design, plus data grid and pickersFreemiumreactmaterialenterprise

Agent skills16

  1. Anatomyskills.wheresryan.shClaude Code skill that turns an idea into an interactive isometric machineOpen sourceclaude codeskillillustrationinteractive
  2. hairlinehairline.lucasmarkes.comIsometric SVG line drawings for React or plain DOM, zero dependenciesOpen sourcesvgillustrationisometricnpm
  3. Three.js Game Skillsgithub.com/majidmanzarpourSkills for building polished, playable Three.js browser gamesOpen sourcethreejsgames3d
  4. Diagram Designdiagramdesign.devEditorial diagram skill with dozens of types, now including 3D viewsOpen sourcediagramssvgvisualization
  5. HyperFrameshyperframes.devAgent skills and CLI to write HTML/GSAP compositions and render videoOpen sourcevideogsapmotion
  6. Emil Kowalski Skillsgithub.com/emilkowalskiDesign engineering and animation skills from the creator of Sonner and VaulOpen sourceanimationdesignpolish
  7. Taste-Skilltasteskill.devSkill that teaches agents layout, type, spacing and motion tasteOpen sourcedesigntypographylayout
  8. Frontend Slidesgithub.com/zarazhangruiSkill that builds animated HTML slide decks with an agentOpen sourceslideshtmlpresentation
  9. Web Quality Skillsgithub.com/addyosmaniLighthouse and Core Web Vitals skills for faster, accessible pagesOpen sourceperformanceaccessibilitylighthouse
  10. Stitch Skillsgithub.com/google-labs-codeGoogle Labs skills for Stitch: prompt enhancing, DESIGN.md and React exportOpen sourcestitchdesign-mdgoogle
  11. Interface Designinterface-design.devClaude Code skill that remembers and enforces a consistent UI systemOpen sourcedesign-systemconsistencyclaude
  12. Vercel Agent Skillsgithub.com/vercel-labsVercel's skills incl. web design guidelines review and React best practicesOpen sourcereactreviewaccessibility
  13. UI UX Pro Maxuupm.ccSearchable style, palette and font database skill for UI generationOpen sourcedesignpalettesfonts
  14. Impeccableimpeccable.styleDesign skill with commands to audit, critique, polish and animate interfacesOpen sourcedesignauditpolish
  15. Claude Design Skillsgithub.com/freshtechbroSkill pack for R3F, Motion, GSAP, Lottie and other web animation toolsOpen sourceanimation3dr3f
  16. frontend-design (Anthropic)github.com/anthropicsOfficial skill that pushes agents toward bold, non-generic UI aestheticsOpen sourcefrontenddesignclaude

Interaction8

  1. Pretextgithub.com/chenglouMeasure and lay out multiline text without DOM reflow, for canvas and WebGLOpen sourcetypographytext-layoutcanvas
  2. Pragmatic drag and dropatlassian.designFramework-agnostic drag and drop built on native browser DnD, by AtlassianOpen sourcedrag-and-dropvanillaperformance
  3. tldrawtldraw.devInfinite canvas SDK for whiteboards and spatial appsFreemiumcanvaswhiteboardreact
  4. dnd kitdndkit.comModular, accessible drag and drop toolkit for ReactOpen sourcedrag-and-dropreactsortable
  5. React Flowreactflow.devBuild node-based editors, workflow builders and diagrams in ReactOpen sourcenodesdiagramsreact
  6. Excalidrawgithub.com/excalidrawEmbeddable hand-drawn style whiteboard as a React componentOpen sourcewhiteboardsketchreact
  7. use-gestureuse-gesture.netlify.appBind drag, pinch, scroll, wheel and hover gestures to any elementOpen sourcegesturesdragreact
  8. Swiperswiperjs.comFeature-packed touch slider with 3D effects and framework componentsOpen sourcecarouselslidertouch

3D & WebGL26

  1. Shadersshaders.comOpen source WebGPU shader components plus a free editor to compose and export themFreemiumwebgpushadersreactvuesvelte
  2. Sparksparkjs.devGaussian splat renderer for three.js that mixes splats with meshesOpen sourcegaussian-splatsthreejswebgl
  3. SuperSplatsuperspl.atBrowser editor to view, clean up and publish Gaussian splat capturesFreegaussian splatseditorplaycanvas
  4. TresJStresjs.orgVue components and composables for building three.js scenesOpen sourcevuethree.jsframework
  5. Needle Engineneedle.toolsWeb 3D engine on three.js with Unity and Blender export workflowsFreemiumengineunityblenderthree.js
  6. Threltethrelte.xyzSvelte framework for building three.js scenes declarativelyOpen sourcesveltethree.jsframework
  7. COBEgithub.com/shuding5KB WebGL dotted globe for landing page hero sectionsOpen sourceglobewebglhero
  8. Levaleva.pmnd.rsReact GUI panel for tweaking 3D scene and shader parameters liveOpen sourceguireactdebug
  9. Splinespline.designCollaborative 3D design tool that exports interactive scenes for the webFreemiumdesign tool3dno-code
  10. Rapierrapier.rsFast 2D and 3D physics engine in Rust with official JS/WASM buildsOpen sourcephysicswasm3d2dr3f
  11. troika-three-textprotectwise.github.ioCrisp SDF text rendering in three.js from regular font filesOpen sourcetextsdfthree.js
  12. Dreidrei.docs.pmnd.rsHuge set of ready-made helpers and abstractions for React Three FiberOpen sourcereactr3fhelpers
  13. cannon-esgithub.com/pmndrsLightweight pure JS 3D rigid body physics, easy to pair with three.jsOpen sourcephysics3dthreejs
  14. React Three Fiberr3f.docs.pmnd.rsReact renderer for three.js with declarative scenes and hooksOpen sourcereactthree.jsrenderer
  15. three-mesh-bvhgithub.com/gkjohnsonBVH acceleration for fast raycasting and spatial queries in three.jsOpen sourcethreejsraycastingperformance
  16. model-viewermodelviewer.devWeb component to embed interactive 3D and AR models with one tagOpen sourceweb componentargltf
  17. OGLoframe.github.ioMinimal WebGL library with a three.js-like API and tiny footprintOpen sourcewebglminimallibrary
  18. Spector.jsspector.babylonjs.comBrowser extension to capture and inspect WebGL frames and draw callsOpen sourcedebuggingwebgldevtools
  19. reglregl-project.github.ioFunctional, stateless wrapper around WebGL for data-heavy renderingOpen sourcewebglfunctionallow-level
  20. pmndrs postprocessinggithub.com/pmndrsFast post-processing effects library for three.js (bloom, DOF, SMAA)Open sourcepostprocessingeffectsthree.js
  21. A-Frameaframe.ioHTML-based framework for building WebXR and 3D scenes on three.jsOpen sourcewebxrvrhtmlthree.js
  22. Vectaryvectary.comBrowser 3D design and AR tool for product visuals and embedsFreemiumdesign toolarembeds
  23. PlayCanvasplaycanvas.comOpen source WebGL/WebGPU engine plus a collaborative browser editorFreemiumengineeditorgames
  24. Babylon.jsbabylonjs.comFull-featured 3D engine with WebGPU support, physics, XR and toolingOpen sourceenginewebglwebgpuxrplayground
  25. CesiumJScesium.com3D globes and maps with terrain, 3D Tiles and photorealistic city dataOpen sourceglobemaps3d-tiles
  26. three.jsthreejs.orgThe default JavaScript 3D library for WebGL and WebGPU in the browserOpen source3dwebglwebgpulibraryexamples

Shaders & WebGPU18

  1. Canvas UIcanvasui.devShader effects over live, interactive HTML using the HTML-in-Canvas APIOpen sourcehtml-in-canvasshaderscomponents
  2. Paper Shadersshaders.paper.designZero-dependency shader effects like mesh gradients and grain for UIsFreeshadersgradientsreact
  3. TypeGPUdocs.swmansion.comType-safe WebGPU toolkit that lets you write shaders in TypeScriptOpen sourcewebgputypescriptshaders
  4. compute.toyscompute.toysShadertoy-style playground for WGSL compute shadersFreewgslcomputeplayground
  5. NEAT Gradientsneat.firecms.coConfigurator for animated WebGL gradient backgrounds with export codeFreegradientsgeneratorwebgl
  6. Use.GPUusegpu.liveReactive WebGPU framework for GPU-driven graphics and data vizOpen sourcewebgpureactivedataviz
  7. Unicorn Studiounicorn.studioNo-code tool to design WebGL effects and embed them on sitesFreemiumno-codewebgleffects
  8. ShaderGradientshadergradient.coCustomize animated 3D mesh gradients and export for React or FigmaFreegradientsgeneratorreact
  9. LYGIAlygia.xyzLarge reusable shader function library for GLSL, WGSL, HLSL and moreFreemiumglslwgsllibrary
  10. Three-CustomShaderMaterialgithub.com/FarazzShaikhExtend three.js built-in materials with your own shader codeOpen sourceshadersthreejsmaterials
  11. Graphtoygraphtoy.comPlot and compare shader-style math functions interactivelyFreemathfunctionstool
  12. twigltwigl.appCompact GLSL live-coding editor with GIF and video exportFreeglsllive codingeditor
  13. Shader Parkshaderpark.comJavaScript library and editor for building procedural SDF shadersOpen sourcesdfjavascriptprocedural
  14. WebGPU Sampleswebgpu.github.ioOfficial runnable samples covering WebGPU rendering and computeOpen sourcewebgpuexamplescompute
  15. Shaderfrogshaderfrog.comNode-based shader composer that outputs three.js and Babylon materialsFreeshader editornodesthree.js
  16. TWGLgithub.com/greggmanThin helper that removes WebGL boilerplate without hiding the APIOpen sourcewebglshaderslow-level
  17. Shadertoyshadertoy.comHuge community library of live GLSL shaders to study and forkFreeglslcommunityplayground
  18. GLSL Sandboxglslsandbox.comClassic gallery and live editor for single fragment shadersFreeglslgalleryeditor

2D & canvas6

  1. React Native Skiashopify.github.ioSkia 2D graphics, shaders and paths for React Native and webOpen sourcereact-nativeskiashaders
  2. Matter.jsbrm.io2D rigid body physics for falling, stacking and bouncing UI elementsOpen sourcephysics2dcanvas
  3. PixiJSpixijs.comFast 2D WebGL and WebGPU renderer for games, sprites and interactive scenesOpen sourcewebglwebgpu2dsprites
  4. SVG.jssvgjs.devLightweight library to create, manipulate and animate SVG in the browserOpen sourcesvganimationdom
  5. Konvakonvajs.orgCanvas 2D framework with shapes, layers, events and drag, plus React and VueOpen sourcecanvaseditorreactvue
  6. Fabric.jsfabricjs.comObject model on top of canvas for building image and design editorsOpen sourcecanvaseditorsvg

Creative coding17

  1. Strudelstrudel.ccLive-code music patterns in the browser, a JS port of TidalCyclesOpen sourcelive-codingaudiobrowser
  2. Zdogzzz.dogTiny pseudo-3D engine for flat, round illustrations in canvas or SVGOpen source3dcanvasillustration
  3. canvas-sketchgithub.com/mattdeslFramework for generative art sketches in canvas and WebGL with exportsOpen sourcegenerativejavascripttooling
  4. Culoriculorijs.orgColor conversion, interpolation and gamut mapping including OKLCHOpen sourcecoloroklchgradients
  5. TiXL (formerly Tooll)tixl.appFree open-source app for real-time motion graphics and VJ visualsOpen sourcereal-timemotion-graphicsnode-based
  6. cables.glcables.glNode-based visual programming for real-time WebGL in the browserFreenode-basedwebglvisual-programming
  7. Nodesnodes.ioNode-based JavaScript environment for generative design and data vizFreemiumnode-basedjavascriptgenerative
  8. Tweakpanetweakpane.github.ioCompact GUI panel for tweaking parameters in sketches and demosOpen sourceguidebugparameters
  9. Tone.jstonejs.github.ioWeb Audio framework for synths, effects and musical timingOpen sourceaudiomusicweb-audio
  10. p5.jsp5js.orgFriendly JavaScript library for drawing, animation and creative codingOpen sourcejavascriptcanvasbeginnerlibraryweb editor
  11. simplex-noisegithub.com/jwagnerFast 2D, 3D and 4D simplex noise for organic motion and texturesOpen sourcenoisegenerativemath
  12. CodePencodepen.ioFront-end playground and community for sharing animation and UI demosFreemiumplaygroundcommunitydemos
  13. chroma.jsgka.github.ioColor manipulation, scales and palettes in a tiny APIOpen sourcecolorpalettesscales
  14. Paper.jspaperjs.orgVector graphics scripting with paths, boolean ops and a clean scene graphOpen sourcevectorcanvasgenerative
  15. openFrameworksopenframeworks.ccC++ toolkit for creative coding, installations and real-time graphicsOpen sourcec++toolkitinstallations
  16. TouchDesignerderivative.caNode-based platform for real-time interactive visuals and installationsFreemiumreal-timeinstallationsnode-based
  17. Processingprocessing.orgThe original creative coding language and IDE for visual artsOpen sourcejavaidevisual-art

Data visualization11

  1. LayerChartlayerchart.comComposable Svelte chart components, the basis of shadcn-svelte chartsOpen sourcesveltechartssvg
  2. Observable Plotobservablehq.comConcise grammar-of-graphics charting from the makers of D3Open sourcechartssvgexploration
  3. uPlotgithub.com/leeoniyaTiny, extremely fast canvas time-series chartsOpen sourcetime-seriescanvasperformance
  4. Globe.glglobe.glDrop-in three.js globe with arcs, points, hex bins and labelsOpen sourceglobethreejsdata
  5. visxairbnb.ioAirbnb's low-level React primitives for building custom chartsOpen sourcereactsvgcharts
  6. deck.gldeck.glGPU-powered layers for large-scale geospatial and 3D data visualizationOpen sourcewebglmapsbig-data
  7. Rechartsrecharts.orgComposable React chart components built on D3Open sourcereactchartssvg
  8. Apache EChartsecharts.apache.orgFeature-rich interactive charts on canvas or SVG with big data supportOpen sourcechartscanvasdashboards
  9. Chart.jschartjs.orgSimple, animated canvas charts with a small APIOpen sourcechartscanvasvanilla
  10. Sigma.jssigmajs.orgWebGL renderer for large network graphsOpen sourcegraphnetworkwebgl
  11. D3d3js.orgLow-level toolkit for bespoke data-driven SVG, canvas and HTML visualsOpen sourcesvgchartsdata

Design MDs2

  1. DESIGN.md Specgithub.com/google-labs-codeGoogle's open format for describing a visual identity to coding agentsOpen sourcedesign-mdtokensspec
  2. getdesign.mdgetdesign.md550+ ready DESIGN.md files of real sites to hand to your coding agentFreemiumdesign-mdbrandstokens

MCP servers5

  1. Chrome DevTools MCPgithub.com/ChromeDevToolsLets agents inspect, screenshot and profile pages in a real ChromeOpen sourcechromedebuggingperformance
  2. Storybook MCPstorybook.js.orgExposes your Storybook components and stories to coding agentsOpen sourcestorybookcomponentstesting
  3. Figma MCP Serverdevelopers.figma.comOfficial Figma server giving agents design context, variables and codeFreemiumfigmadesign-to-codetokens
  4. Context7context7.comServes current library docs to agents so they skip outdated APIsFreemiumdocscontextlibraries
  5. Playwright MCPgithub.com/microsoftBrowser automation server for agents to check UI visually and functionallyOpen sourceplaywrighttestingbrowser

3D assets11

  1. Poly Pizzapoly.pizzaSearchable library of free low-poly models with glTF downloadsFreelow-polymodelsgltf
  2. Matcapsgithub.com/nidorxHundreds of free matcap textures for cheap stylized shadingFreematcaptexturesshading
  3. gltfjsxgltf.pmnd.rsTurns glTF models into reusable React Three Fiber componentsOpen sourcegltfr3fcodegen
  4. glTF Transformgltf-transform.devCLI and SDK to compress and optimize glTF with Draco, Meshopt, KTX2Open sourcegltfclicompressionweb ui
  5. ambientCGambientcg.comThousands of CC0 PBR materials and HDRIs ready for real-time useFreetexturespbrcc0
  6. glTF Viewergltf-viewer.donmccurdy.comDrag-and-drop three.js viewer to preview and debug glTF modelsOpen sourcegltfviewerdebug
  7. Poly Havenpolyhaven.comCC0 HDRIs, PBR textures and models with no attribution neededFreehdritexturesmodelscc0
  8. Quaterniusquaternius.comFree CC0 low-poly model packs including rigged, animated charactersFreelow-polycharacterscc0
  9. Sketchfabsketchfab.comMassive 3D model marketplace with glTF download and embedsFreemiummodelsmarketplacegltf
  10. Mixamomixamo.comFree auto-rigging and a large library of character animationsFreeanimationriggingcharacters
  11. Kenneykenney.nlHuge library of consistent, game-ready CC0 2D and 3D asset packsFreegame assetslow-polycc0

Icons & illustrations10

  1. Material Symbolsfonts.google.comGoogle's variable icon font with fill, weight and grade axesOpen sourcevariable fontmaterialgoogle
  2. SVGLsvgl.appBeautiful brand and tech logos as copyable SVGs, light and darkOpen sourcelogosbrandssvg
  3. Lucidelucide.devClean, consistent open source icon set with packages for every frameworkOpen sourcesvgreactoutline
  4. Phosphor Iconsphosphoricons.comFlexible icon family with six weights including duotoneOpen sourcesvgweightsduotone
  5. Tabler Iconstabler.io5,000+ MIT stroke icons, great for dashboards and dense UIsOpen sourcesvgoutlinelarge set
  6. Heroiconsheroicons.comHand-crafted SVG icons from the makers of Tailwind CSSOpen sourcesvgtailwindui
  7. Remix Iconremixicon.comNeutral open source icons in line and fill stylesOpen sourcesvglinefill
  8. Iconifyiconify.designOne API and toolkit over 200,000+ icons from 150+ open setsOpen sourceaggregatorapisvg
  9. Streamlinestreamlinehq.comMassive library of icons, illustrations and emoji in many stylesFreemiumiconsillustrationsfigma
  10. Simple Iconssimpleicons.org3,000+ brand logos as SVG with official brand colorsOpen sourcebrandslogossvg

Fonts8

  1. Uncutuncut.wtfFree catalogue of 160+ contemporary typefacesFreefree fontscontemporarydisplay
  2. Fontsharefontshare.comHigh-quality free fonts for commercial use from Indian Type FoundryFreefree fontscommercial usefoundry
  3. Utopiautopia.fyiFluid type and space scale calculator using CSS clampFreefluid typeclampcss
  4. Typescaletypescale.comPreview and export a modular type scale as CSSFreetype scalecssgenerator
  5. Collletttivocollletttivo.itOpen source type foundry with distinctive display and text facesOpen sourceopen sourcefoundrydisplay
  6. Fontsourcefontsource.orgSelf-host open source fonts as npm packagesOpen sourcenpmself-hostopen source
  7. Pangram Pangrampangrampangram.comTrendy contemporary typefaces with free personal-use trialsFreemiumfoundrycontemporarytrials
  8. Google Fontsfonts.google.comFree, open-licensed web fonts with variable font supportFreeweb fontsvariableopen license

Color & gradients11

  1. Realtime Colorsrealtimecolors.comPreview a palette and font pairing on a real site layout instantlyFreepalettepreviewtheming
  2. OKLCH Color Pickeroklch.comPick and convert colors in OKLCH with gamut visualizationOpen sourceoklchpickercss
  3. Gradient Generator by Josh Comeaujoshwcomeau.comCSS gradients that avoid the gray dead zone via better color modesFreegradientcss
  4. UI Colorsuicolors.appGenerate Tailwind-style 50-950 color scales from one hex valueFreemiumtailwindscales
  5. Hueminthuemint.comMachine-learning palettes previewed on brand, site and gradient mockupsFreepaletteaibranding
  6. Meshercsshero.orgBuild CSS mesh gradients visually and copy the codeFreemesh gradientcss
  7. Haikeihaikei.appGenerate SVG blobs, waves, layered shapes and gradients for backgroundsFreesvgbackgroundsshapes
  8. Color Huntcolorhunt.coCommunity-curated palettes to browse for quick inspirationFreepaletteinspiration
  9. Coolorscoolors.coFast palette generator with contrast checker, gradients and exportsFreemiumpalettegenerator
  10. WebAIM Contrast Checkerwebaim.orgQuick WCAG contrast ratio check for text and UI colorsFreeaccessibilitycontrastwcag
  11. Adobe Colorcolor.adobe.comColor wheel, harmony rules, trends and accessibility checksFreepaletteaccessibility

Generators & tools8

  1. tweakcntweakcn.comVisual theme editor that exports shadcn/ui Tailwind themesOpen sourceshadcnthemingtool
  2. CSS Patterncss-pattern.comGallery of pure CSS background patterns built with gradientsFreecsspatternsbackgrounds
  3. Shadow Palette Generatorjoshwcomeau.comDesign layered, realistic box shadows that share one light sourceFreeshadowscss
  4. fffuelfffuel.coDozens of free SVG generators for noise, blobs, patterns and gradientsFreesvgbackgroundstextures
  5. Glassmorphism Generatorhype4.academyTune frosted glass panels and copy the backdrop-filter CSSFreeglassmorphismcss
  6. Get Wavesgetwaves.ioGenerate SVG wave dividers for section transitionsFreesvgwavesdividers
  7. SVG Backgroundssvgbackgrounds.comCustomizable copy-paste SVG backgrounds and patternsFreemiumsvgbackgroundspatterns
  8. Hero Patternsheropatterns.comRepeatable SVG background patterns by Steve SchogerFreesvgpatternsbackgrounds