oil-oil/oil-ui

해결하는 문제

Oil UI는 AI가 생성하는 사용자 인터페이스 디자인의 한계를 극복하기 위해 구조화된 디자인 방법론과 도구 세트(Agent Skill 형태로 제공)를 제공합니다. 카테고리 분석, 톤 설정, 시각적 차별화라는 엄격한 프로세스를 강제함으로써, AI가 생성한 레이아웃이 지나치게 일반적이거나 단조롭거나 반복적인 문제를 해결하고 고품질의 전문적인 UI 디자인을 생성합니다.

작동 방식

이 프로젝트는 AI Agent에 설치할 수 있는 "Skill"로 구현되었습니다. Agent가 8단계 디자인 프로세스를 수행하도록 안내합니다:

1. 카테고리 분석 (Category Analysis): 상위 경쟁사를 분석하여 무엇을 채택하고 무엇을 변경할지 결정합니다.
2. 톤 설정 (Tone Setting): "프리미엄"과 같은 추상적인 용어를 타이포그래피, 여백, 색상에 대한 구체적인 결정으로 변환합니다.
3. 구체적인 시작점 (Concrete Starting Points): 모호한 형용사 대신 특정 소재, 환경 또는 캐릭터를 사용합니다.
4. 첫 화면 전략 (First-Screen Strategy): 페이지가 탐색용, 작업용, 설득용인지에 따라 초기 뷰를 맞춤 설정합니다.
5. 차별화 확인 (Differentiation Check): 스켈레톤, 폰트, 색상 및 시각적 요소를 비교하여 다양한 방향성을 확보합니다.
6. 기억에 남는 순간 (Memorable Moments): 영향력이 큰 한두 가지 상호작용이나 페이지에 노력을 집중합니다.
7. 사용자 선택 (User Selection): 비교 페이지에서 여러 옵션을 제시하여 사용자가 선택할 수 있도록 합니다.
8. 최종 정제 (Final Refinement): 불필요한 요소를 제거하는 "뺄셈" 단계를 수행합니다.

대상 사용자

AI Agent를 사용하여 웹사이트, 앱, 디지털 제품을 구축하면서 모든 디자인 작업을 수동으로 하지 않고도 전문적인 UI/UX 결과를 얻고자 하는 사용자를 위해 설계되었습니다.

주요 특징

• Agent 통합: npx skills add를 통해 설치하여 AI Agent의 디자인 기능을 향상시킵니다.
• 스타일 비교 페이지: 다양한 디자인 방향의 미리보기(HTML 또는 이미지)를 나란히 생성하여 쉽게 선택할 수 있습니다.
• 멀티 디바이스 미리보기: 데스크톱과 모바일 뷰 간 전환을 지원하여 실제 레이아웃 크기를 확인할 수 있습니다.
• 포괄적인 디자인 로직: 스크린샷 복원부터 브랜드에 맞춘 다듬기, 독립적인 검토 주기까지 모든 과정을 다룹니다.