요소 목록으로 건너뛰기
lucianLabs Prompt UX/UI

버튼부터 차트까지, 지금 바로 눌러 볼 수 있는 인터페이스 100개. 화면에 보이면 스스로 움직이고, 직접 누르면 바로 써 볼 수 있어요. 마음에 들면 프롬프트나 코드로 그대로 가져가세요.

100개다크 · 라이트코드 포함

001Liquid Glass 버튼

002자석 화살표 버튼

003길게 눌러 삭제

004진행률 다운로드 버튼

005종이비행기 전송 버튼

006구독 리플 버튼

007재생 버튼 모핑

008복사 버튼 체크 전환

009글자 굴림 버튼

010분할 실행 버튼

011부채꼴 플로팅 버튼

012북마크 리본

013늘어나는 스위치

014할 일 체크리스트

015요금제 라디오 카드

016별점 평가

017기울어지는 값 말풍선 슬라이더

018굴러가는 수량 스테퍼

019관심사 칩 다중 선택

020제품 색상 고르기

021낮·밤 하늘 스위치

022좋아요 하트 터짐

023펼쳐지는 알림 설정

024가격 분포 범위 필터

025테두리로 떠오르는 라벨 입력

026인증번호 6자리 입력

027펼쳐지는 상단 검색

028늘어나는 댓글 입력창

029색 태그 입력

030기간 선택 달력

031맞춤 선택 목록

032끌어다 놓는 업로드

033제목 바로 고치기

034공항 자동완성

035송금 금액 입력

036비밀번호 강도 미터

037계정 전환 메뉴

038우클릭 컨텍스트 메뉴

039미끄러지는 알약 탭

040펼쳐지는 사이드 레일

041홈 파인 하단 탭 바

042단계 진행 마법사

043늘어나는 페이지 번호

044자주 묻는 질문 아코디언

045버튼에서 번지는 전체 메뉴

046커맨드 팔레트

047기간 세그먼트 컨트롤

048스와이프와 이어진 밑줄 탭

049겹겹이 움직이는 에디토리얼 카드

050빛을 따라 기우는 뉴스 카드

051장바구니로 날아가는 상품 카드

052돌려 보는 멤버십 카드

053넘겨 고르는 카드 더미

054팔로우 프로필 카드

055레코드가 꺼내지는 플레이어

056월·연 요금 전환 카드

057얼굴로 넘기는 후기 캐러셀

058읽기 진행 기사 카드

059참석 응답 이벤트 카드

060낮과 밤 비교 슬라이더

061썸네일에서 열리는 라이트박스

062로그인 카드 피드백

063한 문장씩 묻는 가입 폼

064봉투로 보내는 로그인 링크

065번호 맞추는 기기 승인

066소셜 로그인 버튼 묶음

067잠금 해제 카운트다운

068끝까지 읽고 동의하는 약관

069아바타 자르기 편집기

070겹쳐 쌓이는 토스트

071밀어서 지우고 되돌리는 스낵바

072접히는 인라인 알림

073굴러가는 공지 배너

074알림 벨과 드롭다운

075업로드 진행 패널

076미끄러지며 따라오는 툴팁

077반응 고르는 팝오버

078밀어서 답장하는 채팅

079뼈대에서 피어나는 게시물

080궤도가 모이는 동기화 스피너

081결제 링이 그려진 뒤 체크

082아이콘을 채우는 설치 진행

083대기에서 진행으로 바뀌는 막대

084목소리에 춤추는 점 로더

085당겨서 새로고침

086흘러나오는 AI 답변

087트럭이 달리는 배송 단계

088종이를 삼키는 빈 폴더

089오타를 고쳐 주는 404

090플러그가 다시 꽂히는 오류 위젯

091오프라인에서 쌓였다 보내지는 메시지

092필터를 풀어 주는 빈 검색 결과

093할 일을 다 끝내면 터지는 축하

094시간을 끌어 보는 날씨 하늘

095모양이 바뀌는 막대 차트

096훑으면 색이 갈리는 주가 선

097항목을 빼면 다시 나뉘는 도넛

098자리마다 굴러가는 실시간 지표

099한 바퀴를 넘기는 활동 링

100반으로 접히는 플립 타이머

·

적용 방법

이렇게 가져가세요

  1. 보고, 직접 눌러 보세요. 요소는 화면에 보이면 스스로 조작 시연을 반복합니다. 요소를 직접 누르거나 키보드로 들어가면 시연이 멈추고, 손을 떼고 잠시 지나면 처음부터 다시 시작합니다.
  2. 프롬프트 복사에는 요소의 실행 코드 전체와 적용 지침이 들어 있습니다. 프로젝트의 AI 도구에 붙여넣고 삽입 위치만 채우면 됩니다.
  3. 코드 파일 받기는 같은 요소를 단독 HTML로 저장합니다. 라이트·다크 토큰이 함께 들어 있어 바로 열어 볼 수 있습니다.
  4. 언어·테마·자동 재생은 위쪽 버튼에서 바꿀 수 있고, 고른 값은 다음 방문에도 유지됩니다.

개발 메모 · 요소마다 .ux와 .uNNN 접두사 안에서만 스타일과 스크립트가 동작합니다. 색은 --ux-* 토큰을 쓰므로 프로젝트 테마 변수에 연결하면 됩니다.