가이드

Claude Design여 안녕! 최고의 오픈소스 AI UI 생성기가 여기 있다

Windows 11에서 Open Design을 설치하고 실행하세요 — 간편한 네이티브 데스크톱 빌드는 물론, Node 24와 pnpm을 사용해 WSL을 거쳐 소스로 빌드하는 방법까지. 오픈소스 AI UI 생성기를 클라우드 구독 없이 로컬에서 실행하세요. AI Automation의 실습 영상을 바탕으로 합니다.

AI Automation 2026년 5월 5일 16:45 YouTube ↗

이 가이드는 자신의 컴퓨터에서 Open Design을 실행하고 싶은 Windows 사용자를 위한 것입니다 — 클라우드 계정도, 소진해야 할 월간 크레딧도 필요 없습니다. AI Automation이 그들의 Windows 설치 실습 영상에서 따라가는 경로를 그대로 따르되, 명령어 하나하나를 따라 할 수 있도록 최신 릴리스에 맞게 다시 쓰고 업데이트했습니다. 실제 실행 과정은 위 영상을 보고, 글로 된 버전은 아래에서 읽어 보세요.

로컬에서 실행 중인 Open Design 작업 공간. Windows에서 로컬로 실행되는 Open Design: 완전히 직접 제어하는 오픈소스 에이전트 네이티브 디자인 작업 공간입니다.

Open Design이란?

Open Design은 오픈소스이자 로컬 우선 디자인 플랫폼으로, Claude Design과 Figma에 대한 에이전트 네이티브 대안입니다. 하나의 모델 공급자에 묶이는 대신, 이미 사용 중인 코딩 에이전트 위에서 실행됩니다: Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode 등 십수 가지입니다. 단순히 자신의 키를 가져오는 것을 넘어 “자신의 에이전트를 가져오는” 방식입니다.

주목할 만한 점 몇 가지:

오픈소스, Apache-2.0 — 복제하고, 직접 호스팅하고, 모든 코드를 읽어 보세요.
로컬에서 실행 — 프로젝트가 다른 누군가의 클라우드가 아니라 내 컴퓨터의 내 폴더 안에 저장됩니다.
에이전트 플러그인 방식 — 21개 이상의 코딩 에이전트가 지원됩니다. 어떤 CLI가 생성을 구동할지 직접 고르며, 출력 품질은 선택한 모델을 따라갑니다.
프로토타입 그 이상 — 프로토타입, 라이브 아티팩트, 슬라이드 덱, 매거진 레이아웃, 이미지 생성, 심지어 영상까지 모두 하나의 작업 공간에서.
디자인 시스템과 템플릿 내장 라이브러리로, 빈 캔버스에서 시작하지 않아도 됩니다.

Claude Design을 사용해 본 적이 있다면 그 느낌이 즉시 익숙할 것입니다 — Open Design은 동일하게 차분한 미감을 유지하면서, 그 위에 기능(그리고 원하는 모델 선택권)을 더합니다.

시작하기 전에

Windows에서 Open Design을 설치하는 방법은 세 가지입니다. 자신에게 맞는 것을 고르세요:

경로	적합한 대상	요구 사항
데스크톱 앱 (Windows x64)	대부분의 Windows 사용자 — 설정 불필요	없음. 내려받아 열기만 하면 됩니다.
소스에서 실행 (WSL)	코드를 읽거나 수정하고 싶은 개발자	WSL2 + Ubuntu, Node `~24`, pnpm `10.33.x`
에이전트에 설치	터미널에서 사는 사람	이미 설치된 코딩 에이전트 CLI

이 영상은 WSL 소스 빌드 경로를 사용하는데, 저장소 안에서 작업하고 싶다면 아주 좋은 방법입니다. 하지만 대부분의 사람에게는 네이티브 Windows 데스크톱 빌드가 권장 경로입니다 — WSL도, Node도, 복제도 필요 없는 Windows (x64) 설치 프로그램이 있습니다. 이 가이드는 두 가지를 모두 다룹니다. 아래 WSL 실습은 특별히 소스 경로를 원할 때를 위한 것입니다.

1단계 — WSL 설정

데스크톱 앱만 원한다면 2단계의 옵션 A로 건너뛰세요. 소스 빌드 경로를 원한다면 먼저 Windows 안에 Linux 환경이 필요합니다. 바로 그것을 WSL(Windows Subsystem for Linux)이 제공합니다 — 듀얼 부팅도, 돌봐야 할 가상 머신도 없이 Windows와 나란히 실행되는 진짜 Ubuntu 셸입니다.

1. WSL과 Ubuntu를 설치합니다. PowerShell을 열고 wsl --install을 실행하세요 — 이 명령은 WSL2를 활성화하고 기본으로 Ubuntu를 설치합니다. Windows가 요청하면 재부팅한 뒤, 시작 메뉴에서 Ubuntu를 실행하고 처음 열릴 때 Linux 사용자 이름과 비밀번호를 설정하세요. (다른 도구에서 이미 Ubuntu를 설치했나요? 그대로 재사용하면 됩니다 — 다시 할 필요 없습니다.)

2. 기본 패키지를 업데이트합니다. Ubuntu 셸 안에서 패키지 인덱스를 새로 고치고 필수 패키지를 설치하세요:

sudo apt update && sudo apt install -y curl git

영상에서 알려 주는 문제 해결 팁: 이후 단계에서 이상한 오류가 발생하면 Linux 인스턴스를 깔끔하게 다시 시작하세요 — PowerShell에서 wsl --shutdown을 실행한 다음 Ubuntu를 다시 여세요. 새로 시작하면 첫 실행 시의 자잘한 문제 대부분이 해결됩니다.

3. Node 24를 설치합니다. 소스 빌드는 Node ~24를 대상으로 합니다. 깨끗한 Ubuntu에는 아직 nvm이 없으므로, 먼저 설치한 뒤 그것으로 Node 24를 받으세요:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc            # 현재 셸에 nvm을 로드
nvm install 24
nvm use 24
node --version              # v24.x가 출력되어야 함

Ubuntu가 설정되고 Node 24가 활성화되면 Open Design을 설치할 준비가 끝난 것입니다.

2단계 — Open Design 설치

옵션 A — Windows 데스크톱 앱 (권장, 설정 불필요)

open-design.ai로 이동해 Download desktop을 클릭하세요. 네이티브 Windows (x64) 빌드가 있습니다(macOS와 Linux와 함께). 설치 프로그램을 실행하고 앱을 연 다음, 앱이 이미 PATH에 있는 모든 코딩 에이전트 CLI를 자동으로 감지하고 내장 스킬과 디자인 시스템을 불러옵니다. WSL도, 터미널도 필요 없습니다 — Windows에서 가장 간단한 경로입니다.

옵션 B — 소스에서 실행 (WSL 내부)

AI Automation이 시연하는 경로입니다. Node 24가 활성화된 Ubuntu 셸 안에서 저장소를 복제하고 웹 런타임을 시작하세요:

git clone https://github.com/nexu-io/open-design.git ~/open-design
cd ~/open-design
corepack enable && pnpm install
pnpm tools-dev run web

corepack enable는 Corepack이 저장소에 고정된 pnpm 버전(10.33.x)을 선택하도록 해 주므로, pnpm을 직접 설치하지 않아도 됩니다. pnpm install은 의존성을 받아 오고 네이티브 구성 요소를 컴파일합니다 — 첫 실행에서는 몇 분이 걸릴 수 있는데, 이는 예상된 동작이며 실패가 아닙니다. 이어서 pnpm tools-dev run web이 로컬 데몬과 웹 서버를 부팅합니다.

완료되면 명령이 로컬 URL을 출력합니다 — 복사해서 Windows 브라우저에 붙여 넣으세요. WSL이 포트를 Windows로 자동 전달하므로 앱이 그대로 열립니다.

중요: 포트는 실행 시 동적으로 할당됩니다 — 명령이 실제로 출력하는 주소를 읽으세요. 고정된 포트라고 가정하지 마세요. 주소는 컴퓨터마다, 실행마다 다를 수 있습니다.

옵션 C — 코딩 에이전트에 설치 (WSL)

GUI를 건너뛰고 에이전트 안에서 Open Design을 MCP 서버로 호출하고 싶나요? WSL에서는 먼저 한 가지 추가 단계가 있습니다. Linux에는 이미 /usr/bin/od(octal-dump 도구)가 들어 있어 Open Design 자체의 od를 가립니다 — 그래서 그대로 두면 od mcp install …이 mcp/install에 대해 “file not found” 오류로 실패할 수 있습니다. od가 여러분의 복제본을 가리키도록 하는 작은 래퍼를 추가하고 PATH의 맨 앞에 두세요:

mkdir -p ~/.local/bin
cat > ~/.local/bin/od <<'EOF'
#!/usr/bin/env bash
repo="$HOME/open-design"     # Option B의 ~/open-design 복제본
cd "$repo" || exit 127
exec corepack pnpm exec od "$@"
EOF
chmod +x ~/.local/bin/od
export PATH="$HOME/.local/bin:$PATH"
hash -r
type -a od                   # 이제 Open Design의 od가 우선되어야 함

그런 다음 에이전트에 연결하세요:

od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …

그런 다음 에이전트 안에서 이렇게 요청하기만 하면 됩니다: Use open-design to generate a landing page with the Airbnb design system.

첫 실행: 코딩 에이전트 연결

작업 공간이 처음 로드될 때, Open Design은 환경을 스캔해 찾아낸 모든 CLI를 보여 줍니다. WSL은 진짜 Linux 박스이므로 Ubuntu 내부에 설치된 에이전트도 인식합니다 — 그래서 WSL에 들어 있는 Gemini CLI나 다른 에이전트가 거기서 감지됩니다. 아직 표시되지 않는 항목이 있으면 rescan을 클릭하세요.

기본 에이전트와 모델을 선택하세요. 설치된 CLI가 생성을 구동하게 하거나, 특정 공급자와 모델을 지정하세요. 영상에서 강조하듯 더 강력한 모델일수록 출력이 눈에 띄게 좋아지므로, 결과가 중요할 때는 유능한 모델을 선택하세요.
미디어 공급자를 추가하세요 (선택). 이미지, 영상, 오디오를 생성하려면 자신의 API 키를 붙여 넣으세요 — 실제로 사용하는 공급자에 한해, 자신의 키를 가져오는 방식입니다.
MCP 서비스를 연결하세요 (선택). 에이전트가 다른 소스에서 가져오기를 원한다면 커넥터를 연결하세요.
환경 설정을 지정하세요. 언어, 외관, 알림 — 심지어 데스크톱 펫까지. 이 모든 것은 나중에 바꿀 수 있으니 처음에는 단순하게 두세요.

작업 공간 둘러보기

Open Design은 작업을 프로젝트 단위로 유지합니다: 특정 폴더를 대상으로 실행하면, 만든 디자인이 그 프로젝트 디렉터리 안에 저장됩니다. 처음에는 프로젝트 목록이 비어 있습니다 — 정상입니다.

프로젝트 안에서는 프로토타입, 슬라이드 덱, 이미지, 영상 등을 만들 수 있습니다. 빈 캔버스를 사라지게 하는 두 가지 시작점이 있습니다:

내장 디자인 시스템 라이브러리. 디자인 시스템 라이브러리: 실제 브랜드 룩을 고르세요 — Airbnb, Airtable 등 다양하게 — 그러면 Open Design이 그 토큰, 색상, 타이포그래피를 여러분의 디자인으로 가져옵니다.

디자인 시스템은 브랜드의 룩을 토큰으로 정리한 DESIGN.md로 담아냅니다 — 기본 색상과 보조 색상, 타이포그래피, 간격까지. 하나를 미리 보면 팔레트를 처음부터 정의하는 대신 그 위에 바로 빌드할 수 있습니다.
템플릿은 프로토타입, 슬라이드, 그리고 이미지와 영상 생성을 모두 아우릅니다. 유형별로 필터링하고 마음에 드는 것을 포크해 시작점으로 삼으세요.

템플릿 라이브러리. 템플릿: 프로토타입, 슬라이드, 이미지, 영상 시작점 — 유형별로 필터링하고 포크해 시작하세요.

무엇이든 설치하기 전에 웹에서 open-design.ai/plugins에서 전체 라이브러리를 둘러볼 수 있습니다.

무언가 만들어 보기

다음은 AI Automation이 실행하는 흐름을, 최신 릴리스에 맞게 다시 쓴 것입니다:

디자인 시스템을 고르세요. 마음에 드는 것을 — 가령 Airbnb를 — 골라 열어서 그 DESIGN.md와 토큰을 살펴보세요.
시작점으로 가져오세요. Share → Download as ZIP을 사용한 다음, 프로젝트에서 Import flat design ZIP을 선택하세요. 디자인이 작업 공간에 나타나 빌드할 준비가 됩니다.
원하는 변경을 프롬프트로 입력하세요. 평범한 말로 된 지시를 — “배경을 어둡게 만들어 줄 수 있나요?” — 입력해 보내세요. 에이전트가 디자인 시스템을 읽고 작업을 계획한 뒤 아티팩트의 새 버전을 만들어 냅니다.
자유롭게 반복하세요. 글꼴을 바꾸고, 로고를 추가하거나 제거하고, 자신의 에셋을 업로드해 알맞은 자리에 배치되도록 하세요. 프롬프트마다 새로운 시안이 나오니 마음에 드는 것은 남기고 아닌 것은 버리세요.
만족스러우면 내보내세요. Share를 눌러 결과를 ZIP으로 내려받으세요.

결과물은 연결한 모델이 구동한 진짜 편집 가능한 디자인입니다 — 그래서 유능한 에이전트는 결과물에 직접적으로 보답합니다.

더 잘 활용하기 위한 팁

강력한 모델을 고르세요. 출력 품질은 연결한 에이전트를 따라갑니다 — 흐름을 익히는 데는 무료 모델로도 충분하지만, 실제 작업에는 유능한 모델이 그만한 값을 합니다.
매번 출력된 URL을 읽으세요. 로컬 주소는 동적입니다. 예전 링크를 재사용하지 말고 tools-dev가 출력하는 것을 복사하세요.
Open Design이 찾는 곳에 에이전트를 설치하세요. WSL에서 소스로 실행 중인가요? CLI를 Ubuntu 내부에 설치해 작업 공간이 감지하도록 하세요. 데스크톱 앱은 Windows의 PATH를 읽습니다.
시작하는 데 디자인 시스템이 꼭 필요한 것은 아닙니다. 내장 시스템에서 시작하거나, ZIP을 가져오거나, Open Design이 기본값을 추론하도록 두세요. 디자인은 프로젝트 폴더에 함께 보관되므로, 올바른 디렉터리를 대상으로 실행해 작업을 정리하세요.

자주 묻는 질문

Open Design은 무료인가요? 네 — Apache-2.0 라이선스 아래의 오픈소스입니다. 로컬에서 무료로 실행할 수 있으며, 연결하는 에이전트와 미디어 공급자의 모델/API 사용료만 지불하면 됩니다.

WSL을 써야 하나요, 아니면 Windows 데스크톱 앱을 써야 하나요? 대부분의 사람에게는 네이티브 Windows (x64) 데스크톱 빌드가 더 간단합니다 — WSL도, Node도, 복제도 필요 없습니다. 코드를 직접 읽거나 수정하고 싶을 때 WSL 소스 빌드 경로를 사용하세요. 참고로 WSL2는 주요 지원 경로이고 Windows 네이티브는 최선 노력(best-effort) 수준이니, 한쪽에서 마찰이 생기면 다른 쪽을 시도해 보세요.

어떤 코딩 에이전트를 지원하나요? 21개 이상의 에이전트로, Claude Code, Codex, Cursor, Gemini, GitHub Copilot, OpenCode를 포함합니다. Open Design은 컴퓨터에 이미 설치된 CLI를 감지합니다 — 소스 경로에서는 WSL 내부에서, 데스크톱 앱에서는 Windows의 PATH에서.

Claude Design과는 어떻게 다른가요? 익숙한 느낌은 같지만, 오픈소스이고 로컬 우선이며 에이전트 플러그인 방식입니다 — 그래서 하나의 모델에 묶이거나 정해진 크레딧 풀을 소진하지 않습니다. 또한 슬라이드 덱, 매거진 레이아웃, 이미지 생성, 영상으로 프로토타입 그 이상을 해냅니다.

이 글로 된 가이드는 AI Automation의 Windows 설치 실습 영상을 바탕으로 합니다. 위의 전체 영상을 보고, 더 많은 실전 AI 도구 영상을 보려면 AI Automation을 구독하세요.

← 가이드 GitHub · 소스 ↗