# 실전: AI가 만든 UI 리뷰

> AI 생성 컴포넌트를 디자인 시스템 기준으로 교정하기

- Canonical: https://learning.reopt.ai/courses/design-systems/lessons/ds-l3-scenario
- Language: ko-KR
- HTML: https://learning.reopt.ai/courses/design-systems/lessons/ds-l3-scenario

---

[AI 시대의 디자인 시스템](/courses/design-systems) 3. 일관성 & 인터랙션 9 / 15

# 실전: AI가 만든 UI 리뷰

AI 생성 컴포넌트를 디자인 시스템 기준으로 교정하기
시나리오 46 XP 7분

AI 에이전트가 관리자 대시보드의 카드 컴포넌트를 생성했습니다. 디자인 시스템 관점에서 각 문제에 가장 좋은 교정을 고르세요.
상황 배경 팀에는 3계층 토큰, 4px 스페이싱 스케일, WCAG AA 규칙, 상태/모션 토큰이 갖춰져 있고 CI에 layout linting과 axe 게이트가 있습니다. 결정 1 / 4

AI가 카드 배경색을 background: #3B82F6 로 하드코딩했습니다. 어떻게 교정할까요?
그대로 둔다 — 색만 맞으면 문제없다 `colors.blue.500` Primitive 토큰으로 바꾼다 `colors.primary` Semantic 토큰으로 바꾼다

---

에이전트용 사이트 안내: https://learning.reopt.ai/llms.txt · 사이트맵: https://learning.reopt.ai/sitemap.xml · 문의: https://learning.reopt.ai/contact