MCP와 Figma를 이용한 디자인 리팩토링
이 문서는 MCP(Multi-platform Copilot)와 Figma를 사용하여 디자인을 리팩토링하는 방법에 대한 지침을 제공합니다. 특히 단색 색상, 특히 다크 모드를 위한 회색조 색상을 사용하여 현재 디자인을 리팩토링하는 데 중점을 둡니다.
원본 Gist
작업 개요
- Figma 연결 및 분석: MCP를 통해 Figma에 연결하고 현재 디자인을 분석합니다. 이 작업은 계획 모드에서 수행할 수 있습니다.
- 디자인 리팩토링:
- 색상: 단색 색상(회색조)을 사용하여 다크 모드로 디자인합니다. 흰색 또는 검은색의 음영만 사용해야 합니다.
- 분석: Figma에서 디자인의 구성, 색상 구성표, 글꼴, 레이아웃, 미학, 간격, 모양의 기하학 등을 분석합니다.
- 자동 레이아웃: 최신 Figma 자동 레이아웃 원칙을 적절하게 사용합니다.
- 미학: 전체적인 미학은 "shadcn 스타일"에서 영감을 받아야 합니다.
Shadcn UI/UX 디자인 시스템
1. 기하학 및 레이아웃
- 12열 그리드와 4px 기준선 증분을 사용합니다.
- 최대 너비
1280px에서 기본 콘텐츠를 중앙 정렬합니다. - 데스크톱에서는 섹션 사이에 48px–64px, 모바일에서는 32px의 수직 여백을 적용합니다.
2. 타이포그래피
- 기본 글꼴을
Inter또는Sans로 설정하고 본문 크기는 16px로 합니다. - 제목 크기: H1: 48px/굵게, H2: 36px/세미볼드, H3: 28px/세미볼드.
- 모든 본문 텍스트에 1.5의 줄 간격을 적용합니다.
3. 색상 팔레트
- 기본 회색조:
#F8FAFC에서#0F172A까지. - 강조 색상: 차분한 브랜드 색상(예:
blue-600)을 드물게 선택합니다. - 본문 텍스트/배경에 대해 4.5:1 이상의 명암비를 사용합니다.
4. 배경
- 배경을 단색 또는 미묘한 그라데이션으로 평평하게 유지합니다.
- 카드 및 팝업에만 가벼운 그림자를 적용합니다.
5. 모서리 반경
- 기본 반경: 6px. 카드/모달: 8px. 작은 버튼/입력: 4px.
6. 간격 시스템
- 기본 배율: 4px. 표준 증분: 4/8/12/16/24/32/48/64px.
7. 인터랙티브 요소
- 호버: 배경색 불투명도 이동 또는 약간의 색상 어둡게 처리.
- 포커스: 항상 2px 두께의
outline-ring으로 버튼/입력을 윤곽 처리합니다. - 애니메이션 타이밍: 150ms–200ms,
ease-in-out.
8. 디자인 철학
- 장식보다 기능을 우선시합니다.
- 스타일 향상은 추가적이며 필수는 아닙니다.
- 공간을 의미 있게 채웁니다.
- 무거운 그림자, 큰 그라데이션 또는 과도한 애니메이션을 피합니다.
- shadcn은 원시적이고 확장 가능합니다.
- UX 패턴을 직접 정의합니다.