Open Design: 무료 오픈소스 Claude Design 대안

Open Design는 아이디어를 프로토타입, 웹사이트, 슬라이드, 심지어 HTML 영상으로까지 바꿔 줍니다——모두 당신 자신의 머신에서 로컬로 동작합니다. 이 데모에서 Code A Program은 데스크톱 앱을 설치하고, 코딩 에이전트를 연결하고, Draft라는 AI 글쓰기 도구를 위한 고급스러운 랜딩 페이지를 만든 뒤, 작업 공간을 떠나지 않고 다듬어 배포합니다. 전체 과정을 Code A Program의 영상에서 보거나, 계속해서 아래 글 버전을 읽어 보세요.

로컬에서 실행되는 Open Design: 당신이 완전히 통제하는 오픈소스, 에이전트 네이티브 디자인 작업 공간——단일 모델에 묶이지 않습니다.

Open Design란?

Open Design는 오픈소스이자 로컬 우선 디자인 플랫폼입니다——Claude Design과 Figma의 무료 대안이죠. 하나의 모델 제공자에 묶는 대신, 당신이 이미 쓰고 있는 코딩 에이전트 위에서 동작합니다. 그래서 당신의 에이전트와 당신의 key를 가져와 쓸 수 있습니다.

• 오픈소스, Apache-2.0——한 줄 한 줄 읽고, 셀프호스팅하거나, 그냥 데스크톱 앱을 다운로드하세요.
• 로컬에서 실행——프로젝트는 남의 클라우드가 아니라 당신 머신의 당신 폴더에 존재합니다.
• 에이전트 가져오기——Claude Code, Codex, Cursor, Gemini, OpenCode 등 21개 이상의 코딩 에이전트를 지원합니다; 어떤 CLI가 생성을 이끌지는 당신이 고릅니다.
• 프로토타입 그 이상——웹사이트, 프로토타입, 슬라이드 덱, 이미지 생성, 심지어 HTML 영상까지 모두 하나의 작업 공간에서.
• 필요한 것은 다 들어 있음——내장 디자인 시스템 129종과 460개 이상의 플러그인으로, 결코 빈 캔버스에서 시작하지 않습니다.

Claude Design를 써 봤다면 곧바로 익숙할 겁니다——Open Design는 똑같이 차분한 경험을 유지하면서, 그 위에 당신이 고른 모델을 얹어 줍니다.

1단계 —— 에이전트와 모델 고르기

open-design.ai에서 데스크톱 앱을 다운로드해 설치하고, 짧은 온보딩 질문에 답하세요. 그러면 메인 채팅 화면으로 들어갑니다.

오른쪽 위에서 AI 에이전트 제공자를 고르세요. 로컬 CLI 제공자로는 Claude Code, Codex CLI, Gemini CLI(무료 사용 한도가 있음), OpenCode 등을 고를 수 있습니다. 데모에서 Code A Program은 OpenCode와 GLM 5.2 모델을 씁니다. 프런트엔드 작업에서 강했기 때문이죠——하지만 핵심은 유연성입니다: 당신은 하나의 모델이나 플랫폼에 묶이지 않습니다.

2단계 —— 프롬프트 작성하기

채팅에는 참고 자료용 파일 첨부 옵션과 플러그인 섹션이 있습니다. Open Design는 빌드·테스트 도우미, 3D 목업, 모바일·데스크톱 디바이스 프레임 등을 아우르는 460개 이상의 플러그인과 함께 제공됩니다——그러니 3D 요소나 디바이스 껍데기가 필요하면, 프롬프트와 씨름하는 대신 플러그인을 추가하세요.

플러그인 라이브러리: 빌드, 테스트, 3D 목업, 디바이스 프레임 등을 위한 460개 이상의 플러그인——디자인에 필요한 것을 추가하세요.

이제 브리프를 붙여 넣으세요. 데모 프롬프트는 Draft라는 AI 글쓰기 어시스턴트를 위한 고급 랜딩 페이지를 요청합니다. 절제된 슬레이트 블랙, 아이보리, 일렉트릭 오렌지 팔레트, 실시간 텍스트 생성 애니메이션이 있는 대담한 에디토리얼 히어로, 인터랙티브 글쓰기 캔버스, 3단계 워크플로, 결과 섹션, 2단 요금표, FAQ, 그리고 강력한 마지막 행동 유도——동시에 카드, 그러데이션, 글래스모피즘, 진부한 로봇 이미지는 명확히 피합니다.

알아 둘 만한 지렛대가 하나 더 있습니다: Apple, Airbnb, BMW, IBM, Spotify 같은 브랜드의 인기 디자인 시스템을 바탕으로 디자인을 만들 수 있습니다. Code A Program은 이번엔 건너뛰지만, 특정한 룩에 맞추고 싶을 때를 위해 준비되어 있습니다.

3단계 —— 빌드와 셀프 체크 지켜보기

프롬프트를 제출하면 Open Design가 프로젝트 준비를 시작합니다. 약 1분 뒤 몇 가지 후속 질문을 할 수도 있습니다——더 나은 결과를 위해 답하거나, 모두 건너뛰기를 눌러 계속 진행하게 하세요.

데모에서 랜딩 페이지 자체는 약 6분 만에 끝납니다. 그런 다음 Open Design는 남은 시간을 셀프 체크에 씁니다——구조를 검증하고, 레이아웃을 살피고, 애니메이션을 확인하고, 빌드 완료로 표시하기 전에 자잘한 문제를 고칩니다. 끝나면 프레젠트 아이콘을 클릭해 새 탭에서 사이트를 여세요.

생성된 결과: 실시간 타이핑 애니메이션이 있는 에디토리얼 히어로, 워크플로, 결과, 요금, FAQ, 푸터——태블릿과 모바일 전반에서 반응형.

결과에는 AI 타이핑 애니메이션 히어로, 매끄러운 스크롤 효과, 인터랙티브 에디터 섹션, 워크플로 스트립, 고객 결과 섹션, 월간/연간 요금, FAQ, 그리고 깔끔한 푸터가 담겨 있습니다. 태블릿과 모바일 뷰로 전환해 반응형 디자인이 잘 버티는지 확인하세요.

4단계 —— 캔버스 툴바로 다듬기

오른쪽 툴바는 사소한 변경에 토큰을 태우지 않고 다듬는 곳입니다:

• Screenshot——사이트의 이미지를 캡처합니다.
• Comment——아무 요소(예: 히어로 제목)를 선택하고, 어떤 단어를 오렌지 테마 색으로 바꾸는 것 같은 변경을 설명하세요. 여러 코멘트를 모아 한 번에 보내거나, 하나를 바로 채팅으로 보낼 수 있습니다.
• Marker——페이지의 아무 영역이나 강조 표시해 에이전트에게 공유합니다.
• Element edit——선택한 요소의 글꼴, 너비, 색상 등을 직접 바꿔서, 간단한 조정에는 전체 재생성이 결코 필요 없게 합니다.

줌 컨트롤과 열려 있는 모든 코멘트의 보기도 제공됩니다. 데모에서 그 “actually” 텍스트는 툴바에서 바로 그 자리에서 오렌지로 바뀝니다.

5단계 —— 내보내기와 배포

툴바 위에는 다운로드 옵션이 있습니다——프로젝트를 PDF, 이미지, ZIP 또는 HTML로 내보냅니다. 템플릿으로 저장도 있어서, 이 디자인을 앞으로의 프로젝트 출발점으로 재사용할 수 있습니다.

흥미로운 부분은 공유 메뉴입니다. 거기서 다음을 할 수 있습니다:

• 원클릭으로 Vercel에 배포——액세스 토큰으로 Vercel 계정을 연결하고 배포를 누르세요.
• 같은 방식으로 Cloudflare에 배포.
• Cursor나 VS Code 같은 에디터에서 열기, 또는 Gemini CLI, Codex, Claude Code 같은 CLI 도구에서 열기. Open Design는 생성된 HTML과 그 Skills 폴더를 함께 넘겨주므로, 이 디자인을 Next.js 프로젝트——또는 원하는 어떤 프레임워크로든 바꿀 수 있습니다.

설정에서는 전역 규칙(예: “항상 TypeScript 사용”)을 추가하고, Claude의 메모리 기능처럼 유용한 메모리를 저장하고, 미디어 제공자를 구성할 수 있습니다——음성과 사운드용 ElevenLabs key, 그리고 이미지 생성용 Nano Banana, OpenAI 또는 OpenRouter. 또한 스킬 추가(브라우저 작업을 자동화하는 agent-browser 스킬과 여러 프런트엔드 스킬이 있습니다), MCP 서버 연결, 기본 프로젝트 위치 변경도 할 수 있습니다.

더 잘 쓰기 위한 팁

• 시작하기엔 무료 모델로 충분합니다. 데모 사이트 전체가 무료 Gemini 등급으로 생성되었는데도 여전히 멋져 보입니다; 실제 업무에서 더 높은 품질을 원할 때 유료 모델을 꺼내세요.
• 프롬프트 전에 플러그인을 추가하세요——3D 목업이나 디바이스 프레임이 필요할 걸 알고 있다면.
• 변경에 맞는 올바른 도구를 쓰세요——요소 에디터와 코멘트는 전체 재빌드 없이 작은 조정을 처리합니다.
• 잘된 레이아웃은 템플릿으로 저장——다음 프로젝트를 한발 앞서 시작하세요.

자주 묻는 질문

Open Design는 무료인가요? 네——Apache-2.0 하에 오픈소스이며 로컬 실행은 무료입니다. 연결하는 에이전트와 미디어 제공자의 모델/API 사용량에 대해서만 비용을 내며, Gemini 같은 무료 등급을 쓸 수 있습니다.

어떤 코딩 에이전트를 지원하나요? Claude Code, Codex CLI, Cursor, Gemini CLI, OpenCode를 포함해 21개 이상의 에이전트입니다. 제공자는 오른쪽 위 메뉴에서 고릅니다.

Claude Design과 어떻게 다른가요? 익숙한 느낌은 같지만, 오픈소스이고 로컬 우선이며 에이전트를 갈아 끼울 수 있습니다——하나의 모델이나 플랫폼에 묶이지 않고, 프로젝트를 원하는 방식대로 내보내거나 배포할 수 있습니다.

앱을 떠나지 않고 배포할 수 있나요? 네——공유 메뉴가 원클릭으로 Vercel이나 Cloudflare에 배포합니다(제공자 액세스 토큰은 당신이 제공). 또는 코드를 Cursor, VS Code, 또는 CLI 에이전트에 넘깁니다.

좋은 결과를 얻으려면 유료 모델을 써야 하나요? 아니요——대부분의 랜딩 페이지와 프런트엔드 디자인에는 무료 모델이 이미 충분히 유능합니다; 더 고급 결과를 원할 때만 유료 모델로 전환하세요.

---

이 글 가이드는 Code A Program의 데모를 기반으로 합니다. 위의 전체 영상을 보고, 더 많은 실습형 AI 도구 영상을 위해 Code A Program을 구독하세요.