코덱스에서 조용히 출시한 Product Design 플러그인

하지만, 꽤 괜찮다.

Codex에서 Product Design 플러그인을 조용히 출시했습니다. 그런데 꽤 괜찮습니다.

클로드 디자인이 나오고 피그마 주가가 많이 떨어지면서 바이럴이 꽤 크게 되었었는데요. 그만큼 업계에서 디자인이 수작업에서 프롬프트로 이동하는 건 큰 화두 중에 하나입니다.

저는 클로드 디자인을 쓰면서 코덱스에서도 디자인 기능이 나오기를 바라고 있던 1인이었는데 이유는 하나였습니다.

"클로드 디자인은 이미지 생성 모델이 없다는 것"
그래서 placeholder 이미지라도 들어가야 되는 부분은 공란으로 남겨야 해서 아쉬움이 있었습니다.


그런데 이번 코덱스는 그게 해결되었을 뿐 아니라
몇가지 덤으로 좋은 부분들이 있습니다.


1. 하나의 대화 흐름에서 모든 기획/디자인/개발 과정을 해결
클로드 디자인에서 아쉬운 부분인데요. 프로덕트 디자인을 하려면 브레인스토밍부터 기획, 와이어프레임, UI디자인까지 단계릉 밟아야 합니다. 그런데 클로드 코드와 클로드 디자인이 분리되어 있어서 그 사이에서 발생하는 대화나 문서들에 대한 컨텍스트를 공유하는게 매끄럽지는 않아요.

코덱스는 이 부분을 하나의 대화 안에서 해결할 수 있습니다.


2. Product Design 안의 서브 스킬들
단순히 디자인만 해주는게 아니라 UX audit, design QA과 같은 서브 스킬들을 제공해줘서 실제 UX디자이너가 옆에서 흐름을 잡아주는 느낌이 강합니다.

그리고 각 서브 스킬은 어떤게 있는지, 활용법은 어떤지 아래에 자세히 정리해두었습니다.

아직 결과물은 많이 테스트해보지는 않아서 일단 이런 워크플로우가 가능하다는 것에 긍정적이라고 생각합니다.

공식 소개영상:

Product Design 플러그인이란?

Product Design은 Codex 안에서 제품 아이디어, 화면, URL, 스크린샷, Figma, 기존 코드베이스를 바탕으로 디자인 작업을 이어갈 수 있게 해주는 플러그인입니다.

단순히 예쁜 화면 한 장을 만들어주는 기능이라기보다, 실제 프로덕트 디자이너가 옆에서 다음 흐름을 잡아주는 방식에 가깝습니다. 제품 맥락을 확인하고, 디자인 브리프를 정리하고, 시각 방향을 탐색하고, 선택한 방향을 클릭 가능한 프로토타입으로 만들고, 마지막에는 원본 디자인과 구현 결과를 비교해 품질을 점검합니다.

Product Design이 특히 해결하는 지점은 두 가지입니다.

1. 이미지 생성을 UI 작업에 활용할 수 있습니다.

   텍스트 설명만으로 끝내지 않고, 실제 화면 방향을 이미지로 탐색한 뒤 그중 하나를 구현 대상으로 삼을 수 있습니다.

2. 하나의 대화 흐름에서 기획, 디자인, 핸드오프, 개발까지 이어갈 수 있습니다.

   브리프 확인, 리서치, 감사, 아이데이션, 프로토타입 구현, QA, 공유까지 같은 대화 안에서 연결할 수 있습니다.

설치 및 시작 방법

Codex에서 Product Design 플러그인이 설치되어 있거나 활성화되어 있으면 @Product Design으로 호출할 수 있습니다.

아직 보이지 않는 경우에는 Codex의 플러그인 또는 마켓플레이스 관리 화면에서 Product Design을 찾아 설치하거나 활성화하시면 됩니다. 설치 후에는 별도 명령어 없이 대화에서 @Product Design을 붙여 요청하시면 됩니다.

처음 시작할 때는 이렇게 요청하시면 됩니다.

@Product Design 이걸로 뭘 할 수 있나요?

이 요청을 보내면 Product Design은 앞으로 디자인 작업에 자주 쓸 제품 맥락을 저장할 수 있도록 안내합니다. 저장해두면 이후 작업에서 같은 제품 URL, Figma, 스크린샷, 디자인 토큰, 브랜드 자산, Storybook, 코드베이스 경로를 반복해서 설명하지 않아도 됩니다.

저장하면 좋은 정보는 다음과 같습니다.

• 제품 URL

• Figma 파일

• 주요 화면 스크린샷

• 참고 이미지

• 코드베이스 경로

• Storybook 또는 컴포넌트 문서

• 디자인 시스템, 토큰, 테마 파일

• 브랜드, 로고, 아이콘, 이미지 자산

• 선호하는 브라우저, 캡처 도구, 배포 대상

일상어로는 이렇게 말하시면 됩니다.

Product Design 시작 설정해주세요.
저희 제품 URL이랑 Figma를 기억해주세요.
앞으로 이 Storybook을 기준으로 디자인해주세요.
저희 브랜드 자산을 Product Design에 저장해주세요.
Product Design이 지금 기억하고 있는 것 보여주세요.

기본 사용 흐름

Product Design은 보통 바로 코드를 만들지 않습니다. 먼저 어떤 제품을 만들지, 어떤 시각 자료를 기준으로 삼을지, 어느 정도 상호작용이 필요한지 확인합니다.

새 제품이나 리디자인처럼 시각 타깃이 없는 경우 기본 흐름은 다음과 같습니다.

get-context → ideate → 사용자가 방향 선택 → image-to-code → design-qa → share

URL을 그대로 재현하는 경우는 다음 흐름을 거칩니다.

get-context → url-to-code → design-qa → share

제품 흐름을 검토하는 경우는 보통 다음처럼 진행됩니다.

audit

사용자 불만이나 UX 문제를 조사하는 경우는 다음처럼 진행됩니다.

research

핵심 규칙

Product Design의 중요한 규칙은 다음과 같습니다.

• 시각 타깃 없이 바로 빌드하지 않습니다.

• 새 제품이나 리디자인은 먼저 3개의 시각 방향을 만들고, 사용자가 하나를 선택한 뒤 구현합니다.

• 구현 전에는 브리프를 확인합니다.

• URL 클론은 실제 화면, DOM, 자산, 상태, 모바일 화면까지 근거로 수집한 뒤 구현합니다.

• 이미지 기반 구현은 선택된 이미지, 스크린샷, Figma 프레임, ImageGen 결과가 있어야 시작합니다.

• 빌드 결과는 handoff 전에 design-qa를 통해 원본 시각 타깃과 비교합니다.

전체 스킬 요약

스킬 / 역할 / 주로 쓰는 상황

index / Product Design 요청을 알맞은 세부 스킬로 라우팅합니다 /넓은 Product Design 요청을 했을 때

user-context / 제품 및 디자인 맥락을 저장하고 불러옵니다 / URL, Figma, Storybook, 토큰, 브랜드 자산 저장

get-context / 디자인 브리프를 확인합니다 / 디자인, 리디자인, 프로토타입, UI 빌드 전

research / 사용자 문제를 소스 기반으로 조사합니다 / UX 불만, 온보딩 문제, 문서 문제, 개발자 경험 조사

audit / 제품 화면이나 흐름을 캡처하고 점검합니다 / 가입, 결제, 온보딩, 설정 화면 리뷰

ideate / 이미지 기반 디자인 방향을 3개 생성합니다 / 새 화면, 리디자인, 콘셉트 탐색

prototype / 프로토타입 요청을 적절한 구현 흐름으로 보냅니다 / 새 제품, 리디자인, 기존 앱 확장

url-to-code / URL을 근거로 로컬 프로토타입을 만듭니다 / 웹사이트나 앱 화면 클론

image-to-code / 선택된 이미지나 목업을 코드로 구현합니다 / ImageGen 결과, Figma, 스크린샷 구현

design-qa / 원본 디자인과 구현 결과를 비교합니다 / 핸드오프 전 품질 검수

share 프로토타입을 배포하고 공유 링크를 만듭니다 / 팀에 보여줄 URL 생성

스킬별 상세 정리

1. index

index는 Product Design 플러그인의 입구 역할을 합니다. 사용자가 @Product Design을 호출하거나 “디자인해주세요”, “프로토타입 만들어주세요”, “이 화면 리뷰해주세요”처럼 넓게 요청하면 적절한 세부 스킬로 라우팅합니다.

이 스킬 자체가 최종 결과물을 만드는 것은 아닙니다. 요청의 성격을 보고 get-context, ideate, audit, prototype, share 같은 스킬로 연결합니다.

일상어 요청 예시:

Product Design으로 이 앱 디자인해주세요.
이 화면 좀 봐주세요.
이 아이디어를 프로토타입으로 만들어주세요.
이 제품 플로우를 검토해주세요.
이 프로토타입 공유할 수 있게 해주세요.

2. user-context

user-context는 Product Design이 반복해서 사용할 제품 맥락을 저장하고 불러오는 스킬입니다.

예를 들어 제품 URL, Figma, 스크린샷, 디자인 시스템, Storybook, 토큰, 브랜드 자산, 선호 배포 도구를 저장해두면 다음 작업부터 그 맥락을 기준으로 디자인을 잡을 수 있습니다.

저장 위치는 다음 구조를 사용합니다.

$CODEX_HOME/state/plugins/product-design/user-context.md
$CODEX_HOME/state/plugins/product-design/assets/

일상어 요청 예시:

Product Design 설정해주세요.
저희 제품 URL 기억해주세요.
이 Figma를 앞으로 디자인 기준으로 써주세요.
이 스크린샷을 저희 대시보드 기준 화면으로 저장해주세요.
저희 Storybook 경로 저장해주세요.
Product Design이 지금 뭘 기억하고 있는지 보여주세요.

3. get-context

get-context는 디자인 브리프를 확인하는 필수 관문입니다.

무엇을 만들지, 어떤 제품이나 디자인 시스템을 기준으로 삼을지, 어느 정도의 인터랙션이 필요한지 확인합니다. 정보가 충분하면 다시 질문하지 않고 브리프를 짧게 되짚습니다. 정보가 부족하면 구현이나 이미지 생성 전에 필요한 질문을 합니다.

확인하는 핵심 질문은 세 가지입니다.

• 무엇을 하게 만들 것인가?

• 어떤 기존 제품, 디자인 시스템, Figma, 스크린샷, URL, 이미지와 맞춰야 하는가?

• 완전한 인터랙션이 필요한가, 빠른 정적 목업이면 되는가?

일상어 요청 예시:

이 작업 시작하기 전에 브리프부터 잡아주세요.
로그인 페이지 만들 건데 필요한 질문 먼저 해주세요.
제가 말한 내용을 디자인 브리프로 정리해주세요.
이 화면을 만들기 전에 범위랑 인터랙션 수준을 확인해주세요.

4. research

research는 특정 제품의 사용자 문제를 조사하는 스킬입니다.

공개 소스나 연결된 내부 소스를 바탕으로 사용자가 겪는 UX 문제, 온보딩 마찰, 문서 문제, 개발자 경험 문제, 지원 이슈를 모읍니다. 단순히 불만을 나열하지 않고 문제의 심각도, 빈도, 신뢰도, 제품 기회까지 정리합니다.

기본적으로 살펴보는 소스는 다음과 같습니다.

• Reddit

• X/Twitter

• Hacker News

• Stack Overflow

• GitHub issues/discussions

• 포럼, 블로그, 리뷰, YouTube 댓글

• 연결된 경우 Slack, Notion, Jira, Linear, 지원 티켓

일상어 요청 예시:

Notion 사용자들이 최근 불편해하는 UX 문제 조사해주세요.
저희 온보딩에서 사람들이 어디서 막히는지 리서치해주세요.
개발자들이 저희 API 문서에서 불편해하는 점 찾아주세요.
이 제품의 가장 큰 사용자 불만을 정리해주세요.
GitHub 이슈랑 커뮤니티를 보고 UX 기회 찾아주세요.

5. audit

audit은 제품 화면이나 사용자 흐름을 실제 캡처한 뒤 UX, 디자인, 접근성 문제를 정리하는 스킬입니다.

이 스킬은 느슨한 감상평을 쓰지 않습니다. 각 단계의 스크린샷을 저장하고, 그 화면을 근거로 문제를 연결합니다. 접근성 문제도 스크린샷만으로 확인 가능한 부분과 추가 테스트가 필요한 부분을 구분합니다.

주요 결과물은 다음과 같습니다.

• 흐름별 스크린샷

• 단계별 설명

• UX 및 디자인 문제

• 접근성 위험

• 확인하지 못한 한계

• Figma 또는 로컬 폴더에 저장된 결과

일상어 요청 예시:

이 가입 플로우 감사해주세요.
저희 결제 흐름에서 UX 문제 찾아주세요.
이 설정 화면 critique 해주세요.
온보딩 플로우를 캡처하면서 접근성 이슈까지 봐주세요.
이 화면을 Figma에 캡처해두고 문제점을 적어주세요.
이 프로토타입에서 사용자가 헷갈릴 만한 부분 찾아주세요.

6. ideate

ideate는 이미지 기반으로 디자인 방향을 생성하는 스킬입니다.

브리프가 확정된 뒤 정확히 3개의 독립적인 디자인 옵션을 만듭니다. 각 옵션은 단순 색상 차이가 아니라 정보 구조, 레이아웃 전략, 인터랙션 모델, 제품 프레이밍이 다르게 느껴져야 합니다.

새 제품, 리디자인, 화면 방향 탐색, 컴포넌트 대안, 기능 콘셉트 탐색에 적합합니다.

중요한 점은, ideate 결과는 바로 구현되지 않는다는 것입니다. 사용자가 하나를 선택해야 그 선택지가 image-to-code의 시각 타깃이 됩니다.

일상어 요청 예시:

이 아이디어로 디자인 방향 3개 뽑아주세요.
이 화면 리디자인 옵션 세 가지 보여주세요.
대시보드 첫 화면을 서로 다른 방향으로 탐색해주세요.
이 기능을 SaaS스럽게, 소비자 앱스럽게, 운영툴스럽게 각각 보여주세요.
이 목업을 참고해서 더 나은 방향 세 개 만들어주세요.

7. prototype

prototype은 프로토타입 요청을 적절한 구현 흐름으로 보내는 라우터 스킬입니다.

사용자가 새 제품을 만들고 싶은지, URL을 복제하고 싶은지, 이미지를 구현하고 싶은지, 기존 앱에 기능을 추가하고 싶은지 판단합니다. 상황에 따라 ideate, url-to-code, image-to-code, 기존 코드 수정으로 연결합니다.

핵심 규칙은 시각 타깃 없이 빌드하지 않는 것입니다. 새 제품은 먼저 3개의 시각 옵션을 만들고, 사용자가 하나를 선택한 뒤 구현합니다.

일상어 요청 예시:

이 아이디어를 클릭 가능한 프로토타입으로 만들어주세요.
제 앱에 이 기능 추가해주세요.
이 스크린샷처럼 작동하는 프로토타입 만들어주세요.
이 URL을 기반으로 수정 가능한 프로토타입 만들어주세요.
이 화면 리디자인하고 선택한 방향으로 구현해주세요.

8. url-to-code

url-to-code는 실제 URL을 근거로 로컬 프론트엔드 프로토타입을 만드는 스킬입니다.

브라우저로 원본 페이지를 열고, 데스크톱과 모바일 화면을 캡처하고, DOM, 텍스트, 링크, 이미지, 아이콘, 폰트, CSS, 인터랙션 상태를 수집합니다. 이후 수집한 근거를 바탕으로 로컬에서 실행 가능한 프로토타입을 만듭니다.

주의할 점은, 사용자가 소유했거나 재현 권한이 있는 웹사이트/앱에 사용해야 한다는 것입니다. 원본 자산을 핫링크하지 않고 필요한 자산을 로컬로 복사하거나 대체합니다.

일상어 요청 예시:

이 URL을 로컬 프로토타입으로 클론해주세요.
이 랜딩페이지를 수정 가능한 버전으로 만들어주세요.
이 웹앱 화면을 똑같이 재현해주세요.
이 URL을 모바일 화면까지 캡처해서 프로토타입으로 만들어주세요.
이 사이트를 복제하되 제가 가진 권한 안에서만 해주세요.

9. image-to-code

image-to-code는 선택된 이미지, 스크린샷, Figma 프레임, ImageGen 결과를 실제 프론트엔드로 구현하는 스킬입니다.

글로 된 설명만으로는 시작하지 않습니다. 반드시 시각 타깃이 있어야 합니다. 구현할 때는 레이아웃, 간격, 폰트, 이미지, 아이콘, 상태, 반응형 동작을 실제 화면에 맞춥니다.

이미지 안에 필요한 에셋이 있으면 별도로 생성하거나 추출해 사용합니다. 단순 CSS 도형이나 임시 placeholder로 때우지 않는 것이 원칙입니다.

일상어 요청 예시:

이 선택한 목업을 코드로 구현해주세요.
이 스크린샷을 반응형 웹앱으로 만들어주세요.
이 ImageGen 결과를 클릭 가능한 프로토타입으로 바꿔주세요.
이 Figma 프레임을 최대한 충실하게 구현해주세요.
이 디자인을 모바일 화면 기준으로 만들어주세요.

10. design-qa

design-qa는 구현 결과와 원본 시각 타깃을 비교하는 내부 QA 스킬입니다.

원본 디자인과 구현 스크린샷을 같은 상태, 같은 뷰포트에서 비교합니다. 폰트, 간격, 색상, 이미지 품질, 에셋, 카피, 반응형, 접근성, 인터랙션 상태를 점검합니다.

Product Design 빌드에서는 핸드오프 전 품질 게이트 역할을 합니다. P0, P1, P2 문제가 남아 있으면 통과하지 않고 수정해야 합니다. 결과는 보통 design-qa.md로 저장됩니다.

주의할 점은 사용자-facing UX 리뷰에는 design-qa가 아니라 audit을 쓴다는 점입니다. design-qa는 구현물이 원본 디자인과 얼마나 잘 맞는지 보는 스킬입니다.

일상어 요청 예시:

이 구현이 원본 디자인이랑 잘 맞는지 QA 해주세요.
목업이랑 실제 화면 비교해서 수정할 점 정리해주세요.
핸드오프 전에 디자인 QA 돌려주세요.
타이포, 간격, 색상, 이미지가 원본이랑 맞는지 봐주세요.
이 프로토타입이 선택한 시안과 얼마나 다른지 체크해주세요.

11. share

share는 완성된 프로토타입을 배포하고 공유 가능한 URL을 만드는 스킬입니다.

사용자가 @Sites, @Vercel 또는 다른 배포 대상을 지정하면 그 대상으로 배포합니다. 지정하지 않으면 어디에 배포할지 먼저 묻습니다.

작동하는 공유 URL이 만들어지기 전까지는 공유가 완료됐다고 말하지 않습니다.

일상어 요청 예시:

이 프로토타입 팀에 공유할 수 있게 배포해주세요.
Vercel로 올려주세요.
Sites로 공유 링크 만들어주세요.
이 로컬 프로토타입을 리뷰 가능한 URL로 만들어주세요.
배포 대상은 제가 고르겠습니다. 먼저 옵션 알려주세요.

자주 쓰는 요청 패턴

새 제품 아이디어를 프로토타입으로 만들기

Product Design으로 B2B 세일즈 매니저용 CRM 대시보드 프로토타입 만들어주세요.
우선 디자인 방향 3개 보여주고, 제가 고르면 구현해주세요.

기존 화면 리디자인하기

이 설정 화면을 리디자인해주세요.
세 가지 방향을 먼저 보고 싶습니다. 선택한 방향으로 클릭 가능한 프로토타입까지 만들어주세요.

URL을 기반으로 프로토타입 만들기

이 URL을 수정 가능한 로컬 프로토타입으로 재현해주세요.
데스크톱이랑 모바일 둘 다 확인해주세요.

흐름 감사하기

저희 가입 플로우를 캡처하면서 UX랑 접근성 문제를 감사해주세요.
결과는 로컬 폴더에 정리해주세요.

사용자 불만 조사하기

이 제품의 최근 사용자 불만을 리서치해주세요.
온보딩, 문서, 핵심 워크플로우 문제를 나눠서 정리해주세요.

저장된 제품 맥락 쓰기

전에 저장한 Figma랑 Storybook 기준으로 이 화면 디자인해주세요.
저희 제품 맥락을 먼저 불러와서 브리프 잡아주세요.

구현 후 QA와 공유까지 이어가기

이 시안으로 구현하고, 원본이랑 디자인 QA까지 한 다음 공유 링크 만들어주세요.

어떤 스킬을 사용해야 할지 빠르게 고르는 법

하고 싶은 작업 쓰이는 스킬

Product Design을 처음 설정하고 싶습니다 user-context

작업 범위와 디자인 기준을 먼저 정리하고 싶습니다 get-context

사용자 불만과 제품 기회를 조사하고 싶습니다 research

현재 화면이나 플로우의 문제를 찾고 싶습니다 audit

디자인 방향을 여러 개 보고 싶습니다 ideate

새 제품이나 리디자인을 프로토타입으로 만들고 싶습니다 prototype

URL을 로컬 앱처럼 재현하고 싶습니다 url-to-code

선택한 이미지나 목업을 코드로 만들고 싶습니다 image-to-code

구현물이 원본 디자인과 맞는지 확인하고 싶습니다 design-qa

팀에 공유할 링크가 필요합니다 share

기억해야 할 한 줄

Product Design은 “화면을 하나 만들어주는 기능”이 아니라, 제품 디자인의 흐름을 브리프, 아이디어, 프로토타입, QA, 공유까지 이어주는 Codex 안의 디자인 파트너에 가깝습니다.