비전 & 입력
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.
디자인에 왜 중요한가
- 픽셀 좌표, 여백 스케일, 토큰 팔레트가 비전 모델의 짐작이 아니라 결정론적으로 계산됩니다.
- 스펙 필드가 구현에 곧바로 대응됩니다. 제안 토큰은 디자인 토큰으로, 여백 스케일은 CSS로.
- 의미론 역할이 의도를, 지오메트리가 배치를 맡아 하나의 JSON + Markdown 스펙으로 합쳐집니다.
다루는 내용
- Why this exists
- Configure the semantic layer
- The tool
- How to use the spec
- Status & caveats
설치 방법
dsh-ui-spec
-
터미널에서 실행하세요.
dsh plugin --profile web add dsh-ui-spec -
플러그인을 인식하도록 dsh web을 다시 시작하세요.
-
그다음 원하는 디자인을 설명하세요. 하네스가 플러그인의 도구를 알아서 집어 듭니다.
DeepSeek Harness로 실행하는 법
-
플러그인을 추가하세요. 지오메트리 레이어는 설정 없이 오프라인으로 동작합니다.
-
원한다면 의미론 레이어를 아무 OpenAI 호환 비전 엔드포인트에나 연결하세요.
-
에이전트에게 스크린샷을 건네고, 이미지 대신 돌려받은 스펙을 기준으로 만드세요.
여기 모인 플러그인은 모두 무료로 설치할 수 있으며, 실제 업스트림 출처로 연결됩니다.
DeepSeek Harness 저장소에서 더 보기 ↗다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 DeepSeek Harness 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.