코덱스 Product Design 플러그인으로 UI 시안과 프로토타입 만드는 법

오픈AI가 만든 Product Design 플러그인을 코덱스(Codex)에 설치하면 화면을 만들기 전에 시각 방향 세 가지를 먼저 보여 주고, 그중 고른 방향으로 실제로 돌아가는 프로토타입을 만든다. 오픈AI 모델로 UI를 짤 때 결과가 확 좋아진다는 후기가 10월 13일 X에서 좋아요 1천 개를 넘겼다.

챗GPT 데스크톱 앱에서는 Plugins 탭에서 Product Design을 찾아 + 버튼을 누른다. 코덱스 CLI에서는 플러그인 브라우저를 열어 설치한다.

/plugins

설치가 끝나면 새 세션을 열고 @로 부른다.

@Product Design Help me get started

처음 부르면 제품 주소, 피그마 파일, 스크린숏, 코드 경로, 디자인 토큰 같은 맥락을 저장하는 방법부터 안내한다. 할 일이 정해져 있으면 원하는 작업을 바로 적는다.

• 새 아이디어를 시안 세 가지로 뽑는다. Turn this product idea into three visual directions
• 고른 시안을 반응형 프로토타입으로 만든다. Turn this selected mockup into a responsive prototype
• 지금 있는 웹 페이지를 고칠 수 있는 프로토타입으로 옮긴다. Clone this URL into an editable prototype
• 온보딩 흐름에서 UX·접근성 문제를 찾는다. Audit this onboarding flow and identify the highest-impact UX and accessibility issues

브라우저, 피그마, 이미지 생성, Vercel 같은 도구가 연결돼 있으면 화면 캡처부터 디자인 옮기기, 배포까지 이어서 한다. IDE 확장에서는 플러그인을 쓸 수 없다.