/ 디렉터리 / 플레이그라운드 / Open Design
● 커뮤니티 nexu-io ⚡ 바로 사용

Open Design

제작: nexu-io · nexu-io/open-design

Claude Design의 오픈소스 클론 — 19개 skills + 71개 브랜드급 디자인 시스템, 샌드박스 미리보기, HTML/PDF/PPTX/MP4 내보내기.

nexu-io의 open-design은 Anthropic의 Claude Design에 대한 커뮤니티 대안입니다. 웹 디자인, 모바일 프로토타입, 슬라이드, 이미지, 비디오, HyperFrames를 다루는 19개 skills와 71개의 미리 만들어진 브랜드 시스템 (Linear, Stripe, Vercel, Notion, Toss 스타일…)을 번들로 제공합니다. Claude Code 호환 하네스에서 실행되며 샌드박스 미리보기 + 내보내기 파이프라인을 포함합니다.

왜 쓰나요

핵심 기능

라이브 데모

실제 사용 모습

준비됨

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "open-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "open-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "open-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "open-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "open-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json
{
  "context_servers": {
    "open-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/nexu-io/open-design",
          "~/.claude/skills/open-design"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add open-design-skill -- git clone https://github.com/nexu-io/open-design ~/.claude/skills/open-design

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: Open Design

특정 브랜드 스타일로 피치 덱 생성

👤 파운더 / PM ⏱ ~30 min beginner

언제 쓸까: 10개 슬라이드 덱이 필요한데 Keynote와 씨름하고 싶지 않을 때.

흐름
  1. 브랜드 선택
    Use open-design. Pick the Stripe-style skin. List its tokens.✓ 복사됨
    → 스킨 token 표시
  2. 초안 작성
    Generate a 10-slide deck for our launch — title, problem, solution, traction, roadmap, ask. Use the Stripe skin.✓ 복사됨
    → 일관된 스타일의 10개 슬라이드
  3. 내보내기
    Export to PPTX so I can edit in Keynote.✓ 복사됨
    → PPTX 파일 작성됨

결과: AI가 만들었다는 느낌이 없는 덱; 일관된 브랜드 느낌.

함정
  • 이미지 생성이 일반적으로 보임 — Skill이 아이콘 및 일러스트 세트를 제공; 사용할 세트를 지정
함께 쓰기: filesystem

브랜드 스타일로 랜딩 페이지 프로토타입

👤 히어로 페이지를 반복하는 개발자 / 디자이너 ⏱ ~25 min intermediate

언제 쓸까: 실제 빌드 전에 3가지 시각적 방향이 필요할 때.

흐름
  1. 변형
    Generate 3 hero variants — Linear, Notion, and Vercel skins. Same content, different style.✓ 복사됨
    → 3개의 HTML 미리보기
  2. 선택 + 반복
    Take the Linear one. Tighten typography and add a secondary CTA.✓ 복사됨
    → 정제된 HTML

결과: 심층 빌드 전 빠른 방향 결정.

함정
  • 스킨 token이 기존 CSS와 충돌 — 샌드박스 미리보기가 충돌을 방지; 선택적으로 통합
함께 쓰기: ui-ux-pro-max-skill

스크립트에서 짧은 마케팅 비디오 생성

👤 마케팅 / DevRel ⏱ ~60 min intermediate

언제 쓸까: 30초 스크립트가 있고 비디오가 필요할 때.

흐름
  1. 스토리보드
    Turn this script into a HyperFrames storyboard — 6 shots, brand-styled.✓ 복사됨
    → 스토리보드
  2. 렌더링
    Render to MP4.✓ 복사됨
    → MP4 파일 작성됨

결과: 디자이너 없이 브랜드 일관성 있는 짧은 비디오.

함정
  • 렌더링 시간이 상당함 — 최종 렌더링 전 스토리보드에서 반복

조합

다른 MCP와 조합해 10배 효율

open-design-skill + ui-ux-pro-max-skill

브랜드 스킨 + 디자인 기본기

open-design-skill + filesystem

프로젝트 디렉토리로 출력

도구

이 MCP가 노출하는 것

도구입력언제 호출비용
list_skins (없음) 브랜드 스타일 선택 무료
design_web spec, skin 웹 페이지 / 프로토타입 token
design_slides outline, skin 피치 / 발표 덱 token
export format: html|pdf|pptx|mp4 최종 전달 렌더링 시간

비용 및 제한

운영 비용

API 쿼터
해당 없음
호출당 토큰
렌더링이 무거운 출력 (비디오)에서 높음
금액
무료
최종 렌더링이 아닌 스토리보드에서 반복

보안

권한, 시크릿, 파급범위

최소 스코프: 로컬 샌드박스 + 파일 쓰기
자격 증명 저장: 없음
데이터 외부 송신: 없음 — 로컬

문제 해결

자주 발생하는 오류와 해결

비디오 렌더링 실패

ffmpeg 설치 확인; skill이 누락된 의존성을 표시

스킨이 일관되게 적용되지 않음

일부 템플릿은 스킨 시스템 이전 버전; README에 나열된 스킨 인식 템플릿 사용

대안

Open Design 다른 것과 비교

대안언제 쓰나단점/장점
Anthropic Claude Design퍼스트파티 지원이 필요할 때클로즈드; 커스터마이징이 덜 됨
직접 코딩한 디자인디자이너가 있을 때느린 반복

더 보기

리소스

📖 GitHub에서 공식 README 읽기

🐙 열린 이슈 보기

🔍 400+ MCP 서버 및 Skills 전체 보기