JimLiu/baoyu-design

baoyu‑design – 로컬에서 동작하는 에이전트 스킬로서의 Claude Design

무엇인가요

• 로컬에서 실행 가능한 파일 기반 코딩 에이전트(예: Cursor, Claude Code, Codex, 또는 skills CLI가 지원하는 70개 이상의 에이전트)에 Claude Design 엔진(https://claude.ai/design에서 사용되는 동일한 백엔드)을 포터블한 스킬 형태로 가져옵니다.
• 이 스킬은 Markdown 파일, 몇 가지 JSX/JS 헬퍼 파일, 그리고 "스킬"이라고 불리는 일련의 빌트인 프롬프트로 구성되며, 완전한 UI 디자인 워크플로우를 제어합니다.
• 모든 출력물은 자기 포함형 HTML(옵션으로 PDF, PPTX, 비디오 등)이며, designs/<project>/ 아래에 저장되어 버전 관리, 내보내기, 또는 리포지토리에서 직접 배포가 가능합니다.

왜 필요할까

• 웹 서비스나 구독 없음 – 디자인 작업은 모두 당신의 머신에서 수행되며, 아티팩트와 데이터는 리포지토리에서 벗어나지 않습니다.
• Claude Opus 4.8(가장 강력한 Claude 모델)에서 최적의 성능을 발휘하지만, 어떤 실용 가능한 LLM에서도 작동합니다.
• 시각적 "포인트 앤 에디트" 루프 – 결과물이 localhost에서 제공되므로, 에이전트의 내장 미리보기/브라우저를 사용해 요소를 클릭하고 모델에 수정을 요청할 수 있으며, 즉시 소스 코드가 업데이트됩니다.
• 디자인 시스템 인식 – 기존 디자인 시스템(오프라인 Figma .fig 파일 포함)을 가져와 새 프로젝트에 바인딩할 수 있어 브랜딩 일관성을 보장합니다.

주요 기능

영역	스킬이 생성할 수 있는 내용
핵심 디자인	하이파이 모크업, 와이어프레임, 인터랙티브 프로토타입, 아트 디렉션
디크	슬라이드 디크(스피커 노트 포함), 전체 화면 프레젠테이션 모드, 편집 가능한 PPTX 또는 PNG 스크린샷으로 내보내기
모바일 및 모션	모바일 앱 프로토타입, 애니메이션 비디오, 사운드 효과
웹 및 캠페인	웹사이트, 랜딩 페이지, HTML 이메일, 플라이어, 삼중 접기 브로셔
데이터 및 리서치	웹 리서치, 데이터 사이언스 노트북, 시각화, 지도
문서, 3D 및 일러스트레이션	문서, 3D 오브젝트, 수채화 스타일 일러스트
디자인 시스템	생성, 가져오기, 바인딩, 버전 고정, 미리보기; 컴포넌트 스켈레톤(.dc.html)
가져오기	오프라인 Figma .fig 디코딩, GitHub 리포지토리 부분 체크아웃, 기존 HTML/CSS를 소스 자료로 사용
내보내기	독립형 HTML, PDF, PPTX(편집 가능 또는 스크린샷), MP4 비디오, Claude Code, Figma, Canva로 직접 전달
AI 자산	Gemini 이미지 생성, 프로토타입에서 Claude 호출, PDF 읽기

작동 방식

• 진입점은 SKILL.md입니다. 에이전트에게 디자인을 요청하면 이 파일을 읽고, system-prompt.md에서 메서드를 로드하며, references/ 내의 참조 문서를 통해 사용 중인 에이전트(Cursor, Claude Code, Codex 등)를 감지하고, 작업에 필요한 빌트인 스킬 파일만 불러옵니다.
• 스킬은 대화형 루프를 조율합니다: 명확화 질문 → 디자인 생성 → HTML 출력 → 실시간 미리보기 → 시각적 2차 편집.
• 빌드 단계나 런타임이 필요 없으며, 에이전트가 직접 해석할 수 있는 일반 Markdown/JSX 파일입니다.

설치 (Node.js 필수; 미리보기 서버용 Python은 선택 사항)

# 추천: Vercel‑Labs `skills` CLI 사용
npx skills add JimLiu/baoyu-design          # 로컬 에이전트 자동 감지
# 글로벌 설치 (모든 프로젝트에서 사용 가능)
npx skills add JimLiu/baoyu-design -g
# 특정 에이전트 대상
npx skills add JimLiu/baoyu-design --agent claude-code

• CLI는 스킬을 적절한 폴더(.claude/skills/ for Claude Code, .agents/skills/ for Cursor/Codex 등)에 복사합니다.
• 업데이트도 간단: npx skills update baoyu-design (또는 upgrade).

기본 사용법

1. 자연어로 디자인을 설명합니다. 예:

   "명상 앱용 설정 화면의 하이파이 버전을 3가지 디자인해줘."

2. 스킬은 자동으로 활성화되거나(Claude Code에서는 /baoyu-design, Codex에서는 $baoyu-design로 수동 활성화). 필요한 확인을 요청한 후 designs/<project>/ 아래에 HTML을 생성합니다.
3. 미리보기(에이전트가 일반적으로 로컬 HTTP 서버를 자동으로 시작)를 엽니다. 실시간 미리보기에서 원하는 요소를 클릭하고 모델에게 수정을 요청하면 소스 HTML이 실시간으로 편집됩니다.
4. 만족하면 에이전트에게 내보내기를 요청합니다(예: PPTX로 내보내기, PDF 다운로드, MP4로 저장).

디자인 시스템 워크플로우

• 내장된 디자인 시스템 생성 스킬로 시스템을 만들거나, Figma .fig 파일에서 가져옵니다.
• 새 디자인을 시작할 때, 사용 가능한 시스템 목록이 에이전트에 표시됩니다. 하나도 선택하지 않거나, 하나 또는 여러 개를 선택할 수 있습니다. 선택된 시스템은 프로젝트 내 _ds/<slug>/에 복사되며 _d_meta.json을 통해 참조됩니다.
• 시스템은 토큰, 폰트, 컴포넌트의 권위 있는 소스가 되며, 모델은 시스템 외부의 색상이나 타이포그래피를 자동으로 생성하지 않습니다.
• 나중에 시스템을 새로고침, 교체, 제거할 수 있으며, 바인딩은 세션 간에 유지됩니다.

기존 자산 가져오기

• Figma .fig – 완전히 오프라인에서 디코딩 가능. API 키 필요 없음. 페이지, 컴포넌트, 토큰, SVG/PNG 자산을 추출하고, 전체 디자인 시스템 또는 React 코드를 생성할 수 있습니다.
• GitHub 리포지토리 – 필요한 경로만 스파스 체크아웃하고, 출처를 기록하기 위해 리포지토리 URL을 기록합니다.
• HTML/CSS – 실제 스타일시트를 읽고, 색상, 여백, 그림자 등 정확한 값을 복사하여 새 프로젝트에 포함합니다.

디크 및 PPTX 내보내기

• 디크는 deck‑stage 컴포넌트를 사용해 자기 포함형 HTML로 구축됩니다.
• data-anim 속성을 통해 각 요소에 애니메이션을 추가할 수 있습니다(예: fade-in, fly-in, path).
• 스킬은 로컬 CLI(agents/gen-pptx/)를 포함하며, Playwright를 통해 헤드리스 Chromium을 실행하고, 라이브 DOM을 캡처하여 PptxGenJS를 사용해 네이티브 애니메이션이 포함된 PowerPoint 파일을 생성합니다. 외부 서비스는 필요 없습니다.

미리보기 서버 (수동으로 실행할 경우)

python3 -m http.server 4311 --directory designs
# 이후 http://localhost:4311/<project>/<file>.html 열기

라이선스 및 배지

• MIT License
• Claude Opus 4.8 최적화 (배지 "Best with Opus 4.8")
• Cursor · Claude Code · Codex 지원 (배지 "Harness")

---

결론: baoyu‑design은 강력한 Claude Design 엔진을 로컬 코딩 에이전트 내에서 실행할 수 있게 해주며, 모크업, 프로토타입, 디자인 시스템 관리, HTML/PDF/PPTX로 내보내기 등 완전한 기능의 UI/UX 디자인 워크플로우를 제공합니다. 에디터를 벗어나지 않고, 호스팅 서비스에 대한 요금도 지불하지 않아도 됩니다.