Design

A curated library of design tools and UI references.

112 References
Use

21st.dev

AI agent registry and UI component marketplace for shipping agent-powered products...

21st.dev
Use

Agentation

Visual feedback tool that turns UI annotations into structured context for AI coding...

agentation.dev
Build

Open Design

Local-first open source alternative to Anthropic Claude Design.

open-design.ai
Explore

getdesign.md

Browse design system inspirations from popular websites.

getdesign.md
Explore

Motion

60fps is a curated collection of UI/UX animation and interaction design details from...

60fps.design
Use

Lazyweb MCP

A design context for grounding AI agents.

lazyweb.com
Learn

AB Tests

A gallery of A/B test examples for learning what changes product behavior.

abtest.design
Use

Pencil

Canvas-based design tool that turns product ideas into code inside your IDE.

pencil.dev
Explore

Inspiration

An archive of microinteractions, Easter eggs, and tiny design details that bring...

designspells.com
Use

Onlook

Onlook is a next-generation visual code editor that lets designers and product...

onlook.com
Learn

Breakdowns

A breakdown gallery that breaks down the UI of real products such as Wise, Tesla,...

uxsnaps.com
Use

Claude Design

Accelerate design critique, UX writing, accessibility audits, research synthesis,...

claude.com
Use

UI components

A practical playbook for reusable interface components and UI decisions.

uiplaybook.dev
Use

Agentic UI

The world's first enterprise-grade design system for building scalable agentic...

agenticui.net
Use

Montage Design System

Wanted’s product design system for brand, typography, components, and UI patterns.

montage.wanted.co.kr
Learn

Vercel Design

Vercel's design team introduction page.

vercel.com
Explore

The Component Gallery

An up-to-date repository of interface components and design systems, intended as a...

component.gallery
Explore

Awesome Design Systems

Awesome list of design systems.

git.io
Explore

Design Systems Repo

An organized and frequently updated collection of Design System examples, resources,...

designsystemsrepo.com
Explore

Adele

Dozens of design systems and pattern libraries that have been thoroughly analyzed...

adele.uxpin.com
Learn

UI Design Dictionary

A lightweight bilingual dictionary of UI patterns and vibe-coding terminology...

ui-design-dictionary.pages.dev
Read

Design Systems Report

Management buy-in is declining and hiring is stagnant.

report.zeroheight.com
Read

OpenAI Developers

Practical techniques for steering GPT-5.4 toward polished, production-ready frontend...

developers.openai.com
Read

Anthropic Engineering

Anthropic is an AI safety and research company that's working to build reliable,...

anthropic.com
Read

AIUX

A framework of 36 AI UX design patterns documented from ChatGPT, Claude, GitHub...

aiuxdesign.guide
Learn

Impeccable

1 skill, 20 commands, and curated anti-patterns for impeccable frontend design.

impeccable.style
Use

Taste Skill

Taste Skill gives your AI agent "sense".

tasteskill.dev
Use

addyosmani/agent-skills

Production-grade engineering skills for AI coding agents.

github.com
Use

plugin87/ux-ui-agent-skills

A collection of skills that turns Claude into a senior design architect.

github.com
Use

sleekdotdesign/agent-skills

Contribute to sleekdotdesign/agent-skills development by creating an account on GitHub.

github.com
Use

VoltAgent/voltagent

Collection of DESIGN.md files that capture design systems from popular websites.

github.com
Use

anthropics/skills

Public repository for Agent Skills.

github.com
Use

assistant-ui

TypeScript/React library for AI chat UI

assistant-ui.com
Use

HeroUI

Beautiful and customizable component set.

heroui.com
Use

Skiper UI

A quirky new component for Next.js projects.

skiper-ui.com
Use

React Bits

An open source collection of high-quality, animated, interactive, and customizable...

reactbits.dev
Use

bazza/ui

A collection of beautiful, modern React components.

ui.bazza.dev
Use

Unified UI

Ship beautiful interfaces faster with 50+ accessible, customizable React components.

unified-ui.space
Build

lukilabs/beautiful-mermaid

A Mermaid styling library that turns agent-generated diagrams into polished themes...

github.com
Use

Excalidraw MCP

A streamable Excalidraw MCP server for drawing hand-drawn diagrams directly from AI...

plus.excalidraw.com
Build

Pretendard

A cross-platform system-ui alternative typeface for Korean and multilingual product...

cactus.tistory.com
Use

Wanted Design Library

An open design library with typography, grids, icons, color palettes, and adaptable...

figma.com
Build

Open Foundry

A site that has been curating open source typefaces for over 10 years.

open-foundry.com
Use

Dembrandt

Extract website design systems (logo, colors, typography, borders, etc.) as tokens...

dembrandt.com
Build

Pixel Perfect UI

A React component library with animations powered by GSAP.

pixel-perfect.space
Read

userinterface.wiki

A living manual for a better interface.

userinterface.wiki
Learn

Pacome Pertant

Portfolio of Pacôme Pertin, a motion and sound designer living in Paris.

pacomepertant.com
Use

Tweakpane

Compact pane for fine-tuning parameters and watching values ​​change

tweakpane.github.io
Build

Flue

Agent harness framework made by TypeScript.

flueframework.com
Watch

Contra Labs

Human Data Evaluation Lab, where over 1.5 million creators evaluate the quality of...

contralabs.com
Explore

Refero Styles

A library of design styles from famous services curated in DESIGN.md format for AI...

styles.refero.design
Watch

DEEO Artifacts

A collection of interactive/motion experiments for curious people.

artifacts.deeo.studio
Watch

Rebrand Gallery

A curated gallery of rebrands and visual identities.

rebrand.gallery
Read

Hannah Hearth

In Show and Tell, Hannah Hearth introduces the tools actually used by Vercel's...

hannahhearth.com
Watch

MSCHF

A studio whose creative practices and subjectivity aim to have the cultural power to...

mschf.com
Watch

Roam

An infinite canvas for viewing well-designed objects.

roam.neesh.page
Use

Transitions.dev

A site that collects standard transitions for web applications.

transitions.dev
Use

EvilCharts

An open source charting UI library built with shadcn and Recharts.

evilcharts.com
Read

Linear

The essence of design is not the output, but understanding the problem and deciding...

linear.app
Build

openai/realtime-voice-component

Voice operation UI component for React/browser.

github.com
Explore

Refto

A site that brings together curated website inspiration, landing page examples,...

refto.one
Learn

Devouring Details

An interactive reference manual for designers interested in interaction.

devouringdetails.com
Use

Loading UI

A collection of free and open source CSS/React loaders, spinners, and animations.

loading-ui.com
Explore

CTA Gallery

A call-to-action (CTA) inspiration gallery for designers.

cta.gallery
Use

web-kits/audio

A declarative audio synthesis library for the web.

audio.raphaelsalaja.com
Use

browser-use/video-use

An open source skill that automates video editing on Claude Code.

github.com
Use

UNCUT

A free typeface catalog specializing in modern typefaces.

uncut.wtf
Use

cathrynlavery/diagram-design

13 editorial quality diagram templates for Claude Code.

github.com
Build

HyperFrames

HyperFrames is a tool that uses AI agents to write HTML/CSS/JS and assemble videos.

hyperframes.heygen.com
Use

pablodelucca/pixel-agents

pixel office.

github.com
Watch

Curated Supply

A curation site for highly designed products.

curated.supply
Explore

Selected Site

A carefully selected collection of tools, resources, and inspiration for creators...

selected.site
Use

Wiretext

A spatial design tool where everything is rendered as Unicode line characters.

wiretext.app
Use

Fontshare

A free font service provided by Indian Type Foundry (ITF).

fontshare.com
Use

autoskills

Detect your tech stack and auto-install the best AI agent skills via skills.sh.

autoskills.sh
Use

Colors & Fonts

A tool that allows you to generate a complete color scale from one base color or...

colorsandfonts.com
Explore

mesh3d

A curated gallery introducing carefully selected 3D and interactive websites.

mesh3d.gallery
Use

Mesurer

Measure and align everything on localhost.

mesurer.ibelick.com
Read

Anna E. Cook

As teams use AI tools to generate high-fidelity prototypes, the focus shifts to...

annaecook.com
Use

dominikmartn/nothing-design-skill

A Claude Code skill for generating UI in the Nothing design language.

github.com
Use

Boneyard

Auto generated skeleton loading framework

boneyard.vercel.app
Use

CSS Studio

A visual CSS editor in your browser.

cssstudio.ai
Use

Liveline

Real-time animated line chart for React.

benji.org
Use

AI Designer

AI UI/UX Designer.

aidesigner.ai
Explore

Font Of Web

Your daily feed of real-world design inspiration.

fontofweb.com
Explore

Brand Archive

Super-power your brand research with Brand Archive.

brandarchive.xyz
Explore

Godly

A hand-picked curation of over 1,000 of the best AI, Web3, portfolio, and other...

godly.website
Watch

Notch

Story of how I built a near perfect Macbook Notch for web.

iamnoman.com
Explore

Shopify Design

Make the new normal.

shopify.design
Learn

Lessons of Design

The musings of a designer on why he designs the way he does and what he's learned...

lessons.design
Use

Onigiri

Moontype is a type foundry based in Hamburg and Stockholm, run by Pia Schröer and...

moontype.de
Explore

Cosmos

A home for curating your universe

cosmos.so
Explore

companies.sh

Discover and install AI agent companies.

companies.sh
Use

little-hands/claude-drawio-skill

Skill to create, read, and edit draw.io diagrams from Claude Code.

github.com
Use

Pretext

Pure JavaScript/TypeScript library for multiline text measurement & layout.

chenglou.me
Explore

SearchSystem

A curation site that collects references and tools for designers.

searchsystem.co
Use

Textura

Pretext x Yoga = Textura.

geometra.razroo.com
Use

fab ui

A component library for React/Next.js built with Base UI and Tailwind CSS.

fab-ui.com
Explore

Logo System

An inspiration library with over 1000 logo designs.

logosystem.co
Read

Stronger Design Principles

One of the hardest parts about writing down principles is to ensure they’re...

mynameisjehad.com
Explore

Detail

A curated study of the tiny design decisions that make products feel exceptional in...

detail.design
Learn

UI Skills

A set of skills to polish interfaces built by agents.

ui-skills.com
Use

Skills.sh

Discover and install skills for AI agents.

skills.sh
Read

Interface Craft

A working library for those committed to designing with uncommon care.

interfacecraft.dev
Use

ui.sh

A toolkit for coding assistants like Claude Code, Cursor, and Codex to help you...

ui.sh
Read

Cursouls

Turn your Cursor AI agents into tiny pixel characters who live in a cozy café,...

cursouls.xyz
Explore

DesEngs

A curated collection of design engineering resources.

desengs.com
Use

Dictar

Dictar is an on-device speech-to-text app.

dictar.app
Learn

Emil Kowalski

A skill file based on the articles written on Emil Kowalski’s personal site.

emilkowal.ski
Build

Rams

Automated design reviews for AI-generated code.

rams.ai
Use

Refero

The largest collection of UI/UX references and design inspiration for web and iOS.

refero.design
Explore

Variant

Enter an idea for an app or site and see endless design options just by scrolling.

variant.com