Open Design — 솔직한 첫인상 (버그, 해결책, 그리고 임의 모델 설정)

이 가이드는 Open Design에 대한 일부러 솔직하게 담은 첫인상입니다. 잘 작동하는 부분과 마주치게 될 거친 부분을 편집으로 가리지 않고 그대로 실시간으로 보여 줍니다. 또한 OpenAI 호환 제공업체를 통해 어떤 모델이든 저렴하게 연결하는 정말 유용한 요령도 다룹니다. Sasha(ИИШНЫЙ)가 워크스루에서 기록한 실습 리뷰를 바탕으로, 이 글에 맞게 재구성하고 최신 릴리스에 맞춰 업데이트했습니다. 실제 실행은 위 영상으로 보시거나, 계속해서 글 버전을 읽어 보세요.

Open Design 워크스페이스: 만들고 싶은 것을 설명하고, 모드를 고르면, 나머지는 agent가 합니다.

Open Design이란?

Open Design은 오픈소스이자 로컬 우선 디자인 플랫폼 — Claude Design에 대한 agent 네이티브 대안입니다. "AI 보라색 슬롭" 문제(생성된 모든 UI가 똑같아 보이는 것)야말로 이런 도구들이 풀려는 것이며, Open Design의 답은 자체 모델을 출시하기보다 당신이 이미 쓰고 있는 코딩 agent 위에서 동작하는 것입니다. 당신의 머신에서 Claude Code, Codex, Cursor, Gemini, OpenCode 등을 감지해 이를 엔진으로 사용합니다. Sasha의 표현: 무료이고 오픈되어 있으며 특정 제공자에 묶이지 않았기에, 첫 주에 수만 개의 GitHub 스타를 모았습니다.

• 오픈소스, Apache-2.0 — 클론하고, 읽고, 자체 호스팅할 수 있습니다.
• 로컬에서 실행 — 당신의 프로젝트는 당신 머신 위의 폴더입니다.
• 임의의 agent, 임의의 모델 — 임의의 OpenAI 호환 제공자를 통해 당신의 API key를 쓰는 것까지 포함합니다.
• 풍부한 디자인 스킬과 디자인 시스템 라이브러리를 내장.
• 프로토타입 이상 — 슬라이드 덱, 이미지, 심지어 영상까지.

1단계 — 설치 및 설정

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

출력되는 로컬 URL을 엽니다(포트는 동적입니다 — 하드코딩하지 마세요). 설정 없이 바로 쓰고 싶나요? open-design.ai/download에서 데스크톱 앱을 받으세요. 첫 실행 시 설정 페이지가 머신의 agent CLI를 감지하고 — Sasha는 Codex를 사용 — 기본 모델 설정, 미디어 제공자(MiniMax, OpenAI GPT Image 등) 추가, 데이터 소스 연결, 언어 전환, 테마 선택을 할 수 있게 해 줍니다.

2단계 — OpenAI 호환 제공자를 통해 임의의 모델 사용하기

이것이 Sasha 리뷰에서 가장 유용한 핵심입니다. 감지된 CLI 외에도 Open Design은 임의의 OpenAI 호환 API에 당신의 key를 가져와 쓸 수 있게 합니다 — 즉 OpenRouter 같은 애그리게이터를 통해 라우팅해서 거의 모든 모델을, 흔히 더 저렴하게 쓸 수 있다는 뜻입니다:

1. 제공자에서 API key를 생성하고 복사합니다.
2. Open Design 설정에서 OpenAI 제공자 유형을 선택합니다(OpenRouter 및 유사 애그리게이터는 OpenAI API를 사용합니다).
3. key를 붙여넣고, 무엇보다 base URL을 변경해 제공자의 엔드포인트(예: OpenRouter base URL)로 바꾼 뒤, 원하는 모델을 선택합니다.
4. 저장 — 이제 생성이 그 제공자를 통해 라우팅됩니다.

Sasha가 부딪힌 함정 하나: 모델 선택은 프로젝트별이 아니라 전역으로 전환됩니다. 따라서 전환 후 미디어 생성이 깨진다면, 그것은 이미지 제공자가 모델 전환을 따라갔기 때문입니다. 미디어 제공자 key는 명시적으로 설정하세요.

3단계 — 프로토타입 만들기(거친 부분까지 그대로)

프로젝트를 만들고, 브리프를 작성하고, 하이 피델리티를 선택한 뒤 보냅니다. Open Design은 먼저 디스커버리 폼을 실행합니다 — 프롬프트에 맞춰 질문을 조정하고(대상 플랫폼, 누구를 위한 것인지, 톤, 애니메이션, 제약), 이어 비주얼 방향 선택기(타이포그래피 + 팔레트), 그다음 빌드합니다. 결과물은 내장 컨트롤이 있는 라이브 인터랙티브 프로토타입입니다 — Sasha가 생성한 앱은 페이지에서 바로 애니메이션을 토글하고 강조색을 바꿀 수 있습니다.

프리뷰에서 렌더링된 실제 생성 프로토타입 — 어둡고 영화적인 에이전시 랜딩 페이지.

Sasha가 카메라 앞에서 보여준 솔직한 주의점(과 대처법):

• 잘못된 스킬이 기본 선택될 수 있습니다. 모바일 앱을 원했는데 "checkpoint/blog"를 만들기 시작하면, 명시적으로 말하세요: "mobile-app / front-end 스킬을 사용해." 생성 전에 스킬을 설정하세요.
• Inspect에는 data-oid 태그가 필요합니다. 캔버스의 Inspect 도구는 아티팩트에 태그가 붙어 있어야 합니다. 요소를 선택할 수 없다고 하면 agent에게 "data-oid 태그를 붙여 프로토타입을 다시 만들어"라고 요청한 뒤 새로고침하세요.
• 아직 초기이고 빠르게 배포됩니다. 가끔의 결함(편집 후 내비게이션이 사라지는 등)을 예상하세요 — 프로젝트는 거의 매일 업데이트되므로 자주 다시 풀하세요.

4단계 — 캔버스 위의 도구들(진짜 매력)

태그가 붙으면, 편집 루프가 백미입니다. Inspect는 임의의 요소에 호버해 색상, 크기, 스타일을 직접 조정하게 해 줍니다. Edit는 텍스트를 인라인으로 다시 쓰게 해 줍니다(단어 하나 바꾸려고 채팅을 오갈 필요가 없습니다). Comment/picker는 영역을 선택하고, 그려서, agent에게 메모를 보낼 수 있게 해 줍니다("이 메뉴를 진행 표시줄이 있는 스크롤 캐러셀로 만들어"). 터미널의 순수 agent로는 재현하기 어색한, 빠르고 시각적인 피드백 루프입니다.

플러그인 허브: 레지스트리를 둘러보고, 플러그인을 가져오고, 팀을 위해 준비합니다.

끝나면 Share로 PDF, PPTX, 독립 실행형 HTML 또는 markdown으로 내보내거나 — 한 번의 클릭으로 Vercel에 배포할 수 있습니다. Sasha의 솔직한 평가: 프레젠테이션과 리드 마그넷 페이지에는 이미 편리한 미니 빌더입니다. 복잡한 앱/사이트 프로토타이핑에는 실질적인 반복 작업이 필요할 거라고 보세요. 나온 지 일주일밖에 안 됐고 끊임없이 업데이트되는 점을 감안하면, 기반은 탄탄합니다.

팁

• 더 저렴하거나 다른 모델을 쓰려면 OpenRouter(또는 임의의 OpenAI 호환 제공자)를 연결하세요 — base URL 변경을 잊지 마세요.
• 잘못된 템플릿이 기본으로 선택되지 않도록 생성 전에 스킬을 명시적으로 설정하세요.
• Inspect가 요소를 선택하지 못하면 data-oid 태그를 요청한 뒤 새로고침하세요.
• 채팅에서 다시 프롬프트하는 대신, 빠른 시각적 조정에는 Inspect/Edit/Comment에 의존하세요.
• 자주 다시 풀하세요 — 프로젝트는 거의 매일 수정 사항을 배포합니다.

자주 묻는 질문

Claude 외의 모델을 쓰면서 — 더 적게 낼 수 있나요? 네. Open Design을 임의의 감지된 CLI에 연결하거나, 임의의 OpenAI 호환 제공자(예: OpenRouter)에 key와 base URL을 설정해 당신의 key를 가져오면 — 거의 모든 모델이 열립니다.

Inspect/edit가 요소를 선택하지 못해요 — 왜죠? 아티팩트에 data-oid 태그가 필요합니다. agent에게 그 태그를 붙여 프로토타입을 다시 만들어 달라고 한 뒤, 프리뷰를 새로고침하세요.

프로덕션에 바로 쓸 수 있나요? 초기 단계이고 빠르게 반복 중입니다. 덱과 리드 마그넷 페이지에는 이미 훌륭합니다. 복잡한 앱에는 출력물을 다듬어야 할 탄탄한 초안으로 다루세요.

무료인가요? 앱은 Apache-2.0 하에 오픈소스이며 로컬 실행은 무료입니다. 연결한 agent와 제공자의 모델 및 미디어 사용분에 대해서만 비용을 냅니다.

---

이 텍스트 가이드는 Sasha(ИИШНЫЙ)의 실사용 리뷰를 바탕으로 합니다. 위의 전체 영상을 보시고, 더 솔직하고 편집되지 않은 AI 도구 테스트를 보려면 ИИШНЫЙ를 구독하세요.