비전 & 입력

dsh-ui-spec

UI 스크린샷을 구현 가능한 수준의 스펙으로 바꿉니다. 토큰, 여백 스케일, 레이아웃 그리드까지.

무엇인가

스크린샷이나 목업을 구조화된 프런트엔드 스펙으로 바꾸는 단일 analyze_ui_image 도구. 결정론적 지오메트리 레이어가 정확한 치수, 팔레트, 제안 디자인 토큰, 레이아웃 그리드, 여백 스케일을 측정하고, 선택 사항인 비전 모델이 그 위에 의미론을 얹습니다.

DeepSeek Harness plugin: turn UI screenshots into structured, implementation-grade web frontend specs. Deterministic geometry (sharp) + optional vision-model semantics, merged into one JSON + Markdown spec.
업스트림 README에서

디자인에 왜 중요한가

  • 픽셀 좌표, 여백 스케일, 토큰 팔레트가 비전 모델의 짐작이 아니라 결정론적으로 계산됩니다.
  • 스펙 필드가 구현에 곧바로 대응됩니다. 제안 토큰은 디자인 토큰으로, 여백 스케일은 CSS로.
  • 의미론 역할이 의도를, 지오메트리가 배치를 맡아 하나의 JSON + Markdown 스펙으로 합쳐집니다.

다루는 내용

  • Why this exists
  • Configure the semantic layer
  • The tool
  • How to use the spec
  • Status & caveats

설치 방법

dsh-ui-spec

  1. 터미널에서 실행하세요.

    dsh plugin --profile web add dsh-ui-spec
  2. 플러그인을 인식하도록 dsh web을 다시 시작하세요.

  3. 그다음 원하는 디자인을 설명하세요. 하네스가 플러그인의 도구를 알아서 집어 듭니다.

DeepSeek Harness로 실행하는 법

  1. 플러그인을 추가하세요. 지오메트리 레이어는 설정 없이 오프라인으로 동작합니다.

  2. 원한다면 의미론 레이어를 아무 OpenAI 호환 비전 엔드포인트에나 연결하세요.

  3. 에이전트에게 스크린샷을 건네고, 이미지 대신 돌려받은 스펙을 기준으로 만드세요.

여기 모인 플러그인은 모두 무료로 설치할 수 있으며, 실제 업스트림 출처로 연결됩니다.

DeepSeek Harness 저장소에서 더 보기 ↗

다음 단계

세팅 없이, Open Design으로 디자인하기

이 플러그인을 직접 설치해도 되고, Open Design으로 DeepSeek Harness 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.

Open Design 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows, Linux 지원