AI에게 UI 디자인을 요청하는 프롬프팅 전략 — Claude·GPT로 시안 만들기

1. AI 디자인 프롬프팅이 어려운 이유

AI는 모든 것을 알고 있지만 당신의 프로젝트는 모릅니다. 브랜드 색상, 폰트, 컴포넌트 명명 규칙, 타겟 사용자까지 — 머릿속에 있는 맥락이 프롬프트에 없으면 AI는 범용적이고 평범한 결과를 생성합니다.

두 프롬프트의 차이는 컨텍스트의 양입니다. 좋은 프롬프트는 AI가 결정해야 할 변수를 줄여줍니다.

2. CRAFT 프레임워크

효과적인 디자인 프롬프트에는 5가지 요소가 있습니다. 이를 CRAFT로 기억하세요.

// CRAFT 조합 예시 프롬프트
당신은 미니멀 B2B SaaS UI를 전문으로 하는 시니어 프론트엔드 디자이너입니다.

[컨텍스트] 동지커뮤니케이션 - 한국의 AI 솔루션 스타트업 홈페이지
[자산 제약] 배경: #FAFAF8, 포인트: #C96442, 텍스트: #1C1C1C, 폰트: Pretendard
[요청] 히어로 섹션 HTML + 인라인 CSS 생성
  - 풀스크린 (min-height: 100vh)
  - 헤드라인 2줄 + 서브텍스트 1줄 + CTA 버튼 2개 (주/부)
  - 배경에 미세한 그리드 패턴 (SVG)
[형식] 단일 HTML 블록, 외부 CSS/JS 없음
[톤] 간결하고 전문적. 불필요한 장식 없이 내용이 중심

3. 디자인 시스템 컨텍스트 전달

반복 작업을 할 때는 프롬프트마다 브랜드 정보를 복붙하지 말고, 시스템 컨텍스트 블록을 만들어 두고 붙여넣으세요.

// ── 디자인 시스템 컨텍스트 블록 (저장해 두고 재사용) ──
[DESIGN SYSTEM]
Brand: 동지커뮤니케이션 (AI 스타트업)
Colors:
  - Primary:   #C96442 (CTA, 강조)
  - Dark:      #1C1C1C (배경, 헤더)
  - Cream:     #FAFAF8 (페이지 배경)
  - Warm:      #F5F0E8 (섹션 배경)
  - Border:    #E8DDD4
  - Text:      #8B6355 (보조)
Font: Pretendard (한국어), fallback system-ui
Radius: 8px (small), 12px (card), 20px (pill)
Shadow: 0 2px 12px rgba(0,0,0,.08)
Icons: Font Awesome 6 (fa- prefix)
Grid: 12-column, max-width 1200px, gutter 24px
[/DESIGN SYSTEM]

위 디자인 시스템에 맞게 [요청 내용] 을 구현해주세요.

이 블록을 Claude의 Project 기능이나 ChatGPT의 Custom Instructions에 저장하면 매번 붙여넣을 필요가 없습니다.

4. 반복 정제 전략

첫 번째 결과가 완벽하길 기대하지 마세요. AI 디자인 작업은 3~5 라운드 대화를 통해 정제됩니다.

각 라운드에서 "무엇이 좋고 무엇을 바꾸고 싶은지"를 명확히 말하는 것이 핵심입니다. "더 예쁘게"는 AI에게 무의미합니다. "여백을 40px로 늘리고 텍스트 명도를 높여줘"처럼 구체적으로 요청하세요.

5. 실전 예시: 히어로 섹션

위 전략을 종합한 실제 프롬프트와 결과 패턴입니다.

[DESIGN SYSTEM] (위 블록 붙여넣기)

당신은 현대적인 B2B 스타트업 랜딩페이지를 전문으로 하는 시니어 디자이너입니다.

작업: 히어로 섹션 HTML 생성
요구사항:
- 배경: 다크 (#1C1C1C) + 미세한 그리드 SVG 패턴
- 중앙 정렬 텍스트 레이아웃
- 헤드라인: "AI와 기존 시스템을, 33일 안에 통합합니다" (48px, bold, 흰색)
- 서브텍스트: 1줄 설명 (16px, rgba 흰색 70%)
- CTA 버튼 2개: "무료 상담" (오렌지 채움) + "포트폴리오 보기" (아웃라인)
- 스크롤 유도 애니메이션 (아래 화살표, bounce)
형식: 단일 section 태그, 인라인 스타일, JS 없음