45 · 디자인 사례Claude Code와 Codex를 위한 웹사이트 디자인 사례 및 프롬프트
Codex와 Oil UI Skill로 만든 웹사이트, 랜딩 페이지, 이커머스 UI를 살펴 보세요. 실제 데모를 열어 확인하고 원본 프롬프트를 Claude Code, Codex 또는 다른 Agent에서 재사용할 수 있습니다.
106 · 디자인 사례
형식과 작업별 UI 디자인 영감
인터페이스 형식이나 구체적인 디자인 작업별로 작동하는 Oil UI 갤러리 사례를 둘러보세요. 원본 데모를 열고 접근 방식을 비교하며 그 뒤의 프롬프트를 살펴 보세요.
인터페이스 형식별
45 · 디자인 사례
33 · 디자인 사례Claude Code와 Codex를 위한 모바일 앱 디자인 사례 및 프롬프트
학습과 여행부터 건강, 일상 도구까지 Codex, Claude Code, Oil UI Skill로 만든 모바일 앱 인터페이스를 살펴 보세요. 여러 화면으로 구성된 데모를 탐색하고 원본 프롬프트를 재사용할 수 있습니다.
18 · 디자인 사례Claude Code와 Codex를 위한 데스크톱 앱 디자인 사례 및 프롬프트
Codex와 Oil UI Skill로 만든 데스크톱 앱, 편집기, 워크스페이스를 살펴 보세요. 데모를 직접 사용하고 원본 프롬프트를 재사용해 복잡한 정보, 목록, 캔버스, 다중 패널 레이아웃을 연구해 보세요.
10 · 디자인 사례Claude Code와 Codex를 위한 UI 컴포넌트 사례 및 프롬프트
시각화와 제어 패널을 포함해 Codex, Claude Code, Oil UI Skill로 만든 인터랙티브 컴포넌트와 UI 모듈을 살펴 보세요. 데모를 직접 사용하고 원본 프롬프트를 재사용할 수 있습니다.
디자인 작업별
5 · 디자인 사례제품 구성기 디자인: 키보드, 신발, 맞춤 팔찌 사례
기계식 키보드, 수공 팔찌, 러닝화, 가구의 실제 구성기를 살펴 보세요. 옵션, 실시간 미리보기, 주문 요약이 어떻게 함께 작동하는지 확인하고 원본 브리프도 살펴 볼 수 있습니다.
5 · 디자인 사례폼 및 다단계 흐름 디자인: 결제, 가입, 예약
결제, 온볼링, 예약, 업로드의 전체 흐름을 따라가 보세요. 입력란이 깔끔하게 나엘되어 있는지만 확인하지 말고 필드 그룹, 단계 전환, 입력 검증, 실수 후 복구까지 살펴 보세요.
7 · 디자인 사례인터랙티브 학습 디자인: 수학, 과학, 체스, 코딩
원의 기하학, 회로, 분자 구조, 체스 전술을 직접 조작하는 활동으로 바꾼 수업을 살펴 보세요. 시연, 단계별 연습, 구체적인 피드백이 어떻게 이어지는지 비교해 보세요.
5 · 디자인 사례금융 UI 디자인: 뱅킹, 경비, 결제 워크스페이스
디지털 뱅킹, 개인 예산 관리, 영수증 대사, 구독 수익, API 결제를 비교해 보세요. 서로 다른 금융 작업에서 금액 위계, 거래 근거, 예외 처리, 데이터 추출 흐름을 살펴 보세요.
7 · 디자인 사례미디어 UI 디자인: 동영상 검토, 편집, 음악 재생
동영상 검토, 타임라인 편집, 스토리보드, TV 스트리밍, 팟캐스트, 음악 플레이어를 살펴 보세요. 이미지, 재생 컨트롤, 댓글, 대기열이 제한된 공간을 어떻게 나눠 쓰는지 비교해 보세요.
4 · 디자인 사례건강 및 피트니스 앱 디자인: 생리 주기, 수면, 트레이닝
생리 주기 추적, 수면 루틴, 러닝 회복, 수영 트레이닝을 살펴 보세요. 모든 화면을 대시보드로 만들지 않으면서 민감한 건강 데이터, 예측, 잦은 기록의 정보 위계와 어조를 어떻게 다루는지 확인하세요.