Repolode
feimacode

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. 1

    프로젝트에서 원커맨드 설정을 실행해 Claude Code를 연결하세요

    npx @feimacode/open-design-agent-kit init --tools claude
  2. 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 통계는 매일 갱신됩니다.

관련 프로젝트