Pat’s Swipe File

AEO.co

Agency site selling answer engine optimization, getting brands cited by AI search.

• agency
• seo
• ai-search

AgentMail

Developer site for an email inbox API built for autonomous AI agents.

• developer
• api
• email
• agents

Agents Marketplace

Directory site listing AI agents, sorted by task and by industry.

• directory
• ai-agents

AI Builder Club

Paid community and course site for people learning to build with AI coding tools.

• community
• course
• ai

Anevo

Framer site for a managed cold email and cold calling agency.

• agency
• sales
• b2b

Ann Nguyen

Frontend portfolio in candy pink with 3D balloon props and playable toys, including a koi pond on a record.

• portfolio
• playful
• 3d-props
• interactive

APG Software

Agency site selling AI audits and builds for construction and home services firms.

• agency
• ai
• construction

Apify

Web scraping and automation platform with a large public marketplace of actors.

• scraping
• developer
• marketplace

Apollo.io

B2B sales platform marketing site covering prospecting, lead gen and outreach.

• saas
• sales
• b2b

Arounda

Design agency site on a deep purple gradient, italic serif words set into pills inside an otherwise sans headline.

• gradient
• mixed-type
• italic-serif
• agency

AssemblyAI

Speech-to-text API site with model pages and developer documentation.

• developer
• api
• speech

Atlas

Deployed demo called Atlas, presented as a tactical AI laboratory interface.

• ai
• experiment
• dark-ui

Attio

CRM site, light and high-contrast, scrolling through real app views. Data-dense without turning to mush.

• light-ui
• product-screens
• saas
• data-density

AW — Antoine Wodniack

Creative developer's portfolio on hot pink with a heavy condensed display face and animated ribbons. The site is the demo.

• portfolio
• webgl
• scroll-choreography
• custom-cursor

Base

Coinbase's L2 network site on white with blue square motifs and a large serif headline. One color across the whole site.

• single-color
• brand-system
• square-motif
• heavy-type

Browserbase

Browser-infrastructure site, pale sky ground with a dithered pixel-art mountain illustration.

• dark-ui
• terminal
• infrastructure
• agents

Build First

AI workshop studio site, white, with a bold headline beside a generative mound of colored geometric confetti.

• generative
• white-ground
• playful
• agency

Cap

Open-source screen recorder site: light soft-gradient hero, product screens explaining. The front end is on GitHub.

• light-ui
• open-source
• product-loops
• playful

ChatTube

Single product page for a tool that answers questions about any YouTube video.

• ai
• youtube
• saas

Chronicle

Presentation tool site in light gray, a node graph of slides as the hero and a tabbed row of deck types below.

• light-ui
• product-shots
• tabs
• restraint

Claude Community Ambassadors

Anthropic's program page for people who organize local Claude communities.

• program-page
• community
• anthropic

Clerk

Auth site on white with a serif headline, an embedded live code-and-widget demo, and a logo row. No gradients.

• gradient
• component-cards
• developer
• interactive-hero

Cluely

Meeting assistant site on a photographic sky-and-mountain gradient, with the app window floating over it.

• gradient
• photographic-hero
• product-shots
• consumer

Composio

Agent tooling site, black, with blue audio-spectrum bars behind the headline and a logo wall under it.

• dark-ui
• generative-bg
• developer
• logo-wall

ConciergeOfAI

Service page for a managed OpenClaw setup that handles inbox and calendar.

• service
• ai
• assistant

Contra Pro

Membership upsell page for Contra's paid tier aimed at independent freelancers.

• pricing-page
• freelance
• marketplace

Creator Science

Jay Clouse's newsletter and membership site for professional creators.

• newsletter
• creator
• education

Creme Digital

Agency site promising a launch-ready MVP in two weeks, with client logos up top.

• agency
• mvp
• product

Cursor

AI code editor site, light ground, one large editor mock mid-task, then short sections demoing features in the real UI.

• dark-ui
• developer-tool
• product-demo
• restraint

Cursor Directory

Community directory of Cursor rules and MCP servers, browsable by stack.

• directory
• cursor
• mcp

CustomAI Studio

Consultancy site in black and orange that scrolls through an AI adoption curve drawn as a full-width bar chart.

• dark-ui
• data-viz
• scrollytelling
• consultancy

Daily Ads

Landing page for a service that generates ad creative daily from your site.

• ai
• ads
• creative

Dia

AI browser site on black with a serif wordmark, short centered copy and full-bleed video of a face.

• oversized-type
• saturated-color
• video
• consumer

Digital Commerce Partners

SEO agency for ecommerce brands, selling category-first organic search and AI visibility.

• agency
• seo
• ecommerce
• b2b

Dimension

Product site for an AI work assistant that connects to your existing apps.

• ai
• assistant
• product

DreamCut

Screen-recording editor site, dark, built on angled 3D device mockups showing the editor partway through an edit.

• dark-ui
• 3d-mockups
• product-shots
• video

Envato Elements

Subscription library of stock assets, templates and fonts for commercial use.

• assets
• stock
• subscription

Exit Five

Paid community and newsletter for B2B marketers, sold from a single long page.

• community
• newsletter
• b2b
• marketing

Exposure Ninja

UK digital marketing agency covering SEO, PPC, content and website development.

• agency
• marketing
• seo

Fame Clips

Podcast clipping service on cream, the FAME wordmark blown up as a watermark behind a vertical video player.

• oversized-type
• cream-ground
• video
• service

FLORA

AI canvas for designers and brand teams. Editorial image collage behind an italic serif headline.

• editorial
• serif-display
• creative-tool
• canvas

Fluxon

Product and software development firm staffed by ex-Google and Stripe engineers.

• agency
• engineering
• product

Foreplay

Pricing page for an ad swipe file and creative analysis tool.

• pricing-page
• ads
• saas

Founder OS

Matt Gray's paid program for founders building a systemized personal brand.

• course
• creator
• personal-brand

Gaps Research

Editorial ranking page tracking which software review sites show up in search.

• editorial
• data
• seo

Global App Testing

Crowdtesting company site aimed at teams shipping software in new markets.

• b2b
• testing
• saas

Goldcast

Marketing site for a B2B video, webinar and virtual events platform.

• saas
• video
• b2b
• events

Granola

AI notepad site on cream with a serif display headline and real app screenshots layered over it.

• warm-palette
• consumer
• soft-ui
• productivity

Grw AI

Sales coaching product site covering CRM hygiene, pipeline and rep coaching.

• saas
• sales
• ai

Higher Levels

Long-form course sales page for an AI-focused tech sales training program.

• course
• sales
• landing-page

Hyperbrowser

Cloud browser infrastructure for AI agents, sold from a short developer page.

• developer
• agents
• infrastructure

Imbue

AI research site on butter yellow with serif headlines and hand-drawn marker squiggles as the only ornament.

• editorial
• serif
• warm-palette
• hand-drawn

Inboxing

Mailbox provider site aimed at high-volume senders and outbound teams.

• email
• infrastructure
• b2b

incident.io

Incident-management site on cream with a serif display headline, a dark red nav, then large product screens.

• illustration
• bright-palette
• product-screens
• saas

Inflate

Melbourne AI automation studio building voice agents and n8n workflows.

• agency
• ai
• automation

Jina AI

Search infrastructure site covering embeddings, rerankers and the web reader API.

• developer
• search
• ai
• api

json-render

Generative UI framework site. Black ground, an arrow diagram as the headline, JSON next to its live render.

• dark-ui
• developer
• code-as-content
• docs

Kree8 Studio

Creative agency portfolio site. The older kree8.agency domain is dead.

• agency
• creative
• portfolio

Late Checkout (LCA)

Design firm site on white with an italic serif accent face and a client logo grid as the hero.

• agency
• scroll-snap
• heavy-type
• sectioned

Linear

Gold-standard site for its elevation ladder, tight letter spacing and restraint. The micro-detail reference.

• gold-standard
• single-site
• dark-ui
• restraint

LongCut

Product page for topic-based navigation through long YouTube videos.

• ai
• video
• learning

Loops

Email platform site: white ground, serif headline, one product screenshot, and almost nothing else.

• minimal
• single-accent
• saas
• email

Lore

Fandom app teaser: one glossy chrome LORE wordmark lit pink on near-black, plus a single line of copy.

• 3d-type
• dark-ui
• teaser
• single-idea

LTX Studio

AI video production site, black, three cinematic stills as the category grid under a centered all-caps headline.

• dark-ui
• cinematic
• grid
• video

Lychee

Offer page for a podcast clipping service, pitching two free demo clips from one episode.

• podcast
• video
• offer-page

Magic Animator

Animation tool site that shows its own output: labeled artboards of posters, logos and icon grids on a light canvas.

• light-ui
• artboards
• product-as-hero
• motion

Magic Patterns

Design generation tool site: a soft prismatic light gradient with a single prompt box centered inside it.

• gradient
• prompt-ui
• minimal
• tool

Magic UI Startup Template

Live demo of the Magic UI startup template, a full landing page in one scroll.

• template
• landing-page
• demo

Mainframe

Product site for Mainframe. The old mainfra.me bookmark now redirects here.

• ai
• product
• minimal

MarketerHire

Marketplace site for hiring vetted freelance marketers on short timelines.

• marketplace
• hiring
• marketing

Mercury

Gold-standard site for calm editorial fintech: generous white space, narrow palette. Use it when a build gets loud.

• gold-standard
• single-site
• fintech
• editorial

Metronome

Billing infrastructure site on white with a green gradient, dashboards and live numbers as the hero image.

• dark-ui
• diagrams
• infrastructure
• data-viz

Mintlify

Gold-standard site for documentation and developer products. Dense reference material that still feels designed.

• gold-standard
• single-site
• docs
• developer

Miro

Whiteboard and collaboration platform site, rebuilt around AI workflows.

• saas
• collaboration
• product

Money with Katie

Personal finance brand on rust orange with a cutout photo, a big italic serif headline and pill-shaped nav.

• editorial
• serif
• cutout-photo
• creator-brand

Morpho

Onchain lending site on black with a glowing particle sphere as the hero and live protocol numbers along the bottom.

• fintech
• geometric
• blue
• custom-wordmark

Motion

Agency selling managed video series and podcasts for small B2B marketing teams.

• agency
• video
• podcast
• b2b

Mux

Video API site led by a heavy condensed display face and a customer logo wall, with video as the product proof.

• video-first
• developer
• motion
• api

Nick Saraev

Creator site for an AI automation teacher, selling courses off a long sales page.

• personal-site
• creator
• automation

Nobinge

Landing page for a summarizer that handles YouTube videos, web pages and PDFs.

• ai
• summaries
• saas

OFF MENU

Product studio site that is almost empty: a monogram, one sentence, and scattered circular work thumbnails.

• studio
• type-led
• spare
• agentic-ui

Offloop

Agent ops site whose whole hero is one cinematic render: an orange-lit auditorium in headsets, copy over the top.

• cinematic
• dark-ui
• single-image
• waitlist

Ory

Open-source identity and access management platform, API-first and self-hostable.

• developer
• auth
• identity

Outliner

Product site for a tool that documents standard operating procedures.

• saas
• documentation
• sop

Pangea

Marketplace for hiring fractional marketing, design, ops and engineering talent.

• marketplace
• hiring
• freelance

Paper

Design tool site on cream where the product's own canvas fills the fold at full size, large enough to actually read.

• design-tool
• live-canvas
• interactive
• motion

Paraform

Recruiting marketplace site. Full-bleed rocket-launch photo behind a serif headline, gray logo wall below.

• photographic-hero
• serif
• full-bleed
• marketplace

Perspective

Mobile-first funnel builder marketing site aimed at lead generation.

• funnels
• saas
• mobile

Phantom

Gold-standard site for motion carrying the page: 26 videos and several canvases on one page.

• gold-standard
• single-site
• 3d
• product-render

Possimpible

Motion design studio whose case studies are video cards, so most of the page is moving.

• motion-studio
• video-layout
• showreel
• saas

PostHog

Analytics site on olive green with dense navigation, stacked product cards and a deliberately unpolished voice.

• illustration
• hand-drawn
• anti-saas
• dense

Ramp for Agents

Ramp's microsite for its agent products: light, tightly typeset, one yellow accent. A sub-brand inside the parent system.

• sub-brand
• dark-ui
• fintech
• microsite

Rare Days

Product studio site built from full-bleed color blocks: a yellow panel with a heavy serif wordmark, then green.

• studio
• editorial-type
• slow-scroll
• case-studies

Raycast

Mac launcher site, near-black with a large red geometric graphic behind the headline. One abstract element carries it.

• dark-ui
• product-shots
• developer-tool
• keyboard

Redpoint Ventures

Venture firm site with an animated hero and a browsable portfolio index.

• vc
• firm
• portfolio

Replicate

Model-hosting site whose hero is a full-width magenta-to-yellow gradient with a runnable code block on top.

• brutalist
• system-type
• grid
• no-gradient

Repurpost

One-page product site for turning YouTube videos into Twitter threads.

• ai
• creator
• saas

Resend

Email API site: near-black ground, serif display headline, one dark 3D render. Weight from type and contrast alone.

• minimal
• developer
• tight-type
• white-ground

Ricky Aguilar

Designer-engineer's personal site: dark, narrow single column of stacked cards with a newsletter signup.

• personal-site
• single-page
• type-hierarchy
• portfolio

Semafor

News site with a strict editorial grid, a serif and sans pairing, and color-coded sections. A real publishing layout.

• editorial
• news-grid
• serif-sans
• section-color

Shopify Editions Winter '26

Shopify's twice-yearly product microsite, rebuilt each release. Winter '26 is a scroll-driven Renaissance-painting collage.

• microsite
• scrollytelling
• 3d
• showpiece

Short Form Media

Short-form agency site in smoke black with a huge condensed headline and one phone playing a clip beside it.

• oversized-type
• dark-ui
• video
• agency

SkillsMP

Searchable index of agent skills pulled from public GitHub repositories.

• directory
• ai-agents
• skills

Slide

Framer-built product page for an AI agent that messages creators for brands.

• ai
• outreach
• creators

StartClaw

Landing page for hosted OpenClaw agents connected to WhatsApp and Telegram.

• saas
• agents
• hosting

Stripe

Gold-standard site for information density. Heavy technical content that reads at a glance, plus a much-copied color system.

• gold-standard
• single-site
• gradient
• developer

Supabase

Developer platform site, light ground with a green accent, monospace labels, and cards showing real API surfaces.

• dark-ui
• developer
• monospace
• code-as-content

Sway One

Video production agency for B2B SaaS companies, built around product demo work.

• agency
• video
• b2b
• saas

Tamba

Digital product agency site on a purple-to-black gradient with an iridescent chrome ring turning below the headline.

• gradient
• 3d-render
• dark-ui
• agency

Tavus

Conversational-video AI site on white with pink accents, an italic serif headline, and a live video call in the fold.

• video-first
• dark-ui
• full-bleed
• large-type

Tenex

Enterprise AI consultancy site opening on a black-and-white marble bust holding a phone, under a thin serif line.

• photographic-hero
• serif
• black-and-white
• consultancy

The Deep View

Daily AI newsletter site with an archive of briefings and interviews.

• newsletter
• editorial
• ai

The InfraRed 100

Redpoint's annual cloud infrastructure index. Deep red ground, slab wordmark, a filterable table as the content.

• editorial
• data-table
• report
• index

The Rewatchables

The Ringer's podcast landing page, with episode art laid out as a browsable grid.

• editorial
• podcast
• media

The Right Fit

Creator marketing marketplace where brands post a brief and creators apply.

• marketplace
• creators
• influencer

Typedream

AI website builder marketing site pitching landing pages from a single sentence.

• website-builder
• ai
• saas

Unicorn Studio

No-code WebGL tool whose site runs the shader and interactive-motion effects it sells, live on the page.

• webgl
• shaders
• interactive-motion
• no-code

Vapi

Voice agent site with a green motion-blurred field as the hero and a working call widget under the headline.

• motion-blur
• green
• live-demo
• developer

Variant

Design generator that fills its own page with an endless scrolling grid of results instead of explaining itself.

• dark-ui
• infinite-grid
• product-as-hero
• tool

VEED

Browser video editor marketing site, positioned around social video and captions.

• video
• saas
• editor

VibeCodeCareers

Job board for AI-fluent roles, updated daily with remote and freelance listings.

• job-board
• ai
• directory

Video To Blog

One product page for converting YouTube videos into publishable blog posts.

• ai
• content
• saas

Voicenotes Pages

Feature page for publishing recorded voice notes as a public page.

• audio
• publishing
• product

Warmly

GTM software site for identifying anonymous site visitors and engaging them.

• saas
• sales
• b2b

WeCreateBrand

Framer-built agency site selling landing pages, branding and funnel design.

• agency
• branding
• landing-page

Weekly AI Ops

Community site pitching an AI co-founder plus the SOPs and workflows around it.

• community
• ai
• ops

Wispr Flow

Voice dictation site on cream with an italic serif headline and a small waveform as the only motion.

• motion
• gradient
• real-time
• consumer

Work Louder

Creator-hardware store on a pale sky-blue gradient with large 3D product renders.

• ecommerce
• product-photography
• loud-color
• hardware

YAP Media

Podcast and social media agency site built around founder-led brand growth.

• agency
• podcast
• social

ZHC

Agent-company builder site, near-black, with a live terminal log of agents working and counters across the bottom.

• dark-ui
• terminal
• live-data
• developer

Awwwards

Award-winning sites. The hard reference when you want an expert-difficulty target.

• award-winning
• expert-difficulty
• motion
• webgl

Bento Grids

Curated collection of bento-grid layouts. Narrow on purpose: arranging feature cards in an asymmetric grid.

• bento
• feature-grids
• layout
• curated

Best Designs On X

Hourly feed of design work posted on X, covering UI, logos and branding.

• gallery
• social
• curated

Collect UI

Daily UI shots sorted by component type, pulled from the Dribbble archives.

• gallery
• daily-ui
• components

Cosmos

Visual curation where people collect images into themed clusters. Strongest for art direction and photography, not UI.

Search a mood or material ('brutalist', 'chrome', 'risograph') and open the cluster, not the single image.

• curated
• clusters
• art-direction
• photography

Dribbble

Concept search for a vibe: copy an image and paste it as a visual reference. Shots are often unshipped concepts.

Search the component or artifact you need: 'dashboard', 'settings', 'brand identity'.

• concept-search
• concepts
• ui-shots

Inspo

Archive of 832 production sites for coding agents. Install as an MCP server for screen captures and each site's DESIGN.md.

Install with `npx -y inspo-mcp install`, or browse the 2,320 indexed screens by pattern.

• mcp
• agent-ready
• production-sites
• components

Land-book

Searchable landing-page gallery. Filter by industry and style when you need many examples side by side.

• landing-pages
• searchable
• by-industry

Mobbin

Screen-by-screen app and web UI indexed by flow: onboarding, settings, paywall. Flows are Pro-only, $10/mo.

Search by pattern or flow name rather than by company.

• Paid
• app-patterns
• flows
• mobile
• ios
• android

One Page Love

Long-running gallery of single-page sites plus templates. For when the whole brief has to resolve in one scroll.

• single-page
• templates
• curated
• long-running

Panda

Feed reader that pulls design and tech sites into one browsable homepage.

• feed
• reader
• design-news

Pinterest

Deep well for mood and art direction. Everyone pulls from it, so use it to widen a direction, not as the only source.

• mood
• broad
• editorial

Recent (formerly Godly)

Daily curation of websites, app screenshots, app icons and OG images. Smaller and more opinionated than Awwwards.

• curated
• websites
• app-screenshots
• app-icons
• gallery

Reeoo

Gallery of websites, app screenshots, icons and events, grouped for reference.

• gallery
• web
• apps
• icons

Refero

Product screens and flows, plus 2,000+ AI-readable design systems as CSS variables with a DESIGN.md. Free tier is about 3%.

For tokens go to styles.refero.design and open a style page. refero.design itself is the screen and flow library. Pro is $10/mo.

• Paid
• teardowns
• design-tokens
• by-niche
• web
• ios

Remotion Showcase

Gallery of videos and campaigns built with Remotion, filterable by use case.

• motion
• video
• gallery

Saaspo

SaaS web design, indexed 3,127 pages / 716 sections / 384 OG images deep. Pull one pricing section or one hero.

Browse by Sections when you need one part solved rather than a whole page.

• saas
• sections
• og-images
• templates

Savee

Designer-curated visual reference. For posters, layouts and feelings rather than sites you can scrape.

Search by concept, not site name: 'dashboard UI', 'posters', 'numbers'. Less picked-over than Pinterest.

• composition
• editorial
• posters
• concept-search
• curated

ScreensDesign

Library of real iOS app screens, onboarding flows and paywalls from the top charts.

• ios
• mobile
• onboarding
• paywalls

Supahero

Library of website hero sections in one place. Settle the first screen before committing to the rest of the page.

• hero-sections
• first-screen
• curated
• landing-pages

Adobe Fonts

Over 30,000 fonts included with a Creative Cloud subscription, personal and commercial. No free tier.

• Paid
• subscription
• large-library
• licensing
• foundries

Fontjoy

Pairing generator: lock the display face, slide between similar and contrasting, get a body face. Google Fonts library.

• pairing
• generator
• google-fonts

Fonts In Use

Type shown in real use: packaging, posters, signage, book covers. Judge a face in context, or identify one you like.

Search by format or industry ('packaging', 'signage', 'annual report') to see a face doing the job you need.

• type-in-situ
• packaging
• posters
• signage
• identification

Fontshare

Free-for-commercial-use faces of real quality: Switzer, Satoshi, General Sans. First look off a Google Fonts default.

• free-commercial
• modern-sans
• switzer
• satoshi

Google Fonts

Free and trivially embeddable. Its overused defaults are the clearest tell that nobody made a type decision.

• free
• web-hosted
• ubiquitous

Open Foundry

Small curated library of free open-source faces: Archivo, Bluu Next, Terminal Grotesque. Overlaps Google Fonts.

• free
• curated
• open-source
• specimens

Typescale

Set a base size and a ratio, see the heading scale in your font, copy the CSS out. A paid tier adds saved boards.

• type-scale
• ratio
• css-output
• hierarchy

Typewolf

Curated pairings plus the sites using them, the fastest way to settle display and body. Not all are free, check licenses.

• pairings
• site-examples
• curated
• licensing

Velvetyne

Libre open-source foundry of distinctive, often experimental faces. Free to download and use.

• free
• open-source
• foundry
• experimental

Wakamai Fondue

Drop in a font file and it lists OpenType features, variable axes and glyph coverage, with the CSS to switch them on.

• font-inspector
• opentype
• variable-fonts
• css

WhatTheFont

Upload an image of type and MyFonts names the face against its catalogue. Identifying is free, most results are paid licences.

• identification
• reverse-lookup
• myfonts

21st.dev

The main component-sniping library. Copy a component's code and have it restyled to your tokens.

Sort by Featured, or use the Popular rail, which is ranked by install count.

• react
• tailwind
• shadcn-compatible
• copy-paste

Aceternity UI

Shader and distortion effects with the code exposed. Widely used already, so restyle before shipping.

• shaders
• distortion
• framer-motion
• hero-effects

Agentic UI

Figma design system for agent interfaces, sold from a preorder page.

• figma
• design-system
• agents

AlignUI

Large React and Figma system with matching component code. Paid, but the public pages show how a system is organized.

• Paid
• design-system
• figma
• react
• paid

Aura

Template and component gallery from Meng To's AI landing-page builder. HTML export is free; Figma, Pro templates and AI are paid.

• landing-patterns
• gallery
• export-html
• export-figma

Base UI

Unstyled, accessible React primitives. None of the styling, all of the keyboard and ARIA behavior.

• unstyled
• react
• accessible
• primitives

Bundui

Around 200 handcrafted Tailwind and shadcn/ui components and blocks.

• tailwind
• shadcn
• react

CodePen

Where to find the one-off effect nothing else has: a CSS trick, cursor, or canvas experiment, in a readable pen.

• one-off-effects
• css
• canvas
• experiments

Codrops

Archive of web-effect tutorials and demos, each with source. Scroll, hover and page-transition effects written out.

Search the effect name in the Demos or Collective index. Every article links a working demo and a GitHub repo.

• web-effects
• tutorials
• demos
• source-included

Coss UI

Component library built on top of Base UI. Formerly published as originui.com.

• react
• base-ui
• tailwind

HeroUI

React component library on React Aria and Tailwind v4, styled out of the box. Components that already look finished.

• react
• react-aria
• tailwind
• styled-default

Kibo UI

Open-source shadcn/ui registry for what the base set lacks: kanban, calendars, editors, tables. Installs via the shadcn CLI.

• shadcn-registry
• open-source
• composable
• app-widgets

Magic UI

Motion-first components that pair with shadcn. Marquees, counters and reveals that add motion without taking over.

• motion
• react
• tailwind
• micro-interactions

Once UI

Open-source Next.js design system with copy-paste components, blocks and pages.

• react
• nextjs
• design-system
• open-source

Radix Primitives

Unstyled, accessible components. Keyboard and focus handling solved. What shadcn/ui is built on.

Reach for it when a component needs correct focus trapping or keyboard semantics, then style it with your own tokens.

• headless
• accessibility
• react
• primitives

React Bits

Animated React components: text effects, transitions, backgrounds. For one piece with real motion craft.

• react
• animated
• text-effects
• premium-feel

Relume

Turns a brief and a reference URL into a sitemap, editable wireframes and a style guide. The structure pass before pixels.

Export the wireframe or HTML and hand over that zip alongside the original reference URL, not one or the other.

• sitemap
• wireframe
• style-guide
• site-builder
• structure-first

shadcn/ui

The base system other libraries assume. Accessible components whose code lands in your repo, tokens in your files.

• base-system
• react
• tailwind
• accessible
• themeable

Shadcnblocks

Several hundred shadcn/ui page blocks in React and Tailwind: heroes, pricing, feature grids. Paid.

• Paid
• shadcn
• page-blocks
• react
• tailwind

Sprrrint

Library of free Framer and Figma templates, components and gradients.

• figma
• framer
• templates

Tailark

Shadcn registry of marketing blocks and full-page sections.

• shadcn
• marketing
• blocks

ThreeUI

Meng To's three.js catalog: 3D heroes, WebGL backgrounds, shader buttons, text animation. Community set is MIT, Pro is paid.

Browse the free Community index and check the real ceiling before promising 3D. A ThreeUI MCP is also available.

• threejs
• webgl
• hero-sections
• procedural
• open-source

Uiverse

Open-source library of small CSS elements submitted by users: buttons, toggles, loaders, cards.

Search the element type ('toggle', 'loader', 'card') and filter by Tailwind or plain CSS before copying.

• css
• open-source
• micro-elements
• community

Vercel Templates

Whole working apps with their source repos, filterable by use case and framework. A finished structure to read.

• templates
• starters
• source-code
• full-apps

Vue Bits

Open-source animated Vue components, the Vue counterpart to React Bits.

• vue
• animation
• open-source

3dicons

More than 1,500 hand-made 3D icon renders, free as a set, with a Pro release that recolors and re-angles them online.

• 3d
• renders
• free-download
• hero-assets

Flaticon

Enormous static icon and sticker catalogue. Free tier is PNG-only with attribution; SVG needs Premium.

• Paid
• static
• volume
• illustration

Heroicons

MIT Tailwind-team icons: 24px outline and solid, 20px and 16px solid, React and Vue packages. Closed to new icons.

• open-source
• mit
• tailwind
• react
• vue

Iconify

Search 222 open-source icon sets at once, each set's license and icon count listed. Leave with one family.

Search first, then click through to the owning set. The point is to leave with one family, not a mixed handful.

• search
• multi-set
• open-source
• licenses

Icons8

Large static icon library with complete families in one style. Mixing styles across a site is the failure.

• Paid
• static
• multiple-styles
• consistent-families

IconScout

Icons plus 3D assets, illustrations and Lottie files in one place, so a set and its props read as one family.

• Paid
• static
• 3d-icons
• lottie
• illustration

Lordicon

Animated icons as Lottie JSON. 9,700 are free but require attribution. Keep a local folder so motion stays consistent.

• animated
• lottie
• json
• micro-interactions

Lucide

Open-source set of 1,600+ ISC-licensed icons, packages for the major frameworks, adjustable stroke width, size and color.

• open-source
• isc
• line-icons
• react

Material Symbols

Google's Apache 2.0 set shipped as a variable font: fill, weight, grade and optical size are sliders, tuned to sit with the type.

• open-source
• apache-2
• variable-font
• google

Openmark

Free open-source logo marks for product builders. Formerly logomark.co.

• logos
• open-source
• brand

Phosphor Icons

Open-source icon family in six weights from thin to fill, MIT licensed. One consistent style across the whole set.

• open-source
• six-weights
• mit
• consistent-family

Tabler Icons

6,184 MIT icons, all drawn on a 24x24 grid at 2px stroke. For when smaller sets fall short. Paid bundles add formats.

• open-source
• mit
• line-icons
• large-set

Adobe Color

Color wheel with the classic harmony rules, palette extraction from an uploaded image, and a color-blindness simulator. Free.

Use /create/image to lift a palette off a film still, and /create/color-accessibility to check color-blind safety.

• color-wheel
• harmony-rules
• extract-from-image
• accessibility

Coolors

Palette explorer: lock the colors that work, reshuffle the rest. Free tier is ad-supported and caps at five colors.

Spacebar reshuffles. Lock the swatches you want to keep first. Pro is a $99 one-time payment.

• palette-generator
• lock-and-shuffle
• contrast

Grainient

Gradients, animated gradients and grainy textures as ready assets, instead of hand-building a mesh gradient.

• Paid
• gradients
• grain
• backgrounds
• assets

OKLCH Color Picker

Edit any color as perceptual lightness, chroma and hue. Shows P3 and Rec2020 limits plus an sRGB fallback. By Evil Martians.

• oklch
• perceptual
• converter
• p3

Radix Colors

Open-source 12-step scales where every step has an assigned job: backgrounds, components, borders, fills, accessible text.

• color-system
• scales
• accessible
• tokens

Realtime Colors

Puts your colors and fonts on a dummy landing page so you judge them in a real layout. Exports CSS, SCSS, PNG or zip. Free.

• palette-preview
• live-layout
• fonts
• export-css

tweakcn

Visual theme editor for shadcn/ui. Set colors, radius, shadows and fonts on real components, then copy the CSS variables.

• shadcn
• theme-editor
• css-variables
• preview

WebAIM Contrast Checker

Foreground and background hex in, contrast ratio out, with WCAG AA and AAA pass or fail for text and UI components.

• contrast
• wcag
• accessibility
• checker

awesome-design-md

Collection of DESIGN.md files: how to hand an agent a design system of tokens, type scale and spacing in writing.

• design-md
• agent-ready
• tokens
• reference

Baoyu Design

Runs Claude Design locally as an agent skill: mockups, prototypes, decks and wireframes as one HTML file. 4k stars.

• agent-skill
• mockups
• prototypes
• html

Bookmarkify

Bookmark manager for design references that extracts fonts and colors per site.

• bookmarks
• swipe-file
• fonts

Brandfetch

Look up a company's real logos, colors and typefaces by domain. More accurate than rebuilding from a screenshot.

• brand-assets
• logos
• colors
• typefaces

Design OS

Free, open-source tool that adds a design phase before a coding agent builds.

• planning
• open-source
• agents

DESIGN.md Style Extractor

Chrome extension that reads a live site's styles and writes them out as a DESIGN.md or a design skill. 2.8k stars.

Pairs with awesome-design-md: pull a real site's tokens, then hand the file to the agent instead of a screenshot.

• extraction
• design-md
• chrome-extension
• tokens

Efecto

Design tool for agents: artboards, layers and auto-layout through 66 MCP tools, so an agent edits the canvas. Free.

• mcp
• agent-native
• canvas
• artboards

Emil Kowalski's Skills

13 design engineering skills, 1.4M installs total. animation-vocabulary, review-animations and improve-animations do motion.

Site is emilkowal.ski/skill. emil-design-eng is the most installed at 272k; apple-design covers native feel.

• agent-skill
• animation
• motion
• design-engineering

Firecrawl

Scrapes a URL in agent-readable form. Its branding format returns a site's real logos, type stack and palette.

Request format 'branding' on a site you admire to get its real type and color values, then design from those.

• Paid
• extraction
• branding
• scraping
• agent-native

frontend-design (Anthropic)

Anthropic's own design skill, the most installed on skills.sh at 890k. The baseline the others were written against.

Same repo carries theme-factory, canvas-design, brand-guidelines and algorithmic-art.

• agent-skill
• official
• frontend
• baseline

GSAP

The animation library to name explicitly in a build prompt. ScrollTrigger docs are the scroll-driven reference.

• animation
• scrolltrigger
• scrollytelling
• docs

GSAP Skills

GreenSock's own agent skills for GSAP: core, timeline, ScrollTrigger, plugins, performance, React and utils. 15k stars.

gsap-scrolltrigger is the one that matters for scroll-driven pages. Ships as both a Claude and a Cursor plugin.

• agent-skill
• animation
• scrolltrigger
• official

Hallmark

Anti-AI-slop design skill from Together AI. 21 themes, four verbs, 57 slop-test gates before it returns UI. 28.7k stars.

`hallmark study <url>` pulls the macrostructure, type pairing and color anchor out of a design you admire.

• agent-skill
• anti-slop
• themes
• design-review

Higgsfield

Image and video generation for site assets: hero art, a looping hero video, a logo. Generate at 2K, two to four variations.

Images go up to 2K with a batch size of 1-4. Leave sound off on video, it costs about double the credits.

• Paid
• image-gen
• video-gen
• hero-assets
• logos
• mascots

Huashu Design

HTML-native design skill with a 60-style library for prototypes, slide decks, infographics and animations. 24.2k stars.

Install with `npx skills add alchaincyf/huashu-design`. The README is Chinese; README.en.md is the English one.

• agent-skill
• html-native
• prototypes
• slides

Impeccable

Design skill for coding agents. 24 commands (polish, audit, critique) and 61 deterministic detectors. 68.3k stars.

Run `npx impeccable install`, then `/impeccable init` to write a PRODUCT.md before building. Docs at impeccable.style.

• agent-skill
• design-review
• anti-slop
• open-source

MagicPath

Shared canvas where people and agents iterate on interface designs together.

• ai
• canvas
• collaboration

MotionSites

Copy-paste prompts for animated heroes and landing pages. Previews are free, the full library is in the paid Design Rocket course.

Browse by section (hero, footer, pricing, CTA) or by industry. Each card previews what its prompt produces.

• Paid
• prompt-library
• animated-sites
• hero-sections
• landing-pages
• copy-paste

OpenArt

Video generation with explicit start and end frames so a loop closes cleanly, plus background replacement and motion sync.

• Paid
• video-gen
• start-end-frame
• background-replace
• motion-sync

Recraft

Image generation for designers: vector output and a style held constant across a set. For icon families and illustrations.

• Paid
• image-gen
• vector
• style-consistency
• icon-sets

skills.sh

Registry where agent skills are published and installed. Every skill here installs with `npx skills add owner/repo`.

Sort by installs to see what is actually used. Each repo page breaks the count out per skill.

• registry
• agent-skill
• install
• leaderboard

Stitch

Google's tool for generating mobile and web UI from a prompt or an image.

• ai
• google
• ui-generation

Superdesign

AI design platform with a browsable library of interface styles.

• ai
• ui
• styles

Taste-Skill

Anti-slop skill set for agents. design-taste-frontend and high-end-visual-design each pass 350k installs. 87.4k stars.

Site is tasteskill.dev. image-to-code is the third heavily used skill in the set.

• agent-skill
• anti-slop
• frontend
• open-source

Tastelint

An agent that reads pull-request screenshots and returns a design critique of what looks off and what to change.

• Paid
• design-qa
• code-review
• screenshots
• critique

The Toolbox

Notion-built database of tools for art directors and other creatives.

• directory
• art-direction
• notion

Three.js Skills

Ten Three.js skills for agents: fundamentals, materials, shaders, geometry, lighting, loaders, postprocessing. 3.3k stars.

No license file on the repo, so check before shipping any of it commercially.

• agent-skill
• threejs
• shaders
• webgl

UI Skills

Skills for design engineers from ibelick, with a CLI and an MCP endpoint so an agent can pull them itself. 8.5k stars.

`npx ui-skills list --category motion`, or connect an agent to https://www.ui-skills.com/mcp.

• agent-skill
• mcp
• design-engineering
• registry

ui.sh

Nine agent skills from the Tailwind CSS and Refactoring UI team: design, ideas, brand kit, dark mode, markup from image.

Canonicalize Tailwind and Add Dark Mode are the two that fix an existing codebase rather than start a new one.

• agent-skill
• tailwind
• dark-mode
• refactoring

UI/UX Pro Max

Agent skill with 79 searchable UI styles, 192 color palettes and 74 font pairings, by product type. 127.9k stars.

Install with `npx skills add nextlevelbuilder/ui-ux-pro-max-skill`. The full style taxonomy is in styles.csv.

• agent-skill
• ui-styles
• palettes
• font-pairings