DeepSeek Harness로 디자인하기.
DeepSeek Harness는 저장소를 읽고, 실제 UI 코드를 편집하고, 명령을 실행하고, 프로젝트 지침을 불러오며, 반복 작업 사이에도 세션을 유지할 수 있으므로 랜딩 페이지, 제품 인터페이스, 대시보드, 프런트엔드 프로토타입을 구축할 수 있습니다. 다만 시각적 감각 자체를 제공하지는 않습니다. 유용한 디자인 작업에는 여전히 브랜드 규칙, 참고 자료, 도구, 권한, 결과를 렌더링하고 확인하는 루프가 필요합니다.
인터페이스 작업에서는 요구사항과 승인 루프를 명확히 만드세요. 기본 DeepSeek 라우트는 텍스트만 지원하므로 코드 및 명세 기반 워크플로가 가장 신뢰할 수 있는 기준입니다. 이미지 입력을 지원한다고 명시된 모델 라우트를 선택한 후에만 스크린샷을 첨부하세요.
그래도 모델에는 시각적 방향이 필요합니다. 이를 제공하는 가장 간단한 방법은 DeepSeek Harness를 Open Design에 연결하는 것입니다. Open Design은 디자인 시스템, 프런트엔드 스킬, 결과물 미리보기, 검토 화면을 제공하고 dsh는 코딩 작업을 수행합니다. 이 가이드는 공식 [DeepSeek Harness 제품 페이지](https://www.deepseek.com/harness/)와 [소스 저장소](https://github.com/deepseek-ai/deepseek-harness)에서 완성된 인터페이스까지 이 워크플로를 설명합니다.
DeepSeek Harness로 디자인할 수 있나요?
DeepSeek Harness는 저장소를 읽고, 실제 UI 코드를 편집하고, 명령을 실행하고, 프로젝트 지침을 불러오며, 반복 작업 사이에도 세션을 유지할 수 있으므로 랜딩 페이지, 제품 인터페이스, 대시보드, 프런트엔드 프로토타입을 구축할 수 있습니다. 다만 시각적 감각 자체를 제공하지는 않습니다. 유용한 디자인 작업에는 여전히 브랜드 규칙, 참고 자료, 도구, 권한, 결과를 렌더링하고 확인하는 루프가 필요합니다.
- 지속적인 디자인 컨텍스트: 기본 지침 로더는 프로젝트 계층에서 `AGENTS.md`와 `CLAUDE.md`를 읽습니다. 모든 실행에서 참조할 수 있도록 토큰, 컴포넌트 규칙, 반응형 중단점, 검토 기준을 이 파일에 기록하세요.
- 재사용 가능한 스킬: 로컬 스킬은 `.dsh/skills` 또는 `.agents/skills` 아래에 둘 수 있습니다. 프런트엔드 스킬에는 각 UI 작업을 처음부터 시작하지 않도록 정확한 요구사항, 체크리스트, 예시, 스크립트를 패키징할 수 있습니다.
- 작업에 따른 프로바이더 선택: 웹 UI에서는 DeepSeek, Anthropic이나 OpenAI 같은 카탈로그 프로바이더, 사용자 지정 OpenAI 호환 엔드포인트를 설정할 수 있습니다. 스크린샷 입력에는 이미지 지원이 명시된 라우트를 사용하고, 텍스트·코드·DOM·명세 기반 작업에는 네이티브 DeepSeek 라우트를 사용하세요.
모든 에이전트에 동일하게 적용되는 중요한 한계가 있습니다. 조합 가능성이 곧 디자인 감각은 아닙니다. 타이포그래피, 간격, 컴포넌트, 인터랙션에 대한 세심한 제약이 없으면 런타임은 평범한 결과물을 충실하게 자동 생성할 뿐입니다. Open Design의 역할은 이러한 디자인 입력을 제공하고 체계화하는 것입니다.
1단계: DeepSeek Harness 설치 및 구성
먼저 DeepSeek Harness가 단독으로 작동하는지 확인하세요. 테스트된 dsh 릴리스를 설치하고 로컬 웹 UI를 열어 API 키와 모델을 구성한 다음 Open Design을 실행하세요. 개발자 프리뷰에는 Node.js `^22.19.0` 또는 `>=24.0.0`이 필요합니다.
# Open Design currently tests DeepSeek Harness 0.1.0-rc.6
# Requires Node.js ^22.19.0 or >=24.0.0
npm install -g @deepseek-ai/[email protected]
# Verify the local executable
dsh --version
# Start the local Web UI and configure a provider and model
dsh web
# Open http://127.0.0.1:3080- Harness 웹 UI 열기: `dsh web`을 실행하세요. 일반적으로 `http://127.0.0.1:3080`이 열립니다. 브라우저가 열리지 않으면 터미널에 표시된 주소를 복사해 그 주소를 그대로 사용하세요.
- DeepSeek API 키 추가: 프리뷰 안내를 확인하고 계속한 다음 메시지가 나타나면 키를 저장하거나 적용하세요. 입력 화면이 나타나지 않으면 Settings → Models → DeepSeek → API Key를 여세요. `DEEPSEEK_API_KEY=...`나 따옴표가 아니라 키만 붙여 넣어야 합니다. 변경 사항은 즉시 적용되므로 `dsh web`을 다시 시작할 필요가 없습니다. 필요하면 DeepSeek Platform에서 키를 만드세요.
- 모델을 확인한 뒤 설정 UI 닫기: DeepSeek 프로바이더가 구성된 것으로 표시되고 해당 모델이 선택기에 나타나야 합니다. `MISSING_CREDENTIAL`이 표시되면 DeepSeek 카드를 다시 열고 키를 다시 저장하세요. 테스트 프롬프트가 작동하면 `Ctrl+C`를 누르세요. Open Design을 사용하는 동안 `dsh web`을 계속 실행할 필요는 없습니다.
DeepSeek Harness는 프로바이더 자격 증명을 쓰기 전용 비밀 값으로 저장합니다. UI는 키가 구성되었는지 알려 줄 수 있지만 평문 키를 읽거나 표시할 수는 없습니다. Open Design은 키를 Open Design으로 복사하지 않고 사용자가 설치한 dsh와 해당 모델 구성을 재사용합니다. 안정적인 워크플로를 위해 dsh를 테스트된 `0.1.0-rc.6` 릴리스로 고정하세요. 상위 프로젝트의 자격 증명 동작은 공식 프로바이더 가이드를 참고하세요.
2~5단계: DeepSeek Harness를 Open Design에 연결
dsh가 로컬에서 작동하면 나머지는 Open Design에서 진행합니다. DeepSeek Harness 연동은 Open Design 0.19.1 이상에서 사용할 수 있습니다.
- 2 · Open Design 0.19.1 이상 다운로드: Open Design 다운로드 페이지에서 최신 데스크톱 빌드를 받아 설치하고 앱을 실행하세요.
- 3 · DeepSeek Harness 감지: Settings → Models & providers → Local CLI를 열고 Rescan을 선택하세요. 설치 중 이미 열려 있었다면 Open Design을 다시 시작하거나 다시 스캔하세요. Open Design이 1단계의 `dsh` 실행 파일을 찾으면 DeepSeek Harness 카드가 표시됩니다.
- 4 · Open Design 프로필 연결: DeepSeek Harness 카드를 선택하세요. ‘Connection setup required’가 표시되면 ‘Install and select’를 확인합니다. Open Design은 자체 구성 요소를 검증하고 dsh에 해당 구성 요소를 `open-design` 프로필에 설치하도록 요청한 다음, 다시 스캔하고 연결을 테스트합니다.
- 5 · 디자인 작업 시작: 카드에 Harness 버전과 ‘Synced from CLI’가 표시되는지 확인한 다음 Test를 클릭하세요. 테스트를 통과하면 프로젝트를 열거나 만들고 DeepSeek Harness와 동기화된 모델을 선택한 뒤 디자인 요청을 보내세요.
이제 연결이 완료되었습니다. UI와 `od agent setup deepseek-harness --json`은 같은 로컬 설정 경로를 사용합니다. 실행할 때마다 `dsh --profile open-design --stdio`가 시작되며, Harness는 이후 턴을 위해 세션 ID를 유지합니다.
Create a polished product landing page in this workspace.
Use DESIGN.md, AGENTS.md, and the installed frontend skill as the visual contract.
Reuse the project tokens and components; include desktop and mobile states.
Run the app, inspect the rendered result, fix visible spacing and hierarchy issues,
and leave the final HTML and assets in the project for Open Design to preview.
역할 구분은 간단합니다. Harness는 dsh, 자격 증명, 모델, 세션을 관리하고 Open Design은 검증된 연결 프로필과 디자인 워크스페이스를 관리합니다. Open Design은 DeepSeek AI와 독립적이며 DeepSeek와 DeepSeek Harness는 각 소유자의 상표입니다.
UI 구축 및 검토 루프 실행
인터페이스 작업에서는 요구사항과 승인 루프를 명확히 만드세요. 기본 DeepSeek 라우트는 텍스트만 지원하므로 코드 및 명세 기반 워크플로가 가장 신뢰할 수 있는 기준입니다. 이미지 입력을 지원한다고 명시된 모델 라우트를 선택한 후에만 스크린샷을 첨부하세요.
- 저장소에서 dsh를 시작하고 해당 디렉터리를 워크스페이스로 선택한 뒤 이 작업에 사용할 모델 라우트를 선택합니다.
- 브랜드 규약을 `AGENTS.md`, `CLAUDE.md` 또는 참조된 `DESIGN.md`에 기록합니다. 토큰, 프리미티브, 간격, 서체, 중단점, 상태, 금지 패턴을 포함하세요.
- `.dsh/skills` 또는 `.agents/skills`에서 목적이 분명한 프런트엔드 스킬을 로드합니다. 예시와 검증 스크립트는 지침과 같은 위치에 둡니다.
- 에이전트에게 기존 컴포넌트를 재사용하고 애플리케이션을 실행한 뒤 프로젝트 자체 테스트 또는 브라우저 도구로 반응형 상태를 검증하도록 요청합니다.
- 화면에 표시된 결과를 검토하고 구체적인 차이를 기록한 뒤 작은 커밋 단위로 반복합니다. 좋지 않은 기반 위에 수정 사항을 쌓지 말고 완성도가 낮은 작업은 되돌리세요.
유용한 프롬프트는 시각적 제약과 검증 근거를 모두 명시합니다.
Implement the account dashboard in React + TypeScript.
Reuse the components and tokens named in AGENTS.md and DESIGN.md.
Use a 240px sidebar, a 12-column content grid, and the documented
mobile navigation pattern. Include loading, empty, error, and focus states.
Run the app and existing UI checks, inspect desktop and mobile breakpoints,
and report the exact files and states you verified.스크린샷이 반드시 필요하다면 먼저 이미지 지원 프로바이더를 설정하세요. 선택한 라우트에 이미지 지원이 명시되어 있지 않으면 DeepSeek Harness는 전송 전에 이미지를 거부합니다. 레퍼런스가 조용히 누락되는 것을 방지하는 유용한 안전장치입니다.
플러그인과 스킬로 재사용 가능한 워크플로 만들기
DeepSeek Harness의 가장 차별화된 부분은 채팅 화면 아래에 있습니다. 플러그인 트리를 사용하면 모든 세션에 프롬프트를 붙여 넣는 대신 디자인 워크플로 자체를 런타임의 일부로 만들 수 있습니다.
- AGENTS.md 및 CLAUDE.md: 지침 플러그인은 사용자 전역 파일과 프로젝트 계층을 로드한 뒤, 자체 제공 파일 작업이 처음 실행되면 관련 중첩 지침 파일을 감지합니다. 일회성 요청이 아닌 지속적인 디자인 규칙을 저장하는 데 사용하세요.
- 파일 시스템 스킬: 스킬 레지스트리는 프로젝트 및 사용자 루트를 탐색하고, 중복 항목의 우선순위를 정한 뒤, 모델에 `skill` 도구를 제공합니다. 프런트엔드 완성도, 접근성, 반응형 QA, 디자인 시스템 절차를 두기에 자연스러운 위치입니다.
- 프로필 및 번들: 프로필은 순서가 지정된 플러그인 번들과 사용자 패치를 계층적으로 결합합니다. 팀은 실제로 필요한 프로바이더, 도구, 권한 정책, 스킬 소스로 디자인 중심 구성을 유지할 수 있습니다.
- MCP 및 외부 기능: 소스 트리에는 MCP 클라이언트 기능이 포함되어 있지만, 사용자 대상 설정은 여전히 개발자 중심입니다. 프리뷰 기간에는 통합 기능을 안정적인 체크박스 방식의 워크플로가 아닌 버전이 지정된 플러그인 작업으로 취급하세요.
장기적으로 사용할 내부 워크플로를 구축하기 전에 `dsh --profile web --dump-config`로 실제 적용되는 트리를 확인하세요. 이 출력은 실제로 무엇이 마운트되어 있고 패치할 수 있는지 보여줍니다. 저장소의 모든 패키지가 기본 제공 프로필에서 활성화되어 있다고 가정하는 것보다 신뢰할 수 있습니다.
시각적 결과물을 망치는 실패 방지
가장 큰 실수는 프리뷰를 안정적인 제품처럼 취급하거나, 텍스트 전용 라우트를 비전 모델처럼 사용하거나, 유연한 하네스 자체가 시각적 감각을 제공한다고 여기는 데서 생깁니다.
- 사용자 지정 전에 버전 고정: 호환성을 깨는 변경은 명시적인 프리뷰 정책입니다. npm 버전을 고정하고 업그레이드 후 검토하기 쉬울 정도로 프로필 패치를 작게 유지하세요.
- 선택한 모델의 모달리티 확인: 네이티브 DeepSeek chat-completions 라우트는 텍스트만 지원합니다. 스크린샷을 코드로 변환하려면 첨부 파일을 이해할 것이라고 가정하지 말고 이미지 지원 프로바이더 라우트를 선택하고 명시하세요.
- 디자인 감각을 데이터로 제공: 에이전트에 토큰, 표준 컴포넌트, 참조 상태, 금지 패턴을 제공하세요. 디자인 규약이 없는 모듈식 런타임은 여전히 평범한 UI를 만듭니다.
- 프로필이 실제로 마운트하는 항목 검증: 저장소 패키지는 사용 가능한 기능일 뿐 기본 프로필에서 활성화되었다는 증거가 아닙니다. 통합 기능을 문서화하거나 의존하기 전에 조합된 설정을 확인하세요.
각각의 대응책은 컨텍스트와 검증에 관한 결정입니다. 모든 프로젝트가 이를 반복해서 찾아내도록 맡기는 대신 디자인 계층이 반복 가능한 방식으로 만들어야 할 작업입니다.
Harness가 디자인에 제공하는 요소
DeepSeek Harness(`dsh`)는 DeepSeek AI가 개발한 MIT 라이선스 에이전트 하네스입니다. 공식 제품 페이지에서 프로젝트를 소개하며, GitHub 저장소에는 소스, 릴리스 기록, 지속적으로 관리되는 가이드가 있습니다. 공개 개발자 프리뷰는 로컬 웹 UI와 헤드리스 프로필을 제공합니다.
핵심 발상은 ‘모든 것이 플러그인’이라는 것입니다. Cordis는 모델 어댑터, 도구 레지스트리, 에이전트 루프, 파일 시스템, 셸, 샌드박스, 스킬, 서브에이전트, 영속성, UI를 프로필과 번들을 통해 마운트하거나 교체하고 패치할 수 있는 트리를 구성합니다. 기본 제공되는 `web` 및 `headless` 프로필은 고정된 제품이 아니라 출발점입니다.
- 로컬 웹 UI: `npx @deepseek-ai/dsh web`은 기본적으로 `127.0.0.1:3080`에서 브라우저 워크스페이스를 시작합니다. 모델을 추가하고 워크스페이스를 선택한 뒤 대화 UI에서 작업을 실행할 수 있습니다.
- 헤드리스 모드: `headless` 프로필은 새 영속 세션 하나를 실행하고 최종 답변을 출력한 뒤 종료합니다. 스크립트 기반 감사, 빌드, 반복 가능한 디자인 검사에 유용합니다.
- 조합 가능한 런타임: 프로필은 플러그인 번들과 자체 패치를 계층적으로 결합합니다. 따라서 팀은 에이전트 루프를 포크하지 않고도 프로바이더, 도구, 정책, UI 동작을 변경할 수 있습니다.
- 개발사: DeepSeek AI(공식 프로젝트)
- 상태: 개발자 프리뷰. 호환성을 깨는 변경이 예상됩니다.
- 라이선스: MIT
- 기본 명령어: `npx @deepseek-ai/dsh web`
DeepSeek Harness, DeepSeek TUI, Open Design
DeepSeek Harness와 DeepSeek TUI는 실행 파일이 서로 다른 별개의 프로젝트입니다. 이제 Open Design은 둘 다 로컬 에이전트로 지원하므로, 선택 기준은 디자인 워크스페이스에 들어올 수 있는지가 아니라 어떤 런타임을 원하는지입니다.
| 도구 | 정의 | 가장 적합한 디자인 용도 |
|---|---|---|
| DeepSeek Harness (`dsh`) | 로컬 웹 UI와 헤드리스 프로필을 갖춘 DeepSeek AI 공식 플러그인 우선 하네스, 퍼스트파티 Open Design 어댑터 지원 | Open Design의 결과물 워크플로 안에서 Harness 세션, 프로바이더, 플러그인 구성을 사용 |
| DeepSeek TUI (`deepseek` / `codewhale`) | 자체 Open Design 어댑터를 갖춘 별도의 터미널 코딩 에이전트 | Harness 프로필 아키텍처가 없는 터미널 우선 DeepSeek 워크플로 |
| OpenCode | 성숙한 오픈 소스 프로바이더 독립형 터미널 에이전트 | AGENTS.md와 MCP를 사용하는 안정적인 TUI 워크플로 내 모델 전환 |
| Claude Code | 터미널, IDE, 데스크톱, 웹 전반에서 사용할 수 있는 성숙한 코딩 에이전트 | 프런트엔드 추론, 이미지 중심 레퍼런스, 검증된 디자인 통합 |
| Open Design | 지원되는 코딩 에이전트를 중심으로 구축된 에이전트 네이티브 디자인 워크스페이스 및 라이브러리 | 엄선된 디자인 시스템, 스킬, 시각적 아티팩트와 특정 모델 공급업체에 종속되지 않는 로컬 워크플로 |
공식 웹 UI, 프로필 시스템, 모델 카탈로그, 재개 가능한 Harness 세션을 원한다면 DeepSeek Harness를 선택하세요. 터미널 우선 워크플로를 선호한다면 Open Design 안의 DeepSeek TUI를 선택하세요. Open Design이 이제 둘 다 같은 디자인 프로세스로 감쌀 수 있지만, 두 도구는 여전히 별개의 런타임입니다.
디자인에 DeepSeek Harness 사용하기: FAQ
-
01 DeepSeek Harness란 무엇인가요?
DeepSeek Harness(`dsh`)는 DeepSeek AI의 공식 오픈 소스 에이전트 하네스입니다. Cordis 플러그인 트리를 통해 모델, 도구, 컨텍스트, 세션, 정책, 오케스트레이션, UI를 결합합니다. 현재 공개 릴리스는 MIT 라이선스로 제공되는 개발자 프리뷰입니다.
-
02 DeepSeek Harness를 어떻게 설치하고 실행하나요?
`npm install -g @deepseek-ai/[email protected]`으로 테스트된 CLI를 설치한 다음 `dsh web`을 실행하세요. 프리뷰 안내를 확인하고 계속해 Settings → Models → DeepSeek → API Key에서 API 키만 저장합니다. 프로바이더와 모델이 작동하는지 확인하고 `Ctrl+C`로 웹 UI를 중지하세요. Open Design 0.19.1 이상을 설치하고 Local CLI 에이전트를 다시 스캔한 뒤 Harness 카드를 연결하고 Test를 클릭합니다.
-
03 DeepSeek Harness는 DeepSeek의 공식 프로젝트인가요?
예. 저장소는 `deepseek-ai` GitHub 조직에서 공개하며 dsh를 DeepSeek AI가 개발한 에이전트 하네스로 설명합니다. MIT 라이선스가 적용되며 개발자 프리뷰로 명확히 표시되어 있습니다.
-
04 DeepSeek Harness로 스크린샷에서 UI를 만들 수 있나요?
선택한 프로바이더 라우트에 이미지 입력 지원이 명시된 경우에만 가능합니다. dsh의 DeepSeek 자체 chat-completions 라우트는 텍스트만 지원하며, 하네스는 텍스트 전용 라우트에서 이미지 첨부 파일을 전송하기 전에 거부합니다. 스크린샷에는 이미지 지원 프로바이더를 사용하거나 코드, DOM, 토큰, 서면 명세로 목표를 설명하세요.
-
05 DeepSeek Harness는 AGENTS.md와 스킬을 지원하나요?
예. 지침 플러그인은 AGENTS.md 및 CLAUDE.md 호환 프로젝트 파일을 로드합니다. 파일 시스템 스킬 프로바이더는 `.dsh/skills` 및 `.agents/skills`에 있는 프로젝트 스킬과 함께 설정된 사용자 및 번들 루트를 탐색합니다.
-
06 DeepSeek Harness와 DeepSeek TUI의 차이점은 무엇인가요?
서로 다른 도구입니다. DeepSeek Harness는 `dsh` 실행 파일을 사용하며, DeepSeek AI가 제공하는 공식 플러그인 우선 웹 UI 및 헤드리스 런타임입니다. DeepSeek TUI는 `deepseek` 또는 `codewhale` 디스패처를 사용하며, 현재 Open Design이 지원하는 별도의 DeepSeek 어댑터입니다.
-
07 Open Design은 DeepSeek Harness를 지원하나요?
예. Open Design은 공식 dsh 설치를 감지하고 명시적 확인 후 Open Design 소유의 검증된 프로필 구성 요소를 설치합니다. 이어서 Harness 모델 카탈로그를 동기화하고 DeepSeek Harness를 퍼스트파티 로컬 에이전트로 실행합니다. Open Design은 dsh를 설치하지 않으며 Harness가 관리하는 프로바이더 비밀 값도 받지 않습니다.
-
08 DeepSeek Harness는 API 키를 어디에 저장하나요?
키는 Open Design이 아니라 DeepSeek Harness에서 구성하세요. 공식 모델 가이드에 따르면 프로바이더 키는 `$DSH_HOME/.credentials.yaml`에 쓰기 전용 비밀 값으로 저장됩니다. UI는 키가 구성되었는지 확인할 수 있지만 평문 값을 읽거나 표시할 수 없습니다. Open Design은 키를 앱에 붙여 넣거나 Open Design 구성에 기록하라고 요구하지 않습니다.
Open Design에서 DeepSeek Harness로 디자인하기.
공식 dsh 런타임을 설치하고 한 번 연결하면 Open Design의 디자인 시스템, 스킬, 동기화된 모델, 로컬 결과물 미리보기를 하나의 워크플로에서 사용할 수 있습니다.