vibeui
프롬프트 25장 · 무료 22장

붙여넣기만 하면 되는Vibe UI 프롬프트

복사해서 Claude Code 나 Cursor 에 붙이면 화면이 그대로 나옵니다. 한국어와 영어, 두 언어로 드립니다.

무료 프롬프트 22장 받기
회원가입 없이 복사한국어 · EnglishClaude Code · Cursor · LovableHTML · Next.js
카드는 매주 늘어납니다

실행해서 나온 화면 그대로

전체 25장
무료3D셰이더

밤바다 위의 모놀리스: 셰이더로 그리는 3D 히어로

검은 바다 한가운데 빛나는 정육면체가 떠 있다. 스크롤을 내리면 카메라가 옆에서 정면으로 천천히 다가가며 정육면체가 화면을 채운다. 3D 라이브러리를 하나도 쓰지 않고 캔버스 한 장에 셰이더로 그린다.

카드 열기
무료3DCSS 3D

접시가 돌아가는 다이닝 예약 페이지

음식 영상이 첫 화면을 채우고, 그 아래에서 코스 여섯 접시가 3D로 돌아간다. 가운데 접시만 선명하고 옆으로 갈수록 흐려진다. 사진 파일 없이 접시를 그린다.

무료3DCSS 3D

기록을 3D 링으로 보여 주는 운동 페이지

같은 고리를 z 축으로 열두 장 겹쳐 두께를 만들고, 뒤로 눕혀 돌린다. 채운 비율은 부채꼴로 잘라 남긴다. 실사 영상 히어로와 수업료 3열, 트레이너 소개까지 한 장에 들어간다.

무료3D셰이더

판을 세워 돌리는 3D 제품 페이지

반투명한 판 열여덟 장을 10도씩 돌려 세우면 돌아가는 원기둥 제품이 된다. 모델 파일도 제품 사진도 쓰지 않는다. 성분 3열과 실사 영상 두 칸, 후기, 구매까지 이어진다.

무료3D셰이더

네 박자로 도는 엔진 분해 페이지

곡축이 한 바퀴 도는 동안 피스톤은 두 번 왕복한다. 실린더 앞을 잘라 피스톤과 로드가 보이게 하고, 버튼을 누르면 여섯 조각이 옆으로 갈라진다. 모델 파일은 쓰지 않는다.

무료3DCSS 3D

다섯 겹으로 펼쳐지는 그림 전시

한 장의 달밤 포구를 다섯 장으로 쪼개 앞뒤로 세운다. 하늘과 달, 먼 섬은 평면에 남기고 마을과 소나무만 앞으로 꺼낸다. 펼치기를 누르면 옆에서 본 깊이가 드러난다.

무료3D셰이더

황혼 거리를 지나가는 여행 페이지

해가 지는 거리를 차로 지나간다. 양옆 건물 창에 불이 켜져 있고, 스크롤을 내리면 차가 앞으로 간다. 도시 모델 파일은 없다.

무료3D셰이더

한 바퀴면 끝나는 작은 행성

지름 28미터 행성 위를 한 사람이 걷는다. 등대와 우물과 소나무가 제자리에 있고, 버튼 세 개로 행성 하나·일곱 개·펼친 책을 바꾼다. 모델 파일은 쓰지 않는다.

무료3DCSS 3D

여섯 가지가 돌아가는 밤 공원

관람차 열두 칸이 수평을 유지한 채 돌고, 목마 여덟 마리가 접시 위에서 선다. 찻잔·바이킹·그네·귀신의 집까지 여섯이 첫 화면에 움직인다.

무료3DCSS 3D

칸이 떠오르는 스튜디오 격자

열두 칸이 바닥에 붙어 있다. 마우스를 올린 칸만 앞으로 나오고, 그때야 보라색 윗면이 보인다. 패키지는 없다.

무료3DThree.js

커서를 따라오는 유리 구

유리 구 하나가 마우스 쪽으로 천천히 따라온다. 재질은 MeshPhysicalMaterial 이고, 환경은 캔버스 그라디언트다.

무료3D셰이더

회로가 밑에서 도는 네온 기판

기판 격자 위에 전류가 흐르는 칸만 켜진다. 그 위를 유리가 한 겹 덮고, 가장자리만 밝다. 패키지는 없다.

무료3DCSS 3D

글자가 두께를 갖는 히어로

글자 두 자에 앞면과 옆면과 뒷면을 붙인다. 마우스를 움직이면 ±12도 기울어 옆면 36px 가 보인다. 패키지는 없다.

무료3DThree.jsBlender힉스필드

받침대 위에서 도는 전화기

본체가 없어도 모서리 둥근 본체와 스크린으로 먼저 돈다. Blender GLB 가 있으면 갈아끼우고, 힉스필드 화면이 있으면 스크린에 올린다.

무료3DThree.js

렌즈가 커서를 바라보는 페이지

원환과 유리 원통이 마우스 쪽을 향한다. lookAt 한 줄이다. 사람 얼굴이나 로봇은 두지 않는다.

무료인터랙션

스크롤에 따라 펼쳐지는 미디어 섹션 네 가지

작은 창이 화면 전체로 열리고, 제목이 위아래로 갈라지며 그 사이가 벌어지고, 흩어진 아홉 조각이 한 장으로 모이고, 원 하나가 화면을 채운다. 네 연출 모두 진행도 값 하나로 움직인다.

무료인터랙션

여섯 가지로 넘기는 작품 갤러리

같은 여섯 장을 서로 다른 여섯 방식으로 넘긴다. 원이 열리고, 조각이 차례로 올라오고, 카드가 뒤집히고, 색이 갈렸다 모인다. 라이브러리도 이미지 파일도 쓰지 않는다.

무료인터랙션

움직임 여섯 가지를 얹은 SaaS 랜딩

커서를 따라오는 버튼, 3D로 뒤집히는 단어, 흐려지며 바뀌는 숫자, 테두리를 도는 빛, 쌓이는 카드, 이어지는 입자. 여섯 가지를 한 랜딩에 자연스럽게 배치한다.

무료히어로

숫자가 굴러가는 SaaS 요금 페이지

월간과 연간을 바꾸면 금액이 420밀리초 동안 굴러가며 바뀐다. 가운데 카드만 어둡게 세워 테두리에 빛을 돌리고, 아래에는 머리 행이 화면에 붙는 비교표와 높이가 부드럽게 열리는 질문 목록을 둔다.

무료히어로

한 화면에서 오가는 로그인과 가입

왼쪽은 폼, 오른쪽은 브랜드 면이다. 로그인과 가입을 누르면 폼이 제자리에서 흐려지며 바뀌고 상자 높이가 따라 늘어난다. 라벨은 값이 들어오면 위로 떠오르고, 비밀번호는 네 가지를 세어 막대로 보여 준다.

무료뼈대 깔기

지표와 그래프, 표를 담은 관리 화면

접히는 사이드바, 화면에 들어오면 0부터 세는 지표 카드 넷, path 세 개로 끝낸 꺾은선, 머리글을 눌러 다시 늘어서는 표. 라이브러리 없이 어두운 톤 한 장에 담았다.

무료재구성

목차가 읽는 자리를 따라오는 문서

왼쪽에 문서 목록, 가운데에 본문, 오른쪽에 읽는 위치를 따라오는 목차. 코드 블록에는 복사 단추와 언어 이름이 붙고, 강조는 정규식 네 개로 끝낸다.

Pro3D셰이더

스크롤이 카메라를 움직이는 3D 쇼케이스

화면을 내리면 카메라가 따라 움직이며 여섯 장면을 지나간다. 배경색까지 장면마다 바뀌고, 오브젝트는 실제 재질로 계산해 그린다. 3D 라이브러리는 쓰지 않는다.

Pro디자인 방향

시네마틱 스크롤: 장면이 바뀌는 롱페이지

한 화면이 한 장면이다. 스크롤할 때마다 배경색이 바뀌고 글이 떠오르는 롱페이지 무드를 라이브러리 없이 만든다.

Pro디자인 방향

다크 글래스: 반투명 패널과 깊은 배경

깊은 네이비 배경 위에 반투명 유리 패널이 떠 있는 무드다. 색·글자·간격·표면·움직임 규칙을 정하고 그 규칙으로 랜딩 1페이지를 만든다.

카드 하나가 작업 하나

붙일 도구를 고르면그대로 조립됩니다

Claude Code·Cursor·Lovable 중 무엇에 붙일지, 결과를 HTML 로 받을지 Next.js 로 받을지 고르면 그에 맞는 지시문이 나옵니다. 무료 22장은 로그인 없이 바로 복사할 수 있습니다.

0장
프롬프트 카드
0장
무료
0종
대상 도구
Claude Code · HTML 단일 파일
너는 이 저장소에서 작업하는 프론트엔드 엔지니어다. 아래 지시를 읽고 먼저 계획을 3줄로 말한 뒤 바로 파일을 만들어라. 질문은 정말 막힐 때 한 번만 해라.
 
# 작업: 밤바다 위의 모놀리스: 셰이더로 그리는 3D 히어로
 
## 언제 쓰는 작업인가
건축·부동산·인프라처럼 '규모'를 보여 줘야 하는 회사 소개 첫 화면에 쓴다. Three.js 도 Spline 도 붙이지 않고 60줄 남짓한 셰이더로 끝나기 때문에, 외부 파일을 하나도 받지 않고도 화면 전체를 움직이게 할 수 있다.
 
## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 브랜드명과 히어로 문구가 있다: 라벨 한 줄, 대문자 제목 두 줄, 설명 두 문장
- 아래 섹션에 채울 항목이 있다. 프로젝트 3개(제목·한 문단), 숫자 4개, 단계 3개, 인용 한 문장
- WebGL2 를 쓴다. 지원하지 않는 브라우저에서는 캔버스를 배경 그라디언트로 대체한다
 
## 이 카드에 필요한 것
- WebGL2 셰이더. 패키지를 설치하지 않는다. 캔버스 한 장에 프래그먼트 셰이더로 그린다.
밤바다 위의 모놀리스: 셰이더로 그리는 3D 히어로
매주 새 카드

오늘 만든 화면이내일도 쓸 만하려면

카드는 매주 늘어납니다. 무료 22장은 계속 열려 있고, 전체를 쓰려면 월 12,000원부터입니다. 연 결제는 두 달치를 깎습니다.

요금 보기무료 22장 먼저

막히는 부분은 화면과 함께 오픈채팅에 물어보면 됩니다.

오픈채팅에서 물어보기