K-디자인 하네스를 만들었습니다

PRD 한 장을 넣으면 15분 안에 토스·당근 같은 한국형 모바일 앱 화면이 HTML 캔버스로 나오는 오픈소스 디자인 하네스 k-style-ui-ux를 실제로 돌려 보고, 품질과 속도를 잡은 장치를 하나씩 뜯어봤어요.

이 노트를 읽고 나면 할 수 있는 것

1. k-style-ui-ux를 Claude Code 플러그인으로 설치하고 내 PRD로 go·max를 돌려 보기
2. 하네스 안에서 AI에게 맡기지 않고 스크립트·정해진 데이터로 처리한 일이 무엇인지, 그게 왜 품질과 속도를 같이 올리는지 설명하기
3. 내가 만드는 하네스에 "공통 원칙 전문 붙이기 · 프로그램 검증 · 반대 입장 AI · 의존 관계에 따른 병렬화"를 옮겨 넣기

다시보기: https://youtu.be/KVwDNVzpcwQ (2시간 31분. 본편은 약 2시간 10분까지, 이후 Q&A) 하네스 레포: https://github.com/vmc-inner-circle/k-style-ui-ux

목차

• PRD 한 장이 화면 흐름 캔버스가 되기까지 ▶ 0:05:22
• 설치하고 go로 돌리기 ▶ 0:22:34
• 돌아가는 15분 동안 하네스가 하는 일 ▶ 0:26:04
• 초안은 go, 빈 화면과 오류는 max ▶ 0:40:56
• 모든 디자인 에이전트가 같은 원칙을 읽어요 ▶ 0:55:33
• AI에게 맡기지 않은 것들 ▶ 1:48:58
• 15분 안에 끝나도록 일을 쪼갠 방법 ▶ 1:54:45
• AI끼리 반박하게 하기 ▶ 1:13:13
• 화려한 디자인보다 한눈에 보이는 디자인 ▶ 1:18:14
• UI보다 UX, 그리고 이 하네스가 맞는 사람 ▶ 1:27:18
• 그대로 개발해도 쓸 수 있는 디자인 ▶ 1:58:25
• Q&A ▶ 1:06:38
• 오늘 해볼 것 ▶ 2:29:47

PRD 한 장이 화면 흐름 캔버스가 되기까지 ▶ 0:05:22

k-style-ui-ux는 커뮤니티 멤버들과 일주일에 한 번 온라인 스터디를 하면서 PR을 만들고 병합해 온 오픈소스 디자인 하네스예요. ▶ 0:04:10 하네스(harness)는 AI 에이전트가 정해진 순서·규칙·도구 안에서 일하도록 묶어 둔 작업 틀을 말해요.

입력은 PRD(제품 요구사항 문서) 한 장이고, 출력은 HTML 파일이에요. ▶ 0:13:38 필라테스 예약 앱 PRD로 뽑은 결과부터 봤어요.

화면을 낱장으로 늘어놓지 않고 작동 흐름별로 엮어요. 튜토리얼을 끝내면 로그인, 로그인 뒤엔 문자 인증으로 이어지는 식이에요.

디자이너들이 피그마에 정책을 적어 두는 걸 보고 따라 했어요. 재전송은 30초 뒤에, 하루 5번까지 같은 규칙이 화면 아래에 붙어요. 인증번호가 틀렸을 때 같은 엣지 케이스는 이 단계에선 다 그리지 않아요.

캔버스에는 화면 말고도 두 탭이 더 있어요. 파운데이션 탭에서는 디자인 토큰(색·글자·여백·모서리·그림자처럼 화면 전체가 같이 쓰는 값)을, 컴포넌츠 탭에서는 버튼·CTA·칩 같은 부품을 따로 보고 피드백할 수 있어요. 브랜드 색은 캔버스 위에서 당근마켓·마이리얼트립 같은 팔레트로 바로 바꿔 볼 수 있고요. ▶ 0:10:00

10월 7일 버전(Opus 5.1)으로 39개 화면을 만드는 데 15분이 걸렸어요. ▶ 0:15:43 가족 여행 일정 앱은 11분, 다른 하나는 9분이었고요.

결과물은 토스·당근마켓 스타일에 특화돼 있어서, 창의적인 컴포넌트를 많이 넣고 싶을 때는 맞지 않아요. ▶ 0:16:53 독창적인 디자인이 목표면 디자이너가 붙는 게 맞아요. 앱 디자인이 이렇게 돼 있으면 적어도 UI가 걸림돌이 되진 않아요. ▶ 0:17:54

아직 남은 숙제도 화면에 그대로 보였어요. "문자로 온 6자리를 넣어주세요" 같은 문구는 디자이너가 쓸 말투가 아니에요. ▶ 0:10:40 지금은 모바일 앱에 맞춰져 있어 데스크톱 웹·윈도우 프로그램·크롬 익스텐션에는 덜 맞고요. ▶ 0:31:29

HTML이라 리액트 네이티브든 플러터든 기술 스택과 상관없이 써요. HTML을 보고 플로우와 어색한 문구를 디자인 단계에서 피드백해서 다 잡고, 그 다음에 개발로 넘어가라는 취지예요. ▶ 0:13:57