VibedesignerVibedesigner

Design System Builder

AI가 바로 사용할 디자인 시스템을 만드세요

템플릿을 선택하고 기본 토큰을 조정해 JSON, Tailwind 설정, 프롬프트를 한 번에 생성하세요.

템플릿 선택

디자인 시스템의 기본 성격을 고르세요

템플릿을 선택하면 기본 design token preset이 자동으로 적용됩니다.

커스터마이징

기본 토큰을 빠르게 조정하세요

템플릿의 기본 구조는 유지하면서 핵심 토큰만 가볍게 맞출 수 있습니다.

#635BFF
복수 선택

결과

템플릿 기반 디자인 시스템이 생성됩니다

JSON 토큰, Tailwind config, 프롬프트를 바로 복사하거나 다운로드할 수 있습니다.

JSON 디자인 토큰

{
  "meta": {
    "template": "모던 SaaS",
    "platform": "웹",
    "goal": "가독성"
  },
  "color": {
    "primary": "#635BFF",
    "background": {
      "canvas": "#F7F8FC",
      "surface": "#FFFFFF"
    }
  },
  "spacing": {
    "xs": "6px",
    "sm": "10px",
    "md": "18px",
    "lg": "28px",
    "xl": "36px",
    "2xl": "48px"
  },
  "typography": {
    "fontFamily": "Inter, Pretendard, Apple SD Gothic Neo, sans-serif"
  },
  "components": [
    "버튼",
    "카드",
    "폼"
  ]
  // 전체 JSON은 다운로드 또는 복사로 확인할 수 있습니다.
}

Tailwind config

export default {
  theme: {
    extend: {
      colors: {
        primary: '#635BFF',
        background: '#F7F8FC',
        surface: '#FFFFFF',
        border: '#D8DDE8',
        text: {
          primary: '#111827',
          secondary: '#667085',
          inverse: '#FFFFFF',
        },
      },
      spacing: {
        xs: '6px',
        sm: '10px',
        md: '18px',
        lg: '28px',
        xl: '36px',
        '2xl': '48px',
      },
      fontFamily: {
        sans: ['Inter, Pretendard, Apple SD Gothic Neo, sans-serif'],
      },
      fontSize: {
        caption: ['12px', { lineHeight: '18px' }],
        body: ['16px', { lineHeight: '24px' }],
        'body-lg': ['18px', { lineHeight: '28px' }],
        title: ['24px', { lineHeight: '32px' }],
        display: ['36px', { lineHeight: '44px' }],
      },
      borderRadius: {
        sm: '18px',
        md: '18px',
        lg: '18px',
        xl: '18px',
      },
      boxShadow: {
        sm: '0 2px 6px rgba(15, 23, 42, 0.08)',
        md: '0 10px 24px rgba(15, 23, 42, 0.12)',
        lg: '0 18px 40px rgba(15, 23, 42, 0.16)',
      },
      height: {
        control: '46px',
      },
    },
  },
};

Prompt

모던 SaaS 템플릿을 기반으로 웹용 디자인 시스템을 구성해주세요. 주요 목표는 가독성이며, 정보 계층과 텍스트 가독성을 우선으로 설계주세요. Primary color는 #635BFF, border radius는 18px, 타이포 스케일은 balanced, 간격 스케일은 airy, 그림자 강도는 medium, 밀도는 balanced 기준으로 정리해주세요. 결과물에는 color, spacing, typography, radius, shadow 토큰과 함께 버튼, 카드, 폼 컴포넌트 규칙이 포함되어야 하며, Tailwind theme.extend에 바로 옮길 수 있는 수준으로 작성해주세요.