vibeui
디자인 방향Pro새 카드

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

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

마지막 수정

여는 방법 보기카카오 로그인만 하면 전체가 열립니다

이 프롬프트를 실제로 실행해 나온 화면입니다

영상 원본 받기결과물 HTML 받기더블클릭하면 브라우저에서 바로 열립니다
로그인하면 전체가 열립니다

붙일 프롬프트

유리 느낌을 내라고만 하면 AI 는 블러를 사방에 뿌리고 흰 글자를 눈부시게 박는다. 이 팩은 채움 비율·테두리·블러 값과 빛 번짐의 위치까지 숫자로 정해, 첫 섹션과 마지막 푸터가 같은 손으로 만든 것처럼 나오게 한다.

로그인하면 보이는 본문

카카오 로그인하면 바로 열립니다

Pro 카드는 얼리액세스라 로그인한 분에게만 열어 두었습니다. 돈은 받지 않고, 로그인 한 번이면 본문 전체와 완성 미리보기가 그대로 보입니다.

얼리액세스 안내 보기
붙이기 전에 한 번

언제 쓰고, 뭐가 필요한가

언제 쓰나

개발자 도구·데이터 제품·AI 서비스처럼 '밤에 켜 둔 화면' 느낌을 내고 싶을 때 쓴다. 무드를 먼저 규칙으로 못박고 그 위에 페이지를 쌓는 순서라, 섹션을 더 붙여도 톤이 흩어지지 않는다.

준비물

  • 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
  • 브랜드명(가상 이름, 예: Nimbus)과 히어로 문구가 있다: 라벨 한 줄, 헤드라인 두 줄, 설명 한 문단
  • 특징 3개의 제목과 한 줄 설명이 있다
같이 쓰면 좋습니다

이어서 붙이면 좋은 카드

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