클로드 에이전틱
디자인 시스템

프로덕트 디자이너 대상 디자인 자동화

약 8시간 온라인 VOD UXUI 몽타주 Figma MCP

AI Readable Design System
리드타임 90% 단축하는 디자인 시스템을 구축하세요

AI가 읽을 수 있는 디자인 기준

오늘도 '기준'을 찾다 하루가 갑니다
진짜 하고 싶던 일은, 손도 못 댄 채

UX·UI 프로덕트 디자이너부터, UX 기획자, PM까지.
반복 컴포넌트 작업에 시간을 다 쓰고, 정작 사용자 경험을 고민할 여유가 없는 실무자를 위한 강의입니다.

우리 팀엔 아직 기준이
없나요?

화면마다 컴포넌트와 컬러가 조금씩 달라, 어떤 것이 최신인지 매번 확인해야 합니다. 단일 기준이 없어 작업마다 다시 협의합니다.

→ 몽타주로 AI가 읽는 기준을 세웁니다.

개발된 화면이 시안과
미묘하게 다른가요?

간격·Radius·색상 등 세부 스펙이 시안과 구현에서 미묘하게 어긋납니다. 매번 대조하고 수정한 뒤 다시 확인합니다.

→ MCP가 시안과 다른 지점을 짚습니다.

토큰 하나 바꾸는 게
두려우신가요?

토큰 하나를 바꾸면 어디까지 영향을 주는지 알기 어려워 관련 화면을 하나씩 열어 직접 확인해야 안심할 수 있습니다.

→ AI가 토큰 영향 범위를 한 번에 봅니다.

이 컴포넌트, 개발에선
다르게 동작하나요?

기대한 인터랙션과 실제 구현 동작이 다릅니다. 의도를 다시 설명하고 맞춘 뒤 확인하는 커뮤니케이션이 반복됩니다.

→ 동작 기준을 담아 핑퐁을 줄입니다.

바이브 코딩, 만들 때마다
제각각인가요?

같은 서비스도 만들 때마다 결과가 달라집니다. 기준이 없으면 매번 다시 판단해야 하고, AI도 일관된 결과를 내기 어렵습니다.

→ 툴보다 기준 설계부터 시작합니다.

클로드코드 에이전틱 디자인 시스템을 통해

사용자 경험에만 집중하세요

Before

멈춰진 화면을 설계하는
디자이너

시안을 그리고, 컴포넌트를 반복 생산하고,
개발자에게 넘기는 사람

After

실제 동작하는 제품을 구현하는
Product Builder

디자인 시스템을 설계하고, Claude Code로
프론트엔드까지 구현해, 작동하는 MVP를 직접 만드는 사람

진짜 중요한 일에만 몰입하세요.

당신은 화면을
그리는 사람이 아니라,
경험을 만드는 사람입니다.

이 강의에서 다루는 네 가지입니다.
현업 프로덕트 디자이너가 Figma MCP와 Claude Code로 업무를 자동화하고, 원티드 디자인 시스템 '몽타주' 사례를 통해
AI가 직접 읽고 생성하는 나만의 디자인 시스템을 구축합니다.

* 몽타주 : 원티드가 실제 운영 중인 AI 디자인 시스템

01

몽타주(원티드 디자인 시스템) 구조 보기

실제 운영 중인 에이전틱 디자인 시스템을 살펴봅니다.

02

나만의 디자인 시스템 구축

AI가 읽고 사용할 수 있는, 나만의 단일 기준을 세웁니다.

03

반복 업무 자동화

컴포넌트·시안·핸드오프 반복을 AI로 줄입니다.

04

아이디어에서 MVP까지

같은 기준으로 작동하는 MVP까지 완성합니다.

기준을 설계하고, 그 기준대로 작동하게 만드는 법

내 디자인 시스템을
읽고 만드는 에이전트

“우리 디자인 시스템 기준으로 에러 화면 만들어줘” 한 문장이면,

  • 채팅 기능에 필요한 Textarea, Button 등 컴포넌트 사용
  • 디자인 시스템에 명시된 레이아웃 토큰 적용
  • 디자인 시스템 정합성 자동 유지
우리 디자인 시스템 사용해서 채팅 화면 만들어줘
디자인 CLAUDE.md를 읽었습니다. 완료
기준에 맞춰 생성합니다. 완료
  • 허용 컴포넌트와 금지 패턴 명시
  • 간격 · 그리드 규칙과 하드코딩 금지 선언
  • CSS 변수 사용 규칙과 참조 경로 지정
디자인 시스템 정합성을 검증했습니다. 완료
  • 토큰 하드코딩 0건
  • 컴포넌트 Variant 매핑 100%

나만의 에이전틱 디자인 시스템

몽타주는 이미
원티드에서 일하고 있습니다.

강의용 예제가 아닙니다. 원티드 프로덕트에서 매일 돌아가는 시스템이 만든 실제 업무의 변화입니다.

케이스 살펴보기

CASE 01

신규 페이지 퍼블리싱,
CLAUDE.md 규칙 기반 코드 생성

시안 전달 후 개발 대기 2주
→ 1.5일

CASE 02

디자인 시스템 마이그레이션,
레거시 컴포넌트 자동 전환

컴포넌트 N개 수작업 교체, N주
→ 일괄 전환 N시간

CASE 03

디자인 시스템 컴포넌트 문서 자동
생성, Props 테이블·사용 가이드

컴포넌트당 문서 작성 반나절
→ 코드에서 자동 생성

전문가 인터뷰

업무 속도가 크게 향상되었습니다.
공통 컴포넌트와 가이드가 잘 정리되어 있어 반복 작업이 줄었고, 디자인·개발 과정에서 의사소통 비용도 감소해 전반적인 업무 효율이 높아졌습니다.

이○수프로덕트 디자이너

디자인 업무와 프론트엔드 개발 과정의 소요 시간을 크게 단축할 수 있으며, 특히 클로드 바이브 코딩 환경에서 MCP가 연동되어 있어 프론트엔드 작업을 더 효율적으로 진행할 수 있습니다.

성○윤프론트엔드 개발자

AI 툴을 디자인 업무에 사용하게 되면서 디자인 시스템이 잘 갖춰져 있는 것이 경쟁력이라고 생각됩니다.

김○희프로덕트 디자이너

프로덕트 디자이너, 웹 개발자 만족도 결과

총 만족도

4.8/ 5

생산성

4.9/ 5

사용성

4.7/ 5

Wanted Design System - Montage

  • 30.9k 다운로드를 기록한 피그마 라이브러리 (국내 1위)
  • 공개 이후 15만 조회 수 몽타주 문서 사이트 (26년 3월 공개)
Wanted Design System Montage 문서 사이트

반복을 넘어, 배포까지

이 기준은 반복을 없애는 데서
멈추지 않습니다.

AI가 읽는 시스템을 한 번 세우면, 그 위에서 코드가 나옵니다.
반복을 지우던 바로 그 기준이, 아이디어를 MVP까지 데려가는 길이 됩니다.

아이디어에서 MVP까지, 한 워크플로우

기획부터 배포까지, 디자이너가 하나의 연속된 워크플로우로 직접 완성합니다.

  1. 1아이디어
  2. 2PRD
  3. 3Figma
  4. 4Claude Code
  5. 5API 연결
  6. 6D3 · Three.js
  7. 7MVP 배포

→이 전 과정이 그대로 당신의 AX 성과 포트폴리오가 됩니다.

그래서, 무엇이 달라지나요?

핸드오프 질문이 사라집니다.

MCP가 대신 답하고 코드가 나옵니다.
"이 패딩 몇 px?"을 더는 주고받지 않습니다.

검증을 스스로, 빠르게

아이디어를 직접 작동하는 MVP로 만들어,
기다리지 않고 바로 테스트합니다.

시간이, 당신에게 돌아옵니다

그 시간을 새로운 사용자 관점과 경험,
그리고 당신이 진짜 하고 싶던 일에 씁니다.

툴 사용법을 가르치는 강의는 많습니다.

우리는 바뀌지 않는 설계의
구조를 먼저 세웁니다.

설계의 구조를 배우는 순간
내 업무의 반복은 사라지고, 업무와 영향력을 확장할 수 있습니다.

01

몽타주 에이전틱 구조를 직접 설명합니다

원티드 디자인 시스템 '몽타주'를 통해 AI가 읽는 구조를 원리 수준에서 이해합니다.

02

프론트엔드 협업·확장이 가능해집니다

디자이너의 AX 빌더 과정을 통해 개발자와 같은 언어로 협업하고 스스로 확장합니다.

03

디자인 md 파일을 스스로 커스터마이징합니다

디자인 md 파일을 지속적으로 추가하여 시스템을 자동화합니다.

04

'시스템 먼저' 설계합니다.

AI 툴이 아니라 설계 구조를 먼저 가르치는, 대체 불가능한 관점을 제공합니다.

성장을 위한 작은 투자로 이 모든 것을 경험하세요

8개의
실전 파트

5개
포트폴리오

상위 1%
실무자

10배 이상
생산성 격차

  • 추후 클로드 기능 업데이트 시 온라인 라이브 세션을 추가로 진행할 예정입니다.
  • 상세 일정 및 내용은 강의 구매자에게 개별 안내됩니다.

9.1 (화) ~ 9.30 (수)

추가 특별 혜택

이미 검증된 팀이 만듭니다. 원티드 프로덕트에서 실제로 돌아가는 몽타주 운영팀 직강

정가 259,000원

139,000원 46%
티켓 종류
사전 예약
특가결제 금액
139,000원 46% 선착순 100명
정가
259,000원
사전 예약 할인
1차2차3차
영상 공개 일정
1~2강3~5강6~8강
26.08.31 (월) 공개 예정 26.09.11 (금) 공개 예정 26.09.25 (금) 공개 예정

지금 즉시 수강 시

추가 혜택

01

디자인
템플릿 제공

CLAUDE.md 기반 AI 디자인 규칙서 파일을 그대로 받아 바로 사용합니다.

02

FRONTIERS
오픈채팅방 초대

현업 디자이너 커뮤니티.
강의가 끝나도 연결은 계속됩니다.

03

몽타주
설계 과정 안내

원티드 자체 에이전틱 디자인 시스템의 설계 과정을 함께 들여다봅니다.

  • 사전 예약 기간에만 받을 수 있는 혜택입니다.

수강자 대상 프라이빗 밋업 행사 초대

롯데월드타워 밋업

롯데월드타워 밋업

강의를 듣는게 끝이 아닙니다. 직접 만나서 함께 학습합니다.

  • 인사이트 공유실무 적용 경험 나누기
  • 네트워킹같은 방향을 바라보는 동료들과 연결
  • 저녁 식사 · 강사 실습강사님과 함께 성장하기

FRONTIERS 1기 오프라인 밋업 후기

  • "같은 고민을 하는 사람들을 만나 자신감을 얻었다"는 후기를 다수 기록했습니다.
  • 전체 만족도 4.7/5
후기 보러가기
FRONTIERS 1기 오프라인 밋업

강사 소개

지금 돌아가는
시스템을 만든 사람들

김도은 강사

김도은 메인 강사

원티드랩 플랫폼 디자이너

실무 인사이트교육 경험디자인 설계

이제 디자인 시스템을 사용하는 건 사람만이 아니에요. AI도 잘 읽을 수 있는 시스템을 만들고, 아이디어를 실현해 보세요.

경력

  • 현) 원티드랩 플랫폼 디자이너
  • 전) 구름 프로덕트 디자이너

활동

  • 구름 디자인 시스템 Vapor UI 구축
  • UX 라이팅 · 디자인 시스템 컨퍼런스 강의
  • 9oormthon / K-디지털 트레이닝 디자인 시스템 멘토
김석희 과정 설계

김석희 과정 설계

원티드랩 UX부문 부문장

커리큘럼 설계에이전틱 시스템 구축

일관된 사용자 경험을 만들고, 팀과 더 빠르게 협업하며, 제품이 커져도 흔들리지 않는 단단한 디자인 시스템에 대해 다룹니다.

경력

  • 현) 원티드랩 UX부문 부문장
  • 전) 안그라픽스 크리에이티브 디렉터

역할

  • 커리큘럼 설계 및 과정 총괄
  • 에이전틱 디자인 시스템 운영 방향 정립
평생 소장자료 제공

전체 커리큘럼

*상세 커리큘럼은 변경될 수 있습니다.

1강

AI Native Design
디자이너에서 AX Product Builder로

목표
AI 시대 디자이너의 역할 변화를 이해하고, AX Product Builder라는 새 경쟁력을 정의한다.
내용
  • 컴포넌트를 그리는 사람 vs 시스템을 설계하는 사람
  • AI가 바꾼 직무의 경계: AX Product Builder의 정의
  • AI에게 '일을 시키는' 구조 이해하기
  • [오픈소스 직강] 원티드 몽타주 해부: 리드타임 2주 → 1.5일의 설계
  • 최종 프로젝트 프리뷰 - 수강 후 당신이 갖게 될 결과물
산출물
AX 역량 로드맵 (내 커리어 기준점)

2강

노코드 출신을 위한 빌더 환경 세팅

목표
코딩 경험 없이, 디자이너의 언어로 Claude Code 실행 환경을 완성한다.
내용
  • 디자이너 언어로 이해하는 최소한의 개발 개념
  • Git은 디자인 버전 관리다: 히스토리·브랜치를 피그마처럼 이해하기
  • Claude Code 온보딩 - 나의 첫 AI 빌딩 파트너
  • Figma MCP 연결 - 시안이 코드가 되는 통로
  • 첫 명령 실행: 프롬프트 한 줄로 화면 띄우기
산출물
Claude Code × Figma MCP 연결 완료된 나만의 빌더 환경

3강

더 빠른 프로토타이핑
아이디어를 30분 만에 화면으로

목표
기획안을 Claude Code로 즉시 시각화하고, '빠르게 만들어 빠르게 틀리는' 검증 사이클을 체득한다.
내용
  • 빠르게 만들어 빠르게 틀리기
  • AI가 오해하지 않는 요구사항 작성법
  • 생성보다 중요한 다듬기 - 초안 → UX 개선 루프
  • [실습] 내 서비스 화면 초안, 30분 완성
산출물
작동하는 프로토타입 v0

4강

에이전틱 디자인 시스템 구축
AI가 읽는 토큰과 컴포넌트

목표
디자인 시스템의 새 사용자 'AI'를 위해, 읽히고 생성되는 시스템을 구축한다.
내용
  • 디자인 시스템의 새로운 사용자는 사람이 아니라 AI다
  • 디자인 토큰 설계 + 기존 Figma 파일 자산화
  • Claude Code로 컴포넌트 설계 - Variant를 코드로
  • 한 번 만들면 AI가 재사용하는 컴포넌트 라이브러리
  • [실습] 나의 디자인 시스템 V1 완성
산출물
AI가 직접 읽고 생성하는 디자인 시스템 V1

5강

디자인 하네스(CLAUDE.md)
AI의 판단을 통제하는 규칙 설계

목표
프롬프트가 아닌 규칙으로 AI 결과물의 일관성을 통제하는 디자인 하네스를 완성한다.
내용
  • 왜 AI 결과물은 매번 다른가 - 프롬프트 중심 작업의 한계
  • 판단을 통제하는 규칙서: 디자인.md 설계법
  • 반복 평가 루프 - 규칙을 검증하고 조여가는 법
  • 같은 명령, 다른 일관성: 하네스 적용 전/후
  • [실습] 내 서비스 디자인 하네스 완성
산출물
디자인 하네스(CLAUDE.md) - 우리 팀의 AI 표준 규칙서

6강

디자인 자동화 실전
반복 작업 제로 워크플로우

목표
하네스 기반으로 반복 작업을 자동화하고, 엣지케이스까지 AI가 생성하는 체계를 만든다.
내용
  • 토큰 하나로 전체 화면 일괄 수정
  • 신규 페이지 퍼블리싱, 디자인 하네스 규칙 기반 생성
  • 쓰지 않아도 쓰여지는 디자인 시스템 문서
  • [실습] 나만의 에이전틱 자동화 워크플로우 구축
산출물
엣지케이스 시안 세트 + 자동 생성 시스템 문서

7강

핸드오프 자동화
개발 핑퐁 줄이기

목표
"이 패딩 몇 px?"가 사라지는 디자인 → 개발 자동 전달 체계를 구축한다.
내용
  • 개발자의 반복 질문이 사라지는 구조 만들기
  • 디자인 스펙, 자동으로 문서화하기
  • 코드 생성과 디자이너 검수 - 품질 게이트 세우기
  • 자동 핸드오프 파이프라인 완성
산출물
개발자에게 그대로 전달되는 스펙 문서 + 컴포넌트 코드

8강

AI QA 에이전트 + MVP 배포
빌더의 완성

목표
QA까지 AI에게 맡기는 체계를 구축하고, 작동하는 MVP를 세상에 배포한다.
내용
  • QA 에이전트 구축 - 토큰 불일치·컴포넌트 누락 자동 탐지
  • 접근성 QA 자동화 + 리포트 생성 + 오류 자동 수정
  • MVP 배포 - 내 손으로 세상에 내보내기 (신규 제안)
  • 최종 프로젝트: AX 포트폴리오 완성
산출물
배포된 MVP + AI QA 리포트

이 과정에 필요한 학습 툴

수강 전 아래 툴들을 미리 준비해 주시면 바로 실습이 가능합니다.

Figma 필수

Figma

  • Figma Dev Mode (디자인 시스템 구축 · Dev Mode 실습)
  • Figma MCP (Figma ↔ Claude Code 연결)
Claude 필수

Claude Pro 이상

  • 컴포넌트 생성 · 핸드오프 자동화
  • 월 $20 수준으로 이용 가능
Vercel 선택

Vercel

  • 배포 실습 (PART 6 선택 클립)
  • 피그마 기초 사용 경험은 필수, 코딩 지식은 불필요합니다.

강의 수강 후

강의에서 만든 산출물이
그대로 AX 포토폴리오가 됩니다

아이디어에서 멈추지 않고, 작동하는 결과물까지 직접 만듭니다.

강의 산출물 예시 — 디자인 시스템 컴포넌트와 그에 매핑된 React 코드

OUTPUT 01

나만의 에이전틱 디자인 시스템

AI가 직접 읽고 생성하는 토큰 · 컴포넌트 구조를 설계합니다.

OUTPUT 02

작동하는 프론트엔드 코드

디자인 토큰을 그대로 매핑한 React 컴포넌트를 생성합니다.

OUTPUT 03

컴포넌트 라이브러리

버튼 · 카드 · 모달의 상태별 Variant를 한 번에 생성 · 관리합니다.

OUTPUT 04

디자인 파일 (CLAUDE.md)

AI가 디자인 원칙을 기억하는 규칙서를 완성합니다.

처음이 아닙니다

원티드의 AI 실무 강의는
이미 증명됐습니다

같은 팀이 같은 원칙으로 만들었습니다. 이론에서 끝나지 않는 실습 중심 구성, "내 업무에 바로 써먹는" 효능감.
이번엔 그 검증된 방식을 디자이너의 워크플로우에 그대로 적용합니다.

원티드 AI 실무 강의 현장

왜 원티드의 AI 강의인가?

이론에서 끝나지 않고 직접 적용해보는 실습 중심 구성.
AI 진입장벽 없이 "내 업무에 바로 써먹을 수 있다"는 효능감을 남겼습니다. 프론티어즈는 그 경험을 한 단계 더 끌어올립니다.

이미 많은 업계 선도 기업의
실무자들이 프론티어즈와 함께 성장하고 있습니다

반복은 AI가 합니다

당신은 사용자
경험에만 집중하세요

더 이상 컴포넌트를 그리는 사람이 아닙니다.
AI가 읽는 디자인 시스템을 설계하고, 팀의 표준을 만드는 사람.
내 디자인 시스템을 내가 설계해서 한 발짝 먼저 나아가는 사람이 되세요.

자주 묻는 질문

Q. 누구에게 가장 적합한가요?

  • 주니어부터 시니어 현업 UX·UI 프로덕트 디자이너에게 가장 적합합니다. 피그마는 매일 쓰지만 AI 연동법을 모르는 분, 컴포넌트 반복 작업에 시간을 다 쓰는 분, 개발자 핸드오프에 지친 분에게 특히 좋습니다.

Q. 다른 AI 디자인 강의와 차별점은?

  • 툴 사용법이 아니라 "AI가 읽는 디자인 시스템"을 직접 설계하는 법을 가르칩니다. 실제 프로덕션 레벨의 에이전틱 디자인 시스템을 운영하는 팀이 직접 가르칩니다.

Q. 원티드 몽타주는 무엇인가요?

  • 원티드랩 자체 에이전틱 디자인 시스템입니다. 기획~개발 리드타임을 최대 90% 단축(내부 검증)했으며, 이 강의의 핵심 레퍼런스입니다.

Q. 코딩을 몰라도 되나요?

  • 코딩 지식은 필요 없습니다. PART 2에서 디자이너 언어로 환경 세팅을 안내합니다. 피그마 기초 사용 경험만 있으면 됩니다.

Q. 99,000원이면 무엇을 받나요? (사전 예약)

  • 8파트 VOD(평생수강) + 오픈채팅방 초대 + 오프라인 밋업 우선 참석 기회. 정가 259,000원 대비 160,000원 할인가입니다.

학습 규정 및 환불 규정

학습 규정

  • VOD 형식 · 결제 완료 후 수강 가능 (사전판매기간 제외)
  • 평생 무제한 반복 수강
  • 커리큘럼 변경 시 무료 업데이트 제공
  • 할인 이벤트는 별도 공지 없이 조기 마감·연장 가능
  • 영상 무단 공유·배포·캡처·판매 금지
  • 계정 공유 금지 (동시 접속 자동 감지)

환불 규정

  • 수강 시작 후 14일 이내, 3강 미만 수강 시 100% 환불 가능하며, 이후에는 환불이 제한
  • 강의 자료를 다운로드 한 경우 환불 불가
  • 환불 금액은 정가가 아닌 실제 결제금액 기준으로 산정됩니다. 쿠폰 사용 후 취소 시 쿠폰은 복구되지 않습니다.

추가 문의사항 | learning@wantedlab.com