AI로 디자인하기: Claude, Codex, Figma | 완벽 가이드

Anthropic의 Claude, OpenAI의 Codex, Google Stitch, Mobbin, Figma를 사용하여 AI로 디자인하는 방법을 배웁니다. 이 완벽한 가이드는 초기 아이디어 도출과 UX 사고부터 와이어프레이밍, 고충실도 디자인, 디자인 시스템, 프로토타이핑, 프로덕션 레벨 UI까지 실제 제품 디자인 워크플로우에서 AI 도구를 사용하는 방법을 안내합니다. Claude, Codex, Google Stitch, Mobbin, Figma가 디자인 프로세스에 어떻게 적용되는지, 제너릭한 AI 생성 결과를 피하는 방법, 그리고 디자이너가 더 빠르게 움직이고, 더 나은 결정을 내리고, 토큰을 덜 소비하면서도 감각, 구조, 제어를 잃지 않는 방법을 살펴봅니다. 🔗 핵심 링크 📣 커뮤니티 참여: https://uicollective.co/ ❎ X에서 팔로우: https://x.com/KirkMDesign UI Collective Academy에 참여하는 이유? 프리미엄 강좌, 프리미엄 자료, 그 외 많은 콘텐츠에 접근할 수 있습니다 (대부분 혼자 제작 중입니다...모든 사람이 이용할 수 있는 디자인 교육을 만들려고 노력하고 있으니 응원해주세요!) ↪️ 디자인 시스템이 필요하신가요? (아카데미에도 포함됨): https://collectivekit.co/ 🔗 다른 시스템 영상 추천 디자인 시스템 구축하기: https://youtu.be/opTANvl9G1g 복잡한 디자인 시스템 & Figma 변수 설정: https://youtu.be/L-tpK7Eeuow Claude 디자인 영상: https://youtu.be/eXlSgQmz02E 🔗 추가 링크 디자인 시스템 구축 또는 개선: https://designsystemlabs.co/ 📣 Mobbin 연간 구독 20% 할인: http://mobbin.com/uicollective Google Stitch: https://stitch.withgoogle.com/ Claude Design: https://claude.ai/design [email protected] 0:00 소개 0:52 AI는 도구가 아니라 워크플로우입니다 6:43 AI 디자인 스택 7:32 Claude vs Codex 9:16 AI 디자인 셋업 (Figma 스킬 & Figma MCP) 16:31 Google Stitch 21:27 워크플로우에서 Stitch 사용하는 곳 23:29 Claude Design 27:01 Claude Design 출력물 28:35 Claude Design과 Google Stitch를 함께 사용할 시기 31:44 Claude Design 제한사항 32:35 Claude와 Codex 비교 실험 38:25 AI 토큰 최적 사용 40:45 디자인 시스템과 AI 42:04 Claude Design 디자인 시스템 제한사항 45:32 AI로 디자인 토큰 구축하기 49:01 Figma 변수와 AI 52:26 디자인 시스템 컴포넌트와 AI 58:32 AI에 디자인 시스템 학습시키기 1:01:34 디자인 시스템 Claude 스킬 1:08:04 컴포넌트와 Claude 스킬 1:13:48 Codex에 Claude 스킬 추가하기 1:15:09 AI와 디자인 리서치 (Mobbin) 1:17:24 Claude Code로 프로덕션 UI 구축하기 1:22:43 ChatGPT로 UI 구축하기 1:24:26 AI 디자인 정제하기 1:25:13 Figma로 푸시 및 최종 결과 1:27:08 마무리