← 보드로 돌아가기

superdesigndev/superdesign

AI Product Design Agent - Open Source

GitHub에서 열기 ↗
6,639
GitHub 스타
724
포크
TypeScript
언어
NOASSERTION
라이선스
2026.06.29
최근 푸시
2026.05.28
별표한 날

AI 분석

설치 난이도: 쉬움
큐레이터 노트
AI 기반 UI 디자인을 IDE 내에서 빠르게 프로토타이핑하려는 개발자에게 적합합니다. 특히 Cursor나 Windsurf 사용자라면 설치 후 바로 활용할 수 있어 생산성 향상에 도움이 됩니다.

강점

  • IDE 내에서 자연어로 UI 디자인을 생성할 수 있어 개발자의 디자인 워크플로우를 크게 단축시킵니다.
  • Cursor, Windsurf, Claude Code, VS Code 등 다양한 AI IDE와 호환되어 유연하게 사용할 수 있습니다.
  • 오픈소스이므로 자유롭게 포크, 확장, 커스터마이징이 가능합니다.

약점

  • README에 구체적인 아키텍처나 기술 스택에 대한 설명이 부족하여 심층적인 이해가 어렵습니다.
  • 로컬 OpenAI 호환 서버 설정 방법이 간략하게만 언급되어 있어 초보자에게는 다소 어려울 수 있습니다.

주의사항

  • 확장 프로그램 초기화 시 Cursor/Claude Code 규칙이 추가되므로 기존 설정과 충돌할 가능성이 있습니다.
  • 생성된 디자인은 로컬 .superdesign/ 폴더에 저장되므로 백업이나 공유 시 주의가 필요합니다.

시작 가이드

  • Cursor 또는 VS Code 마켓플레이스에서 SuperDesign 확장 프로그램을 설치합니다.
  • 사이드바 패널을 열고 간단한 프롬프트로 UI 목업을 생성해 봅니다.
  • 생성된 디자인을 포크하고 수정하여 프로젝트에 적용해 봅니다.
  • 로컬 OpenAI 호환 서버를 사용하려면 설정에서 URL을 추가합니다.

README 한국어 번역

이 번역은 AI가 원문 README를 옮긴 것입니다. 원문이 항상 우선합니다.

🧠 SuperDesign — IDE용 AI 디자인 에이전트

🆕 새로운 소식: SuperDesign Chrome 확장 프로그램 - 모든 웹사이트 및 UI를 클론하세요

!SuperDesign 표지

제작자: AI Jason

SuperDesign은 IDE 내에서 바로 작동하는 최초의 오픈소스 디자인 에이전트입니다. 자연어 프롬프트로부터 UI 목업, 컴포넌트, 와이어프레임을 직접 생성합니다. Cursor, Windsurf, Claude Code, 일반 VS Code와 완벽하게 호환됩니다.

✨ "하나의 옵션만 디자인할 바에야 열 가지를 탐험해보는 게 낫지 않겠어요?" — SuperDesign

Discord 참여

Hackernews에서 추천

설치 가이드

🎬 데모 비디오 (클릭하여 재생)

!SuperDesign 데모

🚀 기능

  • 🖼️ 제품 목업: 단일 프롬프트로 전체 UI 화면을 즉시 생성합니다.
  • 🧩 UI 컴포넌트: 코드에 바로 삽입할 수 있는 재사용 가능한 컴포넌트를 만듭니다.
  • 📝 와이어프레임: 빠른 반복을 위해 저충실도 레이아웃을 탐색합니다.
  • 🔁 포크 및 반복: 디자인을 쉽게 복제하고 발전시킵니다.
  • 📥 프롬프트에서 IDE로: 프롬프트를 즐겨 사용하는 AI IDE(Cursor, Windsurf, Claude Code)에 복사합니다.

🧠 Cursor, Windsurf, Claude Code, VS Code와 완벽하게 작동

👉 여기서 설치

🛠️ 시작하기

  1. Cursor/VS Code 마켓플레이스에서 확장 프로그램을 설치합니다.
  2. SuperDesign 사이드바 패널을 엽니다.
  3. 프롬프트를 입력합니다 (예: "현대적인 로그인 화면 디자인").
  4. 생성된 목업, 컴포넌트, 와이어프레임을 확인합니다.
  5. 포크하고, 수정하고, 프로젝트에 붙여넣습니다.

자체 Claude Code 또는 Cursor 구독을 사용할 수 있나요?

네, SuperDesign 확장 프로그램을 초기화하면 일부 cursor/claude code 규칙이 추가되므로, 에이전트에게 디자인을 요청하고 SuperDesign 캔버스에서 미리보기를 할 수 있습니다 (cmd + shift + p -> superdesign: open canva).

Cursor를 사용하는 경우 — 'design.mdc'의 프롬프트를 복사하여 동일한 시스템 프롬프트로 Cursor에 커스텀 모드를 만드는 것을 적극 권장합니다. 이렇게 하면 훨씬 더 나은 성능을 얻을 수 있습니다.

지침 (클릭하여 재생): 지침 비디오

로컬 OpenAI 호환 서버를 실행하는 방법은?

  1. AI 모델 제공자에서 open ai를 선택합니다.
  2. Openai Api Key 입력란에 아무 값이나 입력합니다.
  3. Openai Url 입력란에 OpenAi URL을 추가합니다 (예: LM Studio의 경우 http://127.0.0.1:1234/v1).

📂 내 디자인은 어디에 저장되나요?

생성된 디자인은 로컬의 .superdesign/ 폴더에 저장됩니다.

❓ FAQ

무료이고 오픈소스인가요? 네! 오픈소스입니다 — 포크하고, 확장하고, 리믹스하세요.

디자인 에이전트를 커스터마이징할 수 있나요? 네 — 자체 프롬프트 템플릿을 사용하고, 동작을 수정하거나 명령을 추가할 수 있습니다.

SuperDesign이 기존 UI를 업데이트할 수 있나요? 물론입니다 — 컴포넌트를 선택하고, 변경 사항을 설명하면 에이전트가 나머지를 처리합니다.

<img width="886" height="586" alt="image" src="https://github.com/user-attachments/assets/71b7cfcc-6123-40ea-aae5-05ea6cdcea96" />

어떻게 기여할 수 있나요? 풀 리퀘스트를 환영합니다. 저장소에 별표를 누르고 Discord에서 함께해 주세요!

🔗 링크

원본 저장소: superdesigndev/superdesign

라이선스: NOASSERTION

게재 제외를 원하시면 삭제 요청을 보내주세요.