oil-oil/oil-ui

어떤 프로젝트인가요?

핵심 기능

• 01같은 제품을 위한 시각적으로 뚜렷이 구분되는 여러 디자인 방향을 탐색합니다.
• 02데스크톱과 모바일 화면을 지원하는 비교 페이지에서 여러 방향을 나란히 보여줍니다.
• 03사용자 피드백을 바탕으로 선택한 방향을 다듬습니다.
• 04데스크톱과 모바일 스크린샷으로 완성된 페이지를 확인합니다.
• 05모바일 레이아웃을 포함해 스크린샷을 바탕으로 페이지를 재현할 수 있습니다.

활용 사례

• 새 웹사이트나 앱의 디자인 방향을 하나로 정하기 전에 여러 방향을 탐색할 때.
• AI 코딩 에이전트로 랜딩 페이지나 대시보드를 리디자인할 때.
• 모바일 레이아웃을 추가해 스크린샷에 나온 기존 페이지를 재현할 때.

빠른 시작

1. 1

   스킬을 설치합니다

   npx skills add oil-oil/oil-ui
2. 2

   에이전트에게 제품의 디자인 방향을 탐색해 달라고 요청합니다

사용 전 알아둘 점

• !오픈 소스 버전에는 사용성 검사, 대시보드 레이아웃, 효과 등의 Pro 기능이 포함되지 않습니다.
• !버전 확인을 실행하려면 Python 3가 필요하며, OIL_NO_UPDATE_CHECK=1로 비활성화하지 않는 한 온라인에서 공개 버전 목록을 읽어옵니다.

토픽

자주 묻는 질문

oil-ui은(는) 무엇인가요?

여러 디자인 방향을 비교하고 실제 스크린샷을 바탕으로 다듬는 AI 에이전트용 인터페이스 디자인 스킬입니다. Oil UI는 Claude Code, Codex 같은 에이전트용 오픈소스 스킬입니다. 웹사이트, 앱, 대시보드 또는 컴포넌트 디자인을 요청받으면 먼저 제품 카테고리를 파악하고 비슷한 제품을 살펴본 뒤, 전반적인 분위기를 정하고 이를 타이포그래피, 여백, 색상에 관한 구체적인 선택으로 발전시킵니다.

oil-ui은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

oil-ui은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

oil-ui은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. oil-ui의 마지막 커밋은 2026년 10월 18일입니다.

oil-ui은(는) 어디에 사용할 수 있나요?

새 웹사이트나 앱의 디자인 방향을 하나로 정하기 전에 여러 방향을 탐색할 때. AI 코딩 에이전트로 랜딩 페이지나 대시보드를 리디자인할 때. 모바일 레이아웃을 추가해 스크린샷에 나온 기존 페이지를 재현할 때.

oil-ui는 어떻게 설치하나요?

스킬을 설치합니다: npx skills add oil-oil/oil-ui 에이전트에게 제품의 디자인 방향을 탐색해 달라고 요청합니다

oil-ui은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/oil-oil/oil-ui