Oil UI Skill 설치 및 AI UI 디자인 가이드
Oil UI는 AI Agent를 위한 UI 디자인 Skill입니다. 모델에 디자인 방법을 제공합니다. 작업과 실제 콘텐츠에서 출발해 서로 다른 방향을 탐색한 다음 작동하는 인터페이스를 다듬는 과정입니다. 갤러리 사례에는 AI 모델이 표시되며, 작업 기록이 있는 사례에서는 원본 브리프도 제공됩니다. 자신의 프로젝트에 워크플로를 적용하기 전에 결과를 검사할 수 있습니다.
1. 무료 오픈소스 Skill 설치
터미널에서 이 명령을 실행하고 설치 프로그램의 안내에 따라 Agent와 설치 범위를 선택하세요. Agent에 명령을 전송해 설치 도움을 받을 수도 있습니다. DeepSeek Harness를 사용한다면 dsh plugin --profile web add github:oil-oil/dsh-oil-ui를 실행해 네이티브 dsh-oil-ui 플러그인을 설치하세요. 무료 Skill이 포함되며 로컬 Oil UI Pro 설치를 자동으로 감지합니다.
npx skills add oil-oil/oil-ui2. Agent에 실제 작업 전달
제품, 사용자, 사람들이 완료해야 할 작업을 설명하세요. 실제 콘텐츠, 페이지 범위, 기술적 제약 조건을 제공하세요. 기존 프로젝트라면 그대로 유지해야 할 비즈니스 동작을 명시하세요. 긴 스타일 형용사 목록보다 명확한 브리프가 더 유용합니다.
Oil UI를 사용해 내 예약 도구의 홈 페이지를 디자인해 줘. 소규모 스튜디오의 고객이 서비스를 선택하고 예약 가능한 시간을 찾은 다음 예약해야 해. 먼저 서로 다른 디자인 방향을 보여 줘. 기존 스택과 예약 흐름은 유지해 줘.3. 다듬기 전에 방향 비교
Agent에 방향을 나란히 보여 달라고 요청하세요. 실제 콘텐츠로 위계, 타이포그래피, 레이아웃, 주요 행동을 비교한 다음 다듬을 방향을 선택하세요. 갤러리 프롬프트를 참고할 수 있지만 자신의 제품과 제약 조건에 맞게 조정해야 합니다.
모든 사례 →4. 페이지를 열고 작업 완료
작동하는 페이지에서 첫 화면, 긴 콘텐츠, 모바일 레이아웃, 주요 행동을 확인하세요. 작업에 실제로 필요한 로딩, 빈 상태, 오류 상태를 다루세요. 스크린샷은 시각적 세부 사항을 비교하는 데 도움이 되고 클릭과 입력은 상호작용이 작동하는지 확인해 줍니다. 구체적인 페이지, 행동, 결과를 Agent에 알려 주세요.
5. 전체 방법이 필요할 때 Pro 살펴 보기
Oil UI Pro는 상호작용과 상태, 반응형 레이아웃, 기존 프로젝트 개선, 여러 관점의 리뷰, 작업 점검을 다룹니다. Pro 페이지에서 구매하거나 Agent에 설치 프로그램을 실행하게 해 로그인, 결제, 설치 도움을 받으세요. 결과는 여전히 모델에 따라 달라지므로 먼저 실제 작업에서 무료 Skill을 사용해 보세요.
npx github:oil-oil/oil-cli install oil-ui-pro형식과 작업별 UI 디자인 영감
인터페이스 형식이나 구체적인 디자인 작업별로 작동하는 Oil UI 갤러리 사례를 둘러보세요. 원본 데모를 열고 접근 방식을 비교하며 그 뒤의 프롬프트를 살펴 보세요.
디자인 사례 →상세 가이드와 플레이북
코딩 Agent, 인터페이스 유형, 디자인 문제별로 워크플로를 살펴 보세요. 모든 가이드에는 작동하는 갤러리 사례, 프롬프트 템플릿, 리뷰 체크리스트가 포함됩니다.
Agent 및 도구 가이드
Claude Code, OpenAI Codex, DeepSeek Harness, Cursor, Windsurf에서 Oil UI를 사용하기 위한 워크플로, 설정 명령, 프롬프트 구조입니다.
Claude Code UI 디자인 가이드
Claude Code에 Oil UI Skill을 설치하고 명확한 브리프, 나란히 놓인 방향 비교 보드, 블라인드 스크린샷 리뷰로 웹사이트, 모바일 앱, UI 모듈을 디자인해 보세요.
Agent 가이드 · OpenAI CodexCodex UI 디자인 가이드
OpenAI Codex에 Oil UI Skill을 설치해 작동하는 상호작용과 실제 뷰포트 검토를 바탕으로 폰트 파운드리, 장애 대응 콘솔, 결제 대시보드, 모바일 앱을 디자인해 보세요.
Agent 가이드 · DeepSeek HarnessDeepSeek Harness UI 가이드
명령 하나로 DeepSeek Harness에 네이티브 dsh-oil-ui 플러그인을 설치하세요. 무료 Oil UI Skill이 포함되고 로컬 Oil UI Pro를 자동 감지하며 DeepSeek 4.1 Flash 갤러리 작품도 살펴 볼 수 있습니다.
Agent 가이드 · Cursor / Windsurf / IDECursor 및 Windsurf UI 가이드
Cursor, Windsurf, Antigravity, Gemini CLI에 Oil UI Skill을 설치해 현재 스택 안에서 새 모듈을 디자인하거나 기존 프로젝트 화면을 개선해 보세요.
시나리오별 인터페이스 플레이북
랜딩 페이지, 대시보드와 데스크톱 워크스페이스, 다중 화면 모바일 앱, 기존 프로젝트 UI 개선을 위한 실용적인 방법입니다.
웹사이트 및 랜딩 페이지 플레이북
카드 세 장으로 구성된 뻔한 AI 랜딩 페이지에서 벗어나 보세요. 히어로 상호작용을 구성하고 하나의 브리프로 여러 방향을 비교하며 1440px와 390px 뷰포트를 확인하는 방법을 알아보세요.
시나리오 플레이북 · 대시보드와 워크스페이스대시보드 및 워크스페이스 플레이북
“KPI 카드 네 개와 차트 세 개”라는 AI 대시보드 상투성에서 벗어나세요. 명확한 위계와 연결된 상태를 갖춘 객체 중심 콘솔과 데스크톱 워크스페이스를 만드는 방법을 알아보세요.
시나리오 플레이북 · 모바일 앱 UI모바일 앱 UI 플레이북
AI Agent가 데스크톱 웹페이지를 좁은 모바일 화면에 억지로 끼워 넣은 듯한 결과물을 만들지 않게 하세요. 나란히 배치한 screens.html 보드와 촉각적인 상태로 390×844 다중 화면 모바일 앱을 디자인하세요.
시나리오 플레이북 · 기존 프로젝트 개선기존 프로젝트 UI 개선
Oil UI로 실제 화면을 진단하고 세 가지 통제된 단계(정리, 레이아웃 업그레이드, 흐름 재구성)로 기존 코드베이스를 개선하며 공유 DESIGN.md를 만드는 방법을 알아보세요.
디자인 방법과 시각 QA
뻔한 AI UI 습관을 제거하고 방향을 나란히 비교하며 실제 뷰포트에서 블라인드 시각 리뷰를 실행하고 적합한 UI 도구를 선택하는 방법입니다.
뻔한 AI UI 개선하기
AI가 만든 웹사이트와 대시보드가 왜 모두 비슷해 보일까요? Oil UI로 eyebrow pill, 왼쪽 강조 테두리, 중첩 카드, 가짜 지표를 제거하는 방법을 알아보세요.
디자인 방법 · 나란히 비교하기나란히 놓는 디자인 방향 비교
하나의 HTML 보드에서 서로 다른 디자인 방향 3가지를 비교하는 것이 초안 하나를 두고 프롬프트를 반복하는 것보다 나은 이유를 알아보세요. Orvo, Atelier Volders, Fonderie Mercier의 다방향 시리즈를 살펴 보세요.
디자인 방법 · 실제 화면 블라인드 리뷰실제 화면 블라인드 리뷰
편집기에서 JSX와 CSS만 검사하면 레이아웃 버그를 놓치는 이유를 알아보세요. Oil UI가 1440px/390px 브라우저 스크린샷, 200% 크롭, 흐린 블록 검사, 블라인드 서브에이전트를 사용하는 방법을 소개합니다.
디자인 방법 · 도구 비교UI 디자인 Skill과 생성기 비교
Agent UI 디자인 Skill(Oil UI 등), 호스팅된 원샷 UI 생성기, 컴포넌트 라이브러리(shadcn/ui, Radix)를 솔직하게 비교하고 함께 사용하는 방법을 알아보세요.
실제 비교 테스트 · 단일 모델 및 익명 시각 리뷰UI 디자인 Skill 4종 실제 비교
Kimi AgentSwarm에서 kimi-1021-preview로 Oil UI, frontend-design, UI UX Pro Max, Impeccable 및 Skill 없음 대조군을 동일한 CommonShelf 과제로 테스트하고 15회 점수, 기능 실패 2회, 모든 데모를 공개합니다.
자주 묻는 질문
Oil UI는 컴포넌트 라이브러리인가요, 템플릿인가요?
Agent가 방법과 워크플로를 읽는 디자인 Skill입니다. 고정된 컴포넌트 라이브러리나 템플릿을 요구하지 않으며 Agent가 프로젝트 제약 조건 안에서 인터페이스를 구현합니다.
같은 Skill을 써도 결과가 다른 이유는 무엇인가요?
사례마다 브리프, 모델, 다듬는 횟수가 다릅니다. 각 사례에는 제작 모델이 표시되며, 작업 기록이 있는 사례에서는 원본 프롬프트도 확인할 수 있습니다. Skill은 모델이 기존 역량을 활용하도록 돕지만 모든 모델에서 같은 디자인 품질을 보장하지는 않습니다.
기존 제품을 개선할 수 있나요?
특정 페이지나 작업에서 시작하세요. 유지할 비즈니스 흐름, 실제 데이터, 기술적 제약 조건을 명시한 다음 디자인 방향을 요청하세요. 하나를 선택한 후에는 특히 기존 폼, 네비게이션, 상태 피드백을 중심으로 전체 작업을 확인하세요.
어떤 코딩 Agent가 Oil UI와 함께 작동하나요?
무료 Skill은 npx skills add oil-oil/oil-ui로 설치하고, Oil UI Pro는 npx github:oil-oil/oil-cli install oil-ui-pro로 설치합니다. 두 버전 모두 Claude Code, OpenAI Codex, Cursor, Windsurf, Antigravity, Gemini CLI에서 작동합니다. DeepSeek Harness에는 dsh plugin --profile web add github:oil-oil/dsh-oil-ui로 네이티브 플러그인을 설치하세요.
AI Agent가 뻔하고 인위적인 UI를 생성하지 않게 하려면 어떻게 해야 하나요?
모델이 백분율을 지어내게 하는 대신 실제 도메인 문구와 가격을 제공하고, 먼저 서로 다른 방향 3가지를 나란히 배치한 HTML 보드에서 비교하세요. 기본 eyebrow pill과 중첩 카드를 제거하고 실제 1440px 및 390px 브라우저 스크린샷으로 블라인드 서브에이전트 리뷰를 실행하세요.
이미 Pro가 있다면 무료 Skill도 필요한가요?
아니요. Pro에는 오픈소스 디자인 방법이 포함됩니다. 둘을 함께 설치하면 같은 요청을 두고 경쟁할 수 있으므로 이미 Pro가 있다면 Pro만 사용하세요.
Pro는 어떻게 구매, 설치, 업데이트하나요?
현재 한국어판 가격은 $9.99이며 한 번 구매로 평생 업데이트됩니다. 구매 후 계정에서 설치하거나 다운로드하거나 Agent에 위의 CLI 명령을 사용하게 하세요. 현재 가격과 결제 방법은 Pro 페이지에서 확인하세요.