# Practice: review an AI-generated interface

> Correct an AI-generated component using design-system standards

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

---

[Design systems in the AI era](/en/courses/design-systems) 3. Consistency & interaction 9 / 15

# Practice: review an AI-generated interface

Correct an AI-generated component using design-system standards
Scenario 46 XP 7 min

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

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

---

Site guide for agents: https://learning.reopt.ai/llms.txt · Sitemap: https://learning.reopt.ai/sitemap.xml · Contact: https://learning.reopt.ai/contact