프로토타입 · 미리 보기: 공식 레지스트리의 모든 서버를 담고 있으며 30분마다 동기화해요. Google로 로그인하면 리뷰를 쓸 수 있어요.
PopNx MCPAI를 쓰는 사람을 위한 MCP 서버 · 쉬운 말로 설명해요

Standby Design MCP

제작자: KarstenKreh버전 0.6.2i★ 1i컴퓨터 또는 클라우드
레지스트리 이름io.github.KarstenKreh/standby-design-mcp

설치 방법

개요

제작자가 쓴 설명(영어 원문)

Generate design systems: OKLCH colors, fluid type scales, spacing, shape, icon and motion tokens.

할 수 있는 일

이 서버는 아직 쉬운 말로 된 요약을 쓰지 못했어요. 아래는 레지스트리에서 읽어 온 사실이에요.

  • 연결 방식: 컴퓨터 또는 클라우드
  • 전송 방식: stdio, Streamable HTTP
  • 카테고리: 디자인, 이미지 및 오디오

설치

쓰고 있는 AI 앱을 고른 다음 설정을 복사하세요.

검사 4/4 통과 · 내가 묻는 내용은 제작자 서버(mcp.standby.design)를 거쳐요

먼저: 어떤 AI를 쓰시나요?

쓰는 앱을 고르면 아래에 단계가 나옵니다.

Claude에 연결할 수 있어요 · 약 2분

키 필요 없음, 설치 필요 없음 · claude.ai나 데스크톱 앱에서 한 번 설정하면 채팅에서 쓸 수 있어요 · 무료 계정은 1개까지

  1. Claude의 Connectors 페이지 열기

    CustomizeConnectors

    CustomizeConnectors1+ Add2https://…3Add4
  2. “+ Add” → “Add custom connector”를 누르고 이 2칸 채우기

    여기서 복사해 Claude의 같은 이름 칸에 붙여 넣고 Continue를 누르세요

    Name · 이름Standby Design MCP
    Remote MCP server URL · 주소https://mcp.standby.design/mcp

    Authentication은 Claude가 찾은 그대로 두고 Add를 누르세요

  3. 채팅에서 켜기

    +ConnectorsStandby Design MCP

  4. 해 보기

    Standby Design MCP을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐

    ✓ Claude가 Standby Design MCP을 쓰고 있다고 하거나 답에 Standby Design MCP 도구 이름이 나오면 연결된 거예요

메뉴 이름은 2026년 11월 11일에 Anthropic 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요

ChatGPT는 기업용 요금제에서만 연결돼요

웹의 ChatGPT Business, Enterprise, Edu에서 워크스페이스 관리자나 소유자가 추가해요 · Free, Plus, Pro를 쓰면: 내 ChatGPT 요금제로는 아직 MCP를 직접 연결할 수 없어요

  1. 웹 ChatGPT에서 MCP 추가 페이지 열기

    Plugins+Add custom MCP server

    ChatGPTPlugins1+2https://…3Create4
  2. 이름과 주소 입력

    이름을 넣고 Connection에 주소를 붙여 넣은 뒤 경고에 체크하고 Create as a plugin을 누르세요

    Name · 이름Standby Design MCP
    Connection · 주소https://mcp.standby.design/mcp
  3. 채팅에서 Standby Design MCP 고르기

    새 채팅을 열고 입력 전에 플러그인 목록에서 Standby Design MCP을 고르세요

  4. 해 보기

    Standby Design MCP을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐

    ✓ ChatGPT가 Standby Design MCP을 쓰고 있다고 하거나 답에 Standby Design MCP 도구 이름이 나오면 연결된 거예요

메뉴 이름은 2026년 11월 11일에 OpenAI 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요

Claude Code에 연결할 수 있어요 · 약 2분

키 필요 없음, 설치 필요 없음

  1. 터미널 열기

    Mac: Command+스페이스를 누르고 Terminal 입력 · Windows: PowerShell 열기

  2. 이 명령을 붙여 넣고 Enter

    claude mcp add --transport http standby-design https://mcp.standby.design/mcp
  3. Claude Code에서 /mcp 입력

    Standby Design MCP이 목록에 있고 연결됨으로 보이면 돼요

  4. 해 보기

    Standby Design MCP을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐

    ✓ Claude Code가 Standby Design MCP을 쓰고 있다고 하거나 답에 Standby Design MCP 도구 이름이 나오면 연결된 거예요

메뉴 이름은 2026년 11월 11일에 Anthropic 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요

Cursor에 연결할 수 있어요 · 약 2분

키 필요 없음, 설치 필요 없음

  1. 이 버튼으로 Cursor 열기

    Cursor에서 열기

    Cursor가 설치를 확인하면 Install을 누르세요

  2. Cursor에서 AI 채팅을 Agent 모드로 열기

  3. 해 보기

    Standby Design MCP을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐

    ✓ Cursor가 Standby Design MCP을 쓰고 있다고 하거나 답에 Standby Design MCP 도구 이름이 나오면 연결된 거예요

메뉴 이름은 2026년 11월 11일에 Cursor 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요

VS Code에 연결할 수 있어요 · 약 2분

키 필요 없음, 설치 필요 없음

  1. 이 버튼으로 VS Code 열기

    VS Code에서 열기

    VS Code가 설치를 확인하면 Install을 누르세요

  2. VS Code에서 AI 채팅을 Agent 모드로 열기

  3. 해 보기

    Standby Design MCP을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐

    ✓ VS Code가 Standby Design MCP을 쓰고 있다고 하거나 답에 Standby Design MCP 도구 이름이 나오면 연결된 거예요

메뉴 이름은 2026년 11월 11일에 VS Code 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요

Windsurf, Zed, Gemini CLI 같은 다른 MCP 앱은 추가 방법이 저마다 달라요. 앱 목록에서 확인하세요

MCP를 쓰는 앱 모두 보기 →

웹으로 연결하는 앱용 주소

주소https://mcp.standby.design/mcp

JSON 설정은 아래 “개발자용”에 있어요

막혔나요? Standby Design MCP을 쓰는 사람에게 물어보세요💬 토론 →
개발자용: 터미널 명령과 JSON 설정

웹으로 연결

Claude Code

claude mcp add --transport http standby-design https://mcp.standby.design/mcp

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "standby-design": {
      "url": "https://mcp.standby.design/mcp"
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "standby-design": {
      "type": "http",
      "url": "https://mcp.standby.design/mcp"
    }
  }
}

컴퓨터에 설치

Claude Code

claude mcp add standby-design -- npx -y standby-design-mcp

Claude Desktop (claude_desktop_config.json)

{
  "mcpServers": {
    "standby-design": {
      "command": "npx",
      "args": [
        "-y",
        "standby-design-mcp"
      ]
    }
  }
}

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "standby-design": {
      "command": "npx",
      "args": [
        "-y",
        "standby-design-mcp"
      ]
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "standby-design": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "standby-design-mcp"
      ]
    }
  }
}

이 설정은 제작자의 레지스트리 정보로 만들었어요. README와 다르면 README를 따르세요.

한눈에 보기

주간 다운로드i
455/주
라이선스i
라이선스 표시 없음
연결 방식
컴퓨터 또는 클라우드
전송 방식
stdio, streamable-http
최신 버전i
0.6.2
레지스트리 공개i
2026년 11월 7일
코드 마지막 변경i
2026년 11월 7일
제작자
KarstenKreh
패키지
npm: standby-design-mcp
레지스트리 상태
활성

어떤 앱에서 쓸 수 있나요

이 서버의 연결 방식과 각 앱의 공식 문서를 바탕으로 했어요. 2026년 11월 10일 확인.

인터넷으로 연결하는 앱

ClaudeChatGPTGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast

내 컴퓨터에서 실행하는 앱

ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast

모든 앱과 장단점 →

할 수 있는 일

도구 이름과 설명은 서버가 2026년 11월 7일에 알려 준 그대로예요. 우리가 아니라 제작자가 쓴 글이고, 일반 텍스트로만 보여 드려요.

  • generate_color_palette

    Generate a perceptually uniform OKLCH color palette from a brand color: 18-step scales for brand/surface/error/accents, semantic tokens (shadcn/ui compatible), light+dark modes. Returns a shareable standby.design/system URL and a compact summary. Always give that URL to the user

  • generate_type_scale

    Generate a fluid typographic scale (CSS clamp() between 375px and 1920px viewports) with 11 levels (Display, H1–H6, Body L/M/S, Caption), Fontshare fonts, line heights and letter spacing. Returns a shareable standby.design/system URL and a summary table. Always give that URL to t

  • generate_shape_tokens

    Generate shape tokens — radii, shadows, borders, focus rings — in one of four visual styles: "paper" (classic surfaces with layered shadows), "glass" (liquid glass), "neomorph" (soft neumorphism), "neobrutalism" (hard offset shadows). Returns a shareable standby.design/system URL

  • generate_icon_tokens

    Pick an icon set and generate icon sizing tokens (xs–2xl + stroke width). Either select a specific set or state style preferences and get a recommendation. Available sets: material-outlined, material-filled, lucide, phosphor-regular, phosphor-bold, phosphor-thin, phosphor-fill, s

  • generate_space_tokens

    Generate spacing tokens (3xs–3xl), breakpoints, container widths, prose measure, and aspect ratios. Returns a shareable standby.design/system URL and a summary. Always give that URL to the user — the link is the deliverable.

  • generate_motion_tokens

    Generate spring-based motion tokens from two brand-character axes: energy (calm → lively, sets the tempo) and material (firm → elastic, sets how much spatial motion overshoots). Returns 6 primitive springs (spatial/effect × fast/default/slow), 11 semantic tokens (press, move, exp

  • get_design_system

    Decode a standby.design URL (or raw hash) and return an overview of the full design system: color palette, type scale, spacing & layout, shape tokens, motion springs, and icons — plus per-tool edit links. Always give the standby.design/system URL to the user — the link is the del

  • export_design_system

    Generate the full token code for a design system URL in one format: "css" (CSS custom properties incl. semantic shadcn/ui-compatible tokens), "tailwind" (Tailwind v4 @theme), "design-tokens" (W3C DTCG JSON — typography, spacing & layout, shape, icons and motion; color is not part

  • list_fonts

    List Fontshare font slugs usable in generate_type_scale (headingFont/bodyFont/monoFont), grouped by category. This is the bundled seed catalog — any valid Fontshare slug works even if not listed here.

  • update_project

    Returns the steps to install or update the standby.design rule enforcement (lint hook, pre-commit, CI, review skill, agent instructions) in the current project. Call this when the user asks to get the latest standby.design rules or update, e.g. "Hol Dir das Update", "update stand

  • get_design_rules

    Universal design rules for building UI with design tokens: layout, flow (empty, loading and error states, dialogs), shape, surfaces, interaction and keyboard access, forms, content structure, states, typography, color and stack rules for Tailwind/React Native. The tokens say whic

기본 점검i

누구나 볼 수 있는 정보를 점검했고, 코드는 읽지 않았어요. 해당하지 않는 항목은 개수에서 뺐어요. · 2026년 11월 11일 점검

  • ✓ 통과

    제작자와 저장소 일치

    레지스트리 이름이 GitHub 계정 KarstenKreh 기준으로 확인되었고, 이 계정이 저장소를 소유하고 있어요

  • ✓ 통과

    계속 관리되고 있음

    코드 마지막 변경: 4일 전

  • … 아직 점검 안 함

    라이선스 있음

    아직 GitHub에서 이 저장소를 읽어 오지 않았어요

  • ✓ 통과

    엔드포인트 응답

    156ms 만에 응답(HTTP 200)

  • – 해당 없음

    OAuth로 로그인

    로그인 필요 없음

  • ✓ 통과

    도구 설명에 숨겨진 지시 없음

    도구 설명 11개를 읽었고, AI에게 보내는 숨겨진 지시는 없었어요

토론

질문하고, 팁을 나누고, 안 되는 점을 알려 주세요. "도움이 됨"이 많은 순서예요.

아직 글이 없어요. 처음으로 질문하거나 공유해 보세요.

이곳의 글은 사용자가 쓴 것으로, PopNx 팀의 글이 아니에요.

Google로 로그인하고 글쓰기

사용자 리뷰

아직 리뷰가 없어요

Google로 로그인하고 리뷰 쓰기

디자인, 이미지 및 오디오 카테고리의 다른 서버와 비교i

  • 이 카테고리의 다른 서버 2904개 중 77%보다 스타가 많아요
  • 이 카테고리의 다른 서버 2904개 중 88%보다 최근에 레지스트리에 공개됐어요
  • 기본 점검 결과가 이 카테고리의 다른 서버 2904개 중 100%와 같거나 더 좋아요

레지스트리에서 이 카테고리의 활성 서버 전체와 비교했어요. 스타는 게시자가 저장소를 소유한 경우에만 세요.

자주 묻는 질문

Standby Design MCP, 안전한가요?

해당하는 기본 점검 4개 중 4개를 통과했어요. 코드는 읽지 않았어요. 키나 토큰을 넣기 전에 서버가 어떤 권한을 요구하는지 확인하고, 꼭 필요한 권한만 있는 키를 쓰세요.

어떤 키나 코드가 필요한가요?

레지스트리에 필수 키가 나와 있지 않아요. 다만 처음 쓸 때 로그인을 요구하는 서버도 있어요.

내 컴퓨터에서 실행되나요, 클라우드에서 실행되나요?

둘 다 가능해요. 내 컴퓨터에 설치해도 되고, 클라우드 버전에 연결해도 돼요.

아직 관리되고 있나요?

GitHub 저장소는 마지막으로 4일 전 변경됐고, 최신 버전(0.6.2)은 4일 전 레지스트리에 올라왔어요.

어떤 앱에서 쓸 수 있나요?

Claude Desktop, Claude Code, Cursor, VS Code처럼 MCP를 지원하는 앱에서 쓸 수 있어요. URL로 연결되므로 원격 MCP를 지원하는 앱에서도 쓸 수 있어요. 예: ChatGPT Business 이상.

대신 쓸 수 있는 건 뭐가 있나요?

같은 카테고리에는: Next AI Draw.io, Pascal 3D Editor, screenpipe

대안

같은 카테고리에서 다른 제작자가 만든 서버예요. 스타 순으로 정렬했어요.

카드 보는 법:↓ 주간 다운로드i★ GitHub 스타i세 기둥: 리뷰 · 점검 · 사용 정도i업데이트 = 최신 버전을 레지스트리에 공개한 날i

Next AI Draw.io

draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand

제작자: DayuanJiang널리 사용됨↓ 2.2만/주★ 3.7만4일 전 업데이트

내 컴퓨터에서 실행

Pascal 3D Editor

Create, inspect, validate, and save editable 3D building scenes with Pascal's MCP server.

제작자: pascalorg널리 사용됨↓ 1천/주★ 2.5만오늘 업데이트

컴퓨터 또는 클라우드✓ pascal.app

screenpipe

Search your local screen recordings, audio transcripts, and computer activity from screenpipe.

제작자: screenpipe널리 사용됨↓ 6.6천/주★ 2.2만8일 전 업데이트

내 컴퓨터에서 실행

제작자의 README

README 열기

제작자의 저장소에서 쓰인 그대로 가져왔어요. PopNx MCP가 검토하거나 보증한 내용이 아니에요. HTML, 이미지, 스크립트는 제거했어요. 링크를 누르면 이 사이트를 벗어나요.

standby.design

Multi-Tool-Hub unter standby.design — kleine Tools für Designer und Entwickler. Kein Framework, kein Build-Step, reines HTML/CSS/JS.

MCP-Server für KI-Agenten: https://standby.design/docs/mcp

Design-Regeln im Code prüfen: https://standby.design/docs/lint

Struktur

/

├── index.html # Hub-Seite (standby.design) ├── color/ │ └── index.html # Color Palette Generator (standby.design/color) ├── Dockerfile ├── nginx.conf ├── docker-compose.yml └── deploy.sh

Deployment (Hetzner + Docker + nginx)

./deploy.sh

Setzt voraus: SSH-Key unter C:/Local Data/Repositories/SSH Keys/hetzner_ed25519.

DNS (Namecheap)

A-Record für standby.design und www.standby.design → 46.225.131.97


Color Palette Generator (/color)

Ein interaktiver, client-seitiger Palette-Generator im OKLCH-Farbraum — keine Dependencies, kein Build-Step.

Features

  • Brand + Slated: Generiert automatisch eine volle Palette (Brand) und eine gedämpfte Variante mit 50% Chroma (Slated)
  • 18 Abstufungen: Feine Gradierung für Light Surfaces (25–100), Core Palette (200–800), Dark Surfaces (825–875) und High Contrast (925–975)
  • Zwei Modi:
  • Balanced Midpoint — 500 = perzeptueller Mittelwert (L=0.50), symmetrisch um den hellsten Punkt des Farbtons
  • Exact Brand Match — 500 = exakt die Eingabefarbe, Helligkeit + Chroma werden gleichmäßig darum herum skaliert
  • Click-to-Copy: Einzelne Hex- und OKLCH-Werte per Klick kopieren
  • Code-Export: Fertige CSS Custom Properties (OKLCH + Hex Fallback) zum Kopieren
  • Surface-Demo: Live-Vorschau für Light Mode, Dark Mode und High Contrast Surfaces
  • Grau-sicher: Neutrale Eingaben (z.B. #757575) erzeugen saubere Grau-Paletten ohne Farbstich

Verwendung

  1. index.html im Browser öffnen
  2. Hex-Farbcode eingeben (mit oder ohne #)
  3. Modus wählen (Balanced Midpoint / Exact Brand Match)
  4. Palette generieren — fertig

Zonenstruktur

StepsZoneVerwendung
25–100Light SurfacesHintergründe, Cards, Elevated (Light)
200–800Core PaletteButtons, Links, Akzente, Text
825–875Dark SurfacesHintergründe, Cards (Dark Mode)
900–975High ContrastHintergründe (High Contrast Dark)

Technologie

  • Reines HTML + CSS + JavaScript (zero dependencies)
  • OKLCH ↔ OKLab ↔ Linear sRGB ↔ sRGB Konvertierung
  • Binäre Suche für sRGB-Gamut-Clamping
  • Parabolische Chroma-Envelope für natürliche Sättigungsverteilung