자체 코딩 에이전트로 기획안을 프로토타입·덱·대시보드·이미지·영상으로 만드는 로컬 우선 오픈소스 AI 디자인 워크스페이스
feimacode/open-design-agent-kit
별도의 데스크톱 앱 없이 GitHub Copilot, Claude Code, Codex 또는 Cursor에서 포스터, 소셜 게시물, 슬라이드와 랜딩 페이지를 디자인하세요.
대체할 수 있는 제품:Canva
- 스타
- 1,028
- 포크
- 100
- 열린 이슈
- 8
- 마지막 커밋
- 어제
어떤 프로젝트인가요?
Open Design Agent Kit은 GitHub Copilot Chat, Claude Code, Codex, Cursor 같은 코딩 에이전트나 MCP를 지원하는 에이전트에서 사용할 수 있도록 디자인 스킬, 브랜드 디자인 시스템, 리믹스 가능한 예제를 제공합니다. 평소 사용하는 채팅에서 피치 덱, 랜딩 페이지, 대시보드 또는 모바일 프로토타입을 설명하면 에이전트가 자체 모델과 파일 도구를 사용해 파일을 생성합니다.
이 키트에는 디자인 시스템 198개, 스킬 181개, 템플릿 114개, 예제 산출물 193개가 포함되어 있습니다. 생성 결과는 저장소에 일반 파일로 저장되므로 다른 코드와 마찬가지로 검토하고 diff를 확인한 뒤 커밋할 수 있습니다. 에이전트는 디자인을 브라우저에서 렌더링하고, 작업을 마치기 전에 텍스트 잘림, 낮은 대비, 누락된 포커스 상태를 검사합니다.
VS Code 확장, Claude Code 플러그인, Codex 스킬 세트, MCP 서버로 설치하거나 한 줄짜리 npx 명령을 사용할 수 있습니다. PDF, PNG, PowerPoint 내보내기를 지원하며, 일부 워크플로는 해당 MCP 서버를 사용할 수 있을 때 Figma, Canva, Notion 같은 서비스와 연동됩니다.
핵심 기능
- 01GitHub Copilot Chat, Claude Code, Codex, Cursor 및 기타 MCP 지원 에이전트에서 실행됩니다.
- 02생성된 디자인의 일관성을 유지하는 브랜드 디자인 시스템 198개를 제공합니다.
- 03편집 가능한 예제 산출물 193개에서 시작하거나 브리프를 바탕으로 생성할 수 있습니다.
- 04결과물을 전달하기 전에 브라우저에서 렌더링하고 디자인을 검사합니다.
- 05결과물을 저장소에 일반 파일로 저장합니다.
- 06PDF, PNG, PowerPoint로 내보낼 수 있습니다.
활용 사례
- 에디터에서 짧은 프롬프트만으로 소셜 미디어 그래픽이나 포스터 만들기.
- 프로덕션 코드로 구현하기 전에 슬라이드 덱이나 랜딩 페이지 프로토타입 초안 작성하기.
- CSV나 문서를 저장소 안에서 보고서 형식의 레이아웃으로 변환하기.
- 인쇄용 이력서나 한 페이지 문서를 제작해 PDF로 내보내기.
빠른 시작
- 1
프로젝트에서 원커맨드 설정을 실행해 Claude Code를 연결하세요
npx @feimacode/open-design-agent-kit init --tools claude - 2
에이전트 채팅을 열고 랜딩 페이지나 포스터처럼 원하는 디자인을 설명하세요
사용 전 알아둘 점
- 기존 코딩 에이전트 내에서 실행되므로 Claude Code, Codex, GitHub Copilot, Cursor와 같은 에이전트가 필요합니다.
- npx 기반 설치 방법을 사용하려면 Node.js가 필요합니다.
- Figma와 같은 일부 연동에는 전용 토큰이나 공식 MCP 서버가 필요합니다.
포함된 컬렉션
토픽
자주 묻는 질문
- open-design-agent-kit은(는) 무엇인가요?
- 별도의 데스크톱 앱 없이 GitHub Copilot, Claude Code, Codex 또는 Cursor에서 포스터, 소셜 게시물, 슬라이드와 랜딩 페이지를 디자인하세요. Open Design Agent Kit은 GitHub Copilot Chat, Claude Code, Codex, Cursor 같은 코딩 에이전트나 MCP를 지원하는 에이전트에서 사용할 수 있도록 디자인 스킬, 브랜드 디자인 시스템, 리믹스 가능한 예제를 제공합니다. 평소 사용하는 채팅에서 피치 덱, 랜딩 페이지, 대시보드 또는 모바일 프로토타입을 설명하면 에이전트가 자체 모델과 파일 도구를 사용해 파일을 생성합니다.
- open-design-agent-kit은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- open-design-agent-kit은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- open-design-agent-kit은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. open-design-agent-kit의 마지막 커밋은 2026년 11월 6일입니다.
- open-design-agent-kit은(는) 어디에 사용할 수 있나요?
- 에디터에서 짧은 프롬프트만으로 소셜 미디어 그래픽이나 포스터 만들기. 프로덕션 코드로 구현하기 전에 슬라이드 덱이나 랜딩 페이지 프로토타입 초안 작성하기. CSV나 문서를 저장소 안에서 보고서 형식의 레이아웃으로 변환하기. 인쇄용 이력서나 한 페이지 문서를 제작해 PDF로 내보내기.
- open-design-agent-kit는 어떻게 설치하나요?
- 프로젝트에서 원커맨드 설정을 실행해 Claude Code를 연결하세요: npx @feimacode/open-design-agent-kit init --tools claude 에이전트 채팅을 열고 랜딩 페이지나 포스터처럼 원하는 디자인을 설명하세요
- open-design-agent-kit은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/feimacode/open-design-agent-kit
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
Cursor, Claude Code 등의 에이전트에서 Claude Design을 로컬로 실행해 독립 실행형 HTML 목업, 프로토타입, 프레젠테이션을 만드는 Agent Skill입니다.
코딩 에이전트에 디자인 시스템, UI/UX 가이드, 아이콘, 접근성 검수 규칙을 제공하는 MCP 서버이자 shadcn/ui 레지스트리입니다.
설치된 코딩 에이전트 CLI를 활용해 Markdown, CSV, 메모를 단일 파일 HTML 페이지, 슬라이드 덱, 포스터로 만드는 로컬 우선 HTML 편집기입니다.
Claude Code와 Cursor 같은 코딩 에이전트에 디자인 감각을 더해 UI, 슬라이드 덱, 그래픽을 생성하고 반복 개선할 수 있는 에이전트 스킬입니다.
사용자가 선택한 AI 모델로 프롬프트를 프로토타입, 슬라이드 덱, PDF로 만드는 오픈소스 로컬 우선 데스크톱 앱입니다.