Design

디자인 툴과 UI 레퍼런스를 모은 라이브러리입니다

112 레퍼런스
Use

21st.dev

에이전트 기반 제품을 더 빠르게 출시하기 위한 AI 에이전트 레지스트리와 UI 컴포넌트 마켓플레이스입니다.

21st.dev
Use

Agentation

UI 주석을 AI 코딩 에이전트를 위한 구조화된 컨텍스트로 바꾸는 시각 피드백 도구입니다.

agentation.dev
Build

Open Design

Anthropic Claude Design의 로컬 최초 오픈 소스 대안입니다.

open-design.ai
Explore

getdesign.md

인기 웹사이트에서 디자인 시스템 영감을 찾아보세요.

getdesign.md
Explore

Motion

60fps는 세계 최고의 iOS 및 웹 앱에서 엄선된 UI/UX 애니메이션 및 상호 작용 디자인 세부 사항 모음입니다.

60fps.design
Use

Lazyweb MCP

AI 에이전트 기반을 위한 설계 컨텍스트입니다.

lazyweb.com
Learn

AB Tests

제품 행동을 바꾸는 요소를 배우기 위한 A/B 테스트 사례 갤러리입니다.

abtest.design
Use

Pencil

제품 아이디어를 IDE 안에서 코드로 전환하는 캔버스 기반 디자인 도구입니다.

pencil.dev
Explore

Inspiration

웹에 생명력, 개성, 즐거움을 다시 불어넣는 마이크로인터랙션, 부활절 달걀, 작은 디자인 디테일의 아카이브입니다.

designspells.com
Use

Onlook

Onlook은 디자이너와 제품 관리자가 AI로 웹 경험을 제작할 수 있는 차세대 시각적 코드 편집기입니다.

onlook.com
Learn

Breakdowns

Wise, Tesla, Pinterest, Apple Wallet 등 실제 제품의 UI를 세분화하고 적용해야 할 디자인 원칙과 의도를 설명하는 분석...

uxsnaps.com
Use

Claude Design

디자인 비평, UX 작성, 접근성 감사, 연구 종합 및 개발 핸드오프를 가속화합니다.

claude.com
Use

UI components

재사용 가능한 인터페이스 컴포넌트와 UI 결정을 위한 실용적인 플레이북입니다.

uiplaybook.dev
Use

Agentic UI

확장 가능한 에이전트 경험을 구축하기 위한 세계 최초의 엔터프라이즈급 디자인 시스템입니다.

agenticui.net
Use

Montage Design System

브랜드, 타이포그래피, 컴포넌트, UI 패턴 등을 위한 원티드의 제품 디자인 시스템입니다.

montage.wanted.co.kr
Learn

Vercel Design

Vercel의 디자인팀 소개 페이지입니다.

vercel.com
Explore

The Component Gallery

사용자 인터페이스를 구축하는 사람들을 위한 참조용으로 고안된 인터페이스 구성 요소 및 디자인 시스템의 최신 저장소입니다.

component.gallery
Explore

Awesome Design Systems

멋진 디자인 시스템 목록.

git.io
Explore

Design Systems Repo

디자인 시스템 예제, 리소스, 도구, 기사 및 비디오를 정리하고 자주 업데이트되는 컬렉션입니다.

designsystemsrepo.com
Explore

Adele

철저하게 분석된 수십 개의 디자인 시스템과 패턴 라이브러리.

adele.uxpin.com
Learn

UI Design Dictionary

빠른 검색을 위해 설계된 UI 패턴 및 바이브 코딩 용어에 대한 가벼운 이중 언어 사전입니다.

ui-design-dictionary.pages.dev
Read

Design Systems Report

경영진의 동의가 감소하고 채용이 정체되고 있습니다.

report.zeroheight.com
Read

OpenAI Developers

GPT-5.4를 세련되고 생산 준비가 완료된 프런트엔드 디자인으로 조정하기 위한 실용적인 기술입니다.

developers.openai.com
Read

Anthropic Engineering

Anthropic은 신뢰할 수 있고 해석 가능하며 조종 가능한 AI 시스템을 구축하기 위해 노력하는 AI 안전 및 연구 회사입니다.

anthropic.com
Read

AIUX

ChatGPT, Claude, GitHub Copilot, Midjourney 및 50개 이상의 AI 제품에서 문서화된 36가지 AI UX 디자인...

aiuxdesign.guide
Learn

Impeccable

완벽한 프런트엔드 디자인을 위한 1개의 스킬, 20개의 명령, 엄선된 안티 패턴.

impeccable.style
Use

Taste Skill

Taste Skill은 AI 에이전트에 "감각"을 제공합니다.

tasteskill.dev
Use

addyosmani/agent-skills

AI 코딩 에이전트를 위한 프로덕션급 엔지니어링 기술.

github.com
Use

plugin87/ux-ui-agent-skills

Claude를 수석 디자인 건축가로 만드는 기술 모음입니다.

github.com
Use

sleekdotdesign/agent-skills

GitHub에 계정을 만들어 slimdotdesign/에이전트 기술 개발에 기여하세요.

github.com
Use

VoltAgent/voltagent

인기 있는 웹사이트의 디자인 시스템을 캡처하는 DESIGN.md 파일 모음입니다.

github.com
Use

anthropics/skills

상담원 기술을 위한 공개 저장소입니다.

github.com
Use

assistant-ui

AI 채팅 UI용 TypeScript/React 라이브러리

assistant-ui.com
Use

HeroUI

아름답고 사용자 정의 가능한 구성 요소 세트.

heroui.com
Use

Skiper UI

Next.js 프로젝트를 위한 기발한 새 구성 요소입니다.

skiper-ui.com
Use

React Bits

고품질, 애니메이션, 대화형 및 사용자 정의 가능한 React 구성 요소의 오픈 소스 컬렉션입니다.

reactbits.dev
Use

bazza/ui

아름답고 현대적인 React 구성 요소 모음입니다.

ui.bazza.dev
Use

Unified UI

50개 이상의 액세스 가능하고 사용자 정의 가능한 React 구성 요소를 사용하여 아름다운 인터페이스를 더 빠르게 출시하세요.

unified-ui.space
Build

lukilabs/beautiful-mermaid

에이전트가 생성한 Mermaid 다이어그램을 두 가지 색상 입력만으로 정돈된 테마로 바꾸는 스타일링 라이브러리입니다.

github.com
Use

Excalidraw MCP

AI 에이전트가 손그림 스타일 다이어그램을 직접 그릴 수 있게 해주는 스트리밍 Excalidraw MCP 서버입니다.

plus.excalidraw.com
Build

Pretendard

한국어 및 다국어 제품 인터페이스를 위한 크로스 플랫폼 시스템 UI 대체 서체입니다.

cactus.tistory.com
Use

Wanted Design Library

일관된 제품 워크플로를 위한 타이포그래피, 그리드, 아이콘, 색상 팔레트 및 조정 가능한 구성 요소를 갖춘 개방형 디자인 라이브러리입니다.

figma.com
Build

Open Foundry

10년 넘게 오픈소스 서체를 큐레이팅해 온 사이트입니다.

open-foundry.com
Use

Dembrandt

웹사이트 디자인 시스템(로고, 색상, 타이포그래피, 테두리 등)을 몇 초 만에 토큰으로 추출합니다.

dembrandt.com
Build

Pixel Perfect UI

GSAP로 구동되는 애니메이션이 포함된 React 구성 요소 라이브러리입니다.

pixel-perfect.space
Read

userinterface.wiki

더 나은 인터페이스를 위한 살아있는 매뉴얼.

userinterface.wiki
Learn

Pacome Pertant

파리에 거주하는 모션 및 사운드 디자이너 Pacôme Pertin의 포트폴리오입니다.

pacomepertant.com
Use

Tweakpane

매개변수를 미세 조정하고 값 변경을 관찰할 수 있는 컴팩트 창

tweakpane.github.io
Build

Flue

TypeScript로 만든 에이전트 하네스 프레임워크입니다.

flueframework.com
Watch

Contra Labs

150만 명 이상의 크리에이터가 창의적인 AI의 품질을 평가하는 휴먼 데이터 평가 연구소.

contralabs.com
Explore

Refero Styles

AI 에이전트를 위해 DESIGN.md 형식으로 선별된 유명 서비스의 디자인 스타일 라이브러리입니다.

styles.refero.design
Watch

DEEO Artifacts

호기심 많은 사람들을 위한 인터랙티브/모션 실험 모음입니다.

artifacts.deeo.studio
Watch

Rebrand Gallery

리브랜딩과 시각적 아이덴티티를 선별한 갤러리입니다.

rebrand.gallery
Read

Hannah Hearth

Show and Tell에서 Hannah Hearth는 Vercel의 제품 디자인 팀에서 실제로 사용하는 도구를 소개합니다.

hannahhearth.com
Watch

MSCHF

글로벌 기업, 연예인, 미디어와 경쟁할 수 있는 문화적 힘을 갖기를 지향하는 창의적인 실천과 주관을 지닌 스튜디오입니다.

mschf.com
Watch

Roam

잘 디자인된 개체를 볼 수 있는 무한한 캔버스입니다.

roam.neesh.page
Use

Transitions.dev

웹 애플리케이션에 대한 표준 전환을 수집하는 사이트입니다.

transitions.dev
Use

EvilCharts

shadcn 및 Recharts로 구축된 오픈 소스 차트 UI 라이브러리입니다.

evilcharts.com
Read

Linear

디자인의 본질은 결과물이 아니라 문제를 이해하고 무엇이 존재해야 하는지 결정하는 것이다.

linear.app
Build

openai/realtime-voice-component

React/브라우저용 음성 작업 UI 구성 요소입니다.

github.com
Explore

Refto

엄선된 웹사이트 영감, 랜딩 페이지 예시, 포트폴리오, SaaS 및 상호 작용 디자인 패턴을 검색 가능한 하나의 갤러리에 모아 놓은 사이트입니다.

refto.one
Learn

Devouring Details

인터랙션에 관심이 있는 디자이너를 위한 인터랙티브 참조 매뉴얼입니다.

devouringdetails.com
Use

Loading UI

무료 오픈 소스 CSS/React 로더, 스피너 및 애니메이션 모음입니다.

loading-ui.com
Explore

CTA Gallery

디자이너를 위한 클릭 유도 문구(CTA) 영감 갤러리입니다.

cta.gallery
Use

web-kits/audio

웹용 선언적 오디오 합성 라이브러리입니다.

audio.raphaelsalaja.com
Use

browser-use/video-use

Claude Code에서 비디오 편집을 자동화하는 오픈 소스 기술입니다.

github.com
Use

UNCUT

현대 서체 전문 무료 서체 카탈로그입니다.

uncut.wtf
Use

cathrynlavery/diagram-design

Claude Code를 위한 13가지 편집 품질 다이어그램 템플릿.

github.com
Build

HyperFrames

HyperFrames는 AI 에이전트를 사용하여 HTML/CSS/JS를 작성하고 비디오를 조합하는 도구입니다.

hyperframes.heygen.com
Use

pablodelucca/pixel-agents

픽셀 사무실.

github.com
Watch

Curated Supply

고도로 디자인된 제품을 위한 큐레이션 사이트입니다.

curated.supply
Explore

Selected Site

제작자와 제작자를 위해 엄선된 도구, 리소스, 영감 모음입니다.

selected.site
Use

Wiretext

모든 것이 유니코드 줄 문자로 렌더링되는 공간 디자인 도구입니다.

wiretext.app
Use

Fontshare

ITF(Indian Type Foundry)에서 제공하는 무료 글꼴 서비스입니다.

fontshare.com
Use

autoskills

Skill.sh를 통해 기술 스택을 감지하고 최고의 AI 에이전트 기술을 자동 설치하세요.

autoskills.sh
Use

Colors & Fonts

하나의 기본 색상에서 완전한 색상 스케일을 생성하거나 색상 이론을 기반으로 5가지 색상 팔레트를 생성할 수 있는 도구입니다.

colorsandfonts.com
Explore

mesh3d

엄선된 3D 및 인터랙티브 웹사이트를 소개하는 엄선된 갤러리입니다.

mesh3d.gallery
Use

Mesurer

localhost의 모든 것을 측정하고 정렬합니다.

mesurer.ibelick.com
Read

Anna E. Cook

팀이 AI 도구를 사용하여 충실도가 높은 프로토타입을 생성함에 따라 초점은 목적 대신 출력으로 이동합니다.

annaecook.com
Use

dominikmartn/nothing-design-skill

Nothing 디자인 언어로 UI를 생성하는 Claude Code 기술입니다.

github.com
Use

Boneyard

자동 생성된 스켈레톤 로딩 프레임워크

boneyard.vercel.app
Use

CSS Studio

브라우저의 시각적 CSS 편집기.

cssstudio.ai
Use

Liveline

React용 실시간 애니메이션 꺾은선형 차트.

benji.org
Use

AI Designer

AI UI/UX 디자이너.

aidesigner.ai
Explore

Font Of Web

실제 디자인 영감을 매일 피드로 제공합니다.

fontofweb.com
Explore

Brand Archive

브랜드 아카이브를 통해 브랜드 조사에 강력한 힘을 실어보세요.

brandarchive.xyz
Explore

Godly

1,000개가 넘는 최고의 AI, Web3, 포트폴리오 및 기타 인터넷상의 뛰어난 웹사이트를 엄선하여 선별한 것입니다.

godly.website
Watch

Notch

웹용으로 완벽에 가까운 Macbook Notch를 어떻게 구축했는지에 대한 이야기입니다.

iamnoman.com
Explore

Shopify Design

새로운 표준을 만드세요.

shopify.design
Learn

Lessons of Design

디자이너가 왜 자신이 하는 방식으로 디자인하는지, 그리고 그 과정에서 무엇을 배웠는지에 대한 고민입니다.

lessons.design
Use

Onigiri

Moontype은 함부르크와 스톡홀름에 본사를 두고 Pia Schröer와 Julia Flomm이 운영하는 활자 주조소입니다.

moontype.de
Explore

Cosmos

당신의 우주를 큐레이팅하는 집

cosmos.so
Explore

companies.sh

AI 에이전트 기업을 발굴하고 설치해보세요.

companies.sh
Use

little-hands/claude-drawio-skill

Claude Code에서 draw.io 다이어그램을 생성하고 읽고 편집하는 기술입니다.

github.com
Use

Pretext

여러 줄의 텍스트 측정 및 레이아웃을 위한 순수 JavaScript/TypeScript 라이브러리입니다.

chenglou.me
Explore

SearchSystem

디자이너를 위한 참고 자료와 도구를 수집하는 큐레이션 사이트입니다.

searchsystem.co
Use

Textura

구실 x 요가 = 텍스투라.

geometra.razroo.com
Use

fab ui

Base UI 및 Tailwind CSS로 구축된 React/Next.js용 구성 요소 라이브러리입니다.

fab-ui.com
Explore

Logo System

1000개 이상의 로고 디자인이 포함된 영감 라이브러리입니다.

logosystem.co
Read

Stronger Design Principles

원칙을 작성할 때 가장 어려운 부분 중 하나는 원칙이 도움이 될 만큼 독선적이라는 것을 확인하는 것입니다.

mynameisjehad.com
Explore

Detail

AI 시대에 제품이 특별하다는 느낌을 갖게 만드는 작은 디자인 결정에 대한 엄선된 연구입니다.

detail.design
Learn

UI Skills

에이전트가 구축한 인터페이스를 다듬는 일련의 기술입니다.

ui-skills.com
Use

Skills.sh

AI 에이전트를 위한 기술을 검색하고 설치하세요.

skills.sh
Read

Interface Craft

남다른 배려로 디자인하는 데 전념하는 사람들을 위한 작업 라이브러리입니다.

interfacecraft.dev
Use

ui.sh

Claude Code, Cursor, Codex와 같은 코딩 도우미를 위한 툴킷으로 뛰어난 UI를 구축하는 데 도움이 됩니다.

ui.sh
Read

Cursouls

커서 AI 에이전트를 아늑한 카페에 살면서 작업하는 동안 반응하고, 지원하고, 함께 지내는 작은 픽셀 캐릭터로 바꿔보세요.

cursouls.xyz
Explore

DesEngs

엄선된 디자인 엔지니어링 리소스 컬렉션입니다.

desengs.com
Use

Dictar

Dictar는 기기 내 음성을 텍스트로 변환하는 앱입니다.

dictar.app
Learn

Emil Kowalski

Emil Kowalski의 개인 사이트에 작성된 기사를 기반으로 한 스킬 파일입니다.

emilkowal.ski
Build

Rams

AI 생성 코드에 대한 자동화된 설계 검토.

rams.ai
Use

Refero

웹과 iOS를 위한 UI/UX 참고 자료와 디자인 영감을 담은 최대 규모의 컬렉션입니다.

refero.design
Explore

Variant

앱이나 사이트에 대한 아이디어를 입력하고 스크롤만으로 수많은 디자인 옵션을 확인하세요.

variant.com