julianoczkowski/design-tokens

design-tokens은(는) 무엇을 하나요?

선택한 미학 철학에 따라 디자인 토큰 파일(CSS 변수 또는 Tailwind 설정)을 생성합니다. 라이트/다크 모드 팔레트, 간격 스케일, 타입 램프, 컴포넌트 수준 토큰을 포함합니다. 새 프로젝트 시작, 비주얼 시스템 구축, 토큰 설정 또는 '디자인 시스템' 언급 시 사용하세요.

사용 예시

사용자는 다음과 같이 요청할 수 있습니다:

• "미니멀리즘 디자인 시스템을 위한 CSS 변수를 생성해줘."
• "네오모피즘 스타일의 Tailwind 설정 파일을 만들어줘."
• "새 프로젝트를 시작하는데, 기본적인 디자인 토큰을 설정하고 싶어."
• "라이트 모드와 다크 모드를 지원하는 디자인 토큰이 필요해."

생성 내용

• 미학 철학: 미니멀리즘, 네오모피즘, 글래스모피즘, 머티리얼 디자인 등
• 색상 팔레트: 라이트 모드와 다크 모드 모두 지원
• 간격 스케일: 일관된 간격 시스템 (예: spacing-1, spacing-2, ...)
• 타이포그래피 램프: 제목, 본문, 캡션 등에 대한 폰트 크기와 행간
• 컴포넌트 토큰: 버튼, 카드, 입력 필드 등 공통 컴포넌트에 대한 토큰

출력 형식

출력 형식은 css 또는 tailwind 중에서 선택할 수 있습니다.

CSS 변수 예시

:root {
  --color-primary: #3B82F6;
  --color-primary-dark: #2563EB;
  --color-background: #FFFFFF;
  --color-text: #1F2937;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
}

Tailwind 설정 예시

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        'primary-dark': '#2563EB',
      },
      spacing: {
        '1': '0.25rem',
        '2': '0.5rem',
      },
      fontSize: {
        'base': '1rem',
        'lg': '1.25rem',
      },
    },
  },
}