Repolode
제출하기
nexu-io

nexu-io/open-design

코딩 에이전트로 프로토타입, 웹사이트, 덱, 이미지, 동영상을 만드는 로컬 우선 오픈소스 AI 디자인 에이전트 워크스페이스입니다.

대체할 수 있는 제품:Figma MakeCanvaLovable

GitHub에서 보기웹사이트
스타
101,907
포크
11,707
열린 이슈
1,196
마지막 커밋
어제

어떤 프로젝트인가요?

OpenDesign은 디자인 브리프를 프로토타입, 웹사이트, 앱 화면, 대시보드, 슬라이드 덱, 이미지 또는 모션 그래픽으로 구현하는 워크스페이스입니다. 로컬 머신에서 실행되며 Claude Code, Codex, Cursor, OpenCode 같은 주요 코딩 에이전트를 구동해, 이미 사용 중인 에이전트를 디자인 엔진으로 활용합니다. 결과물은 브랜드 규칙을 담는 DESIGN.md 파일을 중심으로 구성되며, 프로젝트에는 렌더링마다 바꿔 적용할 수 있는 디자인 시스템 패키지 151개가 포함되어 있습니다.

이 프로젝트는 디자인 작업을 공유하고 함께 다듬어야 하는 팀을 위해 만들어졌습니다. 팀원과 프로젝트를 검토하고, 같은 프로젝트를 개선하도록 에이전트에 피드백을 보낼 수 있습니다. 덱 결과물은 HTML, PDF, PPTX, ZIP 또는 Markdown으로 내보낼 수 있으며, 동영상 템플릿은 HyperFrames 프레임워크를 통해 MP4로 렌더링됩니다.

통합 방식은 여러 가지입니다. macOS 및 Windows용 데스크톱 앱, Docker 배포, 소스에서 직접 실행하는 방식, 그리고 외부 에이전트가 od CLI를 통해 프로젝트의 최신 파일을 읽을 수 있게 해주는 stdio MCP 서버를 지원합니다. 코딩 에이전트 CLI가 설치되어 있지 않은 경우에는 BYOK 프록시를 통해 OpenAI, Anthropic, Azure, Google Gemini, Ollama 같은 제공업체도 사용할 수 있습니다.

핵심 기능

  • 01브리프를 프로토타입, 웹사이트, 대시보드, 덱, 이미지 및 MP4 모션 그래픽으로 구현합니다.
  • 02DESIGN.md의 브랜드 규칙과 기본 제공되는 디자인 시스템 패키지 151개를 사용합니다.
  • 03Claude Code, Codex, Cursor, Copilot, OpenCode 및 기타 코딩 에이전트와 연동됩니다.
  • 04MCP 서버와 od CLI를 통해 외부 에이전트가 프로젝트 파일을 사용할 수 있게 합니다.
  • 05OpenAI, Anthropic, Ollama 등을 포함한 모델 제공업체에 BYOK 방식으로 연결할 수 있습니다.
  • 06덱을 HTML, PDF, PPTX, ZIP 또는 Markdown으로 내보냅니다.

활용 사례

  • 제품 팀이 브리프를 바탕으로 랜딩 페이지나 앱 프로토타입을 만들고 피드백을 공유하는 경우.
  • 완성된 HTML/CSS 프로토타입을 Cursor나 Claude Code에 전달해 React 또는 Vue 코드로 구현하는 경우.
  • 기존 git 저장소의 컴포넌트를 DESIGN.md 브랜드 사양에 맞게 새로 다듬는 경우.
  • 브랜드 스타일을 일관되게 적용한 슬라이드 덱이나 짧은 홍보 동영상을 만드는 경우.

토픽

#ai-design#coding-agents#prototyping#design-systems#local-first#mcp#video-generation#agent-skills#byok#claude-code-for-design

자주 묻는 질문

open-design은(는) 무엇인가요?
코딩 에이전트로 프로토타입, 웹사이트, 덱, 이미지, 동영상을 만드는 로컬 우선 오픈소스 AI 디자인 에이전트 워크스페이스입니다. OpenDesign은 디자인 브리프를 프로토타입, 웹사이트, 앱 화면, 대시보드, 슬라이드 덱, 이미지 또는 모션 그래픽으로 구현하는 워크스페이스입니다. 로컬 머신에서 실행되며 Claude Code, Codex, Cursor, OpenCode 같은 주요 코딩 에이전트를 구동해, 이미 사용 중인 에이전트를 디자인 엔진으로 활용합니다. 결과물은 브랜드 규칙을 담는 DESIGN.md 파일을 중심으로 구성되며, 프로젝트에는 렌더링마다 바꿔 적용할 수 있는 디자인 시스템 패키지 151개가 포함되어 있습니다.
open-design은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
open-design은(는) Apache-2.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
open-design은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. open-design의 마지막 커밋은 2026년 10월 17일입니다.
open-design은(는) 어디에 사용할 수 있나요?
제품 팀이 브리프를 바탕으로 랜딩 페이지나 앱 프로토타입을 만들고 피드백을 공유하는 경우. 완성된 HTML/CSS 프로토타입을 Cursor나 Claude Code에 전달해 React 또는 Vue 코드로 구현하는 경우. 기존 git 저장소의 컴포넌트를 DESIGN.md 브랜드 사양에 맞게 새로 다듬는 경우. 브랜드 스타일을 일관되게 적용한 슬라이드 덱이나 짧은 홍보 동영상을 만드는 경우.
open-design은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/nexu-io/open-design

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트