디자인 워크플로
dsh-web-review
살아 있는 페이지의 요소를 짚고 시각적으로 주석을 달면, 에이전트가 소스를 고칩니다.
무엇인가
하네스 웹 UI에 내장된 브라우저. 디자인 도구에서 하듯 요소를 호버로 강조하고 선택해 메모를 붙이고, 텍스트, 컬러, 타이포그래피, 크기, 여백, 테두리, 효과를 라이브로 조정해 볼 수 있습니다. 주석에는 셀렉터와 소스 단서가 실려 있어 에이전트가 코드를 찾아 고칠 수 있습니다.
Select page elements in the built-in browser as you would in a design tool, leave feedback, and preview changes to text, colors, typography, dimensions, spacing, borders, and effects. Once submitted, the agent uses your page annotations to update the source code.
디자인에 왜 중요한가
- UI 문제를 말로 설명하는 대신 시각적으로 짚고 주석을 답니다.
- 코드에 손대기 전에 라이브 조정으로 변경을 페이지에서 미리 봅니다.
- better-typography부터 interface-review까지 여덟 가지 디자인 스킬이 번들로 실려, 주석 에디터에서 바로 쓸 수 있습니다.
다루는 내용
- Web Preview
- Element Annotations
- Live Visual Adjustments
- AI Collaboration
- UI Design Skills
설치 방법
dsh-web-review
-
터미널에서 실행하세요.
dsh plugin --profile web add @canglongcl/dsh-web-review -
플러그인을 인식하도록 dsh web을 다시 시작하세요.
-
그다음 원하는 디자인을 설명하세요. 하네스가 플러그인의 도구를 알아서 집어 듭니다.
DeepSeek Harness로 실행하는 법
-
플러그인을 추가하고 dsh web을 시작하세요.
-
Web Preview 탭에서 실행 중인 앱을 열고 바꾸고 싶은 곳에 주석을 다세요.
-
전송하면 에이전트가 셀렉터, 메모, 시험해 본 값을 받아 워크스페이스 소스를 고칩니다.
여기 모인 플러그인은 모두 무료로 설치할 수 있으며, 실제 업스트림 출처로 연결됩니다.
DeepSeek Harness 저장소에서 더 보기 ↗다른 DeepSeek Harness 디자인 플러그인
비전 & 입력 무엇을 하나 modlens 텍스트 전용 DeepSeek 모델에 플러그인 비전을 답니다. 스크린샷을 붙여 넣으면 구조화된 근거가 나옵니다. 
비전 & 입력 무엇을 하나 dsh-vision-toolkit UI 복원, 그라운딩, 픽셀 비교 검증을 위한 열 가지 비전 도구. 
비전 & 입력 무엇을 하나 dsh-ui-spec UI 스크린샷을 구현 가능한 수준의 스펙으로 바꿉니다. 토큰, 여백 스케일, 레이아웃 그리드까지. 
비전 & 입력 무엇을 하나 dsh-media-skills 공짜 눈과 공짜 붓. 붙여 넣은 이미지 읽기에 워터마크 없는 이미지 생성까지. 다음 단계
세팅 없이, OpenDesign으로 디자인하기
이 플러그인을 직접 설치해도 되고, OpenDesign으로 DeepSeek Harness 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.