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

버튼과 차트부터 업무 화면까지 인터페이스 200개, 그리고 새로 더한 히어로·가격표·장바구니·폼·대시보드처럼 웹사이트를 만들 때 바로 쓰는 애니메이션 200개. 화면에 보이면 스스로 움직이고, 직접 누르면 바로 써 볼 수 있어요. 마음에 들면 프롬프트나 코드로 그대로 가져가세요.

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

npx skills add Seokwoooo/lucian-uxui

GitHub

201한 단계씩 불이 켜지는 자동화 흐름도

202블록으로 솟는 아이소메트릭 데이터

203선이 이어지는 제품 주석 핀

204기준을 바꾸면 다시 모이는 버블

205글자마다 출렁이는 파도 로고

206끌면 출렁이는 관계망

207두 줄로 흐르는 후기 벽

208커서 따라 부푸는 앱 독

209국가에 맞춰 묶이는 전화번호 입력

210참석자가 늘어나는 웨비나 신청 카드

211테두리 빛이 도는 가입 유도 버튼

212내리면 숨고 올리면 돌아오는 헤더

213저절로 넘어가는 기능 소개 탭

214칸마다 살아나는 벤토 기능 소개

215말풍선에서 펼쳐지는 상담 채팅

216차례로 올라오는 첫 화면 히어로

217차이만 남기는 요금제 비교표

218스크롤하면 아래로 붙는 미니 플레이어

219누른 자리에서 원으로 번지는 다크 모드

220고른 문장 위에 뜨는 인용 공유 툴팁

221따라붙는 구매 바와 옵션 시트

222별 기록이 그려지는 오픈소스 별 버튼

223쌓이며 작아지는 스티키 카드

224출처를 짚어 보여 주는 AI 답변

225한 입 베어 무는 쿠키 동의

226격자를 따라 빛이 흐르는 히어로 배경

227새 주문이 밀고 들어오는 실시간 표

228커서 빛이 번지는 카드 테두리

229저절로 입력되는 터미널 시연

230할인 코드를 넣으면 다시 계산되는 주문 요약

231스크롤하면 펴지는 기울어진 제품 화면

232지문 한 번으로 끝나는 패스키 로그인

233예시 문장이 바뀌는 AI 프롬프트 입력창

234하나씩 바뀌는 고객사 로고 벽

235긴 글을 세 줄로 접는 AI 요약

236본문 밑에서 드러나는 푸터

237줄마다 올라오는 마스크 제목

238막대로 보는 서비스 상태 페이지

239보내 보는 API 예제

240무료배송까지 채워지는 장바구니 서랍

241세로로 굴리면 가로로 흐르는 섹션

242스크롤 따라 넘어가는 카테고리 칩 바

243눌러서 확인하는 보안 인증 배지

244틀린 칸으로 데려가는 폼 검증

245해독되는 스크램블 헤드라인

246순위가 뒤바뀌는 막대 경주

247스크롤하면 화면을 채우는 소개 영상

248투표하면 순위가 올라가는 기능 요청판

249쓰는 대로 보이는 검색 결과 미리보기

250바꾸면 내려오는 저장 바

251스크롤하면 차례로 떠오르는 기능 카드

252반짝 지나가며 펼쳐지는 공지 알약

253방금 구매 알림

254공개 범위를 바꾸는 공유 창

255끌어 옮기는 칸반 카드

256숫자가 차오른 뒤 걷히는 첫 로딩 화면

257폭을 끌어 보는 반응형 미리보기

258흐릿하게 먼저 뜨고 선명해지는 사진

259글 중간에서 열리는 멤버십 벽

260스크롤에 맞춰 채워지는 문장

261별점 막대로 걸러 보는 리뷰

262목록과 함께 움직이는 매장 찾기 지도

263빛이 흐르는 제목과 생각 중 문구

264이메일 오타를 짚어 주는 입력

265주문 마감까지 줄어드는 도착 보장

266섞을 때마다 바뀌는 색 팔레트

267언어를 바꾸면 갈아 끼워지는 문구

268@를 치면 따라 뜨는 멘션 목록

269이름을 따라 써야 지워지는 삭제 확인

270커서를 따라 흩어지는 히어로 UI 조각

271종류별로 걸러 보는 업데이트 소식

272패키지 도구별 설치 명령 탭

273줄을 누르면 열리는 상세 옆 패널

274입력창으로 변신하는 버튼

275본문을 따라오는 목차 표시

276사진이 따라오는 작업 목록

277바늘이 떨리는 인터넷 속도계

278인원에 따라 바뀌는 요금 계산기

279시간을 고르면 갈라지는 예약 버튼

280노이즈에서 떠오르는 AI 이미지 생성

281형광펜이 지나가는 문장

282넓어지며 드러나는 사진

283해지 전에 건네는 혜택

284차례로 확인되는 도메인 연결

285초대하면 수락까지 이어지는 팀원 목록

286한 단계씩 들어가는 모바일 하위 메뉴

287필름처럼 지나가는 페이지 속도 측정

288상세정보 펼쳐보기

289바로 반영되는 보기 설정 패널

290먼저 묻고 띄우는 알림 허용

291긴 주소가 짧게 접히는 링크 줄이기

292걸러지며 다시 앉는 갤러리

293담아서 견주는 상품 비교함

294스크롤로 조립되는 기기

295문의 종류에 따라 바뀌는 문의 폼

296훑어 넘기는 초성 색인

297블록을 쌓아 만드는 페이지

298뜯어서 받는 할인 쿠폰

299한도에 가까워지면 색이 바뀌는 사용량

300주소마다 확인되는 도메인 검색

301용량이 줄어드는 이미지 최적화

302화면 위에 꽂는 피드백 핀

303글꼴 짝과 크기 비율 고르기

304검색해서 채우는 배송지 주소

305고를 때마다 개수가 바뀌는 필터 서랍

306궤도를 도는 연동 도구

307타자기로 바뀌는 핵심 단어

308그리드와 목록 사이 전환

309겹겹이 물러나는 산맥 스크롤

310글자 사이로 비치는 영상 제목

311오늘 하루 보지 않기 이벤트 팝업

312반으로 갈라지는 커튼 메뉴

313크기에 맞춰 바뀌는 커피 컵

314대상에 맞춰 모양을 바꾸는 커서

315끌어다 버리는 휴지통

316스프링 감도 조율판

317순서가 날아가는 정렬 목록

318스크롤로 그려지는 여행 경로

319커서를 따라 일렁이는 오로라 배경

320동전으로 긁는 즉석 복권

321페이지를 덮고 걷히는 전환 막

322굴러가는 실시간 인기 검색어

323커서를 따라 떨어지는 사진 꼬리

324밀려 들어오는 화면 스택

325코드가 비치는 엑스레이 렌즈

326칸이 뒤집히며 옮겨 가는 와플 차트

327신호가 튀는 글리치 타이틀

328목록에서 펼쳐지는 상세 카드

329섹션마다 물드는 배경색

330누르면 워프하는 별빛 공간

331튕겨 돌리는 경품 돌림판

332작아지며 붙는 큰 제목

333밀어서 취소하는 음성 녹음

334열면 켜지는 노트북

335들어온 쪽에서 덮이는 타일

336세 높이에 멈추는 바텀 시트

337남쪽부터 물드는 벚꽃 개화 지도

338면을 굴리는 단어 큐브

339끌어 넘기는 카드 캐러셀

340열쇠구멍으로 빨려 드는 장면

341커서와 이어지는 별자리 그물

342리본을 풀고 여는 선물 상자

343로켓으로 돌아가는 맨 위 버튼

344튕기며 꽂히는 지도 핀

345돌려 보고 따는 음료 캔

346커서 안쪽에만 보이는 다른 문장

347모서리로 던지는 PiP 영상

348빙글 도는 원형 문구 배지

349픽셀로 흩어지는 사진 전환

350고리가 올라가는 자물쇠 토글

351속도만큼 기우는 카드 목록

352소용돌이치는 흐름장

353도장이 쌓이는 커피 쿠폰

354모양이 바뀌며 따라가는 메가 메뉴

355저장 상태를 알려 주는 구름 표시

356돋보기로 들여다보는 시계

357가까울수록 굵어지는 글자

358길게 눌러 미리 보는 메시지

359점수와 순위를 오가는 기울기 차트

360흩어졌다 모이는 글자

361블라인드처럼 돌아가는 슬라이드

362돌아가는 드럼 시간 선택

363커서에서 퍼지는 점 격자 파동

364하루 한 칸 여는 어드벤트 달력

365친구 초대로 앞당겨지는 대기 순번

366훑으면 넘어가는 영상 미리보기

367해마다 모양이 바뀌는 인구 피라미드

368문장을 따라가는 읽기 초점

369부채처럼 펼쳐지는 사진 더미

370선이 지나가며 켜지는 연혁

371솟아오르는 등고선 지도

372차오르면 레벨 업하는 경험치

373다섯 가지 밑줄 호버

374분기마다 움직이는 앱 성장 버블

375단어마다 튀어나오는 자막

376넘겨 보는 스토리

377글을 따라 바뀌는 휴대폰 화면

378입자로 모이는 글자

379이어질수록 커지는 연속 기록 불꽃

380표정이 바뀌는 만족도 슬라이더

381확대하면 갈라지는 지도 묶음

382물결 위를 흐르는 문구

383물결로 넘어가는 온보딩

384이어 붙는 무한 피드

385점으로 찍은 실시간 지구본

386빛나며 풀리는 업적 배지

387축을 그어 거르는 평행 좌표

388단어마다 초점이 맞는 인용구

389옆으로 펼쳐지는 사진 패널

390장 번호가 굴러가는 스크롤

391달이 바뀌면 다시 엮이는 코드 다이어그램

392손으로 그린 강조 표시

393내 기기에 맞춘 다운로드 안내

394스크롤에 엇갈려 흐르는 문구 띠

395해를 바꾸면 밀려나는 기온 리지라인

396눌러야 보이는 스포일러 가리개

397파도처럼 뒤집히는 타일 그림

398점을 끌면 다시 맞는 회귀선

399달마다 다시 앉는 리뷰 단어 구름

400커서를 함께 맞추는 작은 차트 묶음

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. 언어·테마·자동 재생은 위쪽 버튼에서 바꿀 수 있고, 고른 값은 다음 방문에도 유지됩니다.

AI 에이전트에게 맡기기

lucian-uxui 스킬을 설치하면 Claude Code, Codex 같은 코딩 에이전트가 이 갤러리에서 맞는 요소를 찾아 프로젝트에 옮겨 넣습니다.

말로 부탁하기
“lucian-uxui 스킬로 요금제 토글이랑 FAQ 넣어줘”
번호로 고르기
“lucian-uxui 스킬로 056번 요소 넣어줘”
바로 부르기
Claude Code /lucian-uxui (플러그인은 /lucian-uxui:lucian-uxui) · Codex $lucian-uxui

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