MCP 서버

standby-design-mcp

io.github.KarstenKreh/standby-design-mcp
디자인 및 크리에이티브 개발자 도구 공개 · 연결 가능 MCP 2025-11-25

이 MCP로 할 수 있는 일

Generates design-system color, typography, spacing, shape, icon, and layout tokens and exports them as CSS, Tailwind, design-token JSON, or AI-oriented briefs.

export_design_system
Export design system code
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 & motion), "llm-briefing" (Markdown brief for AI code generation), or "font-embed" (Fontshare <link> snippet). Optionally restrict to specific sections. Always give the returned standby.design/system URL to the user alongside the code — the link is the deliverable.
읽기 전용
입력 스키마
{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'required': ['url', 'format'], 'properties': {'url': {'type': 'string', 'description': 'A standby.design URL or raw unified hash.'}, 'format': {'enum': ['css', 'tailwind', 'design-tokens', 'llm-briefing', 'font-embed'], 'type': 'string', 'description': 'Output format.'}, 'sections': {'type': 'array', 'items': {'enum': ['color', 'type', 'space', 'shape', 'symbol', 'motion'], 'type': 'string'}, 'description': 'Which sections to include. Honoured by "css", "tailwind", "llm-briefing" and "design-tokens" (which only knows type, space and motion). By default color, type, space, shape and motion are always included â\x80\x94 with their defaults when the URL does not configure them â\x80\x94 and symbol only when the URL configures it. Ignored by "font-embed".'}}, 'additionalProperties': False}
generate_color_palette
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 — the link is the deliverable; it opens the live system in the browser. Use export_design_system for full CSS/Tailwind output.
읽기 전용
입력 스키마
{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'properties': {'url': {'type': 'string', 'description': "Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing/motion settings from other tools are preserved. Omit to start fresh from defaults."}, 'mode': {'enum': ['balanced', 'exact'], 'type': 'string', 'description': '"balanced": step 500 is always the perceptual midpoint (even light/dark distribution). "exact": step 500 keeps the input color\'s lightness.'}, 'accents': {'type': 'array', 'items': {'type': 'object', 'required': ['name'], 'properties': {'hex': {'type': 'string', 'description': 'Hex color. Omit to auto-derive from the brand color (requires autoHue or a preset name: Success/Warning/Info).'}, 'pin': {'type': 'boolean'}, 'name': {'type': 'string', 'maxLength': 30, 'minLength': 1}, 'invert': {'type': 'boolean'}, 'autoHue': {'type': 'number', 'maximum': 360, 'minimum': 0, 'description': 'OKLCH hue for auto-derived accents.'}}, 'additionalProperties': False}, 'maxItems': 3, 'description': 'Up to 3 additional named accent colors. Replaces the existing accent list when provided; pass [] to remove all accents. Default: Success/Warning/Info, auto-derived.'}, 'brandHex': {'type': 'string', 'description': 'Brand color as 6-digit hex, e.g. "#335A7F". The palette midpoint is derived from this.'}, 'brandPin': {'type': 'boolean', 'description': 'Pin the primary token to the exact input hex instead of the palette step.'}, 'errorPin': {'type': 'boolean'}, 'themeName': {'type': 'string', 'maxLength': 60, 'description': 'Name of the design system (appears in exports and page title).'}, 'bgColorHex': {'type': 'string', 'description': 'Surface tint color as hex, or "auto" to derive from the brand color (default).'}, 'brandInvert': {'type': 'boolean', 'description': 'For pinned brand: mirror lightness in dark mode (e.g. black buttons in light mode, white in dark).'}, 'chromaScale': {'type': 'number', 'maximum': 1, 'minimum': 0, 'description': 'Surface saturation 0â\x80\x931 (0 = grey surfaces, 1 = vibrant). Default 0.25.'}, 'errorInvert': {'type': 'boolean'}, 'errorColorHex': {'type': 'string', 'description': 'Error/destructive color as hex, or "auto" to derive from the brand hue (default).'}, 'fgContrastMode': {'enum': ['best', 'preferLight', 'preferDark'], 'type': 'string', 'description': 'Text color strategy on colored backgrounds.'}}, 'additionalProperties': False}
generate_icon_tokens
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, solar-linear, solar-bold, solar-broken, tabler-outline, tabler-filled, radix. Returns a shareable standby.design/system URL and a summary. Always give that URL to the user — the link is the deliverable.
읽기 전용
입력 스키마
{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'properties': {'set': {'type': 'string', 'description': 'Icon set variant id to select explicitly, e.g. "material-outlined". One of: material-outlined, material-filled, lucide, phosphor-regular, phosphor-bold, phosphor-thin, phosphor-fill, solar-linear, solar-bold, solar-broken, tabler-outline, tabler-filled, radix. Pass "auto" to clear the selection and use the recommendation instead.'}, 'url': {'type': 'string', 'description': "Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing/motion settings from other tools are preserved. Omit to start fresh from defaults."}, 'scale': {'type': 'number', 'maximum': 2, 'minimum': 1, 'description': 'Size scale ratio (default 1.272).'}, 'style': {'enum': ['outlined', 'filled', 'duotone', 'auto'], 'type': 'string', 'description': 'Preferred icon style for the recommendation.'}, 'weight': {'enum': ['thin', 'regular', 'bold', 'auto'], 'type': 'string', 'description': 'Preferred stroke weight.'}, 'corners': {'enum': ['sharp', 'rounded', 'auto'], 'type': 'string', 'description': 'Preferred corner style (sharp = corporate/precise, rounded = friendly).'}, 'baseSize': {'type': 'number', 'maximum': 3, 'minimum': 0.5, 'description': 'Base icon size (md) in rem (default 1.25).'}, 'snapTo4px': {'type': 'boolean', 'description': 'Round sizes to the 4px grid (default true).'}}, 'additionalProperties': False}
generate_motion_tokens
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, expand, enter, exit, fade, navigate.*, sheet.*, container) and the reduced-motion rule. Start from a preset, then fine-tune with energy/material. Returns a shareable standby.design/system URL and a summary. Always give that URL to the user — the link is the deliverable. Use export_design_system for CSS, design tokens or the LLM briefing; SwiftUI, Compose and Motion (JS) code is exported in the UI at standby.design/motion.
읽기 전용
입력 스키마
{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'properties': {'url': {'type': 'string', 'description': "Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing/motion settings from other tools are preserved. Omit to start fresh from defaults."}, 'energy': {'type': 'number', 'maximum': 100, 'minimum': 0, 'description': '0 = calm (slow, deliberate) â\x80¦ 100 = lively (quick, snappy). Default 50.'}, 'preset': {'enum': ['calm-firm', 'calm-elastic', 'balanced', 'lively-firm', 'lively-elastic'], 'type': 'string', 'description': 'Starting character. "calm-firm" (energy 15, material 15; premium, finance, luxury), "calm-elastic" (energy 15, material 85; wellness, lifestyle), "balanced" (energy 50, material 50; most products), "lively-firm" (energy 85, material 15; productivity, sports, dev tools), "lively-elastic" (energy 85, material 85; playful consumer apps, games). energy/material override the preset.'}, 'material': {'type': 'number', 'maximum': 100, 'minimum': 0, 'description': '0 = firm (no overshoot) â\x80¦ 100 = elastic (visible bounce on spatial motion). Default 50.'}}, 'additionalProperties': False}
generate_shape_tokens
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 and a summary. Always give that URL to the user — the link is the deliverable.
읽기 전용
입력 스키마
{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'properties': {'url': {'type': 'string', 'description': "Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing/motion settings from other tools are preserved. Omit to start fresh from defaults."}, 'style': {'enum': ['paper', 'glass', 'neomorph', 'neobrutalism'], 'type': 'string', 'description': 'Top-level visual style (default "paper").'}, 'glassBlur': {'type': 'number', 'maximum': 20, 'minimum': 0, 'description': 'Glass backdrop blur (default 1.0).'}, 'ringStyle': {'enum': ['soft', 'solid'], 'type': 'string', 'description': 'Focus ring shape: "soft" (default) is a translucent halo at the edge plus a full-color border, "solid" is a hard outline set off by ringOffset.'}, 'ringWidth': {'type': 'integer', 'maximum': 8, 'minimum': 0, 'description': 'Focus ring width in px (default 2).'}, 'glassDepth': {'type': 'number', 'maximum': 5, 'minimum': -2, 'description': 'Glass displacement intensity (default 0.2).'}, 'ringOffset': {'type': 'integer', 'maximum': 8, 'minimum': 0, 'description': 'Focus ring offset in px (default 2).'}, 'shadowType': {'enum': ['normal', 'flat'], 'type': 'string', 'description': 'Shadow rendering for paper style.'}, 'borderWidth': {'type': 'number', 'maximum': 10, 'minimum': 0, 'description': 'Border width in px (default 1).'}, 'shadowScale': {'type': 'number', 'maximum': 2, 'minimum': 1, 'description': 'Elevation level spread ratio (default 1.272).'}, 'borderRadius': {'type': 'integer', 'maximum': 64, 'minimum': 0, 'description': 'Base radius in px; scales to a xsâ\x80\x93xl radius set (default 8).'}, 'ringColorHex': {'type': 'string', 'description': 'Custom focus ring color as hex, or "auto" (default).'}, 'borderEnabled': {'type': 'boolean'}, 'shadowEnabled': {'type': 'boolean'}, 'shadowOffsetX': {'type': 'integer', 'maximum': 16, 'minimum': -16, 'description': 'Brutalist shadow X offset in px (default 2).'}, 'shadowOffsetY': {'type': 'integer', 'maximum': 16, 'minimum': -16, 'description': 'Brutalist shadow Y offset in px (default 4).'}, 'borderColorHex': {'type': 'string', 'description': 'Custom border color as hex, or "auto" (default).'}, 'separationMode': {'enum': ['shadow', 'border', 'contrast', 'gap', 'mixed'], 'type': 'string', 'description': 'How surfaces separate from the background.'}, 'shadowColorHex': {'type': 'string', 'description': 'Custom shadow color as hex, or "auto" (default).'}, 'shadowStrength': {'type': 'number', 'maximum': 3, 'minimum': 0, 'description': 'Shadow alpha multiplier (default 1.0).'}, 'glassDispersion': {'type': 'number', 'maximum': 2, 'minimum': 0, 'description': 'Chromatic aberration intensity (default 0.4).'}, 'shadowBlurScale': {'type': 'number', 'maximum': 3, 'minimum': 0, 'description': 'Shadow blur multiplier (default 1.0).'}, 'brutalistVariant': {'enum': ['outlined', 'solid'], 'type': 'string'}}, 'additionalProperties': False}
generate_space_tokens
Generate spacing & layout 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.
읽기 전용
입력 스키마
{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'properties': {'url': {'type': 'string', 'description': "Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing/motion settings from other tools are preserved. Omit to start fresh from defaults."}, 'mode': {'enum': ['harmonic', 'geometric'], 'type': 'string', 'description': '"harmonic": multiples of the base (default). "geometric": compound ratio steps.'}, 'snap': {'type': 'boolean', 'description': 'Snap token values to a sensible grid (default true).'}, 'ratio': {'type': 'number', 'maximum': 2, 'minimum': 1, 'description': 'Ratio for geometric mode (default 1.272).'}, 'baseRem': {'type': 'number', 'maximum': 4, 'minimum': 0.25, 'description': 'Base spacing in rem (default 1.0).'}, 'containers': {'type': 'array', 'items': {'type': 'object', 'required': ['name', 'maxPx'], 'properties': {'name': {'type': 'string', 'minLength': 1}, 'maxPx': {'type': 'integer', 'minimum': 0}}, 'additionalProperties': False}, 'description': 'Replace the container list. Defaults: prose 680, narrow 960, default 1200, wide 1440, full 1920.'}, 'fluidMaxVw': {'type': 'integer', 'maximum': 3840, 'minimum': 1000, 'description': 'Upper fluid viewport anchor in px (default 1920).'}, 'fluidMinVw': {'type': 'integer', 'maximum': 1000, 'minimum': 200, 'description': 'Lower fluid viewport anchor in px (default 375).'}, 'multiplier': {'type': 'number', 'maximum': 4, 'minimum': 0.25, 'description': 'Uniform scale factor on all tokens (default 1.0).'}, 'proseMaxCh': {'type': 'integer', 'maximum': 120, 'minimum': 20, 'description': 'Prose measure in ch (default 65).'}, 'breakpoints': {'type': 'array', 'items': {'type': 'object', 'required': ['name', 'minPx'], 'properties': {'name': {'type': 'string', 'minLength': 1}, 'minPx': {'type': 'integer', 'minimum': 0}}, 'additionalProperties': False}, 'description': 'Replace the breakpoint list, e.g. [{"name":"sm","minPx":640},...]. Defaults: sm 640, md 768, lg 1024, xl 1280, 2xl 1536.'}, 'aspectRatios': {'type': 'array', 'items': {'type': 'object', 'required': ['name', 'w', 'h'], 'properties': {'h': {'type': 'number', 'exclusiveMinimum': 0}, 'w': {'type': 'number', 'exclusiveMinimum': 0}, 'name': {'type': 'string', 'minLength': 1}}, 'additionalProperties': False}, 'description': 'Replace the aspect ratio list, e.g. [{"name":"video","w":16,"h":9}].'}, 'includeReciprocals': {'type': 'boolean', 'description': 'Also export flipped (portrait) variants of each ratio (default true).'}}, 'additionalProperties': False}
generate_type_scale
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 the user — the link is the deliverable. Use list_fonts to discover font slugs.
읽기 전용
입력 스키마
{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'properties': {'url': {'type': 'string', 'description': "Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing/motion settings from other tools are preserved. Omit to start fresh from defaults."}, 'ratio': {'type': 'number', 'maximum': 1.7, 'minimum': 1.05, 'description': 'Scale ratio for custom mode. Presets: 1.2 minor third, 1.25 major third, 1.272 golden-ratio-area (default, â\x88\x9aÏ\x86), 1.333 perfect fourth, 1.618 golden ratio. The empirical perceptual corridor is 1.20â\x80\x931.50.'}, 'baseSize': {'type': 'number', 'maximum': 2, 'minimum': 0.5, 'description': 'Desktop base size in rem (default 1.0).'}, 'bodyFont': {'type': 'string', 'description': 'Fontshare font slug for body text.'}, 'monoFont': {'type': 'string', 'description': 'Font slug for code. System stacks: "system-mono", "consolas", "sf-mono".'}, 'scaleMode': {'enum': ['custom', 'traditional'], 'type': 'string', 'description': '"custom": compound ratio scale (default). "traditional": classical Renaissance point sizes per level.'}, 'autoShrink': {'type': 'number', 'maximum': 100, 'minimum': 0, 'description': 'Percent reduction for the auto-derived mobile ratio (default 25). Only used when mobileRatio is not set.'}, 'headingFont': {'type': 'string', 'description': 'Fontshare font slug for headings, e.g. "satoshi", "general-sans", "clash-display".'}, 'mobileRatio': {'type': 'number', 'maximum': 1.7, 'minimum': 1, 'description': 'Explicit mobile scale ratio. Omit to auto-derive from ratio and autoShrink.'}, 'headingWeight': {'type': 'integer', 'maximum': 900, 'minimum': 100, 'description': 'Font weight for headings (default 500).'}, 'mobileBaseSize': {'type': 'number', 'maximum': 2, 'minimum': 0.5, 'description': 'Mobile base size in rem (default = baseSize).'}, 'lineHeightOverrides': {'type': 'object', 'description': 'Per-level line-height overrides, e.g. {"h1": 1.1, "body-m": 1.6}. Levels: display, h1â\x80\x93h6, body-l, body-m, body-s, caption.', 'additionalProperties': {'type': 'number'}}, 'letterSpacingOverrides': {'$ref': '#/properties/lineHeightOverrides', 'description': 'Per-level letter-spacing overrides in em, e.g. {"display": -0.05}.'}, 'traditionalAssignments': {'type': 'object', 'description': 'For traditional mode: desktop px size per level, e.g. {"display": 48, "h1": 36, ...}.', 'additionalProperties': {'type': 'number'}}, 'traditionalMobileAssignments': {'type': 'object', 'description': 'For traditional mode: mobile px size per level.', 'additionalProperties': {'type': 'number'}}}, 'additionalProperties': False}
get_design_rules
Get design rules
Universal design rules for building UI with design tokens: layout, flow (empty, loading and error states, dialogs), shape, surfaces, interaction states, typography, color and stack rules for Tailwind/React Native. The tokens say which values exist; these rules say how to use them. Call this before building or reviewing views. Without arguments it returns every rule as one line (31 rules); pass rules (slugs) or a category with detail "full" for the complete text including how to detect violations in code. Rule texts are in German. Categories: Layout, Fluss, Form, Fläche, Bedienung, Zustand, Typografie, Farbe, Stack.
읽기 전용
입력 스키마
{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'properties': {'rules': {'type': 'array', 'items': {'type': 'string'}, 'description': 'Rule slugs (from the summary) to return in full.'}, 'scope': {'enum': ['universal', 'stack'], 'type': 'string', 'description': '"universal" applies to every project, "stack" to one technology (e.g. Tailwind, React Native).'}, 'detail': {'enum': ['summary', 'full'], 'type': 'string', 'description': '"summary" (default): one line per rule. "full": complete rule text. Defaults to "full" when rules are given.'}, 'category': {'type': 'string', 'description': 'Only rules from this category: Layout, Fluss, Form, Fläche, Bedienung, Zustand, Typografie, Farbe, Stack.'}, 'platform': {'enum': ['web', 'react-native'], 'type': 'string', 'description': 'Only rules that apply to this platform.'}}, 'additionalProperties': False}
get_design_system
Inspect 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 deliverable.
읽기 전용
입력 스키마
{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'required': ['url'], 'properties': {'url': {'type': 'string', 'description': 'A standby.design URL or raw unified hash (e.g. from a previous generate_* call or copied from the browser).'}}, 'additionalProperties': False}
list_fonts
List available 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.
읽기 전용
입력 스키마
{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'properties': {}}
추가됨
get_design_rules
2026년 9월 27일 2:45 AM
변경됨
export_design_system
2026년 9월 27일 2:45 AM
변경됨
get_design_system
2026년 9월 27일 2:45 AM
추가됨
generate_motion_tokens
2026년 9월 27일 2:45 AM
변경됨
generate_space_tokens
2026년 9월 27일 2:45 AM
변경됨
generate_icon_tokens
2026년 9월 27일 2:45 AM
변경됨
generate_shape_tokens
2026년 9월 27일 2:45 AM
변경됨
generate_type_scale
2026년 9월 27일 2:45 AM
변경됨
generate_color_palette
2026년 9월 27일 2:45 AM
추가됨
list_fonts
2026년 9월 17일 12:42 PM
추가됨
export_design_system
2026년 9월 17일 12:42 PM
추가됨
get_design_system
2026년 9월 17일 12:42 PM
추가됨
generate_space_tokens
2026년 9월 17일 12:42 PM
추가됨
generate_icon_tokens
2026년 9월 17일 12:42 PM
추가됨
generate_shape_tokens
2026년 9월 17일 12:42 PM
추가됨
generate_type_scale
2026년 9월 17일 12:42 PM
추가됨
generate_color_palette
2026년 9월 17일 12:42 PM