코딩 에이전트가 UI 목업·프로토타입·슬라이드 덱을 브라우저에서 바로 열리는 자체 완결형 HTML로 만들어내게 해주는 에이전트 스킬.
AI에게 화면을 "디자인해 달라"고 하면 대개 코드 조각이나 말로 된 설명만 돌아온다. 바오위 디자인은 클로드 같은 코딩 에이전트가 실제로 눈으로 볼 수 있는 UI 시안을 만들어내도록 해주는 에이전트 스킬이다. 결과물은 별도의 빌드 과정이나 라이브러리 설치 없이 브라우저에서 바로 열리는 자체 완결형(self-contained) HTML 파일로 나오기 때문에, 더블클릭 한 번으로 디자인을 확인할 수 있다.
UI 목업, 클릭 가능한 프로토타입, 와이어프레임은 물론 발표용 슬라이드 덱까지 한 번에 뽑아내는 것이 특징이다.
Claude Code나 커서(Cursor)에 npx skills add 명령으로 스킬을 설치한 뒤, "관리자 대시보드 와이어프레임을 만들어줘"처럼 말하면 스킬이 내부 디자인 지침을 불러와 완성된 HTML 시안을 생성한다. 개발자는 나온 HTML을 그대로 브라우저로 열어 확인하고, 마음에 안 드는 부분을 다시 지시해 다듬는다.
코드를 본격적으로 짜기 전에 빠르게 화면 구성을 잡아보거나, 기획·디자인 논의용 시안을 즉석에서 만들 때 유용하다.
바오위 디자인은 중국의 유명 AI 개발자 바오위(宝玉, JimLiu)가 공개한 Baoyu Skills 컬렉션의 일부다. 이 모음에는 이미지 생성, 인포그래픽, 마크다운→HTML 변환, 슬라이드 덱, 커버 이미지 생성 등 콘텐츠 제작용 스킬이 함께 들어 있어, 디자인부터 발행까지 에이전트 하나로 이어지는 워크플로우를 구성할 수 있다.