DeepSeek Harness UI 디자인 가이드: 네이티브 dsh-oil-ui 플러그인과 사례
DeepSeek Harness로 인터페이스를 만든다면 명령 하나로 네이티브 dsh-oil-ui 플러그인을 설치할 수 있습니다. 오픈소스 Oil UI 워크플로가 기본 포함되며 로컬에 Oil UI Pro가 설치되어 있으면 자동으로 감지합니다. 갤러리에는 GPT 모델에 사용한 것과 완전히 같은 브리프로 DeepSeek 4.1 Flash가 만든 작품도 나란히 수록되어 있습니다.
핵심 요점
- dsh plugin --profile web add github:oil-oil/dsh-oil-ui를 실행해 DeepSeek Harness에서 Oil UI를 네이티브로 활성화하세요.
- dsh-oil-ui에는 무료 Skill이 포함되며 로컬 머신에 설치된 Oil UI Pro를 감지하면 워크플로가 자동으로 업그레이드됩니다.
- 같은 브리프로 만든 DeepSeek 4.1 Flash 작품과 GPT-6.1 Sol 작품(Vesper, Atelier Volders, Fonderie Mercier, Sonar)을 직접 비교해 보세요.
- 빠른 모델에 구체적인 도메인 규칙, 실제 숫자, 명시적인 상태 목록을 제공하면 첫 결과의 레이아웃 안정성이 눈에 띄게 좋아집니다.
dsh plugin --profile web add github:oil-oil/dsh-oil-ui플러그인 저장소: https://github.com/oil-oil/dsh-oil-ui(무료 Skill 포함, 로컬 Oil UI Pro 자동 감지).
dsh-oil-ui 설치와 Oil UI Pro 연결
DeepSeek Harness는 프로필 기반 플러그인을 사용합니다. 네이티브 dsh-oil-ui 패키지는 web 프로필에 직접 연결되므로 프로젝트마다 Skill 파일을 수동으로 복사할 필요가 없습니다.
DeepSeek Harness web 프로필에 dsh-oil-ui 추가
터미널에서 플러그인 명령을 실행하세요. DeepSeek Harness가 저장소를 가져와 오픈소스 Oil UI 워크플로를 즉시 활성화합니다.
dsh plugin --profile web add github:oil-oil/dsh-oil-ui(선택) 자동 감지를 위해 Oil UI Pro를 로컬에 설치
같은 머신에 oil-cli로 Oil UI Pro를 설치하면 dsh-oil-ui가 로컬 Pro 설치를 자동으로 감지해 추가 플러그인 플래그 없이 전체 Pro 방법을 활성화합니다.
npx github:oil-oil/oil-cli install oil-ui-pro구체적인 브리프와 목표 뷰포트로 시작
제품 맥락, 목표 뷰포트(1440×900 또는 390×844), 테스트 가능한 세 가지 상태를 전달해 Agent가 방향을 비교하고 실제 스크린샷을 검사하게 하세요.
동일 브리프 비교: 갤러리 속 DeepSeek 4.1 Flash
엔지니어링 팀이 흔히 묻는 질문은 DeepSeek 4.1 Flash처럼 빠르고 비용 효율적인 모델이 구조화된 UI Skill과 함께 사용할 때 더 큰 최첨단 모델과 비교해 어떤 결과를 내는지입니다.
비교를 구체적으로 하기 위해 갤러리에는 DeepSeek 4.1 Flash와 GPT-6.1 Sol에 완전히 같은 작업 브리프(TASK.md)를 제공한 여러 쌍이 포함되어 있습니다. 두 실제 데모를 열고 각 모델이 타이포그래피, 컨트롤, 레이아웃을 어떻게 처리했는지 살펴 볼 수 있습니다.
| 제품 브리프 | DeepSeek 4.1 Flash 작품 | 대응하는 GPT 작품 | 실제 페이지에서 비교할 점 |
|---|---|---|---|
| Atelier Volders(겐트의 오크 스툴 공방) | Atelier Volders · The Wedged Oak (volders-wedge) | Grain & Tenon (volders-grain) / River Timber (volders-hearth) | 스톡 사진 없이 스툴 높이 3가지(€240–€310)와 오크 마감 3가지를 실시간 전환 |
| Fonderie Mercier(청동 종 파운드리) | Fonderie Mercier · The Tuning Sheet (mercier-bell) | Bronze, with a Voice (mercier-voice) / Eighteen Bells (mercier-pour) | 기본 주파수와 배음 감쇠 곡선을 듣는 인터랙티브 종 타격과 배치 예약 |
| Vesper(API 사용량 결제 콘솔) | Vesper · Settlement Ledger (vesper-ledger) | Vesper (vesper, GPT 6.1 Sol) | 임계값 필터링, 실패한 인보이스 복구 타임라인, 명령 팔레트를 갖춘 1440×900 결제 콘솔 |
| Sonar(30~300명 팀용 메시징) | Sonar · Signal Room (sonar-desk) | Sonar (chat2, GPT 6.1 Sol) | 세 가지 상태의 데스크톱 메시징 워크스페이스: 활발한 채널, 열린 스레드, 파일 드롭 작성 상태 |
DeepSeek 4.1 Flash 같은 빠른 모델을 위한 프롬프트 팁
디자인 Skill은 모델이 위계를 구성하고 일반적인 습관을 피하도록 돕지만 결과의 한계는 여전히 모델 자체 역량에 좌우됩니다. 다음 세 가지 습관은 빠른 모델이 첫 실행에서 더 깔끔한 결과를 만들도록 돕습니다.
- 실제 숫자와 도메인 제약 제공
- “월별 배치당 스툴 24개, 높이는 32 cm / 45 cm / 62 cm의 세 가지”처럼 정확한 수치는 표, 선택기, 배지에 구체적인 기준을 제공합니다.
- 스크린마다 핵심 컨트롤 하나를 지정
- Fonderie Mercier의 음향 조율 표나 Tempo · A Year in Dots의 도트 매트릭스 타임라인처럼 페이지에서 가장 중요한 인터랙션 하나를 강조하세요.
- 항상 브라우저 스크린샷 점검 실행
- 빠른 모델은 좁은 너비에서 텍스트 줄 바꿈이나 컨테이너 오버플로를 놓치기도 합니다. 렌더링된 페이지를 1440px과 390px로 캡처하면 이런 문제를 한 번에 찾을 수 있습니다.
Oil UI를 사용해 [브랜드 이름, 예: 두 사람이 운영하는 공방]의 웹사이트를 디자인하고 구현해 줘(1440×900 데스크톱에서 390px 모바일까지).
- 제품 및 옵션: [정확한 가격이 있는 크기 옵션 3가지]와 [마감 옵션 3가지]를 갖춘 대표 제품 하나에 집중해 줘. 방문자가 크기와 마감을 실시간으로 전환하고 사양과 가격 업데이트를 볼 수 있게 해 줘.
- 필수 섹션: 인터랙티브 구성기, 제작 과정 타임라인, 배치 스탬프 상세, 현재 배치 예약 폼.
- 전달물: 스톡 사진 대신 타이포그래피, 레이아웃, 맞춤 SVG/canvas 일러스트를 사용해 줘. 구성기 상태 변화와 모바일 레이아웃을 브라우저에서 확인해 줘.dsh-oil-ui 플러그인을 추가한 다음 DeepSeek Harness에서 실행하세요.
작동하는 갤러리 사례와 프롬프트
1440px 또는 390px의 실제 데모를 열어 모델과 프롬프트가 최종 인터페이스를 어떻게 형성했는지 살펴 보세요.
Atelier Volders · 쐐기로 맞춘 참나무
수제 가구 공방 웹사이트
벨기에 겐트 Korenlei 14에 있는 2인 목공 공방 Atelier Volders의 웹사이트를 만드세요(1440×900에서 시작해 너비 390까지 반응형 대응). 영어 인터페이스를 사용합니다. 이 공방은 3년간 자연 건조한 목재를 손으로 선반 가공하고 쐐기를 박아 만든 세 다리 참나무 스툴 De Drievoet 단 한 가지만 제작하며, 매월 한 배치로 24개를 생산합니다. 세 가지 높이(32 cm 난로용 낮은 스툴 €240, 45 cm 식사 및 책상용 스툴 €270, 물푸레나무 발받침 링이 있는 62 cm 카운터 스툴 €310)와 세 가지 마감(비누로 문지른 원목 참나무, 훈증 다크 참나무, 끓인 아마인유와 밀납)을 제공합니다. 방문자는 높이와 마감을 실시간으로 전환하고 6주 제작 과정, 바닥면에 인두로 찍은 배치 인장, 토요일 오픈 시간을 확인하고 현재 배치의 스툴을 예약할 수 있어야 합니다. 제품 사진은 제공되지 않습니다.
작품과 프롬프트 살펴 보기 →
Fonderie Mercier · 조율 기록지
가족 청동 종 주조 공방 웹사이트
리옹의 손 강변 Quai Saint-Vincent 28에 있는 3대째 가족 종 주조 공방 Fonderie Mercier의 웹사이트를 만드세요(1440×900에서 시작해 너비 390까지 반응형 대응). 영어 인터페이스를 사용합니다. 구리 78% / 주석 22%의 종청동과 다져 만든 강모래 주형을 사용해 대표 작품 Le Bourdon de Table 한 가지만 주조합니다. 선반으로 정확한 음높이에 조율하며 매월 한 번 18개의 고정 로트로 생산합니다. 세 가지 크기와 음높이(Ø 72 mm 탁상종 A4 440Hz €180, Ø 96 mm 정원종 F#4 370Hz €240, 단조 철 브래킷이 있는 Ø 124 mm 벽종 D4 293.7Hz €340)와 세 가지 파티나 마감(선반 가공 생청동, 훈제 청동, 녹청)을 제공합니다. 방문자는 각 음높이를 듣고 크기와 마감을 전환하며 5단계 주조 과정, 냉간 각인 크라운 기록, 금요일 오픈 시간을 살피고 다음 월간 주조를 위한 예약 전표를 준비할 수 있어야 합니다. 제품 사진은 제공되지 않습니다.
작품과 프롬프트 살펴 보기 →
Vesper · 정산 원장
API 사용량 과금 콘솔
AI 및 개발자 도구 팀을 위한 API 사용량 과금 및 고객 인보이스 콘솔을 1440×900 데스크톱 뷰포트의 영어 인터페이스로 디자인하세요. 사용자는 구독 플랜과 실시간 API 사용량을 관리하고 이번 주기의 청구 금액과 인보이스 예외를 검토하며 상태와 사용량 임계값으로 고객이나 인보이스를 필터링하고 레코드를 열어 세부 항목, 결제 및 Webhook 타임라인, 이벤트 페이로드를 확인할 수 있어야 합니다. 결제 재시도, 할당량 조정, 인보이스 다운로드를 포함하세요. 일상 작업 공간(수익 및 사용량 추세, 고객 또는 인보이스 목록, 실시간 필터링), 예외 인보이스 상세(사용량 분해, 상태 타임라인, 복구 동작), 빠른 명령 팔레트의 세 가지 핵심 상태를 구현하세요. 오프라인에서 실행 가능한 `index.html`을 전달하고 1440×900, DPR=2로 `shots/desktop.png`, `shots/state-1.png`, `shots/state-2.png`를 캡처하세요.
작품과 프롬프트 살펴 보기 →
Sonar · 시그널 룸
팀 메시징
30–300인 규모 회사를 위한 데스크톱 메시징 앱을 만드세요(1440×900). 왼쪽에는 채널, 그룹, 다이렉트 메시지를, 중앙에는 진행 중인 대화를 배치합니다. 메시지는 텍스트, 이미지, 파일, 코드 스니펫, 투표, 이모지 반응을 포함합니다. 중국어 인터페이스를 사용하세요. 즉시 반응하는 감각이 이 작품의 핵심입니다. 메시지 전송, 여러 동료가 동시에 입력하는 모습, 한 메시지의 스레드 열기, 다른 사람의 답글과 반응이 실시간으로 나타나는 경험이 모두 부드럽고 무게감 있게 느껴져야 합니다. 이메일 클라이언트나 작업 보드로 만들지 마세요. 활기찬 채널의 일상 대화, 한 메시지에서 스레드를 연 상태, 입력 상자에서 동료를 멘션하고 파일을 끌어 넣어 전송 준비를 마친 상태의 세 화면을 디자인하세요.
작품과 프롬프트 살펴 보기 →dsh-oil-ui에서 Oil UI Pro 자동 감지
DeepSeek Harness에서 이미 dsh-oil-ui를 사용하고 있다면 아래 oil-cli 설치 프로그램만 실행하면 Oil UI Pro로 업그레이드할 수 있습니다. 플러그인이 로컬 Pro 설치를 자동으로 감지해 기존 프로젝트 개선, 10가지 워크스페이스 원형, 여러 차례의 블라인드 리뷰를 활성화합니다.
npx github:oil-oil/oil-cli install oil-ui-pro자주 묻는 질문
dsh-oil-ui와 npx skills add oil-oil/oil-ui의 차이는 무엇인가요?
dsh-oil-ui는 DeepSeek Harness 전용으로 만든 네이티브 플러그인 패키지이며 dsh plugin --profile web add로 설치합니다. Claude Code, Codex, Cursor, Windsurf 및 다른 Agent에는 npx skills add oil-oil/oil-ui를 사용하세요.
DeepSeek 4.1 Flash는 Oil UI와 함께 어떤 인터페이스를 잘 다루나요?
갤러리 테스트에서는 공예 및 기술 제품 웹사이트(The Wedged Oak, The Tuning Sheet, Archon · The Open Kernel), 구조화된 콘솔(Vesper · Settlement Ledger, Sonar · Signal Room), 편집형 모바일 요약(Tempo · A Year in Dots)에서 좋은 결과를 보였습니다.
Oil UI Pro를 구매한 뒤 dsh-oil-ui를 제거해야 하나요?
아니요. DeepSeek Harness에서 dsh-oil-ui를 활성화해 두세요. 로컬 Oil UI Pro 설치를 자동으로 감지하고 요청을 Pro로 전달합니다.
DeepSeek 갤러리 작품에 사용된 정확한 프롬프트는 어디에서 읽을 수 있나요?
갤러리에서 위에 나엘된 DeepSeek 작품을 열고 뷰어 표시줄의 프롬프트 토글을 클릭하면 전체 브리프와 해당 작품을 만든 모델을 확인할 수 있습니다.