AI 디자인 스킬로 한국 앱 디자인 10분 만에 만들기

숏츠에서 소개한 AI 디자인 스킬, k-style-ui-ux 사용법이에요. 기획 문서(PRD) 한 장을 넣으면 토스·당근마켓 같은 한국 앱 스타일의 화면을 흐름 순서대로 만들어 줘요. 이너서클 멤버들과 두 달 동안 같이 만든 오픈소스라 누구나 무료로 쓸 수 있어요.

먼저 결과부터 볼게요

가족여행 일정 앱 기획 문서 한 장으로 나온 화면이에요. 여행 사진, 일정, 할 일, 바뀐 소식까지 실제 앱처럼 채워져 나와요.

화면은 낱장으로 흩어져 나오지 않아요. 작동하는 순서대로 화살표로 이어진 캔버스에 모여 나와요. 처음 들어오면 온보딩, 그다음 전화번호 인증, 그다음 가입 정보 순서로요. 화면마다 "재전송은 30초 뒤"처럼 지켜야 할 규칙도 같이 적혀 있어요.

앱 디자인이 이렇게 돼 있으면 적어도 UI가 걸림돌이 되진 않아요.

준비물

• AI 코딩 도구 하나: Claude Code, Codex, Cursor 중 아무거나 돼요. 이 스킬은 그 안에 끼워 쓰는 플러그인이에요
• 만들고 싶은 앱 아이디어 한두 줄: 기획 문서는 아래 ①번 프롬프트로 AI와 같이 만들어요

1단계. 설치하기

Claude Code를 켜고 아래 세 줄을 한 줄씩 입력하세요.

/plugin marketplace add vmc-inner-circle/k-style-ui-ux

/plugin install k-style-ui-ux@k-style-ui-ux

/reload-plugins

설치가 끝나면 /k-style-ui-ux:go와 /k-style-ui-ux:max 두 명령이 생겨요.

codex plugin marketplace add vmc-inner-circle/k-style-ui-ux

codex plugin add k-style-ui-ux@k-style-ui-ux

2단계. 기획 문서(PRD) 만들기

아이디어 한 줄만 넣어도 돌아가긴 해요. 그래도 PRD까지는 써서 넣는 걸 추천해요. 디자인 품질이 기획 문서에서 갈리거든요.

여기서 많이들 막혀요. "어떤 기능이 필요해?"부터 정리하려고 하면 그럴듯한 기능 목록만 길어져요. 그보다 이 앱을 쓸 사람이 지금 그 일을 어떻게 하고 있고, 어디서 불편한지를 먼저 적어야 해요. 그걸 혼자 정리하지 말고 AI에게 인터뷰를 시키세요.

언제: 스킬을 처음 돌리기 전, 딱 한 번 어디에: 스킬을 설치한 그 AI 도구의 새 채팅창 순서: ① 붙여넣기 → AI 질문에 답하기 → 끝나면 prd.md 파일이 생겨요

① 처음 한 번 — AI가 나를 인터뷰해서 PRD 쓰게 하기

나는 앱을 하나 만들고 싶어. 아이디어는 이거야: [여기에 아이디어 한두 줄]

바로 기획 문서를 쓰지 말고, 먼저 나를 인터뷰해 줘.
- 시작할 때 질문을 몇 개 할지 먼저 알려 주고, 전부 7개 안쪽으로 한 번에 하나씩 물어 줘.
- "어떤 기능이 필요해?"는 묻지 마. 이 앱을 쓸 사람이 지금 이 일을 어떻게 하고 있는지, 어디서 불편한지를 물어 줘.

인터뷰가 끝나면 아래 순서로 PRD를 prd.md 파일에 써 줘.
1. 배경 — 누가, 지금 어떤 불편을 겪고 있는지
2. 핵심 유저스토리 — "OO로서, ~하고 싶다" 3개 안팎
3. 사용자들의 상황 — 몇 명이 쓰는지, 언제·어디서 쓰는지, 스마트폰에 익숙한지
4. 기능 요구사항
5. 조건 — 꼭 지켜야 할 것과 이번에는 안 할 것
화면 디자인과 기술 스택은 PRD에 넣지 마.

# 부모 세대와 함께 떠나는 여행을 계획하는 경험을 설계해주세요

## 1. 배경
20~40대 자녀와 50~70대 부모가 함께 떠나는 가족여행을 계획하는 앱을 만듭니다.
이런 여행은 보통 자녀가 계획을 짜고 부모는 그 계획을 따라가는 쪽에 가깝습니다. (…)

## 2. 핵심 유저스토리
1. 일정을 짜는 자녀로서, 아직 확정되지 않은 후보들도 편하게 적어두고 수시로 고치고 싶다. (…)
2. 동행하는 부모로서, 자식에게 매번 묻지 않고도 이번 여행이 언제 어디로 흘러가는지 큰 흐름만이라도 알고 싶다.

3단계. 디자인 뽑기

PRD가 생겼으면 이렇게 입력하세요. 같은 채팅창에서 PRD를 썼다면 /k-style-ui-ux:go만 쳐도 돼요.

/k-style-ui-ux:go prd.md

10~15분쯤 기다리면 실행한 폴더에 out/index.html이 생겨요. 이 파일을 브라우저로 열면 위에서 본 캔버스가 나와요. 화면을 누르면 크게 볼 수 있어요.

기다리는 동안 스킬은 이런 일을 해요. 이 앱을 쓸 사람을 먼저 정하고, 앱스토어에서 같은 문제를 푸는 잘 되는 앱들의 흐름을 참고하고, 화면마다 꼭 필요한 기능만 남겨요. 색과 여백은 AI가 지어내지 않고 실제 한국 앱들에서 모아 둔 값 중에서 골라요.

색이랑 여백은 조금만 틀어줘도 느낌이 되게 이상해져요. 그래서 AI가 이걸 그냥 정해버리면 되게 AI스러운 디자인이 돼버려요.

4단계. 고치기

처음 나온 결과는 초안이에요. 세세한 것보다 내가 원한 느낌과 맞는지부터 보세요.

색은 클릭 한 번으로 바꿔 봐요. 캔버스 위쪽의 색 점을 누르면 컬리·마이리얼트립 같은 다른 팔레트로 전체 화면이 한 번에 바뀌어요.

나머지는 말로 고쳐 달라고 하면 돼요. 이때 "더 예쁘게"처럼 뭉뚱그리지 말고, 화면 하나에 고칠 점 하나씩 적어야 AI가 정확히 고쳐요.

언제: 캔버스를 다 둘러본 뒤 어디에: go를 실행한 그 채팅창에 이어서 순서: ② 붙여넣기 → 다시 확인 → 느낌이 맞으면 /k-style-ui-ux:max

② 결과를 본 뒤 — 같은 채팅창에서 고쳐 달라고 하기

out/index.html 결과를 봤어. 아래를 고쳐 줘. 고친 화면은 캔버스에도 반영해 줘.

- [화면 이름]: [고칠 점 — 예: 신고 버튼이 쓸데없이 커요]
- [화면 이름]: [어색한 문구 — 예: "문자로 온 6자리를 넣어주세요"가 딱딱해요. 더 부드럽게]
- 흐름: [빠진 흐름 — 예: 예약을 취소한 다음에 뭐가 보이는지 화면이 없어요]

느낌이 맞으면 /k-style-ui-ux:max를 실행하세요. 10분쯤 더 걸려서 인증번호가 틀렸을 때, 결제가 실패했을 때, 알림이 하나도 없을 때 같은 화면까지 채워 줘요. 처음부터 이것까지 만들지 않는 이유는, 느낌이 틀렸는데 세부 화면까지 다 그리면 시간만 버리기 때문이에요.

5단계. 그대로 개발 맡기기

디자인이 마음에 들면 이제 개발이에요. 이 스킬의 결과물은 그림이 아니라 HTML이라, AI가 그대로 읽고 따라 만들 수 있어요.

AI한테 디자인시키면 쓸 수 없는 서비스를 만들거든요. 이 하네스를 쓰면 이 디자인 그대로 개발을 해도 쓸 수 있어요.

언제: 디자인을 다 고친 뒤 어디에: out/ 폴더가 있는 곳에서 AI 코딩 도구의 새 채팅창 순서: ③ 붙여넣기 → 흐름 하나가 끝날 때마다 화면을 직접 열어 디자인과 비교

③ 디자인을 확정한 뒤 — 이 디자인 그대로 개발 맡기기

out/ 폴더에 있는 디자인 그대로 이 앱을 개발해 줘.

- out/prd.md가 요구사항, out/index.html이 전체 화면 흐름, out/screens/ 안의 HTML이 화면별 디자인이야.
- 색·글자·여백은 out/tokens.css 값을 그대로 써 줘. 새 색이나 새 여백 값을 만들지 마.
- 화면마다 적힌 규칙(예: 재전송은 30초 뒤)도 실제 기능으로 만들어 줘.
- 한 번에 다 만들지 말고 흐름 하나씩 만들어 줘. 하나가 끝날 때마다 화면을 띄워서 디자인과 같은지 확인하고, 다르면 고친 다음 넘어가 줘.

이럴 때는 잘 안 맞아요

• 화려하고 독창적인 디자인이 목표일 때: 이 스킬은 토스·당근처럼 익숙한 한국 앱 스타일에 맞춰져 있어요. 독창적인 디자인이 필요하면 디자이너가 붙는 게 맞아요
• 데스크톱 웹·PC 프로그램·크롬 확장: 지금은 모바일 앱 화면에 맞춰져 있어요
• 문구와 디테일: 화면 문구나 미감은 아직 사람이 한 번 봐야 해요

그래도 초기 앱이라면 이걸로 충분한 경우가 많아요.

UI가 구려도 제품이 좋으면 쓰거든요. 근데 UX가 구려서 기능의 도달 자체를 못하면 나가요.

화려한 화면보다 처음 쓰는 사람이 헤매지 않고 원하는 걸 끝내는 화면이 먼저예요. 이 스킬이 가장 신경 쓴 것도 그거예요.

써 보고 막힌 곳이나 별로였던 점은 피드백 남기기로 알려 주세요. 혹평도 환영해요.