Oil UI — 인터페이스 디자인·리뷰 워크플로

무엇을 해주나

• 페이지 품류·첫 화면의 주인공·브랜드에서 출발해 디자인 방향(디자인 노스스타) 을 먼저 정하고, 여러 방향을 카드로 정리해 비교합니다.
• 여러 스타일을 한 화면에서 나란히 보는 비교 페이지를 생성기로 만들어 사용자가 직접 고르게 합니다.
• 타이포·색·여백·아이콘·소재·모션 같은 시각 언어를 참조 문서(references/*)로 나눠 필요한 것만 읽어 적용합니다.
• 실제 뷰포트에서 실행·스크린샷·녹화로 증거를 남기고, 맥락 없는 독립 리뷰어에게 10점 만점 평가를 맡기는 절차까지 규정합니다.
• 마지막에 "뺄셈" 라운드(장식·중복 텍스트 제거), 100%/200% 확대 확인, 납품 설명서 항목까지 체크리스트로 강제합니다.

이런 분께 추천

• 프런트엔드 개발자인데 디자인 감각을 체계적으로 보완하고 싶은 분
• 랜딩 페이지·브랜드 페이지를 자주 만들어 스크롤 내러티브와 모션까지 챙겨야 하는 분
• 기존 제품의 UI 리뉴얼·시각 정리·UI 리뷰를 반복적으로 수행하는 팀

활용 예시

1. "SaaS 랜딩 페이지 첫 화면을 3가지 방향으로 뽑아 비교 페이지로 보여줘" → 방향 카드 + 나란히 비교 페이지 생성 후 선택 유도.
2. "이 스크린샷과 똑같이 재현해줘" → 참조 이미지를 시각 기준선으로 삼고 새 스타일 발산 없이 정밀 복원.
3. "기존 대시보드 UI를 다듬어줘" → 기준선 스크린샷 확보 → 디자인 변수·공용 컴포넌트 재사용 → 리뷰 1회 → 변경·미변경 사항 정리 납품.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/oil-oil/oil-ui/HEAD/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 oil-oil/oil-ui 의 SKILL.m 폴더를 내 ~/.claude/skills/oil-ui/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.