UI 디자인 Skill, 원샷 UI 생성기, 컴포넌트 라이브러리 비교
오늘날 AI로 인터페이스를 만드는 개발자는 세 가지 도구 중에서 선택합니다. shadcn/ui, Radix, Tailwind UI 같은 컴포넌트 라이브러리, 호스팅된 원샷 UI 생성기, Claude Code, Codex, Cursor 안에서 실행되는 Oil UI 같은 Agent UI 디자인 Skill입니다. 이들은 접근성 있는 기초 요소, 독립적인 콘셉트 스케치, 실제 코드베이스 안의 종합적인 디자인 판단이라는 서로 다른 층위의 문제를 해결합니다.
핵심 요점
- 컴포넌트 라이브러리는 접근성 있는 기초 요소(버튼, 대화 상자, 선택기)를 제공하지만 페이지 위계, 전개 속도, 첫 화면에 무엇을 둘지는 결정하지 않습니다.
- 호스팅된 원샷 UI 생성기는 독립적인 일회용 목업에 유용하지만 결과물이 기존 프로덕션 저장소에 그대로 깔끔하게 들어가는 경우는 드뭅니다.
- Agent UI 디자인 Skill(Oil UI)은 코딩 Agent 안에서 직접 실행되어 방향 비교 보드, 인위적인 요소 제거, 실제 스크린샷 리뷰를 실제 코드베이스로 가져옵니다.
- 자유롭게 조합할 수 있습니다. 기존 컴포넌트 기초 요소를 유지하면서 Claude Code 또는 Codex + Oil UI로 레이아웃, 상태, 시각 QA를 관리하세요.
npx skills add oil-oil/oil-ui기존 프런트엔드 프레임워크 및 컴포넌트 라이브러리와 함께 작동합니다.
컴포넌트 라이브러리, 호스팅된 생성기, 디자인 Skill의 차이
AI로 만든 인터페이스에 대한 불만은 보통 한 도구에 다른 도구의 일을 기대해서 생깁니다. 기초 라이브러리가 어수선한 레이아웃을 막아 주기를 기대하거나 샌드박스 생성기의 목업을 상태가 있는 프로덕션 앱에 이식하려는 경우입니다. 세 가지 카테고리를 실제로 비교하면 다음과 같습니다.
| 차원 | 컴포넌트 라이브러리(shadcn/ui, Radix 등) | 호스팅된 원샷 UI 생성기 | Agent UI 디자인 Skill(Oil UI) |
|---|---|---|---|
| 제공하는 것 | 접근성 있는 구성 요소(Dialog, Select, Combobox) | 웹 샌드박스에서 호스팅되는 독립형 미리보기 화면 | Agent 안의 디자인 방법, 비교 보드, 블라인드 스크린샷 리뷰 |
| 코드베이스 인식 | 패키지 기초 요소로 설치되며 레이아웃을 결정하지 않음 | 저장소 밖에서 실행되어 로컬 경로 및 API와 분리됨 | Claude Code, Codex, Cursor에서 실제 저장소를 읽고 편집 |
| 뻔한 AI 결과 방지 | 없음. Agent는 여전히 기초 요소를 뻔한 3카드 그리드로 조합할 수 있음 | 플랫폼 고유 스타일과 기본 레이아웃에 묶이는 경우가 많음 | 능동적인 방향 탐색, AI 상투성 방지 체크리스트, 테두리 제거 |
| 기존 앱 개선 | 페이지 위계나 흐름이 아닌 개별 컨트롤 교체에 도움 | 실제 프로덕션 폼과 상태 hooks에 적용하기 어려움 | 주석이 달린 화면 진단, 3단계 개선, DESIGN.md 추출 |
| 시각 검증 | 개발자가 브라우저에서 수동 검사 | 생성기의 iframe 안에서 미리보기 | 블라인드 서브에이전트가 비평하는 자동화된 1440px/390px 브라우저 캡처 |
실제 엔지니어링 워크플로에서 함께 사용하는 방법
디자인 Skill을 도입하기 위해 현재 스택을 버릴 필요는 없습니다. 팀은 일반적으로 이 도구들을 세 가지 방식으로 조합합니다.
- 기존 프로덕션 코드베이스(Next.js / Vue + 기초 요소)에서
- 키보드 접근성과 포커스 트랩에는 Radix나 shadcn/ui를 유지하세요. Claude Code나 Cursor에 Oil UI를 설치하면 Agent가 모든 섹션을 기본 Card 컴포넌트로 감싸는 대신 명확한 페이지 위계를 디자인하고 localhost 스크린샷으로 검증합니다.
- 새 제품, 문서 사이트, 데스크톱 도구를 처음부터 만들 때
- Codex 또는 Claude Code와 Oil UI로 먼저 3방향 비교 보드를 생성하세요. 갤러리의 Kiln 컴포넌트 라이브러리 사이트, Dispatch API 문서, muse 캔버스, Forge 코딩 어시스턴트를 살펴 보고 가장 강한 방향을 선택한 다음 작동하는 상태를 구축하세요.
- 참고 스크린샷이나 러프 스케치를 프로덕션 코드로 전환할 때
- Oil UI가 설치된 Agent에 참고 이미지를 직접 전달해 반복적인 픽셀 차이 비교로 일치시키거나 타이포그래피 분위기를 자신의 도메인 콘텐츠에 맞게 조정하세요.
Oil UI가 하는 일과 하지 않는 일
기대치를 명확히 하면 모두의 시간을 절약할 수 있습니다.
Oil UI는 코딩 Agent에 방향 탐색, 위계 구성, 렌더링된 화면 비평 방법을 가르치는 디자인 Skill입니다. 미리 스타일이 지정된 React 위젯 키트가 아니며 기반 언어 모델의 역량을 대체하지도 않습니다. Claude Opus 5.5나 GPT 6.1 Sol 같은 최첨단 모델은 여전히 더 작은 모델보다 높은 한계에 도달합니다. 또한 시각 검증에는 이미지를 검사하고 로컬 브라우저를 실행할 수 있는 Agent가 필요합니다. 그래서 Oil UI Pro를 구매하기 전에 항상 실제 작업에서 무료 오픈소스 Skill을 먼저 사용해 볼 것을 권합니다.
Oil UI를 사용해 이 저장소의 [화면 이름, 예: 개발자 API 키 및 사용량 페이지]을 다시 디자인해 줘.
- 스택 제약 조건: 새 UI 종속성을 추가하지 말고 기존 [예: Radix / shadcn/ui 기초 요소 및 Tailwind 설정]을 계속 사용해 줘.
- 디자인 지침: 모든 그룹을 기본 테두리 Card 컴포넌트로 감싸지 마. 먼저 서로 다른 레이아웃 구조 2~3가지를 제안하고 주요 행동을 우선하며 빈 상태와 오류 상태를 다루고 로컬 브라우저에서 1440×900과 390×844로 확인해 줘.컴포넌트 라이브러리가 저수준 접근성을 담당하고 Oil UI가 구성과 시각 QA를 관리하게 합니다.
작동하는 갤러리 사례와 프롬프트
1440px 또는 390px의 실제 데모를 열어 모델과 프롬프트가 최종 인터페이스를 어떻게 형성했는지 살펴 보세요.
Kiln
컴포넌트 라이브러리 웹사이트
제품: 버튼, 입력, 드롭다운, 명령 팔레트, 다이얼로그, 툴팁, 표, 날짜 선택기를 포함한 40개 이상의 컴포넌트를 갖춘 React 개발자용 오픈소스 컴포넌트 라이브러리 Kiln입니다. 테마 커스터마이즈를 지원합니다. 웹사이트 홈페이지를 만들고 필요하면 컴포넌트 상세 페이지도 추가하세요. - 스크린샷 대신 실제 상호작용형 컴포넌트를 홈페이지에 직접 보여 주세요. “컴포넌트 월”에는 사용자가 클릭하고 입력하고 전환할 수 있는 작동하는 컴포넌트가 있어야 합니다. - 선도적인 개발자 도구 웹사이트의 정밀함과 절제를 참고하세요. 대부분 흑백으로 구성하고 강조색은 최대 하나만 사용하며 엄격한 그리드와 코드 및 숫자의 모노스페이스 활자를 적용하세요. - 테마 컨트롤러를 기억에 남게 만드세요. 반경, 밀도, 강조색 컨트롤을 드래그하면 페이지의 모든 컴포넌트가 즉시 바뀌어야 합니다. - 복사 가능한 설치 명령, 코드 스니펫, 컴포넌트 카테고리 네비게이션, GitHub 스타와 주간 다운로드처럼 지나치게 딱 떨어지지 않는 현실적인 사용 수치를 포함하세요.
작품과 프롬프트 살펴 보기 →
Dispatch
개발자 API 문서
결제 또는 메시징 API 회사의 개발자 문서 사이트를 만드세요(1440×900에서 시작해 너비 390까지 반응형 대응). 왼쪽에는 네비게이션, 중앙에는 문서, 오른쪽에는 언어를 전환할 수 있는 코드 샘플(cURL, Node, Python)을 배치합니다. 빠른 시작, 한 엔드포인트의 전체 레퍼런스(파라미터 표, 요청 및 응답 예시, 오류 코드), 검색을 포함하세요. 읽는 동안 코드 샘플이 현재 섹션을 따라가고 선택한 언어가 사이트 전체에서 기억되어야 합니다. 빠른 시작 페이지, 엔드포인트 레퍼런스 페이지, 검색이 열린 상태를 디자인하세요.
작품과 프롬프트 살펴 보기 →
muse
AI 이미지 및 동영상 캔버스
디자이너와 크리에이티브 팀을 위한 AI 이미지 및 동영상 생성 도구를 만드세요. 모든 프롬프트, 참조 이미지, 생성 결과를 하나의 무한 캔버스에 배치하고 메인 작업 공간을 구현하세요.
작품과 프롬프트 살펴 보기 →
Forge
AI 코딩 어시스턴트
제품: 데스크톱 AI 코딩 어시스턴트 Forge입니다. 왼쪽에는 대화를, 오른쪽에는 편집 중인 코드와 터미널을 배치합니다. 사용자는 파일을 읽고 코드를 수정하고 테스트를 실행하는 과정을 단계별로 지켜볼 수 있습니다. 실제 프로젝트처럼 보이는 파일명, diff, 테스트 출력 등 현실적인 데이터로 메인 인터페이스를 만드세요(1440×900). AI의 작업이 보이고 기억에 남게 하세요. 단계가 하나씩 밝혀지고 diff 행이 점진적으로 나타나며 테스트가 빨간색에서 초록색으로 바뀌어야 합니다. 위험한 변경을 사용자가 확인하기를 기다리는 상태도 캡처하세요.
작품과 프롬프트 살펴 보기 →무료 Skill로 시작하고 전체 시스템이 필요할 때 Oil UI Pro로 업그레이드
오픈소스 Skill은 MIT 라이선스에 따라 무료이며 카테고리 조사, 방향 비교 보드, AI 상투성 방지 검사, 스크린샷 재현을 다룹니다. 기존 프로젝트 3단계 개선, 10가지 워크스페이스 원형, 최대 3회의 블라인드 리뷰, 단일 컴포넌트 다듬기가 필요할 때 Oil UI Pro(한 번 구매, 평생 업데이트)로 업그레이드하세요.
npx github:oil-oil/oil-cli install oil-ui-pro자주 묻는 질문
Oil UI는 월 구독인가요, 한 번 구매인가요?
오픈소스 Oil UI Skill은 완전히 무료(MIT 라이선스)입니다. Oil UI Pro는 평생 업데이트가 포함된 한 번 구매 방식이며 token이나 생성 횟수에 따른 요금이 없습니다. 현재 가격은 /ko/pro/ 페이지에서 확인하세요.
정식 디자인 교육을 받지 않은 백엔드 또는 풀스택 엔지니어도 Oil UI를 효과적으로 사용할 수 있나요?
네. Oil UI는 바로 그런 사용자를 위해 만들었습니다. 타이포그래피 전문 용어를 암기하는 대신 사용자, 작업, 실제 데이터 필드를 설명하세요. Oil UI가 방향 보드, 요소 제거 체크리스트, 블라인드 스크린샷 비평을 거치도록 Agent를 안내합니다.
제품 디자이너는 Figma와 함께 Oil UI를 어떻게 사용하나요?
디자이너는 Oil UI로 몇 분 안에 실제 데이터가 들어간 인터랙티브 방향을 탐색합니다. 타임라인 조정, 실시간 가격 계산기, 다중 화면 모바일 흐름 같은 상태가 있는 동작에 특히 유용합니다. 또한 엔지니어링 PR의 일관성을 유지하는 저장소 DESIGN.md를 만드는 데도 사용합니다.
갤러리의 100개 이상의 사례가 모두 이 워크플로로 만들어졌나요?
네. 갤러리의 모든 작품에는 사용된 정확한 AI 모델(GPT 6.1 Sol, Claude Opus 5.5, Claude Sonnet 5.5, DeepSeek 4.1 Flash 등)이 표시되고 실제 인터랙티브 뷰가 포함됩니다. 원본 작업 프롬프트는 작업 기록이 있는 경우에만 공개되며, Herbarium, Chronos, Archon에는 TASK.md가 없으므로 프롬프트가 표시되지 않습니다.