슈퍼디자인(SuperDesign)의 오픈소스 저장소 superdesigndev/superdesign은 코드 편집기 안에서 UI 디자인 초안을 만들어 주는 AI 디자인 에이전트다. 개발자가 디자이너 도구와 편집기를 오가야 하는 번거로움을 줄이는 것이 목표다. README에 따르면 AI Jason이 만들었고, 커서(Cursor)와 윈드서프(Windsurf), 클로드 코드(Claude Code), 일반 VS Code에서 쓸 수 있다.
무엇을 하나
자연어로 요청하면 화면 전체 목업, 재사용 가능한 UI 컴포넌트, 저충실도 와이어프레임을 생성한다. 만든 디자인을 복제해 변형하는 포크·반복 기능도 있다. 이미 있는 UI는 컴포넌트를 선택하고 바꿀 내용을 설명하면 에이전트가 수정한다. 생성한 프롬프트는 복사해 다른 AI IDE에 붙여넣을 수 있다.
써보면
Marketplace에서 확장을 설치하고 사이드바의 SuperDesign 패널을 연 뒤 "모던한 로그인 화면을 디자인해줘" 같은 프롬프트를 입력한다. 결과물은 캔버스에서 확인하고, 수정해 프로젝트에 붙여넣는 흐름이다. 디자인은 프로젝트 내 .superdesign/ 폴더에 로컬로 저장된다.
이미 쓰는 Claude Code나 Cursor 구독도 활용할 수 있다. 확장을 초기화하면 관련 규칙 파일이 추가되고, 명령 팔레트에서 superdesign: open canva를 실행해 캔버스에서 미리 볼 수 있다. README는 Cursor에서 design.mdc의 프롬프트를 커스텀 모드의 시스템 프롬프트로 쓰면 성능이 더 좋아진다고 권한다. 로컬 모델도 지원한다. AI 모델 제공자로 OpenAI를 고르고 API 키 칸에 아무 값이나 넣은 뒤, LM Studio 등의 호환 서버 주소(예: http://127.0.0.1:1234/v1)를 입력하면 된다.
의의와 한계
가장 눈여겨볼 점은 저장소 상태다. README 상단은 이 저장소가 2025년에 나온 원조 오픈소스 IDE 확장이며 기록용으로 남겨 두었을 뿐 더는 적극적으로 관리되지 않는다고 밝힌다. 제품은 무한 캔버스에서 프롬프트로 UI 목업과 컴포넌트, 전체 디자인을 생성하는 웹 앱(superdesign.dev)으로 이전했다. 편집기 안에서 쓰고 싶은 사용자를 위해 Claude Code, Cursor 같은 코딩 에이전트에서 디자인 스킬로 쓰는 별도 저장소(superdesign-skill)와 웹사이트 복제용 크롬 확장도 내놨다.
따라서 새로 도입한다면 최신 기능과 안정성을 기대하기 어렵다. 다만 IDE 기반 디자인 에이전트의 구조와 프롬프트 설계를 참고하거나 포크해 커스터마이징하기에는 좋은 자료다. 라이선스는 제공된 README에서 확인되지 않았다.
