Web UI 코드 생성기 — 프리미엄 UI 코드 생성기

Dribbble 상위 작품이나 Behance 추천 프로젝트처럼 보이는 UI 코드를 생성하세요. 평범한 AI 출력물이 아닙니다. 목표는 최고 스튜디오의 시니어 제품 디자이너 작업과 구분할 수 없는 코드를 만드는 것입니다.

이 스킬이 해결하는 핵심 문제

AI가 생성한 UI는 일반적으로 '기술적으로는 맞지만 감성이 없습니다':

평평하고 생명력 없는 레이아웃
리듬이나 여유 공간이 없는 기계적인 그리드
분위기를 만들지 못하는 평범한 색상
깊이, 빛, 입체감 부재
시선을 사로잡지 못하는 텍스트

이 스킬은 출력물을 디자인 등급의 시각적 경험으로 변환합니다.

사용 시기

다음과 같은 경우 이 스킬을 반드시 호출해야 합니다:

모든 웹 페이지, 앱 또는 랜딩 페이지를 구축할 때
다듬음이 필요한 UI 컴포넌트를 만들 때
사용자가 아름답고 현대적인 디자인 결과물을 기대할 때
시각적 품질이 중요한 HTML/CSS/JS, React 또는 Vue 작업

디자인 시스템

1. 배경: 확산 그라디언트 분위기

절대 단색을 사용하지 마세요. 배경은 분위기와 감정을 만들어야 합니다.

기법 — 계층화된 확산 그라디언트:

/* 배경 레이어 1: 기본 그라디언트 */
body {
  background: #0a0a0f;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 119, 198, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(255, 107, 107, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(78, 205, 196, 0.06) 0%, transparent 50%);
}

/* 라이트 테마 버전: */
body.light {
  background: #f8f6f4;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(167, 139, 250, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 90% 60%, rgba(251, 191, 146, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(147, 197, 253, 0.08) 0%, transparent 40%);
}

규칙:

서로 다른 위치와 색상으로 2-4개의 radial-gradient 레이어 사용
불투명도를 낮게 유지 (다크 0.06-0.15, 라이트 0.08-0.15)
색상은 보색 또는 유사색이어야 함 — 무작위 금지
자연스러운 느낌을 위해 그라디언트를 중앙이 아닌 가장자리에 배치
circle이 아닌 ellipse 모양 사용 — 더 유기적임

배경용 색상 분위기 팔레트:

차분/테크: 보라-파랑 + 청록 (rgba(120,119,198) + rgba(78,205,196))
따뜻함/크리에이티브: 주황-분홍 + 금색 (rgba(255,107,107) + rgba(255,193,68))
신선함/자연: 초록 + 파랑 (rgba(52,211,153) + rgba(96,165,250))
프리미엄/럭셔리: 진한 보라 + 장미 (rgba(139,92,246) + rgba(244,114,182))
중립/기업: 슬레이트 블루 + 은색 (rgba(100,116,139) + rgba(148,163,184))

2. 타이포그래피: 시네마틱 계층 구조

아마추어 UI와 전문 UI의 가장 큰 차이점: 극단적인 타이포그래피 대비.

/* 히어로 제목 — 화면을 장악 */
.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

/* 섹션 제목 — 콘텐츠 고정 */
.section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* 부제목 / 카드 제목 */
.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* 본문 텍스트 — 의도적으로 가볍게 */
.body-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 540px; /* 읽기 너비 */
}

/* 작은 레이블 / 태그 */
.label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

규칙:

제목-본문 크기 비율: 최소 3:1 (예: 48px 제목 / 16px 본문)
히어로 텍스트: 반드시 clamp()를 사용하여 유동적 크기 조절
자간: 제목은 음수(-0.02 ~ -0.04em), 레이블은 양수(+0.03 ~ +0.06em)
줄 높이: 제목 1.0-1.1, 본문 1.5-1.6
한 화면에 최대 2-3개의 글꼴 크기만 사용
두께 대비: 제목 700 / 본문 400 — 모든 항목에 500 사용 금지

3. 레이아웃: 숨 쉬는 공간과 벤토

숨 쉬는 공간의 법칙: 화면의 60%는 빈 공간이어야 합니다. 콘텐츠는 소중합니다 — 공기로 감싸주세요.

간격 척도:

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-section: clamp(80px, 12vw, 160px);
}

벤토 그리드 (특징 섹션, 대시보드용):

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}

/* 특징 카드 2열 차지 */
.bento-item-wide { grid-column: span 2; }
/* 히어로 카드 2열 + 2행 차지 */
.bento-item-hero { grid-column: span 2; grid-row: span 2; }
/* 긴 카드 */
.bento-item-tall { grid-row: span 2; }

규칙:

섹션 세로 패딩: 80-160px (--space-section 사용)
콘텐츠 최대 너비: 1120px (1200px 아님 — 약간 더 좁게 하면 더 디자인된 느낌)
페이지 사이드 패딩: 데스크톱 48-80px, 모바일 20-24px
카드 패딩: 32-48px (넉넉하게, 비좁지 않게)
제목과 본문 텍스트 사이: 16-24px
카드 섹션 사이: 16-20px 간격
히어로 섹션: 콘텐츠 세로 중앙 정렬, 최소 80vh 높이
절대 전체 너비를 채우지 마세요 — 넉넉한 여백 유지

4. 카드 & 표면: 영혼이 있는 글라스

/* === 다크 테마 글라스 카드 === */
.card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 상단 가장자리 빛 반사 */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 50%, transparent);
}

/* 호버: 들림 + 광채 */
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* === 라이트 테마 글라스 카드 === */
.card-light {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.card-light:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

규칙:

모서리 둥글기: 카드는 20-32px (크게 — 이것이 현대적인 스타일)
테두리: 항상 rgba 사용, 단색 금지 — 최대 0.06-0.1 불투명도
항상 상단 가장자리 하이라이트 추가 (::before 선형 그라디언트 기법)
호버는 반드시 translateY (들림)와 향상된 그림자 포함
라이트 카드는 내부 광채를 위해 inset 그림자 사용
카드 패딩: 최소 32px, 그 이하 안 됨

5. 버튼: 필 + 감정

/* 기본 CTA — 존재감 있는 필 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4);
}

.btn-primary:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

/* 고스트 / 보조 — 미묘한 아웃라인 필 */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid rgba(var(--text-rgb), 0.15);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: rgba(var(--text-rgb), 0.05);
  border-color: rgba(var(--text-rgb), 0.3);
}

규칙:

모든 버튼은 border-radius: 50px 사용 (필 모양)
기본 버튼: 단색 채우기 + 일치하는 색상 그림자 광채
보조 버튼: 얇은 테두리가 있는 투명/고스트
패딩: 세로 14-16px, 가로 28-36px (넉넉하게)
호버: 항상 translateY + scale 증가 + 광채 증가
액티브: 빠른 전환(100ms)과 함께 scale(0.97)
절대 사각형이나 약간 둥근 버튼 사용 금지 — 항상 완전 필 사용

6. 아이콘: SVG 전용 — 이모지 절대 금지

절대 규칙: UI 아이콘으로 이모지(🎬🎮💼🎵)를 절대 사용하지 마세요. 이것은 AI가 생성한 아마추어 코드의 가장 큰 증거입니다.

옵션 A: CDN을 통한 Lucide 아이콘 (권장)

Lucide는 가장 현대적이고 가벼운 오픈소스 아이콘 라이브러리입니다 (1000개 이상 아이콘).

<!-- <head>에 추가 -->
<script src="https://unpkg.com/lucide@latest"></script>

<!-- HTML에서 data-lucide 속성으로 사용 -->
<i data-lucide="music" class="icon"></i>
<i data-lucide="play" class="icon"></i>
<i data-lucide="search" class="icon"></i>
<i data-lucide="heart" class="icon"></i>

<!-- body 끝에서 초기화 -->
<script>lucide.createIcons();</script>

/* CSS로 아이콘 스타일링 */
.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.75;
}

일반적인 아이콘 이름: home, search, settings, user, heart, play, pause, skip-forward, skip-back, volume-2, music, headphones, mic, star, bookmark, share-2, download, arrow-left, arrow-right, chevron-down, plus, x, check, bell, mail, calendar, clock, globe, camera, image, film, book-open, briefcase, code, terminal, zap, trending-up, bar-chart-2, pie-chart, layers, grid, list, filter, edit-3, trash-2, eye, eye-off, lock, unlock, sun, moon, menu, more-horizontal, more-vertical, external-link, link, send, message-circle, phone, map-pin

옵션 B: 인라인 SVG (CDN을 사용할 수 없을 때)

최소한의 SVG 경로를 직접 작성하세요. 아이콘을 단순하게 유지하십시오 (단일 경로, 24x24 viewBox):

<!-- 재생 아이콘 -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <polygon points="5 3 19 12 5 21 5 3"/>
</svg>

<!-- 검색 아이콘 -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>

<!-- 홈 아이콘 -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
</svg>

아이콘 스타일링 규칙:

크기: 표준 18-24px, 콤팩트 16px, 기능 아이콘 28-32px
선 두께: 1.5-2 (얇을수록 더 세련됨)
색상: currentColor를 사용하여 아이콘이 텍스트 색상을 상속받도록 함
아이콘 컨테이너: 강조를 위해 미묘한 배경이 있는 둥근 div로 감싸기

/* 아이콘 컨테이너 — 아이콘에 '자리' 제공 */
.icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

7. 색상 토큰

:root {
  /* 다크 테마 (기본) */
  --bg: #0a0a0f;
  --text-primary: #f0f0f3;
  --text-secondary: #8b8b99;
  --text-muted: #4a4a58;
  --accent: #6366f1;        /* 인디고 — 프로젝트별로 변경 */
  --accent-rgb: 99, 102, 241;
  --accent-glow: rgba(99, 102, 241, 0.3);
  --surface: rgba(255, 255, 255, 0.03);
  --surface-border: rgba(255, 255, 255, 0.06);
  --text-rgb: 240, 240, 243;
}

/* 라이트 테마 */
:root.light {
  --bg: #f8f6f4;
  --text-primary: #1a1a2e;
  --text-secondary: #6b6b80;
  --text-muted: #a0a0b0;
  --accent: #6366f1;
  --accent-rgb: 99, 102, 241;
  --surface: rgba(255, 255, 255, 0.6);
  --surface-border: rgba(255, 255, 255, 0.7);
  --text-rgb: 26, 26, 46;
}

강조 색상 옵션 (프로젝트당 하나 선택):

인디고: #6366f1 — 기술, AI, SaaS
블루: #3b82f6 — 신뢰, 기업, 금융
바이올렛: #8b5cf6 — 크리에이티브, 프리미엄
로즈: #f43f5e — 대담함, 에너지, 소셜
앰버: #f59e0b — 따뜻함, 암호화폐, 핀테크
에메랄드: #10b981 — 건강, 자연, 성장
시안: #06b6d4 — 신선함, 현대, 여행

7. 마이크로 인터랙션 & 모션

/* 전환 프리셋 */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

/* 카드 호버 — 떠오르기 */
.card { transition: all 0.4s var(--ease-out-expo); }
.card:hover { transform: translateY(-4px); }

/* 버튼 호버 — 바운스 스케일 */
.btn { transition: all 0.25s var(--ease-bounce); }
.btn:hover { transform: translateY(-2px) scale(1.03); }

/* 미묘한 등장 애니메이션 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in {
  animation: fadeUp 0.6s var(--ease-out-expo) forwards;
}

규칙:

카드: 0.4s ease-out-expo, 호버 시 translateY(-4px)
버튼: 0.25s 바운스, translateY(-2px) + scale(1.03)
입력: 0.2s 부드럽게, border-color 변경 + 미묘한 광채
절대 transition: all 0.3s ease 사용 금지 — 이것은 AI의 흔적
활성/누름: scale(0.97), 지속 시간 0.1s
페이지 로드: stagger fadeUp 애니메이션 (요소당 0.1s 지연)

8. 시각적 깊이 요소

'디자인된' 느낌을 만들기 위해 다음을 추가하세요:

/* 떠다니는 그라디언트 오브 (장식용) */
.orb {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* 노이즈 텍스처 오버레이 (미묘함) */
.noise-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,...");
  pointer-events: none;
  z-index: 999;
}

생성 출력

항상 다음을 포함하세요:

파일 목록

생성된 모든 파일을 나열하고 용도를 설명하세요:

index.html — 메인 마크업
style.css — 모든 스타일 (이상적으로 단일 파일)
script.js — 필요한 모든 상호작용 (있는 경우)

사용 방법

# 파일을 동일한 디렉토리에 저장하고 브라우저에서 index.html 열기

디자인 명세서

UI의 주요 디자인 결정 사항을 설명하는 간단한 요약:

분위기: (예: 차분한 테크, 따뜻한 크리에이티브 등)
테마: 다크 / 라이트
강조 색상: #6366f1 (인디고)
타이포그래피: Inter, 700/400 가중치, 3:1 크기 비율
레이아웃: 단일 열 히어로, 기능을 위한 4열 벤토 그리드
상호작용: 카드 호버 시 부드러운 들림, 버튼 바운스

전체 HTML 예시

간단한 랜딩 페이지를 위한 완전한 HTML 템플릿입니다:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>프리미엄 랜딩 페이지</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <script src="https://unpkg.com/lucide@latest"></script>
  <style>
    /* ... 전체 스타일시트 ... */
  </style>
</head>
<body class="light">
  <!-- 콘텐츠 -->
  <script>lucide.createIcons();</script>
</body>
</html>

MLiang0920/mliang-ui-design-skill

mliang-ui-design-skill란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서

Web UI 코드 생성기 — 프리미엄 UI 코드 생성기

이 스킬이 해결하는 핵심 문제

사용 시기

디자인 시스템

1. 배경: 확산 그라디언트 분위기

2. 타이포그래피: 시네마틱 계층 구조

3. 레이아웃: 숨 쉬는 공간과 벤토

4. 카드 & 표면: 영혼이 있는 글라스

5. 버튼: 필 + 감정

6. 아이콘: SVG 전용 — 이모지 절대 금지

7. 색상 토큰

7. 마이크로 인터랙션 & 모션

8. 시각적 깊이 요소

생성 출력

파일 목록

사용 방법

디자인 명세서

전체 HTML 예시

관련 스킬

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me