Everything for web design
UI kits and templates, fonts, icons, illustrations, colors, backgrounds, mockups, logos and placeholders whose license allows a commercial website, plus the Agent Skills and libraries that projects built with AI agents use for the job. 61 sources picked from 325 by their license, read on the official pages (checked Oct 10, 2026). Press Copy the whole set to give your AI agent the rules for all of them at once.
Copied. Paste it into your prompt or AGENTS.md.
Picked because their license allows a commercial website (free ones first). Ordered by: free for commercial use, no credit needed, use in AI-agent projects, then how an agent connects.
UI kits and website templates
| Pick for your agent | Source | Price | License | Agent access |
|---|---|---|---|---|
| shadcn/ui Open-source set of accessible React components and blocks that you copy into your own codebase through a CLI and registries. minimalmonochromeflat Used in 273 AI-agent projects (5.7% of JS) |
Free | Commercial OK No credit | MCPshadcn |
|
| daisyUI Free Tailwind CSS plugin that adds semantic component class names (btn, card, ...) and themes; paid templates, charts and a Figma library are sold in a separate store. colorfulplayfulflat Used in 60 AI-agent projects (1.2% of JS) |
Free tier | Commercial OK No credit | MCPdaisyui |
|
| Flowbite Open-source Tailwind CSS component library (MIT) with copy-paste HTML components, plugin JS and framework guides; a paid Flowbite Pro adds blocks and templates. minimalflatcorporate Used in 9 AI-agent projects (0.2% of JS) |
Free tier | Commercial OK No credit | MCPflowbite |
|
| Magic UI Copy-and-paste animated React/Tailwind components for landing pages, installable via the shadcn CLI; a paid Pro adds templates and premium components. gradientcolorfulminimal |
Free tier | Commercial OK No credit | MCP | |
| Cruip Tailwind CSS landing-page, SaaS and admin dashboard templates (Next.js, React, Vue, Laravel, Figma); a few are free, most are premium. gradientminimalcorporate |
Free tier | Commercial OK No credit | Download |
Fonts
| Pick for your agent | Source | Price | License | Agent access |
|---|---|---|---|---|
| Google Fonts Open-source font catalog with a Developer API for metadata, a CSS API and the Google Design MCP. |
Free | Commercial OK No credit | MCP API | |
| Fira Code Free monospaced programming font with ligatures for common multi-character code sequences, released under the SIL OFL 1.1. |
Free | Commercial OK No credit | npmfiracode |
|
| Hack Open-source monospaced typeface for source code with regular, bold, italic and bold italic styles, plus web font files. |
Free | Commercial OK No credit | npmhack-font |
|
| IBM Plex Open-source typeface family (Sans, Serif, Mono, Condensed, Math) with multi-script support, released under the SIL Open Font License. |
Free | Commercial OK No credit | npm@ibm/plex-sans |
|
| Fantasque Sans Mono A programming monospaced font with handwriting-like shapes, in regular, bold and italic styles, with ligatures. |
Free | Commercial OK No credit | Download |
Icons
| Pick for your agent | Source | Price | License | Agent access |
|---|---|---|---|---|
| Lucide ISC-licensed icon set (Feather fork) with packages for React, Vue, Svelte, Angular and more. minimaloutline Used in 1,244 AI-agent projects (25.8% of JS) |
Free | Commercial OK No credit | npmlucide-react |
|
| Heroicons MIT-licensed SVG icons from Tailwind Labs with React and Vue packages. outlinefilled Used in 67 AI-agent projects (1.4% of JS) |
Free | Commercial OK No credit | npm@heroicons/react |
|
| Phosphor Icons MIT-licensed set of 1,248 icons in 6 weights, with React, Vue and web packages. outlinefilledduotone Used in 19 AI-agent projects (0.4% of JS) |
Free | Commercial OK No credit | npm@phosphor-icons/react |
|
| Simple Icons 3,400+ CC0 SVG brand icons with an npm package and a CDN. Used in 15 AI-agent projects (0.3% of JS) |
Free | Commercial: conditions No credit | npmsimple-icons |
|
| Bootstrap Icons 2,000+ MIT icons as SVG, sprite and icon font. outlinefilled Used in 11 AI-agent projects (0.2% of JS) |
Free | Commercial OK No credit | npmbootstrap-icons |
Illustrations
| Pick for your agent | Source | Price | License | Agent access |
|---|---|---|---|---|
| React Kawaii Open source library of cute SVG illustrations delivered as React components. playful |
Free | Commercial OK No credit | npmreact-kawaii |
|
| Blush Customizable illustration collections by artists, downloadable as PNG or SVG, with Figma and Sketch plugins. |
Free tier | Commercial OK No credit | Download | |
| Free Gophers Pack Pack of 100+ gopher characters, goroutines and illustrations about Go, in SVG and PNG with transparent background. |
Free | Commercial OK No credit | Download | |
| IRA Design Customizable hand-drawn illustrations (characters, objects, backgrounds) with five gradient colors, downloadable as AI, SVG and PNG. hand-drawngradientoutline |
Free | Commercial OK No credit | Download | |
| ManyPixels Free gallery of illustrations and clip art in several styles, with 20,000+ more available through the ManyPixels service. |
Free | Commercial OK No credit | Download |
3D and isometric illustrations
| Pick for your agent | Source | Price | License | Agent access |
|---|---|---|---|---|
| 3dicons Open-source library of hand-made 3D icons rendered in Blender, in several color styles and camera angles, free to download as image files. 3dcolorfulplayfulfilled |
Free | Commercial OK No credit | Download | |
| DrawKit Library of hand-drawn 2D and 3D illustration packs, icons and animations, labelled Free or Pro, with Figma plugins including a 3D builder. 3dflathand-drawncolorful |
Free tier · from $6.58/mo | Commercial OK No credit No AI training | Download | |
| Craftwork Marketplace of design packs by independent designers (3D illustrations and icons, UI kits, mockups) with free packs and a subscription, usable via Figma, Blender, PNG and an MCP server. 3dcolorfulminimalgradient |
Free tier · from $8.07/mo | Commercial OK No AI training | MCP | |
| Spline Community Browser 3D design tool with a public community library of 3D scenes you can remix and publish or embed on the web. 3dcolorfulglassmorphismrealistic |
Free tier · from $12/mo | Commercial OK | MCP | |
| Shapefest Library of 100,000+ ray-traced 3D shape renders in packs (Cinema 4D), as raster images; some packs free at 512 px, full 3000 px packs paid. 3dabstractgeometriccolorful |
Free tier · from $20/mo | Commercial OK | Download |
Color palettes and gradients
| Pick for your agent | Source | Price | License | Agent access |
|---|---|---|---|---|
| Radix Colors Open-source color system: 12-step accessible scales with alpha, dark mode and P3 variants, shipped as CSS/JS via npm. Used in 11 AI-agent projects (0.2% of JS) |
Free | Commercial OK No credit | npm@radix-ui/colors |
|
| Coolors Online palette generator and palette library; build, save and export color palettes. |
Free tier | Commercial OK No credit No AI training | API | |
| Realtime Colors Browser tool that applies your text, background, primary and accent colors and fonts to a sample website; exports CSS, Tailwind, SCSS, shadcn and other presets. |
Free | Commercial OK No credit | Download | |
| Colormind AI palette generator trained on photos, movies and art, with a simple JSON HTTP API that returns 5-color palettes. |
Free | Commercial: conditions | API | |
| ColorBox (Lyft) Browser generator for multi-step color scales from hue, saturation and brightness curves; exports Tailwind, OKLCH and Swift and has a Figma plugin. |
Free | Commercial OK | Download |
Backgrounds, patterns and shapes
| Pick for your agent | Source | Price | License | Agent access |
|---|---|---|---|---|
| Pattern Monster Seamless SVG pattern generator (320+ patterns): customize colors, stroke and angle, then copy CSS/SVG or download tileable SVG/PNG; also a REST API and MCP server. geometricminimalmonochromeabstract |
Free tier | Commercial OK No credit | MCP API | |
| fffuel Collection of free color tools and SVG generators for gradients, patterns, textures, shapes and backgrounds. gradientabstractgeometriccolorful |
Free | Commercial OK No credit | Download | |
| Haikei Web app that generates SVG/PNG backgrounds, waves, blobs, gradients and shapes; export as SVG or PNG. Blobmaker and Get Waves are now part of it. abstractgradientcolorfulgeometric |
Free | Commercial OK No credit No bots | Download | |
| BGJar Free SVG background generator with styles like wave, meteor, hexagon and circuit board; customize and copy/download the SVG. geometricabstractcolorful |
Free tier | Commercial OK Credit varies | Download | |
| GraphicBurger Free design resources such as icons, mockups, logo templates and textures, offered as downloadable freebies. |
Free | Commercial OK | Download |
Stock photos and images
| Pick for your agent | Source | Price | License | Agent access |
|---|---|---|---|---|
| StockSnap.io Free stock photo website where every photo is released under the CC0 license. |
Free | Commercial OK No credit No bots | Download | |
| Flickr Photo-sharing site with a large Creative Commons and public-domain photo set, plus a REST API. |
Free | Commercial: conditions Credit varies | API | |
| Pixabay Free photos, illustrations, vectors, videos, music and sound effects; the API covers images and videos only. |
Free | Commercial OK Credit (API) No AI training No bots | API | |
| Unsplash Free photos with a public API; paid Unsplash+ adds a separately licensed collection. |
Free tier | Commercial OK Credit (API) | API | |
| 123RF Stock library of photos, vectors, video, audio and fonts with AI tools, sold by subscription or credits. |
from $24.5/mo | Commercial: conditions No credit | MCP |
Mockups and device frames
| Pick for your agent | Source | Price | License | Agent access |
|---|---|---|---|---|
| Shots Browser tool that places screenshots into device mockups and exports them as images (and animations/video) with backgrounds and social frame presets. realisticgradient |
Free tier | Commercial OK No credit | Download | |
| LS Graphics free mockups Free section of ls.graphics (about 370 items) with Photoshop and Figma mockup files (devices, branding, print) with smart layers, plus an online editor. realisticminimal |
Free tier | Commercial OK | Download | |
| MockUPhone Free browser tool that wraps an uploaded app or web screenshot in a phone, tablet or desktop device frame and gives you the image. realistic |
Free | Commercial OK Credit required | Download | |
| Mockuuups Studio Mockup library (5,300+ device, print and paper mockups) with a web tool, desktop app, design-tool plugins and a render API that places images or URL screenshots into mockups. realistic |
Free tier | Commercial: conditions No AI training | API |
Company and technology logos
| Pick for your agent | Source | Price | License | Agent access |
|---|---|---|---|---|
| SVGL Library of SVG logos of companies and technologies, with a free open JSON API and a web gallery. |
Free | Commercial: conditions Credit varies | API | |
| Devicon Icon set of programming languages and development tools, usable as icon font or SVG files (npm, jsDelivr). |
Free | Commercial: conditions Credit varies | npmdevicon |
|
| SVG Logos (gilbarbara/logos, svgporn) Hand-optimized collection of SVG logos for tech products and companies, browsable at svglogos.dev and served from a CDN. |
Free | Commercial: conditions Credit varies | Download | |
| Brandfetch (Logo API, Brand API) Hosted API that returns a company's logo (WebP, SVG for logo/symbol variants) by domain, plus a Brand API for logos, colors and fonts. |
Free tier | Commercial: conditions No credit No bots | API | |
| Logo.dev Logo CDN and API: company logos by domain, name, ticker or ISIN as jpg/png/webp, monitored for updates. |
Free tier · from $33/mo | Commercial: conditions Credit required No bots | API |
Placeholder images, data and text
| Pick for your agent | Source | Price | License | Agent access |
|---|---|---|---|---|
| Faker (faker.js) JavaScript library that generates fake but realistic data (names, addresses, text, numbers, images, 70+ locales) in Node and the browser. Used in 62 AI-agent projects (1.3% of JS) |
Free | Commercial OK No credit | npm@faker-js/faker |
|
| JSONPlaceholder Free fake REST API with 100 posts, 500 comments, 100 albums, 5000 photos, 200 todos and 10 users, for tests and prototypes. |
Free | Commercial OK | API | |
| Lorem Picsum Free placeholder photo service: random or fixed images at any size via URL (/id, /seed, grayscale, blur, jpg/webp), photos from Unsplash. |
Free | Commercial: conditions | API | |
| Mockaroo Browser tool and API that generates up to 1,000 rows of realistic test data per run as CSV, JSON, SQL or Excel, with mock APIs. |
Free tier · from $5/mo | Commercial: conditions | API |
Favicons and social preview images
| Pick for your agent | Source | Price | License | Agent access |
|---|---|---|---|---|
| RealFaviconGenerator Free web tool that turns one image into a favicon package (SVG, ICO, PNG, Apple touch and Android icons) plus the HTML markup; also has a checker, Node/CLI packages and plugins. |
Free | Commercial OK No credit | API@realfavicongenerator/generate-favicon |
|
| Satori Library that converts HTML/JSX and CSS to SVG (lays out with flexbox); commonly used to generate Open Graph and social card images, PNG via Sharp or Resvg. Used in 17 AI-agent projects (0.4% of JS) |
Free | Commercial OK | npmsatori |
|
| Takumi Rust layout engine that renders JSX, HTML and CSS to images (PNG, JPEG, WebP, ICO, SVG, animated), mainly for OG images, and to PDF, without a headless browser. |
Free | Commercial OK | npmtakumi-js |
UI animation (Lottie, Rive)
| Pick for your agent | Source | Price | License | Agent access |
|---|---|---|---|---|
| Anime.js MIT JavaScript animation library for CSS, SVG, DOM attributes and JavaScript objects. Used in 12 AI-agent projects (0.2% of JS) |
Free | Commercial OK No credit | npmanimejs |
|
| Bodymovin (lottie-web) After Effects extension that exports animations as JSON, plus the lottie-web JavaScript player that renders them in browsers. Used in 6 AI-agent projects (0.1% of JS) |
Free | Commercial OK No credit | npmlottie-web |
|
| useAnimations 300 free animated icons as a React component, shadcn/ui registry items, SVG files and Lottie JSON. |
Free | Commercial OK No credit | APIreact-useanimations |
|
| Motion JavaScript, React and Vue animation library (formerly Framer Motion) with a paid Motion+ tier of premium APIs, examples and UI components. Used in 215 AI-agent projects (4.5% of JS) |
Free tier | Commercial: conditions No credit | npmmotion |
|
| Rive Animation editor (state machines) with open-source MIT runtimes for web, mobile, Unity and Unreal. |
Free tier · from $9/mo | Commercial: conditions No credit | MCP@rive-app/canvas |
Agent Skills for this
| design-taste-frontend Leonxlnx/taste-skill | tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). … has scriptsnpx skills add Leonxlnx/taste-skill --skill design-taste-frontend |
|---|---|
| product-ui-taste huytieu/COG-second-brain | Anti-slop skill for PRODUCT UI - dashboards, data tables, forms, multi-step flows, settings, list/detail, app shells. The agent reads the surface, budgets the frame firs…npx skills add huytieu/COG-second-brain --skill product-ui-taste |
| taste-skill huytieu/COG-second-brain | Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not loo…npx skills add huytieu/COG-second-brain --skill taste-skill |
| ui-styling nextlevelbuilder/ui-ux-pro-max-skill | Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual design… has scriptsnpx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling |
| ui-ux-pro-max nextlevelbuilder/ui-ux-pro-max-skill | UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components,… has scriptsnpx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max |
| figma-create-design-system-rules openai/skills | Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "c… has scriptsnpx skills add openai/skills --skill figma-create-design-system-rules |
| figma-generate-library openai/skills | Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up themin… has scriptsnpx skills add openai/skills --skill figma-generate-library |
| styles android/skills | Use this skill to integrate the Jetpack Compose Styles API into an Android project. This skill guides you through upgrading dependencies, setting up component themes, ma…npx skills add android/skills --skill styles |
| frontend-design fengshao1227/ccg-workflow | Frontend design skill fused from Impeccable + custom extensions. Covers design philosophy, anti-AI-slop patterns, typography, color (OKLCH), spatial design, motion, inte…npx skills add fengshao1227/ccg-workflow --skill frontend-design |
| claymorphism fengshao1227/ccg-workflow | Claymorphism design system skill. Use when building soft, puffy, clay-like UI components with large radii, dual inner shadows, and offset outer shadows.npx skills add fengshao1227/ccg-workflow --skill claymorphism |
| ui-ux-pro-max Galaxy-Dawn/claude-scholar | This skill should be used when the user asks to design or review a UI, create a landing page or dashboard, choose colors or typography, improve accessibility, or impleme… has scriptsnpx skills add Galaxy-Dawn/claude-scholar --skill ui-ux-pro-max |
| web-design-reviewer Galaxy-Dawn/claude-scholar | This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check…npx skills add Galaxy-Dawn/claude-scholar --skill web-design-reviewer |
Libraries projects use for this
| Lucide React | Comprehensive icon library with consistent design for React applications.npm install lucide-react · Gid Score 86 |
|---|---|
| Radix UI | Unstyled, accessible component primitives for building design systems.npm install @radix-ui/react-slot · Gid Score 84 |
| shadcn/ui | Copy-paste React component library built on Radix UI and Tailwind CSS.npm install shadcn · Gid Score 81 |
| Sonner | Opinionated toast notification component for React applications.npm install sonner · Gid Score 79 |
| Class Variance Authority | Type-safe CSS class composition for component variants and styling.npm install class-variance-authority · Gid Score 79 |
| Tailwind CSS | Utility-first CSS framework for building custom user interfaces rapidly.npm install tailwindcss · Gid Score 91 |
| Tailwind Merge | Merge Tailwind CSS classes intelligently without style conflicts.npm install tailwind-merge · Gid Score 79 |
| Emotion | CSS-in-JS library for styling React components with scoped styles and theming.npm install @emotion/react · Gid Score 72 |
| styled-components | CSS-in-JS library for styling React components with dynamic scoped styles.npm install styled-components · Gid Score 70 |
| Lightning CSS | High-performance CSS parser and minifier written in Rust, with modern CSS feature support.npm install lightningcss · Gid Score 66 |
| Framer Motion | Simple and powerful animation library for React components.npm install framer-motion · Gid Score 84 |
| Motion | Animation library for JavaScript and React with simple, powerful motion primitives.npm install motion · Gid Score 78 |
| Embla Carousel | Lightweight carousel component with fluid motion and precise swipe handling for React.npm install embla-carousel-react · Gid Score 74 |
| GSAP | Professional animation library for high-performance CSS, SVG, canvas and React animations.npm install gsap · Gid Score 73 |
| Tailwind CSS Animate | Tailwind CSS plugin adding ready-to-use animation utilities.npm install tailwindcss-animate · Gid Score 73 |
0 selected across all categories
Copied. Paste it into your prompt or AGENTS.md.
Link copied.
Other starter sets
Free game assets for commercial use Royalty-free assets for YouTube videos Free assets for landing pages and websites Free assets for mobile apps All sources with filters
Not legal advice. Each source's page links the license we read; check it before you ship.