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