Cursor, Windsurf, IDE 코딩 Agent에서 Oil UI 사용하기
많은 개발자는 애플리케이션 코드와 함께 Cursor, Windsurf, Antigravity, Gemini CLI 안에서 인터페이스를 만들고 다듬습니다. Oil UI는 개방형 Skill 형식을 사용하므로 npx skills add oil-oil/oil-ui 명령 하나로 이런 IDE Agent에 동일한 작업 중심 워크플로를 제공합니다. 방향을 탐색하고 현재 스택에서 작동하는 상태를 구현한 다음 렌더링된 스크린샷으로 확인하는 흐름입니다.
핵심 요점
- 하나의 설치 프로그램으로 주요 코딩 Agent를 지원합니다. npx skills add oil-oil/oil-ui를 실행하고 Cursor, Windsurf, Claude Code 또는 Codex를 선택하세요.
- 기존 코드베이스의 화면을 개선할 때는 각 프롬프트를 하나의 페이지나 사용자 흐름으로 한정하고 변경하면 안 되는 props, hooks, routes를 나열하세요.
- 독립형 UI 모듈(업로더, 결제, 구성기)에서는 처음부터 유휴, 활성, 완료, 오류 상태를 구현하도록 Agent에 요청하세요.
- IDE Agent가 로컬 개발 서버를 열고 실제 1440px 및 390px 브라우저 스크린샷을 검사하게 하세요. 코드 diff에만 의존하지 마세요.
npx skills add oil-oil/oil-ui프로젝트 범위 설치(팀과 공유)와 사용자 수준 설치를 모두 지원합니다.
IDE 및 CLI Agent에 Oil UI 설치하기
Cursor의 Agent 사이드바, Windsurf Cascade, Antigravity 또는 터미널 Agent 중 무엇을 사용하든 Oil UI는 같은 디자인 워크플로와 시각 리뷰 체크리스트를 제공합니다.
대화형 Skill 설치 프로그램 실행
프로젝트 루트나 터미널에서 명령을 실행하고 일상적으로 사용하는 코딩 Agent를 선택하세요.
npx skills add oil-oil/oil-ui팀의 일관성을 위해 프로젝트 범위 설치 사용
프로젝트 범위를 선택하면 Skill이 저장소 안에 설치되어 모든 팀원의 IDE Agent가 같은 레이아웃과 리뷰 기준을 따릅니다.
프롬프트에서 Oil UI를 명시적으로 호출
UI 프롬프트를 “Oil UI를 사용해 디자인해 줘...” 또는 “Oil UI를 사용해 이 화면을 개선해 줘...”로 시작해 Agent가 임의로 스타일을 패치하는 대신 디자인 워크플로를 실행하게 하세요.
기존 코드베이스에서 디자인할 때의 네 가지 습관
IDE Agent에서 흔히 발생하는 실패는 백엔드 연결 작업과 전체 시각 리디자인을 하나의 긴 프롬프트에 섞는 것입니다. 관심사를 분리하면 코드와 레이아웃을 모두 깔끔하게 유지할 수 있습니다.
- 한 번에 하나의 독립적인 모듈이나 작업 흐름으로 범위 제한
- 갤러리의 Chute 파일 업로드 모듈이나 KEEB 기계식 키보드 구성기처럼 하나의 모듈을 처음부터 끝까지 다듬은 다음 인접 화면으로 넘어가세요.
- 변경하면 안 되는 데이터 hooks와 핸들러 명시
- 프로덕션 React나 Vue 뷰를 업데이트할 때 Agent에 “기존 폼 상태, API 변경, 경로 매개변수는 그대로 유지하고 레이아웃, 위계, 상태 피드백만 재작업해 줘”라고 말하세요.
- 병합 전에 임시 경로에서 새 방향 비교
- 페이지에 새로운 시각 방향이 필요하면 Agent가 먼저 3가지 옵션을 나란히 렌더링하게 한 다음 선택한 방향을 메인 컴포넌트에 옮기세요.
- 항상 localhost에서 데스크톱과 모바일 너비 확인
- diff를 수락하기 전에 Agent가 실행 중인 개발 서버를 열고 1440px 및 390px 스크린샷을 캡처해 오버플로, 좁은 간격, 깨진 대비를 찾게 하세요.
Cursor 및 Windsurf에서 모듈을 다듬는 재사용 가능한 프롬프트
IDE 채팅에서 대상 컴포넌트 파일을 태그하고 다음 구조를 사용하면 여러 상태를 갖춘 완전한 구현을 얻을 수 있습니다.
Oil UI를 사용해 이 저장소의 [모듈 이름, 예: 파일 공유 업로드 모듈 / 제품 구성기]을 디자인하고 구현해 줘.
- 코드베이스 제약 조건: 기존 [hooks, props, API 타입]을 변경하지 마.
- 필수 상태: 1) 기본 유휴 상태, 2) 활성 드래그/입력 피드백, 3) 진행 및 완료 상태(복사/공유 확인 포함), 4) 검증 또는 한도 오류 상태를 구현해 줘.
- 시각적 절제: 카드 안에 카드를 중첩하거나 장식용 eyebrow pill을 사용하지 마. 타이포그래피 크기, 간격, 명확한 포커스 상태로 위계를 만든 다음 로컬 브라우저에서 확인해 줘.Cursor나 Windsurf에서 기존 컴포넌트 파일을 참조할 때 유용합니다.
작동하는 갤러리 사례와 프롬프트
1440px 또는 390px의 실제 데모를 열어 모델과 프롬프트가 최종 인터페이스를 어떻게 형성했는지 살펴 보세요.
Fieldwork Type
독립 폰트 파운드리
독립 폰트 파운드리의 웹사이트를 만드세요(1440×900에서 시작해 너비 390까지 반응형으로 대응). 첫 화면에는 대표 서체를 배치하고, 방문자가 직접 텍스트를 입력하며 크기, 두께, 너비를 조절할 수 있어야 합니다. 아래에는 패밀리의 웨이트 차트, 문자 세트, 활용 사례와 용도별 라이선스(데스크톱, 웹, 앱)를 배치하고 장바구니에 담을 수 있게 하세요. 서체 테스터와 라이선스 선택 도구가 이 작품의 핵심입니다. 입력에 따라 서체 표본이 바뀌고, 옵션을 고를 때마다 라이선스 가격이 갱신되어야 합니다. 첫 화면, 테스터 패널이 펼쳐진 상태, 라이선스 선택 화면을 디자인하세요.
작품과 프롬프트 살펴 보기 →
Sonar
팀 메시징
30–300인 규모 회사를 위한 데스크톱 메시징 앱을 만드세요(1440×900). 왼쪽에는 채널, 그룹, 다이렉트 메시지를, 중앙에는 진행 중인 대화를 배치합니다. 메시지는 텍스트, 이미지, 파일, 코드 스니펫, 투표, 이모지 반응을 포함합니다. 중국어 인터페이스를 사용하세요. 즉시 반응하는 감각이 이 작품의 핵심입니다. 메시지 전송, 여러 동료가 동시에 입력하는 모습, 한 메시지의 스레드 열기, 다른 사람의 답글과 반응이 실시간으로 나타나는 경험이 모두 부드럽고 무게감 있게 느껴져야 합니다. 이메일 클라이언트나 작업 보드로 만들지 마세요. 활기찬 채널의 일상 대화, 한 메시지에서 스레드를 연 상태, 입력 상자에서 동료를 멘션하고 파일을 끌어 넣어 전송 준비를 마친 상태의 세 화면을 디자인하세요.
작품과 프롬프트 살펴 보기 →
KEEB · 키 오더
기계식 키보드 구성기
사용자가 케이스, 스위치, 키캡을 골라 온라인에서 자신만의 키보드를 커스터마이즈할 수 있는 기계식 키보드 브랜드 웹사이트를 만드세요. 구성기 페이지를 구현하세요.
작품과 프롬프트 살펴 보기 →
Chute
파일 업로드 모듈
파일 공유 도구의 업로드 모듈을 만드세요(데스크톱 1440×900, 모듈을 중앙에 배치). 파일을 끌어 넣고 업로드 진행률을 표시한 뒤 업로드가 완료되면 만료일과 비밀번호가 있는 공유 링크를 생성하세요. 파일 드롭 피드백, 여러 파일의 동시 진행률, 링크를 복사하는 순간을 만족스럽게 표현하세요. 파일을 끌어 넣는 상태, 업로드 중, 공유 가능한 완료 상태의 세 화면을 캡처하세요.
작품과 프롬프트 살펴 보기 →Oil UI Pro로 기존 프로젝트 개선과 컴포넌트 완성도 높이기
Oil UI Pro는 기존 코드베이스를 위한 전용 워크플로를 추가합니다. 주석이 달린 단일 페이지 진단, 3단계 개선 시스템(정리 / 업그레이드 / 흐름 재구성 + DESIGN.md), 단일 컴포넌트의 세밀한 다듬기가 포함됩니다.
npx github:oil-oil/oil-cli install oil-ui-pro자주 묻는 질문
Cursor나 Windsurf에서 Oil UI를 사용할 때 어떤 모델을 선택해야 하나요?
새로운 시각 방향을 탐색하거나 복잡한 페이지를 재구성할 때는 Claude Opus나 최첨단 GPT/Codex 모델을 사용하세요. 방향이나 DESIGN.md가 정해진 뒤에는 Claude Sonnet과 더 빠른 모델이 관련 화면 전반에 상태를 적용하는 데 적합합니다.
Oil UI는 shadcn/ui, Radix, Tailwind와 함께 사용할 수 있나요?
네. 기초 라이브러리는 접근성 있는 컨트롤을 제공하고 Oil UI는 페이지 구성, 시각 위계, 방향 탐색, 인위적인 요소 제거를 담당합니다. 둘은 서로를 잘 보완합니다.
Agent가 기존 클릭 핸들러나 폼 검증을 망가뜨리지 않게 하려면 어떻게 해야 하나요?
프롬프트에 유지할 핸들러를 나열하고 Oil UI의 점검 단계를 따르세요. 마무리 전에 브라우저에서 주요 흐름을 실제로 클릭하고 잘못된 폼 제출도 발생시켜 보세요.
팀에서 같은 저장소에 Cursor와 Claude Code / Codex를 함께 사용할 수 있나요?
네. npx skills add oil-oil/oil-ui를 실행할 때 관련 Agent를 모두 선택하거나 공유 DESIGN.md를 커밋해 모든 도구가 같은 디자인 규칙을 읽게 하세요.