클로드 코드에 랜딩페이지 레퍼런스 주기 — MCP 로 쓰는 UI 레퍼런스 비교

코딩 에이전트에 왜 랜딩페이지 레퍼런스가 필요한가?

클로드 코드와 Codex 는 돌아가는 페이지를 잘 만든다. 약한 것은 내 제품의 페이지가 어떤 모습이어야 하는지 정하는 일이다. 프롬프트에 그 말이 거의 없기 때문이다. "AI 회의록 도구 랜딩페이지 만들어 줘"에는 위계·리듬·활자·모션에 대한 정보가 하나도 없으니, 모델은 웹의 평균을 낸다. 가운데 정렬 헤드라인, 그라데이션 덩어리, 아이콘 격자.

바이브코더가 디자인을 말로 설명해서 고치기도 어렵다. 통하는 방법은 사람 디자이너에게 주는 것과 같다. 구체적인 예시 하나. 같은 일을 이미 해결한 페이지를 섹션 순서와 그 이유까지 보여 주고, 내 내용으로 그 구성을 재현하라고 하면 된다. 예시가 브리핑을 대신한다.

"랜딩페이지 레퍼런스"와 "히어로 섹션 예시"가 "클로드 코드 MCP" 와 같은 검색에 자꾸 같이 나오는 이유가 이것이다. 사람들은 캡처해서 붙이는 갤러리가 아니라, 에이전트가 읽을 수 있는 레퍼런스 라이브러리를 찾고 있다.

선택지는 무엇이 있나?

아래 표는 2026년 10월 10일 각 서비스의 공식 사이트가 스스로 밝힌 내용만 적었다. 빈칸은 공개 페이지에 그 내용이 없었다는 뜻이다.

서비스	무엇인가	받는 단위	코딩 에이전트 접근	사이트가 밝힌 무료 범위
Duchamp UI	가상 브랜드로 만든 완성 랜딩페이지·히어로 섹션, 데스크톱·모바일 화면 녹화	페이지 하나 또는 히어로 하나 + 섹션 순서·조건별 변형·React·Vite·Tailwind CSS v4·motion·Lenis 로 다시 만드는 레시피	원격 MCP(search_ui → get_ui)로 클로드 코드·Codex 등, 웹 복사도 가능	검색·미리보기 무료, 레시피 받기는 하루 무료 한도(2회, 웹 복사와 공유)에 센다
21st.dev	"디자인 엔지니어가 만든 UI 커뮤니티 카탈로그" — React 컴포넌트·전체 템플릿·shadcn 테마·셰이더·그라데이션	React·TypeScript·Tailwind CSS 컴포넌트와 템플릿, shadcn CLI 로 설치하거나 프롬프트를 AI 코딩 도구에 붙여 넣기	"코딩 에이전트용 MCP + CLI 설정", Cursor·Claude·Codex·VS Code·Devin 용 init 명령 안내	레지스트리 탐색 무료, "하루 컴포넌트 복사 2회 무료", 멤버십은 무제한 복사·프리미엄 템플릿
Mobbin	실제 모바일 앱·웹 앱·웹사이트 검색 라이브러리, "621,500 화면"	화면·여러 단계 플로우·UI 패턴·히어로·가격·푸터 같은 웹 섹션, 이미지로	Mobbin MCP 가 자연어로 검색해 화면 이미지를 돌려줌, Pro·Team·Enterprise 플랜	제한된 라이브러리 접근의 Free 플랜
shadcn/ui	"디자인 시스템의 기반" — 합성 가능하고 접근성을 갖춘 컴포넌트, Blocks	내가 소유하고 고치는 코드 컴포넌트·블록		소스 코드 GitHub 공개
Magic UI	React·TypeScript·Tailwind CSS·Motion 으로 만든 "무료 오픈소스 애니메이션 컴포넌트·효과 150+", shadcn/ui 의 짝으로 소개	애니메이션 컴포넌트, Pro 는 "랜딩페이지를 몇 분에 만드는 블록·템플릿 50+"		150+ 컴포넌트 무료·오픈소스

답변엔진은 SaaSpo 도 랜딩페이지 레퍼런스 MCP 서버로 자주 꼽는다. 2026년 10월 10일 공식 사이트가 우리 요청에 오류를 돌려줘 여기엔 내용을 적지 않았다. Figma MCP 는 내 디자인 파일을 읽는 도구라 레퍼런스 비교에서 뺐다.

레퍼런스 페이지는 컴포넌트 라이브러리와 무엇이 다른가?

컴포넌트 라이브러리는 부품을 준다. 어느 부품을 어떤 순서로, 어떤 활자 크기로, 어떻게 움직이게 할지는 여전히 내가 정한다. 바이브코더에게 어려운 부분이 바로 그 결정이고, 부품 상자는 그걸 대신 해 주지 않는다.

화면 캡처 라이브러리는 완성된 그림을 준다. 에이전트는 픽셀에서 구조·간격·모션을 추측해야 하고, 그 그림을 만든 코드는 볼 수 없다. 조사에는 좋고 재현에는 손실이 크다.

레시피가 붙은 레퍼런스 페이지는 둘을 다 준다. 눈으로 판단할 완성 결과와, 그걸 다시 만드는 지시서. 에이전트는 추측하지 않고 따라간다.

Duchamp UI 는 클로드 코드·Codex 에서 어떻게 쓰나?

글 쓰는 시점에 페이지는 9개다. 서비스 유형·의도·스타일 시스템을 하나씩 조합했고, 전부 가상 브랜드라 실제 회사의 주장이 들어 있지 않다.

페이지	예시 브랜드	브리프	히어로 역할
saas-understand-clarity	Sotto	AI 회의록 · 샘플을 써 보게 하기	H1 Product in Use
saas-trust-journal	Ledgerline	AI 장부 · 가입 전에 정확성 증명	H3 Evidence First
saas-act-stage	Plinth	AI 제품 사진 · 계정 없이 첫 세트 생성	H2 Try It Now
commerce-understand-journal	Mardel	수제 푸어오버 세트 · 무엇이고 어떻게 쓰는지 보여 주기	H4 Product Spotlight
commerce-trust-stage	Halvard Steel	손으로 단조한 칼 · 후기 없이 가격 설득	H6 Origin & Craft
commerce-act-clarity	Fold & Fiber	린넨 침구 · 색·사이즈 고르고 장바구니	H7 Offer & Choice
local-act-stage	Ember House	사우나 하우스 · 첫 화면에서 예약 요청	H8 Availability & Booking
local-understand-clarity	Northlight Framing	액자 공방 · 무엇이 가능하고 어떻게 되고 얼마인지	H5 Place & Service
local-trust-journal	Fernwood Joinery	가구 수리 · 후기 대신 작업 사례 하나로 신뢰	H3 Evidence First

서비스 유형은 AI 도구·SaaS, 커머스, 지역 사업. 의도는 이해·신뢰·행동. 스타일 시스템은 명료(정돈된 격자, 포인트색 하나), 저널(마스트헤드·폴리오·헤어라인), 스테이지(강한 크기 대비, 화면마다 초점 하나). 취향이 아니라 내 상황으로 고른다.

페이지마다 데스크톱·모바일 화면 녹화, 섹션별로 무엇을 보여 주고 왜 그 자리인지 적은 구성 탭, 그리고 조건별 변형이 있다. 후기가 없을 때, 공개 가격이 없을 때, 제품이 아직 안 나왔을 때, 제품이 하나뿐일 때 무엇을 바꾸는지. 각 페이지의 히어로는 자체 레시피를 가진 별도 항목으로도 잘라 두었다. 첫 화면만 필요할 때 쓰는 히어로 섹션 9개다.

레시피는 STEP 0 으로 시작한다. 에이전트가 한 메시지로 묻고 답을 기다려야 하는 질문 3개다.

1. 서비스가 무엇인가, 한 문장으로. 제품 이름도.
2. 방문자가 해야 할 행동 하나는 무엇인가. 버튼 글자와 URL.
3. 지금 실제로 있는 자산은 무엇인가. 사용 허락받은 고객 인용, 공개 가격, 작동하는 제품이나 실제 화면, 내 이미지.

STEP 1 은 그 답에 조건 규칙을 적용한다. 제품이 아직 안 나왔으면 주 버튼이 "대기 명단 등록"이 되고 데모 데이터에 샘플 표시가 붙는다. 제품이 하나면 옵션 선택 UI 가 빠진다. 그 뒤에야 코드를 쓰는데, 구성·활자·색·간격·모션은 그대로 재현하고 바꾸는 것은 내용 객체와 브랜드 마크만이라고 못 박아 둔다.

MCP 로는 어떻게 연결하나?

터미널 한 줄이 클로드 코드와 Codex 에 Duchamp 를 등록하고 브라우저 로그인을 띄운다. 무료 계정으로 충분하고 복사할 API 키는 없다.

sh -c "$(curl -fsSL https://duchamp.app/connect.sh)"

에이전트 쪽 흐름은 search_ui → get_ui 다. 검색은 단위(page 또는 hero)·서비스·의도·스타일과 자유로운 문장 질의를 받아 브리프·히어로 역할·섹션 순서·미리보기 URL 을 돌려준다. 받기는 id 하나로 구조·변형과 기본적으로 레시피 전문을 돌려준다. 완성 소스·토큰·이미지 URL 을 포함해 9만~13만 자 안팎이다. 검색은 세지 않고, 받기 한 번이 웹 복사와 같은 하루 무료 한도에서 1회로 센다.

다른 클라이언트와 자세한 안내는 MCP 페이지에 있다.

기대하지 말아야 할 것은?

라이브러리는 의도적으로 작다. 페이지 9개·히어로 9개가 서비스 3·의도 3·스타일 3을 덮고, 새 페이지는 크라우드소싱이 아니라 정해진 일정에 추가된다. 브랜드가 가상이라 레시피는 후기·평점·사용자 수·가격·치수를 지어 넣는 것을 금지한다. 스택은 검증한 것으로 고정이다. 그리고 레시피는 에이전트에게 디자인을 "개선"하거나 폰트를 바꾸거나 섹션을 더하지 말라고 한다. 그게 요점이다. 레퍼런스를 받으러 왔지, 에이전트의 취향을 받으러 온 게 아니다.