JimLiu/baoyu-design

어떤 프로젝트인가요?

핵심 기능

• 01UI 목업, 프로토타입, 와이어프레임, 랜딩 페이지를 독립 실행형 HTML로 생성합니다.
• 02localhost에서 디자인을 미리 보고, 요소를 가리켜 수정 사항을 요청할 수 있습니다.
• 03네이티브 애니메이션이 포함된 편집 가능한 PowerPoint 또는 스크린샷으로 덱을 내보냅니다.
• 04슬라이드 덱, 디자인 캔버스, 디자인 시스템, 대시보드용 에디터를 제공합니다.
• 05Figma .fig 파일, GitHub 저장소, 기존 HTML/CSS에서 디자인 소스를 가져옵니다.
• 06npx skills CLI를 통해 Claude Code, Cursor, Codex에 설치합니다.

활용 사례

• 에디터에서 설정 화면이나 온보딩 흐름을 목업으로 만들어 봅니다.
• PRD나 분석 CSV를 슬라이드 덱 또는 대시보드로 변환합니다.
• Figma .fig 키트를 가져와 재사용 가능한 디자인 시스템으로 만듭니다.
• 랜딩 페이지를 만든 뒤 독립 실행형 HTML로 내보냅니다.

빠른 시작

1. 1

   skills CLI로 프로젝트에 스킬을 설치합니다

   npx skills add JimLiu/baoyu-design
2. 2

   에이전트에게 디자인 작업을 설명합니다(예: 명상 앱의 설정 화면)

3. 3

   생성된 디자인을 확인할 로컬 미리보기 서버를 시작합니다

   python3 -m http.server 4311 --directory designs

사용 전 알아둘 점

• !최상의 결과를 얻으려면 모델로 Claude Opus 5.5가 필요하며, 유료 구독이 필요할 수 있습니다.
• !아티팩트 편집기를 사용하려면 Node.js 20 이상이 필요합니다(dashboard skill은 Node.js 22 이상).

포함된 컬렉션

토픽

자주 묻는 질문

baoyu-design은(는) 무엇인가요?

Cursor, Claude Code 등의 에이전트에서 Claude Design을 로컬로 실행해 독립 실행형 HTML 목업, 프로토타입, 프레젠테이션을 만드는 Agent Skill입니다. baoyu-design은 claude.ai/design의 Claude Design 워크플로를 Cursor, Claude Code, Codex 같은 로컬 코딩 에이전트에서 실행할 수 있는 이식형 Agent Skill로 제공합니다. 에이전트는 추가 질문을 하고, designs/ 폴더에 독립 실행형 HTML로 UI 목업, 인터랙티브 프로토타입, 와이어프레임, 랜딩 페이지, 대시보드, 모바일 화면, 슬라이드 덱을 만든 뒤 localhost에서 미리 보여 줍니다.

baoyu-design은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

baoyu-design은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

baoyu-design은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. baoyu-design의 마지막 커밋은 2026년 11월 5일입니다.

baoyu-design은(는) 어디에 사용할 수 있나요?

에디터에서 설정 화면이나 온보딩 흐름을 목업으로 만들어 봅니다. PRD나 분석 CSV를 슬라이드 덱 또는 대시보드로 변환합니다. Figma .fig 키트를 가져와 재사용 가능한 디자인 시스템으로 만듭니다. 랜딩 페이지를 만든 뒤 독립 실행형 HTML로 내보냅니다.

baoyu-design는 어떻게 설치하나요?

skills CLI로 프로젝트에 스킬을 설치합니다: npx skills add JimLiu/baoyu-design 에이전트에게 디자인 작업을 설명합니다(예: 명상 앱의 설정 화면) 생성된 디자인을 확인할 로컬 미리보기 서버를 시작합니다: python3 -m http.server 4311 --directory designs

baoyu-design은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/JimLiu/baoyu-design