AI 디자인 적용 (Claude Design)¶
요지¶
d-edu 디자인 작업에 AI를 끼는 방식. 탐색·시안→코드·상태 점검·핸드오프 문서를 AI로 가속하되 토큰 일관성·상태 누락·톤은 사람 검수 게이트로 막는다. AI 협업 전사 공통 원칙은 ai-collaboration.
언제 쓰나 / 안 쓰나¶
- 쓴다: 레이아웃·카피·variant 후보를 빠르게 탐색할 때, Figma 토큰 기준 컴포넌트 코드를 보조 받을 때, 상태 누락을 점검할 때.
- 안 쓴다: 확정은 AI가 아니라 Figma "디에듀 Design 2.0"에서. 톤·디자인 결정은 디자이너 책임. 프롬프트 일반 가드는 ai-collaboration.
단계 (절차)¶
| 단계 | AI 활용 | 사람 게이트 |
|---|---|---|
| 탐색 | 레이아웃·카피·variant 후보 빠른 드래프트 | 디자이너가 톤·방향 확정 |
| 시안→코드 | Figma 토큰 기준 컴포넌트 코드 보조 (Code Connect 도입 시) | 토큰 일관성 검수 (design-system) |
| 상태 누락 점검 | Empty/Loading/Error 상태 빠짐 자동 점검 | 디자이너 최종 시안화 |
| 핸드오프 문서 | 컴포넌트·상태 명세 드래프트 | dev-handoff 확정 |
체크리스트¶
- AI 산출물이 raw hex 없이 시맨틱 토큰만 썼나.
- 확정 기준이 Figma SSOT인가(AI 생성물은 후보).
- 생성 카피·비주얼이 브랜드 가이드 톤 검수를 거쳤나.
- happy path 외 Empty/Error 상태까지 보강됐나.
흔한 함정¶
- 토큰 이탈: AI가 raw hex를 넣기 쉬움 → 검수 필수 항목.
- happy-path 편향: AI 드래프트가 정상 흐름만 그림 → Empty/Error까지 디자이너가 보강.
- AI 산출물을 SSOT로 오인: 확정은 Figma에서.
예시 · 폼/템플릿 링크¶
- 디자인 특화 가드 요약: 토큰 불가침 / SSOT(Figma) 우선 / 브랜드 톤 일관성 / 상태 분기 누락 금지.
- 전사 AI 협업 가드: ai-collaboration.
관련¶
- ai-collaboration — AI 협업 일반 원칙
- figma-workflow — Figma 파일·토큰 매핑 (MCP/Code Connect는 도입 전 🚧)
- design-system — 토큰 기준
- dev-handoff — 핸드오프