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

버튼과 차트부터 디자인 도구, 문서 편집, 데이터 분석, 업무 화면까지 지금 바로 눌러 볼 수 있는 인터페이스 200개. 화면에 보이면 스스로 움직이고, 직접 누르면 바로 써 볼 수 있어요. 마음에 들면 프롬프트나 코드로 그대로 가져가세요.

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

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반으로 접히는 플립 타이머

101분할 작업창

102중첩 파일 트리

103경로 탐색 크럼

104캔버스 미니맵

105스튜디오 평면도

106극장 좌석 배치

107환승 노선 선택

108시간대 회의 교집합

109주간 가능 시간 칠하기

110일정 겹침 해소

111작업 기간 편집

112리듬 스텝 시퀀서

113픽셀 아이콘 작업대

114벡터 패스 펜

115그라디언트 스톱

116베지어 이징 곡선

117간격 측정자

118타이포그래피 견본

119다층 그림자

120연결된 모서리 반경

121그리드 레이아웃 구성

122레이어 쌓임 순서

123색 혼합 모드

124색 대비 검사

125스냅 정렬 가이드

126마크다운 쌍둥이 노트

127변경 덩어리 검토

128문서 찾기·바꾸기

129접히는 코드 가지

130CSV 필드 연결

131동행자 입력 묶음

132조건 가지 만들기

133단위 왕복 변환

134몫을 나누는 영수증

135비율로 늘리는 레시피

136봉투 주소 조판

137카드 번호 조판 연습

138문서 가림 편집

139여백 주석 연결

140선택 문장 서식

141단축키 조합 기록

142번역 구절 짝짓기

143계산하는 셀

144열 순서 편집

145단어별 받아쓰기 수정

146JSON 값 가지 편집

147정규식 일치 실험

148출처 서식 조판

149충돌 문장 병합

150줄을 정리하는 활자판

151기여가 쌓이는 주간 격자

152폴더 안으로 커지는 면적 지도

153유입에서 구매까지 흐르는 길

154역량을 포개는 다각형

155점으로 고르는 실험군

156이상치를 꺼내는 상자 수염

157서비스가 층을 이루는 사용량

158증감을 잇는 손익 다리

159하루 거래를 펼치는 봉

160이탈을 드러내는 전환 깔때기

161주차별로 남는 고객 격자

162관계를 정렬하는 상관 행렬

163기준을 넘어가는 실적 눈금

164구간을 다시 묶는 분포

165예측의 폭을 넓히는 구름

166흐름에서 고르는 오류 기록

167요청 속 시간을 분해하는 스팬

168응답 시간을 조각내는 요청 목록

169테이블을 잇는 관계 지도

170장애 구간을 확대하는 시간축

171예산 안에서 나누는 자원

172가격 벽을 드러내는 호가 깊이

173방향을 보정하는 측정 나침반

174방향별로 펼치는 분포 장미

175척도를 맞추는 비교 레일

176버전 필름스트립

177작업 히스토리 분기

178묶음 선택 작업대

179클립보드 선반

180승인 서명선

181업무 배분 슈트

182대기열 호출기

183순위 투표 용지

184역할 권한 매트릭스

185키 교체 금고

186기기 페어링 레이더

187입장권 체크인

188카나리 롤아웃

189환경 승격 게이트

190예약 발송 보관함

191이벤트 재생 테이프

1923채널 오디오 믹서

193호흡 페이스메이커

194오디오 루프 구간

195영상 챕터 레일

196공동 작업 제어권

197화면 안내 스포트라이트

198네트워크 경로 진단

199무결성 체크섬

200접히는 정산 영수증

·

적용 방법

이렇게 가져가세요

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

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