Claude Code UI 디자인 가이드: Oil UI Skill 설치, 프롬프트, 시각 검토
Claude Code는 저장소 구조를 파악하고 여러 단계의 작업을 나누며 서브에이전트를 실행하는 데 강점이 있습니다. 하지만 디자인 지침 없이 “모던한 랜딩 페이지를 만들어 줘”라고 요청하면 자주색 그라디언트, 중첩 카드, 지어낸 KPI 배지로 이어지기 쉽습니다. Oil UI를 설치하면 Claude Code가 카테고리를 조사하고 서로 다른 방향을 나란히 비교한 다음 실제 뷰포트에서 렌더링된 페이지를 검증하는 구조화된 디자인 워크플로를 사용합니다.
핵심 요점
- npx skills add oil-oil/oil-ui를 실행해 프로젝트를 특정 컴포넌트 라이브러리에 묶지 않고 Claude Code에 무료 오픈소스 Skill을 설치하세요.
- 모호한 스타일 형용사 대신 제품, 사용자, 핵심 작업, 실제 콘텐츠, 목표 뷰포트(1440×900 또는 390×844 등)를 프롬프트 앞에 제시하세요.
- 새 페이지나 리디자인에서는 프로덕션 상태를 작성하기 전에 Claude Code로 3~4개의 서로 다른 방향을 담은 HTML 비교 보드를 만들게 하세요.
- Claude Code 서브에이전트로 맥락 없는 블라인드 시각 리뷰를 100% 및 200% 확대에서 진행해 간격, 대비, 위계 문제를 전달 전에 수정하세요.
npx skills add oil-oil/oil-ui또는 Claude Code에 “이 Skill을 설치해 줘: npx skills add oil-oil/oil-ui 실행”이라고 직접 전송하세요.
Claude Code에 전용 디자인 Skill이 필요한 이유
Claude Code에 별다른 방법 없이 “깔끔하고 모던한 SaaS 인터페이스”를 요청하면 모델은 학습 데이터의 통계적 평균에 기대게 됩니다. 중앙 정렬된 제목 위에 pill 배지를 놓고 아래에 같은 너비의 카드 세 장을 배치하며, 한쪽에 장식용 스파크라인이나 “+24%” 카운터를 추가합니다. 코드는 컴파일되지만 다른 AI 데모와 구분되지 않는 인터페이스가 됩니다.
Oil UI는 작업 순서를 바꿉니다. Claude Code가 프롬프트에서 바로 최종 마크업으로 넘어가는 대신 제품 카테고리를 이해하기 쉽게 만드는 요소를 조사하고, 서로 다른 시각 방향을 하나의 비교 보드에 배치한 다음, 작업을 끝내기 전에 실제 브라우저 렌더링을 검사합니다.
| 단계 | Claude Code에 한 번만 요청 | Claude Code + Oil UI 워크플로 |
|---|---|---|
| 출발점 | 일반적인 SaaS 카드 그리드와 안전한 팔레트를 기본 사용 | 제품 카테고리, 사용자 작업, 실제 콘텐츠에서 시작 |
| 방향 선택 | 한 가지 결과만 제공하며 어긋나면 처음부터 다시 요청해야 함 | 1440px 또는 390px에서 방향을 나란히 비교하는 기본 제공 페이지 |
| 데이터와 문구 | 가짜 백분율과 채움용 배지를 지어내는 경우가 많음 | 실제 도메인 필드를 중심으로 위계를 구성하고 불필요한 요소 제거 |
| 품질 확인 | 코드가 컴파일되면 바로 중단 | 블라인드 서브에이전트가 전체 페이지와 200% 크롭을 비평 |
세 단계로 설정하기
Oil UI는 사용자 계정에 전역 설치하거나 저장소 안에 로컬 설치해 팀 전체가 같은 워크플로를 공유하게 할 수 있습니다.
Skill 설치 프로그램을 실행하고 Claude Code 선택
터미널에서 아래 명령을 실행한 다음 대화형 안내에 따라 Claude Code와 원하는 설치 범위를 선택하세요.
npx skills add oil-oil/oil-ui로컬 브라우저에서 페이지를 렌더링하고 캡처할 수 있는지 확인
시각 리뷰에는 소스 코드를 보고 추측하는 대신 실제 스크린샷이 필요합니다. Playwright 또는 로컬 브라우저 자동화가 개발 서버를 1440×900(데스크톱)과 390×844(모바일)로 열 수 있는지 확인하세요.
전체 워크플로가 필요하면 Oil UI Pro로 업그레이드
Oil UI Pro를 구매했다면 CLI로 설치하세요. Pro가 설치되어 있다면 오픈소스 Skill을 함께 설치해 둘 필요는 없습니다.
npx github:oil-oil/oil-cli install oil-ui-pro
Claude Code를 위한 정보 밀도 높은 UI 프롬프트 작성법
갤러리에서 Claude로 만든 작품을 살펴 보세요. Claude Opus 5.5의 태블릿 전자책 리더 Margins와 음성 비서 Echo, Claude Sonnet 5.5의 차량 호출 앱 Pickup과 결제 모듈 Pinch Checkout이 있습니다. 각 프롬프트는 사용자가 누구인지, 어떤 상호작용이 작품의 핵심인지, 어떤 상태가 작동해야 하는지를 밝히고 있습니다.
- 사용자와 작업을 분명하게 서술
- “세련된 모빌리티 앱”을 요청하는 대신 “승차 핀 확인, 운전자의 실시간 도착, 주행 중 목적지 변경을 다루는 390×844 차량 호출 흐름”처럼 구체적으로 적으세요.
- 중심이 되는 상호작용 지정
- 어떤 컨트롤이나 전환이 가장 중요한지 알려 주세요. 프로모 코드 적용 시 실시간 가격 계산, 장문 리더의 주석 드로어, 음성 비서의 파형 반응 등이 될 수 있습니다.
- 뷰포트와 구체적인 상태 정의
- 정확한 뷰포트 크기와 렌더링할 3~4가지 상태를 나열해 Agent가 실제 브라우저에서 각 상태를 확인하게 하세요.
Oil UI를 사용해 [제품 유형, 예: 독립 서점 결제 모듈]의 인터페이스를 디자인해 줘.
- 사용자 및 핵심 작업: [예: 독자가 장바구니 항목을 확인하고 매장 픽업과 배송을 전환하며 할인 코드를 적용한 다음 결제를 완료함]
- 중심 상호작용 및 상태: [주요 상호작용]에 집중해 줘. [상태 1: 기본 폼], [상태 2: 배송비와 할인 실시간 재계산], [상태 3: 인라인 카드 검증 오류와 복구]를 포함해 줘.
- 제약 조건: 기존 기술 스택을 유지해 줘. 데스크톱에서는 1440×900을 목표로 하고 너비 390px까지 반응형으로 대응해 줘.
선택한 방향을 다듬기 전에 비교할 수 있도록 먼저 서로 다른 디자인 방향을 제안해 줘.대괄호 안의 필드를 실제 도메인 내용으로 바꾼 다음 Claude Code에 붙여 넣으세요.
실제 스크린샷으로 블라인드 서브에이전트 리뷰 실행하기
방금 CSS 600줄을 작성한 Agent는 두 레이블이 겹치거나 보조 텍스트의 대비가 모자라도 이를 알아차리지 못하는 경우가 많습니다. Oil UI에서는 메인 Agent가 실제 페이지의 스크린샷을 캡처해 구현 내용을 전혀 모르는 새로운 Claude Code 서브에이전트에 전달합니다.
리뷰어는 100% 전체 페이지 캡처, 밀도 높은 컨트롤의 200% 크롭, 상단이 무겁거나 단조로운 레이아웃을 드러내는 흐린 블록 구조 이미지를 검사합니다. 메인 Agent는 보고된 결함을 수정한 뒤 결과를 전달합니다.
작동하는 갤러리 사례와 프롬프트
1440px 또는 390px의 실제 데모를 열어 모델과 프롬프트가 최종 인터페이스를 어떻게 형성했는지 살펴 보세요.
Margins
태블릿 전자책 리더
장문 독서 앱의 태블릿 읽기 인터페이스를 1024×1366 세로 모드로 디자인하고 프레젠테이션 캔버스에 배치하세요. 본문, 하이라이트, 주석, 목차, 읽기 진행률을 포함합니다. 중국어 장문 타이포그래피에 집중하세요. 글자 크기, 줄 높이, 단락 간격, 문장부호 간격을 세심하게 다뤄 10분 동안 편안하게 읽을 수 있게 하세요. 사용자는 텍스트를 하이라이트한 뒤 짧은 주석을 쓸 수 있어야 합니다. 읽기, 하이라이트 및 주석 작성, 목차가 열린 세 가지 상태를 캡처하세요.
작품과 프롬프트 살펴 보기 →
Pickup
승차 호출 앱
승차 호출 앱에서 차량을 호출한 뒤의 화면을 만드세요(390×844). 지도에 접근 중인 차량, 운전기사와 차량 정보, 예상 도착 시간, 승차 후 여정 진행을 표시합니다. 실제 지도 스크린샷 대신 도로망과 경로를 코드로 그리세요. 차를 기다리는 순간은 가장 불안하므로 거리를 즉시 알아볼 수 있어야 합니다. 대기, 차량 도착, 여정 진행의 세 가지 상태를 캡처하세요. `index.html`과 세 화면을 나란히 배치한 `screens.html`을 전달하세요.
작품과 프롬프트 살펴 보기 →
Pinch 결제
이커머스 결제 모듈
독립 디자이너 브랜드 온라인 스토어의 결제 모듈을 만드세요(데스크톱 1440×900, 결제 패널을 중앙에 배치). 쇼핑 목록, 배송 주소, 결제 수단, 주문 확인을 포함합니다. 각 단계가 부드럽게 이어져야 하며 모든 입력에 입력 중, 유효하지 않음, 완료 상태가 명확히 나타나야 합니다. 주문 완료는 체크 표시만 보여 주는 데 그치지 않고 즐거운 느낌을 전달하세요. 양식 작성, 유효성 검사 오류, 주문 성공의 세 가지 상태를 캡처하세요.
작품과 프롬프트 살펴 보기 →
Echo
AI 음성 어시스턴트
모바일 AI 음성 어시스턴트의 전체 화면 인터페이스를 만드세요(390×844). 소리의 시각화에 집중하고 말하기를 기다리는 상태, 듣는 상태, 생각하는 상태, 답하는 상태가 각각 뚜렷한 형태를 가져야 합니다. 답할 때는 예약한 회의 같은 결과 카드를 아래에 표시하고 빛나는 구만 보여 주지 마세요. 자주색과 파란색의 빛나는 구는 가장 흔한 기본 방식이므로 피하세요. 네 가지 상태를 모두 캡처하세요. `index.html`과 상태를 나란히 보여 주는 `screens.html`을 전달하세요.
작품과 프롬프트 살펴 보기 →무료 Skill에서 Oil UI Pro로 전환해야 할 때
무료 오픈소스 Skill에는 카테고리 조사, 방향 비교 보드, 인위적인 AI 느낌 점검, 스크린샷 재현이 포함됩니다. Claude Code로 기존 프로덕션 앱을 개선하거나 밀도 높은 데스크톱 워크스페이스를 디자인하거나 클릭 수를 센 작업 점검과 함께 최대 3회의 블라인드 서브에이전트 리뷰가 필요하다면 Oil UI Pro를 사용하세요.
npx github:oil-oil/oil-cli install oil-ui-pro자주 묻는 질문
Oil UI가 Claude Code를 React, Tailwind 또는 특정 UI 라이브러리에 묶어 두나요?
아니요. Oil UI는 디자인 방법, 레이아웃 판단, 시각 검증 단계를 제공합니다. Next.js, Vue, Svelte, 순수 HTML/CSS, 사내 디자인 시스템 등 어떤 스택이든 Claude Code는 기존 환경 안에서 마크업과 스타일을 작성합니다.
Oil UI를 사용할 때 Claude Opus와 Claude Sonnet은 어떻게 다른가요?
Opus는 일반적으로 전체 페이지의 타이포그래피 크기, 속도감, 편집적 위계에서 더 강한 판단을 보입니다. Sonnet은 더 신속하고 집중된 모듈, 상태 보완, 정해진 방향의 확장에 적합합니다. 둘 다 같은 Skill을 바로 읽을 수 있습니다.
Claude Code에 참고 스크린샷을 주고 재현하거나 응용하게 할 수 있나요?
네. 이미지 경로를 전달하고 픽셀 차이를 이용한 충실한 재현을 원하는지, 타이포그래피 분위기와 간격만 가져와 자신의 제품 콘텐츠에 적용하고 싶은지 명시하세요. Oil UI에는 두 경우 모두를 위한 전용 워크플로가 있습니다.
Claude Code가 Oil UI를 실제로 적용하고 있는지 어떻게 알 수 있나요?
프롬프트에 “Oil UI 사용”을 포함하세요. Claude Code가 스타일 없는 기본 코드를 바로 쏟아내는 대신 사용자 작업을 정리하고 서로 다른 시각 방향이나 비교 보드를 제안한 다음, 마무리 전에 렌더링된 스크린샷을 검사할 것입니다.