‹ 스킬공유자료실#057 · 10월 26일

클로드 디자인 대신 쓰는 무료 오픈 디자인
설치부터 클로드 코드 연결, 한 줄로 디자인 시키기까지

만들고 싶은 걸 한 줄로 적으면 내 컴퓨터의 코딩 에이전트가 웹사이트·앱 화면·대시보드·발표 자료까지 디자인해 주는 무료 오픈소스, 오픈 디자인(Open Design)을 설치하고 클로드 코드에 연결하는 법이에요.

깃허브 별 10만+맥 · 윈도우 앱 무료클로드 코드에 한 줄로 연결

한눈에 보기

클로드 디자인처럼 말로 디자인을 시키는데, 내 컴퓨터에서 돌아가고 앱은 무료예요.

한 줄로만들고 싶은 걸 적으면 디자인 완성무료"카페 랜딩 페이지 만들어 주세요"처럼 적으면 내 컴퓨터의 코딩 에이전트가 화면을 직접 만들어요.
결과물웹·앱 화면 · 대시보드 · 발표 자료 · 이미지HTML·PDF·PPTX발표 자료는 PDF·파워포인트(PPTX)로도 내보낼 수 있어요.
연결클로드 코드 · 코덱스 · 커서 등명령 한 줄쓰고 있는 코딩 에이전트를 그대로 연결해요. 에이전트가 없으면 API 키만 넣어도 돼요.
디자인 시스템색·글꼴을 정해 두면 거기에 맞춰서151개 기본 제공디자인 시스템(DESIGN.md)을 바꾸면 다음 화면부터 색·글꼴이 통째로 바뀌어요.
클로드 디자인 단독 사이트(claude.ai/design)는 2026년 12월 14일에 문을 닫고 클로드 안으로 합쳐져요. 단독 사이트에서 만든 채팅·댓글은 옮겨지지 않으니, 필요한 건 그 전에 저장해 두세요. 공식 안내 보기
막히면 같이 공부해요 · AI 공부방 오픈카톡입장하기

시작 전 준비

어려우면 클로드에게 말하세요 노란 칸을 [복사]해서 클로드 코드 입력창에 붙여 넣으면, 클로드가 안내문을 읽고 대신 연결해 줘요. 직접 눌러야 하는 게 있으면 클로드가 알려 줘요.
1

앱 설치하기Open Design 데스크톱 앱 · 무료

공식 사이트에서 내 컴퓨터에 맞는 앱을 받아 설치해요.

  1. 아래 [공식 사이트 열기]를 눌러요.
  2. 다운로드에서 맥(애플 칩 또는 인텔)이나 윈도우를 골라 받아요.
  3. 받은 파일을 열어 설치하고, 앱을 한 번 실행해요.
공식 사이트 열기 ›
다른 곳에서 받기
깃허브 저장소
https://github.com/nexu-io/open-design
설치 파일 모음(Releases)
https://github.com/nexu-io/open-design/releases
앱이 열리고 "무엇을 만들까요?" 같은 입력칸이 보이면 성공이에요.
2

클로드 코드에 연결하기od mcp install claude

오픈 디자인을 클로드 코드에 MCP(클로드가 다른 프로그램을 직접 쓰게 해 주는 연결 통로)로 이어요. 연결하면 클로드 코드에서 바로 디자인을 시킬 수 있어요.

  1. 오픈 디자인 앱을 켜 둔 상태로, 클로드 코드를 열어요.
  2. 아래 칸의 [복사]를 눌러요.
  3. 입력창에 붙여 넣고 보내요.
https://github.com/nexu-io/open-design
이 주소의 안내대로, 제 컴퓨터에 설치된 오픈 디자인을 클로드 코드에 MCP로 연결해 주세요. od 명령이 다른 프로그램과 겹치면 앱 설정의 MCP 서버 메뉴에 나오는 방법으로 연결해 주시고, 다 되면 연결됐는지 확인까지 해 주세요.
직접 연결하는 방법 보기

앱을 설치하면 생기는 od 명령으로 한 줄이면 돼요.

터미널에 한 줄(클로드 코드 연결)
od mcp install claude

코덱스는 claude 대신 codex, 커서는 cursor 처럼 이름만 바꾸면 돼요.

맥은 원래 들어 있는 od 라는 다른 프로그램과 이름이 겹쳐요. 위 명령이 안 되면 오픈 디자인 앱을 열고 설정 → MCP server에서 클로드 코드용 연결 문장을 복사해 쓰세요.
연결한 뒤에는 클로드 코드에서 새 대화를 열어야 새 도구를 알아봐요.
클로드 코드에서 /mcp 를 쳤을 때 오픈 디자인이 연결됨(connected)으로 보이면 성공이에요.
3

에이전트가 없다면 API 키로BYOK · 내 키 넣기

코딩 에이전트가 없어도, AI 회사의 API 키를 넣으면 그대로 돌아가요.

  1. 오픈 디자인 앱의 설정을 열어요.
  2. 쓰는 회사(OpenAI · Anthropic · Gemini · Ollama 등)를 골라요.
  3. 주소(baseUrl)·키(apiKey)·모델 이름을 붙여 넣고 저장해요.
API 키는 비밀번호와 같아요. 다른 사람에게 보여 주거나 채팅방에 올리지 마세요.
4

한 줄로 디자인 시키기바로 쓰는 문장

오픈 디자인 앱 입력칸이나, 연결한 클로드 코드에 그대로 적으면 돼요.

동네 카페 랜딩 페이지를 만들어 주세요. 대표 메뉴 3개, 위치, 예약 버튼이 들어가고 따뜻한 느낌이면 좋겠어요.
작은 가게용 매출 대시보드를 만들어 주세요. 오늘 매출, 이번 달 매출, 인기 메뉴 순위, 요일별 그래프가 한눈에 보이게 해 주세요.
우리 가게 내년 계획 발표 자료를 10장으로 만들어 주세요. 다 되면 파워포인트 파일로도 내보내 주세요.
화면에 디자인 시안이 나타나고, 마음에 안 드는 곳은 "버튼을 더 크게 해 주세요"처럼 말로 고치면 돼요.
5

디자인 시스템 · 테마DESIGN.md · 151개 기본 제공

디자인 시스템은 색·글꼴·버튼 모양 같은 규칙 모음이에요. 한 번 정해 두면 그다음 화면부터 전부 그 규칙에 맞춰 만들어져요. 테마만 바꾸면 화면 전체가 한 번에 바뀌어요.

우리 가게 디자인 시스템을 만들어 주세요. 대표 색은 진한 갈색과 크림색, 포인트 색은 주황, 글꼴은 깔끔한 고딕이에요. 앞으로 만드는 화면은 전부 이 규칙에 맞춰 주세요.
이미 들어 있는 151개 디자인 시스템 중에 골라 써도 돼요. 마음에 드는 걸 고른 뒤 같은 문장으로 다시 시키면 분위기가 통째로 바뀌어요.

꼭 지킬 것

자주 묻는 질문

정말 무료예요?

앱과 소스는 Apache-2.0 공개 라이선스로 무료예요. 클라우드 모델 요금제(OpenDesign Go)만 따로 돈이 들어요. 내 클로드 코드나 내 API 키를 쓰면 그 요금만 들어요.

클로드 디자인이 완전히 없어지나요?

아니요. 단독 사이트(claude.ai/design)가 12월 14일에 닫히고, 클로드 안에서 계속 쓸 수 있게 합쳐져요. 다만 단독 사이트의 채팅·댓글은 옮겨지지 않아요.

리눅스에서도 되나요?

아직 리눅스용 설치 파일은 없어요. 소스를 받아서 돌릴 수 있어요. 막히면 노란 칸 문장에 "제 컴퓨터는 리눅스예요"를 붙여서 클로드에게 말하세요.

한국어로 시켜도 되나요?

네. 위 문장들처럼 한국어로 적으면 돼요. 화면 글자도 한국어로 넣어 달라고 하면 돼요.

연결했는데 클로드가 오픈 디자인을 못 찾아요

오픈 디자인 앱이 켜져 있는지, 클로드 코드에서 새 대화를 열었는지 확인하세요. 그래도 안 되면 "방금 연결한 오픈 디자인이 안 보여요, 확인해 주세요"라고 말하면 클로드가 살펴봐 줘요.

막히면 같이 공부해요 · AI 공부방 오픈카톡입장하기