baoyu-design 운영 중

baoyu-design은 Baoyu가 오픈 소스로 공개한 프로젝트로, claude.ai의 디자인 엔진을 이식 가능한 Agent Skill로 패키징하여 Cursor, Claude Code, Codex 등 70개 이상의 로컬 Agent가 고충실도 UI 시안, 프로토타입, 프레젠테이션, 디자인 시스템 및 데이터 대시보드를 직접 생성할 수 있도록 합니다. 생성된 결과물은 로컬의 순수 파일이므로 Git 버전 관리에 추가할 수 있으며, LAN 기반 다중 역할 협업과 버전 기록을 지원하고 DeepSeek Harness 플러그인을 제공합니다.

WeChat에서 팔로우한 후 “오픈 소스”라고 답장하여 AI 오픈 소스 프로젝트 그룹에 참여
프레젠테이션 생성（claude-slides）：자연어로 전체 프레젠테이션을 생성하며, 로컬 편집기에서 발표, 텍스트 수정, 드래그 앤 드롭이 가능하고 PDF/HTML/PPTX로 내보낼 수 있습니다.
다중 캔버스 디자인 작업 공간（claude-design）：여러 캔버스를 나란히 관리하고, 인터랙티브 프로토타입을 재생하며, HTML/PDF/PNG로 내보낼 수 있습니다.
디자인 시스템 구축（claude-design-system）：tokens, 브랜드 가이드 및 컴포넌트 미리보기를 생성하고, 편집기에서 색상, 글꼴 및 컴포넌트를 직접 탐색하고 편집할 수 있습니다.
데이터 대시보드（claude-dashboard）：CSV/TSV/JSON 데이터 세트를 실시간 차트 페이지로 변환하며, 각 수치를 원본 데이터 행까지 추적할 수 있습니다.
차트 디자인 가이드（dataviz）：Agent가 차트를 그리기 전에 반드시 읽는 규칙으로, 색상 조합의 가독성과 색각 이상 사용자를 위한 접근성을 보장합니다.
미리보기에서 선택하여 편집：Agent의 브라우저 미리보기에서 요소를 선택해 직접 수정 의견을 남기면 소스 코드의 수정 위치를 자동으로 찾습니다.
LAN 협업：역할별로 구분된 LAN 링크를 한 번에 생성하며, 계정 없이 협업에 참여할 수 있습니다.

환경 준비：Node.js 20+를 설치하고, 로컬에 Cursor, Claude Code, Codex 등의 Agent 중 하나가 있는지 확인합니다.
스킬 설치：npx skills add JimLiu/baoyu-design을 실행하면 CLI가 Agent를 자동으로 감지하고 해당 디렉터리에 스킬을 설치합니다.
모델 선택：최상의 디자인 결과를 얻으려면 Agent에서 모델을 Claude Opus 5.5로 설정합니다.
요구 사항 입력：“분기별 보고용 프레젠테이션을 만들어줘”와 같이 원하는 결과물을 자연어로 설명하거나 /claude-slides, /claude-design 등의 슬래시 명령을 직접 입력해 스킬을 지정합니다.
생성 대기：Agent가 designs// 디렉터리에 파일을 생성하고 로컬 편집기를 시작한 뒤 http://127.0.0.1 주소를 제공합니다.
미리보기 및 편집：브라우저에서 편집기를 열어 요소를 선택해 수정하고, 드래그 앤 드롭으로 배치하며, 프로토타입을 재생할 수 있습니다. 변경 사항은 파일에 실시간으로 저장됩니다.
협업 공유（선택 사항）：artifact.mjs share designs/를 실행하여 LAN 링크를 생성하면 팀원이 역할에 따라 편집 또는 댓글 작성에 참여할 수 있습니다.
버전 관리（선택 사항）：결과물은 일반 파일이므로 Git으로 디자인 시안을 직접 커밋, 브랜치 및 PR로 관리할 수 있습니다.
내보내기 및 전달：편집기에서 PDF, HTML, PPTX 또는 PNG로 한 번에 내보내 고객에게 전달하거나 발표에 사용할 수 있습니다.

GitHub 저장소：https://github.com/JimLiu/baoyu-design

완전한 로컬 실행：claude.ai의 디자인 엔진을 로컬 Agent로 가져와 결과물을 자신의 저장소에 바로 저장하므로 클라우드에 종속되지 않습니다.
범용적인 Agent 생태계：Cursor, Claude Code, Codex, Cline 등 70개 이상의 Agent에 설치하면 바로 사용할 수 있어 단일 플랫폼의 제한을 받지 않습니다.
결과물이 곧 소스 코드：생성되는 것은 자체 완결형 HTML 등의 순수 파일이므로 Git 버전 관리, PR 및 프로젝트 저장소에 바로 추가할 수 있습니다.
디자인과 개발 간 전환 불필요：같은 세션에서 디자인 시안을 Agent에게 바로 전달해 기능을 구현할 수 있으므로 내보내거나 업로드할 필요가 없습니다.
지정한 부분을 정확히 수정：브라우저 미리보기에서 요소를 선택하기만 하면 Agent가 정확히 수정하므로 클라우드 버전에서 편집기를 오가는 것보다 몇 배 효율적입니다.
LAN 다중 사용자 협업：역할별로 구분된 LAN 링크를 한 번에 생성하며 계정 로그인 없이 사용할 수 있습니다.

제품 프로토타입 디자인：제품 관리자나 1인 개발자가 자연어로 고충실도 앱 인터페이스와 인터랙티브 프로토타입을 빠르게 생성하고, 회의 30분 전에 검토할 3가지 안을 준비할 수 있습니다.
피칭 및 보고용 프레젠테이션：창업자나 직장인이 PRD와 재무 데이터를 Agent에 전달하면 몇 분 만에 디자인 규격에 맞는 분기 보고 또는 투자 유치 피칭 deck을 생성하고 PPTX/PDF로 바로 내보낼 수 있습니다.
데이터 대시보드 구축：운영 담당자나 분석가가 CSV/JSON 비즈니스 데이터를 claude-dashboard에 전달하면 실시간으로 업데이트되는 데이터 대시보드를 자동 생성하고, 각 지표를 원본 데이터 행까지 드릴다운하여 추적할 수 있습니다.
디자인 시스템 정립：팀이 분산된 디자인 결정을 브랜드 가이드가 포함된 design-system으로 정리하고 Git 저장소를 통해 모든 프로젝트에 배포하여 여러 제품 라인의 시각적 통일성을 보장할 수 있습니다.