DEFINITION
디자인 시스템은 색상, 글꼴, 버튼, 카드, 폼, 간격, 접근성 규칙처럼 제품 UI를 일관되게 만들기 위한 공통 약속과 컴포넌트 묶음이다. VIBE 코딩에서는 AI에게 매번 다른 스타일로 화면을 만들게 두면 페이지마다 톤이 달라지고 유지보수가 어려워지므로, 먼저 디자인 시스템의 토큰과 컴포넌트 사용 규칙을 알려 주는 것이 결과 품질을 크게 높인다.
ENGLISH
Design System
EXAMPLE
AI에게 새 가격표 페이지를 만들라고 지시하기 전에 버튼 크기, 카드 여백, 경고 색상, 모바일 줄바꿈, aria-label 규칙을 디자인 시스템 기준으로 제공한다. 생성 후에는 기존 버튼·폼 컴포넌트를 재사용했는지와 모바일·키보드 접근성 스모크를 함께 확인한다.
NOTES
초보자는 디자인 시스템을 거대한 디자인 조직 전용 문서로 보지 말고, AI가 같은 UI 언어를 반복해서 쓰게 만드는 작은 규칙 묶음부터 시작하면 된다.
REFERENCE
m3.material.io/foundations