← 전체 스킬
🎨
baoyu-design (Claude Design 스킬)
claude.ai/design 뒤에 있는 Claude Design 디자인 엔진을 이식 가능한 Agent Skill로 패키징했습니다. Claude Code·Cursor·Codex에 넣으면 웹사이트 업로드나 구독 없이 에디터 안에서 세련된 UI 목업, 인터랙티브 프로토타입, 와이어프레임, 랜딩페이지, 대시보드, 슬라이드를 만들 수 있고, 결과물은 모두 자기완결형 HTML로 저장소에 남습니다.
핵심 기능
- Claude Design 로컬 실행
- 자기완결형 HTML 출력
- 프로토타입·와이어·슬라이드
- 미리보기 클릭해 수정
설치 방법
npx skills add JimLiu/baoyu-design
-g로 전역 설치. .claude/skills(Claude Code) 또는 .agents/skills에 설치. 저장소 URL을 붙여넣어 SKILL.md대로 실행시켜도 됩니다.
사용 방법
설치 후 자연어로 요청하세요. 예: "명상 앱 설정 화면 고해상도 시안 3종 만들어줘." Claude Code에서는 /baoyu-design으로 명시 실행. 에이전트가 요구사항을 물은 뒤 designs/ 아래에 HTML을 만들고 localhost로 미리보기하며, 미리보기 요소를 클릭해 수정 요청하는 시각적 편집 루프가 가능합니다. Claude Opus 4.8에서 가장 좋습니다.
필요 조건
로컬 에이전트(Cursor / Claude Code / Codex 등) + Node.js(설치기). 미리보기 서버에 Python 3. Claude Opus 4.8 권장.
관련 스킬