K Style UI Ux

k-style-ui-ux

PRD(기획 문서) 한 장을 넣으면 한국 앱 스타일의 모바일 화면 초안을 15분 안팎에 HTML로 뽑아 주는 Claude Code·Codex·Cursor 플러그인입니다. VIBE MAFIA CLUB 이너서클이 함께 만드는 오픈소스입니다.

이런 분께 맞습니다

- 디자이너 없이 초기 앱을 만드는 분 — 외주를 맡기기 전에 화면 흐름과 첫 초안을 먼저 받아 볼 수 있습니다.
- 사내 도구처럼 기획·디자인까지 직접 해야 하는 개발자
- 디자이너 — 같은 작업의 첫 초안을 빨리 받고 다듬는 데 쓸 수 있습니다.

완제품을 대신 만드는 도구는 아닙니다. 초안을 빨리 만들어 병목을 없애는 도구이고, 디테일·미감·문구는 여전히 사람이 잡아야 합니다.

무엇이 다른가

- UX 먼저 — 화려한 화면보다 핵심 기능에 헤매지 않고 닿는지를 먼저 봅니다. 사용자가 만들거나 신청하는 모든 대상마다 시작 → 보기 → 고치기 → 끝(결과) 화면을 빠짐없이 만듭니다.
- 한국 서비스 기준 — 29CM·에어비앤비·클래스101·당근·컬리·무신사·마이리얼트립 등 국내 서비스에서 수집한 색 팔레트 중에서 고르고, 결과물에서 팔레트 3벌을 원클릭으로 바꿔 볼 수 있습니다. 여백·글자 크기 같은 값과 아이콘(Fluent Emoji, MIT)은 미리 준비돼 있습니다.
- 검사 후 전달 — 토큰·부품 사용과 빠진 화면, 한국어 줄바꿈(어절 쪼개짐·칸 넘침, hangul-wrap의 실측 방식, MIT)은 스크립트(selfcheck.py·audit.py)로 검사하고, 화면 캡처는 체크리스트로 비평해 P0·P1 문제를 고친 뒤 넘깁니다. 체크리스트(core/references/checklist.md)는 하네스를 안 써도 참고할 만합니다.

예시

main 하네스(v14·v15)로 만든 화면입니다. 결과 폴더는 산출물 정리 전 커밋에 보관돼 있습니다. 받아서 index.html을 브라우저로 열면 캔버스에서 전체 흐름을 볼 수 있습니다.

캔버스(흐름별 화면·화살표·화면별 정책):

설치

Claude Code에서:

로컬에서 바로 써 보려면: claude --plugin-dir /plugins/k-style-ui-ux

Codex에서:

Cursor에서: Customize → Plugins에서 GitHub 저장소로 가져오기에 https://github.com/vmc-inner-circle/k-style-ui-ux를 넣고 k-style-ui-ux를 설치합니다.

사용법

Codex에서는 $k-style-ui-ux:go·$k-style-ui-ux:max로, Cursor에서는 채팅에 /를 치고 go·max를 골라 부릅니다.

PRD만 붙여넣고 "화면 만들어줘"라고 해도 됩니다. 결과는 실행한 폴더의 out/index.html입니다. 결과물 구성과 구조는 plugins/k-style-ui-ux/README.md에 있습니다.

피드백

써 보셨다면 피드백 남기기로 알려 주세요. 어떤 앱을 만들었는지, 어디서 막혔는지, 결과물을 실제로 썼는지가 다음 개선 방향을 정합니다. 디자이너 분의 혹평도 환영합니다.

기여

- main에 직접 push하지 않습니다. 브랜치를 만들고 GitHub PR로 병합합니다.
- 이 하네스는 이너서클의 하네스톤(하네스 자체를 겨루는 워크샵·해커톤)에서 시작했습니다. 같이 만들고 싶다면 이너서클에서 모임 일정과 모집 소식을 볼 수 있습니다.
- 자동 개선 루프 기록: loop/RESULTS.md
- 하네스톤 개인전 안내, v1 아카이브, 첫 빈 템플릿 설명: docs/history.md

기여자

하네스톤과 이너서클에서 아이디어·코드·실험을 함께 만든…