본문 바로가기

인공지능

Open Design: Claude Design을 대체하는 로컬 퍼스트 오픈소스 디자인 엔진 정리

728x90
반응형
728x170

이 글은 Open Design이라는 로컬 퍼스트(Local-first) 오픈소스 디자인 도구를 중심으로, 기존 Claude Design 워크플로를 어떻게 대체할 수 있는지 정리한 IT 기술 블로그입니다. 에이전트를 내장하지 않는 구조, 실제 브랜드급 디자인 시스템 탑재, 결정론적 디자인 적용 방식, 그리고 다양한 생성 미디어 및 실행 환경까지, Open Design의 핵심 개념과 특징을 입력된 정보를 기반으로 체계적으로 설명합니다.

반응형

Open Design이란 무엇인가

Open Design은 Claude Design의 로컬 퍼스트 오픈소스 대체제로, 사용자의 로컬 환경에서 실제 파일시스템과 CLI 에이전트를 활용해 디자인 결과물을 생성하는 디자인 엔진입니다.
중앙 서버에 의존하지 않고, 이미 사용 중인 코딩 에이전트와 디자인 시스템을 연결해 통제 가능한 AI 디자인 환경을 만드는 것이 핵심 목적입니다.

소스와 프로젝트 정보는 GitHub에서 공개되어 있습니다.
Open Design GitHub 저장소


에이전트를 내장하지 않는 독특한 구조

Open Design은 자체 에이전트를 포함하지 않습니다. 대신, 사용자의 PATH에 존재하는 16종 코딩 에이전트 CLI를 자동 감지해 디자인 엔진으로 활용합니다.

  • Claude Code
  • Codex
  • 기타 CLI 기반 코딩 에이전트

이 구조의 장점은 명확합니다.
이미 신뢰하고 사용하는 에이전트를 그대로 활용할 수 있고, 특정 벤더나 모델에 종속되지 않습니다.


31개 스킬과 9개 시나리오 기반 설계

Open Design에는 총 31개의 디자인 및 기획 스킬이 내장되어 있으며, 이는 다음과 같은 9개 시나리오로 분류됩니다.

  • 웹 프로토타입
  • SaaS 랜딩 페이지
  • 대시보드
  • 모바일 앱
  • 소셜 캐러셀
  • 매거진 포스터
  • PM 스펙 문서
  • OKR
  • 인보이스

단순 UI 생성이 아니라, 실제 제품 기획과 운영에 필요한 산출물을 전제로 설계된 것이 특징입니다.


129개 브랜드급 디자인 시스템 내장

Open Design에는 129개의 브랜드 수준 디자인 시스템이 기본 탑재되어 있습니다.

  • Linear
  • Stripe
  • Vercel
  • Airbnb
  • Tesla
  • Notion
  • Apple
  • Cursor
  • Supabase
  • Figma 등

각 디자인 시스템은 Markdown 기반의 DESIGN.md 형태로 제공되어,
디자인 의사결정의 근거와 규칙을 명확하게 확인하고 수정할 수 있습니다.


첫 턴 인터랙티브 질문으로 AI 임의 디자인 방지

프로젝트 시작 시, 첫 턴에서 인터랙티브 질문 폼이 강제 실행됩니다.
이를 통해 다음 요소를 약 30초 내에 확정합니다.

  • 표면(산출물 형태)
  • 대상 사용자
  • 브랜드 성격
  • 스케일

이 과정은 흔히 말하는 AI slop(의도 없는 임의 디자인 결과)를 구조적으로 방지하기 위한 장치입니다.


5가지 비주얼 디렉션과 결정론적 디자인

사용자는 다음 5가지 비주얼 디렉션 중 하나를 선택할 수 있습니다.

  • Editorial Monocle
  • Modern Minimal
  • Tech Utility
  • Brutalist
  • Soft Warm

선택 즉시,

  • OKLch 기반 결정론적 컬러 팔레트
  • 폰트 스택

이 자동 적용되어, 결과물의 일관성과 재현성이 보장됩니다.


이미지·영상·모션까지 통합된 미디어 생성

Open Design은 디자인 결과물에 필요한 미디어 생성도 통합 제공합니다.

  • gpt-image-2: 이미지 생성
  • Seedance 2.0: 15초 시네마틱 영상
  • HyperFrames: HTML을 MP4 모션 그래픽으로 변환

또한, 93개의 프롬프트 템플릿 갤러리가 제공되어 반복 작업을 줄일 수 있습니다.


BYOK 구조와 다양한 AI 프로바이더 지원

Open Design은 BYOK(Bring Your Own Key) 프록시 구조를 채택합니다.

연결 가능한 프로바이더:

  • Anthropic
  • OpenAI
  • Azure OpenAI
  • Google Gemini
  • Ollama
  • LM Studio

보안 측면에서는 SSRF 차단 기능이 내장되어 있습니다.


Claude Design ZIP 임포트와 로컬 프로젝트 연계

Claude Design에서 내보낸 ZIP 파일을 그대로 드롭하면,
Open Design이 이를 로컬 프로젝트로 변환해 이어서 작업할 수 있습니다.

마이그레이션 부담 없이 기존 작업을 확장할 수 있다는 점이 실무적으로 큰 장점입니다.


로컬 데몬 기반 실제 파일시스템 작업

로컬 데몬이 프로젝트 폴더에서 CLI를 직접 spawn하여 다음 작업을 수행합니다.

  • 파일 Read / Write
  • Bash 실행
  • WebFetch

프로젝트 상태와 대화, 탭 정보는 SQLite로 저장되어 세션 간 연속성이 유지됩니다.


Anti-AI-slop 메커니즘으로 품질 제어

Open Design은 결과물 품질을 강제하는 구조를 갖고 있습니다.

  • 5차원 자기 비평(3/5 미만 시 자동 재작업)
  • P0 / P1 / P2 체크리스트 게이트
  • 브랜드 색상 기억 추측 금지
  • 가짜 지표 생성 금지

AI 결과물을 “검토 대상”이 아닌 “검증된 산출물”로 만들기 위한 장치입니다.


프리뷰, 내보내기, 그리고 확장성

기본 제공 기능:

  • 샌드박스 iframe 프리뷰
  • HTML / PDF / PPTX / ZIP / Markdown 내보내기

또한 stdio MCP 서버를 통해,
다른 코딩 에이전트에서 디자인 파일을 직접 읽는 것도 가능합니다.


실행 방식과 라이선스

Open Design은 다음 세 가지 실행 방식을 지원합니다.

  • 데스크톱 앱 다운로드
  • Docker 실행 (docker compose up -d)
  • 소스 실행 (pnpm tools-dev run web)

라이선스는 Apache-2.0으로, 상업적 활용에도 제약이 적습니다.


728x90

Open Design은 단순한 디자인 생성 도구가 아니라,
로컬 퍼스트, 결정론적 디자인, 실무 중심 워크플로를 지향하는 오픈소스 디자인 엔진입니다.

AI 디자인의 불확실성과 임의성을 통제하고 싶다면,
그리고 기존 Claude Design 워크플로를 벗어나 완전히 소유 가능한 디자인 환경을 구축하고 싶다면,
Open Design은 충분히 검토할 가치가 있는 대안입니다.

앞으로는 디자인 결과물 자체보다,
어떻게 통제하고 재현할 수 있는가가 더 중요한 기준이 될 것입니다.
Open Design은 그 방향을 분명하게 보여주는 사례라고 볼 수 있습니다.

300x250

https://github.com/nexu-io/open-design

 

GitHub - nexu-io/open-design: 🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 br

🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · Hype...

github.com

728x90
반응형
그리드형