Claude 디자인 작업을 로컬 도구에서 바로 실행하는 오픈소스
baoyu-design은 Claude 디자인 기능을 Cursor나 Claude Code 같은 로컬 작업 도구 안에서 쓰게 해주는 오픈소스입니다. 화면 시안, 프로토타입, 발표 자료, 와이어프레임을 self-contained HTML로 만들 수 있습니다. 별도 claude.ai/design 화면으로 옮기지 않아도 되어 AI 에이전트 작업 흐름을 줄이는 데 도움이 될 수 있습니다.
핵심 포인트
- Cursor, Claude Code 같은 도구에서 Agent Skill로 실행하는 방식입니다.
- 결과물을 self-contained HTML로 만들어 공유하거나 확인하기 쉽습니다.
- 디자인 초안을 빠르게 만들 수 있어 반복 지시와 수정 시간을 줄일 수 있습니다.
- Opus 4.8에서 가장 좋다고 설명되어 있어 모델 비용은 따로 확인해야 합니다.
용어 한 줄 설명
- 프로토타입
- 아이디어가 실제로 작동하는지 시험해 보기 위해 간단하게 먼저 만들어 보는 초기 결과물입니다.
- self-contained HTML
- 한 파일 안에 화면 내용과 스타일을 담아 바로 열어볼 수 있는 HTML입니다.
- HTML
- 웹페이지의 글, 버튼, 링크 같은 구조를 담는 기본 문서 형식입니다.
- AI 에이전트
- 사람 대신 정보를 찾거나 작업을 처리하도록 만든 AI 프로그램입니다.
- Agent Skill
- AI 도구 안에서 특정 작업을 맡아 실행하는 작은 기능 묶음입니다.
- skill
- 반복 업무를 처리하도록 정리한 재사용 가능한 지시나 절차입니다.
- Opus 4.8
- Claude 계열의 고성능 AI 모델 이름입니다.
- Opus
- Anthropic의 Claude 계열 고성능 모델 이름으로 쓰입니다.