바오위 디자인

Claude Code 같은 코딩 에이전트에 설치하는 에이전트 스킬로, UI 목업·프로토타입·슬라이드를 브라우저에서 바로 열리는 HTML 파일로 만들게 해 준다. 빌드나 라이브러리 설치 없이 파일만 열면 되니, 본격적으로 개발하기 전에 화면 시안을 빨리 눈으로 확인하고 싶을 때 쓴다.

설치하고 말로 시키면 된다

Claude Code나 Cursor에서 npx skills add 명령으로 스킬을 설치한다. 그다음 평소처럼 "관리자 대시보드 와이어프레임 만들어줘"라고 요청하면, 에이전트가 스킬에 담긴 디자인 지침을 불러와 HTML 시안을 만든다.

나온 파일을 브라우저로 열어 보고, 마음에 안 드는 부분을 "버튼을 오른쪽 위로", "색을 차분하게"처럼 다시 말해 고친다. 이 확인과 수정을 몇 번 반복하는 게 기본 흐름이다.

개발 전 시안 단계에 쓴다

화면을 어떻게 나눌지 아직 정하지 못했거나, 기획 회의에 보여 줄 시안이 급할 때 가장 쓸모 있다. 실제 앱 코드에 손대기 전에 여러 안을 빨리 만들어 비교할 수 있다.

시안은 시안일 뿐이다

결과물은 한 파일에 모든 것이 담긴 HTML이라, 기존 프로젝트의 프레임워크나 디자인 시스템과 그대로 이어지지 않는다. 시안으로 방향을 정한 뒤 실제 구현은 따로 하는 게 안전하다. 품질도 에이전트 모델과 요청을 얼마나 구체적으로 했는지에 따라 달라진다.

바오위 스킬 모음의 하나

중국 AI 개발자 바오위(宝玉, JimLiu)가 공개한 Baoyu Skills 컬렉션에 들어 있다. 같은 모음에 이미지 생성, 인포그래픽, 마크다운→HTML 변환, 커버 이미지 같은 콘텐츠 제작 스킬도 있어, 필요한 것만 골라 함께 설치하면 디자인부터 발행용 자료까지 에이전트 하나로 이어 만들 수 있다.

에이전트에서 시안을 뽑아 바로 돌려 본다

가장 흔한 건 코딩 에이전트 안에서 시안을 먼저 뽑아 보는 방식이다. 만든 HTML 파일을 브라우저로 열어 확인하고, 그대로 팀에 보내 의견을 받은 뒤 고른 안을 기준으로 구현을 시작한다.