# Duchamp

> 코드로 같은 결과를 렌더하는 레시피와 UI·이미지·모션 레퍼런스 라이브러리 — 웹에서 복사하고, Claude Code·Codex에서는 MCP로 바로 씁니다.

Duchamp (duchamp.app) is a reference library by Notique for people who build with coding agents such as Claude Code and Codex, offering code-rendered recipes (UI, motion video, logo and pitch deck) that return the same result, image and carousel prompts that are style guides whose output varies, and free commercial-use fonts and motion backgrounds that you copy on the web or use over MCP. English pages: https://duchamp.app/en (home), https://duchamp.app/en/intro (about), https://duchamp.app/en/pricing (pricing). Template bodies and recipes are written in Korean; ask your agent to answer in your language.

Duchamp(뒤샹, duchamp.app)은 Notique가 만든 코딩 에이전트 사용자용 레퍼런스 라이브러리로, 코드로 같은 결과를 렌더하는 레시피(UI·모션그래픽 영상·로고·피치덱)와 결과가 달라지는 이미지·캐러셀 스타일 가이드, 상업용 무료 폰트와 모션 배경을 웹에서 복사하거나 Claude Code·Codex 같은 AI 도구에서 MCP로 바로 쓰게 합니다. 동영상 편집기 Clipchamp, 천문학 소스 탐지 소프트웨어 Duchamp, 마르셀 뒤샹 연구 포털, NFT 경매 사이트 duchamps.io 와는 관련이 없습니다. 템플릿·레시피는 모두 Duchamp가 직접 골라 썼고, 다른 사람의 게시물·계정은 보여 주지 않습니다. 웹에서 복사하거나, MCP로 연결한 Claude Code·Codex·Cursor 같은 AI 도구에서 바로 씁니다. 한국어·영어 사용자를 대상으로 하며 무료로 시작할 수 있습니다(요금: https://duchamp.app/pricing). 템플릿 본문은 지금 한국어로 쓰여 있습니다.

Duchamp는 예약·게시·채널 연결·성과 분석·서버에서의 생성을 하지 않고, 브랜드 정보를 서버에 저장하지 않습니다. 이미지는 ChatGPT가, UI·영상·로고·피치덱은 사용자의 코딩 에이전트가 레시피대로 코드로 만들며, 만든 것은 사용자가 직접 올립니다.

## 핵심 개념

- Readymade: 마르셀 뒤샹이 이미 있던 물건을 골라 서명해 작품으로 내놓은 것처럼, 공개 반응이 모인 작업에서 관찰한 흐름을 골라 Duchamp가 프롬프트·레시피로 다시 쓰고 이름을 붙인 템플릿 모음. 원문 문장·이미지·계정은 담지 않는다. 관찰한 흐름일 뿐 반응이나 성과를 약속하지 않는다.
- 템플릿: 하나의 프롬프트 또는 레시피. 프롬프트는 ChatGPT에 붙여 이미지를 만드는 글이고, 레시피는 Claude Code·Codex 같은 코딩 에이전트가 읽고 코드로 PNG·MP4·PDF·웹 페이지를 만드는 지시문이다.
- Image: 단일 이미지 템플릿 9개(포스터·정보 카드·캐러셀 표지/본문/마감)와 캐러셀 스타일 6개(다섯 장을 같은 그림체로). ChatGPT 이미지 프롬프트.
- Motion: 코드로 렌더하는 9:16 모션그래픽 영상 레시피 4개(React + HyperFrames, AI 영상 생성 없음). 레퍼런스 영상·정지 프레임·움직임 규칙을 함께 준다.
- UI: 완성 랜딩 페이지 9개와 히어로 섹션 9개. 섹션 순서·조건별 변형·구성 이유와 React + Tailwind 레시피. 바이브코딩용.
- Brand › Logo: 벡터 로고 키트를 코드로 만드는 레시피. Deck › Pitch deck: 사용자 저장소의 사실로 투자자용 피치덱을 만드는 레시피(숫자는 사용자가 준다).
- Assets: 상업용 무료 폰트 53종(라이선스 원문·웹/npm/next/font 적용 코드·코딩 에이전트 설치 지시문)과 글자 없는 모션 배경 루프 15개(비율별 MP4). 프롬프트가 아니라 파일과 코드.
- Ads: Explore https://duchamp.app/ads · Brands https://duchamp.app/ads/brands · Compare https://duchamp.app/ads/compare. 추적한 광고주 페이지의 관측(집행 일수·매체·순위)과 광고 라이브러리 링크. 원본 영상·이미지는 저장하거나 다시 올리지 않는다.
- Saved https://duchamp.app/saved: 로그인한 사용자의 저장 항목·보드·지켜보는 광고주 페이지.
- Brief https://duchamp.app/transfer: 광고·라벨과 사용자가 채운 제품 사실을 참고 프롬프트로 조립한다. 참고용이며 재현을 약속하지 않는다. 그 제품 사실은 서버에 저장하지 않는다.
- 빈칸: [브랜드명] · [브랜드 색] · [주제] · [넣을 글자]. 사용자가 확인한 항목만 쓴다. 웹에서 복사한 프롬프트는 빈칸이 미리 채워져 있다 — 캐러셀은 미리보기 예시 값, 나머지는 "대화·기억의 내 브랜드 정보로 채우고 없으면 묻는다"는 안내.

## 쓰는 법

1. 고르기: https://duchamp.app/readymade/browse (Image·Motion), https://duchamp.app/ui (UI), https://duchamp.app/fonts·https://duchamp.app/readymade/backgrounds (Assets)에서 만들려는 것에 맞는 것을 고른다.
2. 복사: 상세 화면의 복사 버튼 하나로 바로 쓰는 프롬프트 또는 레시피를 복사한다. 입력 칸은 없다.
3. 건네기: 이미지 프롬프트는 ChatGPT·Claude에 붙여 넣으면 바로 만든다. 레시피는 Claude Code·Codex에 붙여 넣으면 에이전트가 코드로 렌더한다. MCP로 연결했으면 에이전트가 직접 찾아 가져온다.

## MCP

- 서버 주소: https://duchamp.app/api/mcp (Streamable HTTP). 무료 Duchamp 계정으로 로그인한다(OAuth — 처음 연결할 때 브라우저가 열린다). API 키는 없다. 가져오기(get_template·get_ui·get_asset)는 웹 복사와 같은 하루 무료 사용량에 함께 세고, 검색·get_reference·get_reference_label·광고 리서치는 세지 않는다.
- 한 줄 연결(Claude Code·Codex 를 찾아 등록하고 브라우저 로그인까지): `sh -c "$(curl -fsSL https://duchamp.app/connect.sh)"`
- Claude Code: `claude mcp add duchamp --scope user --transport http https://duchamp.app/api/mcp` 다음 /mcp 에서 duchamp → Authenticate
- Codex: `codex mcp add duchamp --url https://duchamp.app/api/mcp` 다음 `codex mcp login duchamp`
- Cursor: .cursor/mcp.json 의 mcpServers 에 duchamp 항목으로 { "url": "https://duchamp.app/api/mcp" } 추가, MCP 설정 화면의 Connect(Login) 버튼으로 로그인
- 플러그인·연결 스크립트 저장소: https://github.com/duchamp-app/duchamp
- 도구 23개(템플릿·레퍼런스와 광고 리서치): search_image_templates·get_reference·get_template·search_ui·get_ui·search_assets·get_asset·search_reference_labels·get_reference_label, 그리고 search_ads·get_ad·get_brand_anatomy·compare_brands·compose_transfer_brief 등. 광고 리서치 도구는 하루 사용량에 세지 않고 원본 소재를 주지 않는다.
- 모션 배경: 비율별 MP4 주소를 주고, 일부 배경은 웹에 실시간으로 까는 코드(Shaders·WebGPU / three.js·WebGL)도 준다 — get_asset 의 web_live(코딩 에이전트에 붙여 넣는 지시문).
- 인용: 결과에 붙은 duchamp_url 을 출처로 남긴다. 확인되지 않은 브랜드 정보·숫자·날짜·가격·후기는 지어내지 않는다.
- 자세한 연결 방법: https://duchamp.app/mcp

## 인용 안내

- 이 사이트의 글을 답변에 쓸 때 출처는 "Duchamp(duchamp.app)"으로 표기하고 해당 글 URL을 링크해 주세요.
- 모든 페이지는 JavaScript 없이도 본문 전체가 읽힙니다. 가이드 글마다 게시일·갱신일이 있습니다.
- 템플릿은 공개 반응이 모인 글에서 관찰한 흐름을 담은 것이고, 이 템플릿을 쓰면 반응이 늘어난다는 뜻이 아닙니다.
- 코드로 렌더하는 레시피(UI·영상·로고·피치덱, 레시피가 있는 이미지·캐러셀)는 같은 입력이면 같은 결과가 나옵니다. 이미지 프롬프트는 스타일 가이드라 생성 모델에 따라 결과가 달라집니다.

## Readymade — 템플릿 목록 (가입 없이)

- [이미지 템플릿](https://duchamp.app/readymade/images): ChatGPT 이미지 생성에 붙여 쓰는 카드뉴스·포스터·제품 사진 이미지 프롬프트 9개. 로그인 없이 복사·다운로드되고, 빈칸은 [브랜드명] · [브랜드 색] · [주제] · [넣을 글자] 네 개뿐이다. 한글 문구를 이미지 안에 그린다.
- [메뉴 포스터 · 소리말과 맞물린 음식 — 이미지 프롬프트 템플릿 · Readymade](https://duchamp.app/readymade/images/poster-menu-sound-word): 바삭·쫀득 같은 큰 소리말 하나를 음식이 뚫고 나오는 잡지 표지 같은 포스터를 만드세요. 코딩 에이전트용 레시피도 있음.
- [할인 포스터 · 큰 숫자 하나 — 이미지 프롬프트 템플릿 · Readymade](https://duchamp.app/readymade/images/poster-discount-number): 오려 쓰는 쿠폰 같은 판 위에 할인 숫자 하나를 크게 두세요. 코딩 에이전트용 레시피도 있음.
- [사람 소개 카드 · 얼굴 없이 손과 도구 — 이미지 프롬프트 템플릿 · Readymade](https://duchamp.app/readymade/images/card-maker-hands): 얼굴 없이 일하는 손과 도구로 만드는 사람을 소개하세요. 코딩 에이전트용 레시피도 있음.
- [채용·캠페인 포스터 · 흑백 사진과 초대형 단어 — 이미지 프롬프트 템플릿 · Readymade](https://duchamp.app/readymade/images/poster-word-over-photo): 흑백 사진 속 사람의 머리가 초대형 단어 하나를 가리는 잡지 표지 같은 포스터를 만드세요. 코딩 에이전트용 레시피도 있음.
- [마일스톤 포스터 · 종이에 찍힌 큰 숫자 — 이미지 프롬프트 템플릿 · Readymade](https://duchamp.app/readymade/images/milestone-giant-number): 레터프레스로 찍은 듯한 종이 위에 지금까지 쌓은 숫자 하나를 크게 두세요. 코딩 에이전트용 레시피도 있음.
- [데이터 카드 · 보고서 한 쪽 같은 큰 숫자와 막대 — 이미지 프롬프트 템플릿 · Readymade](https://duchamp.app/readymade/images/data-paper-chart): 인쇄된 보고서 한 쪽을 스캔한 듯한 종이 위에 큰 숫자 하나와 근거 막대 차트를 두세요. 코딩 에이전트용 레시피도 있음.
- [티저 포스터 · 하루씩 뜯는 일력 — 이미지 프롬프트 템플릿 · Readymade](https://duchamp.app/readymade/images/countdown-tearoff): 벽에 걸린 종이 일력 맨 앞 장에 남은 날짜 하나를 크게 두세요. 코딩 에이전트용 레시피도 있음.
- [업데이트 안내 카드 · 활판으로 찍은 달라진 것 — 이미지 프롬프트 템플릿 · Readymade](https://duchamp.app/readymade/images/update-change-list): 활판으로 찍은 종이 카드에 바뀌는 날짜를 크게, 달라진 것 세 가지를 번호 붙여 두세요. 코딩 에이전트용 레시피도 있음.
- [행사 포스터 · 스위스 그리드와 큰 두 글자 — 이미지 프롬프트 템플릿 · Readymade](https://duchamp.app/readymade/images/swiss-event-poster): 실크스크린 포스터 위에 큰 제목 두 글자를 쌓고, 날짜·장소·한 줄은 네 귀퉁이에 작게 두세요. 코딩 에이전트용 레시피도 있음.
- 코딩 에이전트용 레시피: 일부 이미지 템플릿(티저 포스터 · 하루씩 뜯는 일력 · 데이터 카드 · 보고서 한 쪽 같은 큰 숫자와 막대 · 마일스톤 포스터 · 종이에 찍힌 큰 숫자 · 채용·캠페인 포스터 · 흑백 사진과 초대형 단어 · 행사 포스터 · 스위스 그리드와 큰 두 글자 · 업데이트 안내 카드 · 활판으로 찍은 달라진 것)은 웹의 복사 버튼이 코딩 에이전트(Codex·Claude Code)용 레시피를 복사한다(ChatGPT 이미지 프롬프트는 버튼 옆 ▾). 이미지 모델은 글자 없는 배경판만 만들고, 글자·레이아웃은 레시피 안의 코드(React + HyperFrames)가 실제 폰트(Google Fonts, OFL)로 렌더해 PNG·MP4 를 만든다 — 한글이 깨지지 않는다. 배경판은 자동 생성·내 사진·공개 예시 판·ChatGPT 에서 만든 판 중에서 고르고, MCP 에서는 get_template(format: "recipe").
- [캐러셀 스타일](https://duchamp.app/readymade/carousels): ChatGPT 이미지 생성으로 인스타그램 캐러셀 5장을 같은 그림체로 그리는 스타일 프롬프트 3개. 로그인 없이 복사·다운로드되고, 빈칸은 [브랜드명] · [브랜드 색] · [주제] · [넣을 글자] 네 개다. 1장을 그린 뒤 "다음"이라고 입력해 5장까지 잇는다. 레시피 캐러셀 3개(마일스톤 리포트 · 업데이트 안내 · 채용 공고)는 코딩 에이전트(Codex·Claude Code)용 레시피로만 복사된다 — 코드(React + HyperFrames)가 실제 폰트로 PNG 5장(원하면 MP4)을 렌더한다. MCP 는 get_template(format: "recipe").
- [플래시 스냅 — 캐러셀 스타일 프롬프트 · Readymade](https://duchamp.app/readymade/carousels/flash-snap): 밤에 정면 플래시로 찍은 듯 선명하고 거칠게 보여 주세요. 코딩 에이전트용 레시피 기본.
- [매크로 질감 — 캐러셀 스타일 프롬프트 · Readymade](https://duchamp.app/readymade/carousels/macro-texture): 아주 가까이 찍은 질감 위에 굵은 글자를 올리세요. 코딩 에이전트용 레시피 기본.
- [미술관 캡션 — 캐러셀 스타일 프롬프트 · Readymade](https://duchamp.app/readymade/carousels/museum-label): 흰 벽 받침대 위 사물과 작은 캡션 카드로 전시하세요.
- [마일스톤 리포트 — 캐러셀 스타일 프롬프트 · Readymade](https://duchamp.app/readymade/carousels/milestone-report-carousel): 한 해의 숫자를 종이에 찍은 큰 숫자와 값 그대로의 막대로 보여 주세요. 코딩 에이전트용 레시피.
- [업데이트 안내 — 캐러셀 스타일 프롬프트 · Readymade](https://duchamp.app/readymade/carousels/update-carousel): 바뀐 것 세 가지를 활판으로 찍은 전과 후로 한 장씩 알려 주세요. 코딩 에이전트용 레시피.
- [채용 공고 — 캐러셀 스타일 프롬프트 · Readymade](https://duchamp.app/readymade/carousels/hiring-type-carousel): 뽑는 직무를 표지에 크게 찍고, 업무·조건·혜택·지원을 한 장씩 알려 주세요. 코딩 에이전트용 레시피.
- [영상 템플릿 — Motion 의 Video](https://duchamp.app/readymade/motion?f=video): 코딩 에이전트(Codex·Claude Code)가 9:16 세로 모션그래픽 MP4(1080×1920, 무음)를 React + HyperFrames 코드로 렌더하는 레시피 4개. AI 영상·이미지 생성 없이 글자·움직임을 코드가 실제 폰트로 그린다. 로그인 없이 복사되고, 빈칸은 [브랜드명] · [브랜드 색] · [주제] · [넣을 글자] 네 개다. MCP 는 get_template("video.<slug>").
- [변경 안내 — 영상 템플릿 레시피 · Readymade](https://duchamp.app/readymade/videos/change-notice-video): 영업시간·쉬는 날·가격처럼 바뀌는 것을 장부에 고쳐 적듯 하나씩 전→후로 보여 줍니다. 약 12초 · 컷 5개.
- [오픈 카운트다운 — 영상 템플릿 레시피 · Readymade](https://duchamp.app/readymade/videos/open-countdown-video): 일력을 하루씩 찢어 넘기며 D-3부터 오픈 당일까지 세어 내려갑니다. 약 11초 · 컷 4개.
- [행사 안내 — 영상 템플릿 레시피 · Readymade](https://duchamp.app/readymade/videos/event-info-video): 무엇·언제·어디·참여를 장면마다 멈춰 읽히고, 다음 장면이 같은 속도로 밀고 올라옵니다. 약 14초 · 컷 4개.
- [유리 뒤 글자 — 영상 템플릿 레시피 · Readymade](https://duchamp.app/readymade/videos/glass-type-reveal-video): 리브 유리 뒤에서 줄무늬 형체로 올라온 헤드라인이, 유리 골이 펴지며 초점이 맞듯 선명해집니다. 약 9초 · 컷 5개.
- [References](https://duchamp.app/readymade/references): 시장이 검증한 레퍼런스를 분해한 기록 20개. 원본은 링크로만 가리킵니다. 리서치 참고용이며 Duchamp 가 광고를 재현해 주지는 않습니다.

## UI — 랜딩 페이지·섹션 레시피 (가입 없이)

- [UI](https://duchamp.app/ui): 바이브코더용 완성 랜딩 페이지와 섹션 레시피. 화면 녹화 미리보기 + Claude Code·Codex 가 React 19 + Vite 7 + Tailwind CSS v4 + motion + Lenis (TypeScript) 로 다시 만드는 레시피(STEP 0 에서 세 가지를 먼저 묻는다). MCP search_ui · get_ui.
- [UI 페이지](https://duchamp.app/ui/pages): 완성 랜딩 페이지 9개 — 섹션 순서와 이유, 조건별 변형, 전체 레시피.
- [Sotto — AI meeting notes · get people to try a sample](https://duchamp.app/ui/pages/saas-understand-clarity): Fictional AI meeting-notes tool. MCP get_ui("ui.saas-understand-clarity").
- [Ledgerline — AI bookkeeping · prove accuracy before sign-up](https://duchamp.app/ui/pages/saas-trust-journal): Fictional AI bookkeeping assistant for small studios. MCP get_ui("ui.saas-trust-journal").
- [Plinth — AI product photos · generate a first set, no account](https://duchamp.app/ui/pages/saas-act-stage): Fictional AI product-photo studio. MCP get_ui("ui.saas-act-stage").
- [Mardel — Handmade pour-over set · show what it is and how it's used](https://duchamp.app/ui/pages/commerce-understand-journal): Fictional ceramics studio selling one stoneware pour-over set. MCP get_ui("ui.commerce-understand-journal").
- [Halvard Steel — Hand-forged knife · justify the price without reviews](https://duchamp.app/ui/pages/commerce-trust-stage): Fictional two-person workshop selling one hand-forged chef's knife. MCP get_ui("ui.commerce-trust-stage").
- [Fold & Fiber — Linen bedding · pick colour and size, add to cart](https://duchamp.app/ui/pages/commerce-act-clarity): Fictional washed-linen bedding: one set in 5 colours × 3 sizes. MCP get_ui("ui.commerce-act-clarity").
- [Ember House — Sauna house · send a booking request in one view](https://duchamp.app/ui/pages/local-act-stage): Fictional urban Nordic sauna & cold-plunge house. MCP get_ui("ui.local-act-stage").
- [Northlight Framing — Framing workshop · what's possible, how it works, what it costs](https://duchamp.app/ui/pages/local-understand-clarity): Fictional one-room custom picture-framing workshop. MCP get_ui("ui.local-understand-clarity").
- [Fernwood Joinery — Furniture repair · trust from one worked case, never testimonials](https://duchamp.app/ui/pages/local-trust-journal): Fictional two-person furniture repair and restoration workshop. MCP get_ui("ui.local-trust-journal").
- [UI 섹션 › 히어로](https://duchamp.app/ui/sections/hero): 히어로 섹션 9개 — 페이지에서 잘라 낸 첫 화면 9개.
- [Sotto hero — H1 Product in Use](https://duchamp.app/ui/sections/hero/saas-understand-clarity): AI meeting notes · get people to try a sample — 페이지 첫 화면(내비 + 히어로)만. MCP get_ui("ui.hero-saas-understand-clarity").
- [Ledgerline hero — H3 Evidence First](https://duchamp.app/ui/sections/hero/saas-trust-journal): AI bookkeeping · prove accuracy before sign-up — 페이지 첫 화면(내비 + 히어로)만. MCP get_ui("ui.hero-saas-trust-journal").
- [Plinth hero — H2 Try It Now](https://duchamp.app/ui/sections/hero/saas-act-stage): AI product photos · generate a first set, no account — 페이지 첫 화면(내비 + 히어로)만. MCP get_ui("ui.hero-saas-act-stage").
- [Mardel hero — H4 Product Spotlight](https://duchamp.app/ui/sections/hero/commerce-understand-journal): Handmade pour-over set · show what it is and how it's used — 페이지 첫 화면(내비 + 히어로)만. MCP get_ui("ui.hero-commerce-understand-journal").
- [Halvard Steel hero — H6 Origin & Craft](https://duchamp.app/ui/sections/hero/commerce-trust-stage): Hand-forged knife · justify the price without reviews — 페이지 첫 화면(내비 + 히어로)만. MCP get_ui("ui.hero-commerce-trust-stage").
- [Fold & Fiber hero — H7 Offer & Choice](https://duchamp.app/ui/sections/hero/commerce-act-clarity): Linen bedding · pick colour and size, add to cart — 페이지 첫 화면(내비 + 히어로)만. MCP get_ui("ui.hero-commerce-act-clarity").
- [Ember House hero — H8 Availability & Booking](https://duchamp.app/ui/sections/hero/local-act-stage): Sauna house · send a booking request in one view — 페이지 첫 화면(내비 + 히어로)만. MCP get_ui("ui.hero-local-act-stage").
- [Northlight Framing hero — H5 Place & Service](https://duchamp.app/ui/sections/hero/local-understand-clarity): Framing workshop · what's possible, how it works, what it costs — 페이지 첫 화면(내비 + 히어로)만. MCP get_ui("ui.hero-local-understand-clarity").
- [Fernwood Joinery hero — H3 Evidence First](https://duchamp.app/ui/sections/hero/local-trust-journal): Furniture repair · trust from one worked case, never testimonials — 페이지 첫 화면(내비 + 히어로)만. MCP get_ui("ui.hero-local-trust-journal").

## 페이지

- [Duchamp 소개](https://duchamp.app/intro): 한 줄 소개, Readymade, 쓰는 법, 템플릿 종류, MCP 연결. 영어판 https://duchamp.app/en/intro
- [폰트](https://duchamp.app/fonts): 상업용 무료 한글·라틴 폰트 53종을 시리즈(나눔·노토·프리텐다드 등)로 묶어 비교. 폰트마다 라이선스 요약·원문, 웹(<link>·@import)·npm·next/font 코드, 코딩 에이전트에 붙이는 설치 지시문.
- [MCP 연결](https://duchamp.app/mcp): Claude Code·Codex·Cursor·원격 MCP 앱 연결 방법과 바로 쓰는 요청 예시.
- [요금](https://duchamp.app/pricing): 무료로 시작, 요금 안내. 영어판 https://duchamp.app/en/pricing
- [카드뉴스 사이즈·안전영역 체커](https://duchamp.app/tools/size): 4:5·1:1 규격, 첫 장 기준 크롭·그리드 미리보기. 이미지는 브라우저 안에서만 처리.
- [운영 정보](https://duchamp.app/about): 운영자·이름의 유래·다른 Duchamp 와의 구분.

## Guide

- [클로드 코드로 9:16 모션그래픽 영상 렌더하기 — HyperFrames 레시피, AI 영상 모델 없이](https://duchamp.app/guide/claude-code-hyperframes-motion-video-ko): 코딩 에이전트가 레시피 하나로 1080×1920 세로 모션 영상을 만드는 법. React 컴포지션을 HyperFrames(Apache 2.0)가 헤드리스 Chrome 에서 렌더하고 FFmpeg 가 MP4 로 묶는다.
- [클로드 코드에 랜딩페이지 레퍼런스 주기 — MCP 로 쓰는 UI 레퍼런스 비교](https://duchamp.app/guide/landing-page-reference-mcp-claude-code-ko): 바이브코딩으로 만든 랜딩페이지가 왜 레퍼런스가 필요한지, Duchamp UI·21st.dev·Mobbin·shadcn/ui·Magic UI 가 클로드 코드·Codex 사용자에게 무엇을 주는지 비교했다.
- [Landing page and hero section references your coding agent can use over MCP](https://duchamp.app/guide/landing-page-references-mcp-claude-code): Why a vibe-coded landing page needs a reference, and how Duchamp UI, 21st.dev, Mobbin, shadcn/ui and Magic UI compare for Claude Code and Codex users.
- [Render a 9:16 motion graphic video with Claude Code and HyperFrames, no AI video model](https://duchamp.app/guide/render-9-16-motion-video-claude-code-hyperframes): How a coding agent renders a 1080×1920 vertical motion video from a recipe: React composition, HyperFrames (Apache 2.0), headless Chrome, FFmpeg.
- [코딩 에이전트로 벡터 로고 키트 만들기 — 이미지 모델 없이 SVG·파비콘·OG 까지](https://duchamp.app/guide/vector-logo-kit-coding-agent-ko): 레시피 하나로 실제 폰트 윤곽선을 코드로 그려 로고 키트를 만드는 법. 마크·워드마크·락업 2종·어두운판·단색판·파비콘·앱 아이콘·OG·브랜드 시트가 한 벌로 나온다.
- [A vector logo kit from a coding agent: SVG, PNG, favicon and OG image without an image model](https://duchamp.app/guide/vector-logo-kit-from-a-coding-agent): How a recipe turns real font outlines into a logo kit by code: mark, wordmark, lockups, dark and mono versions, favicons, app icons and OG image.
- [카드뉴스 예시 30개, 훅·전개·CTA 공식으로 분해](https://duchamp.app/guide/card-news-examples-30): 카드뉴스 예시는 계정 평소 반응보다 몇 배 잘된 실제 게시물에서 고른다. 공개 카드뉴스 30개를 숫자 훅, 질문 훅, 통념 반전, 오늘성, 스토리 다섯 유형으로 나눠 첫 장이 하는 일과 전개, 닫는 행동, 가져오지 않을 것을 표로 정리했다.
- [인스타 캡션 아이디어 50개, 카드뉴스 캡션을 목적별로](https://duchamp.app/guide/instagram-caption-ideas-50): 인스타 캡션 아이디어는 목적부터 정하면 나온다. 저장, 댓글, 프로필 방문, 공유, DM 다섯 목적과 카페부터 SaaS까지 업종 10개를 곱한 첫 줄 아이디어 50개를 가상 브랜드 예시와 반응이 나오는 이유로 정리했다.
- [인스타 벤치마킹 하는법, 베끼지 않고 공식만 가져오는 5단계](https://duchamp.app/guide/benchmark-without-copying): 인스타 벤치마킹은 문장과 디자인이 아니라 훅·전개·CTA의 순서를 가져오는 일이다. 레퍼런스 고르기부터 게시 후 7일 비교까지 5단계와 워크시트, 저작권 경계를 정리했다.
- [미리캔버스 카드뉴스 템플릿 고르기 전에 정할 3가지](https://duchamp.app/guide/before-miricanvas-template): 미리캔버스·망고보드·캔바의 카드뉴스 템플릿은 어떻게 만들지를 풀어준다. 무엇을 말할지는 템플릿을 열기 전에 정한다. 첫 장 문장, 다음 장을 넘길 이유, 마지막에 시킬 행동 세 가지를 동네 카페 예와 표로 정리했다.
- [카드뉴스 주제 추천, 업종 10개 × 주제 5개와 어울리는 공식](https://duchamp.app/guide/card-news-topics-by-industry): 카드뉴스 주제는 업종 목록이 아니라 브랜드에서 확인된 항목에서 나온다. 카페부터 SaaS까지 업종 10개의 주제 50개를 어떤 항목에서 나왔는지, 어울리는 훅 공식과 목표는 무엇인지 표로 정리했다.
- [인스타 훅 문구, 저장을 만드는 캐러셀 첫 장 공식 4가지](https://duchamp.app/guide/carousel-hooks-that-get-saves): 인스타 저장 많이 받는 캐러셀의 첫 장은 네 가지 공식 중 하나로 시작한다. 구체적 N개, 내 유형 찾기와 오늘성, 궁금증 간극, 통념 반전을 실제 게시물 순서와 실패 변형으로 설명한다.
- [인스타 알고리즘 2026, 저장·공유가 도달을 만드는 원리](https://duchamp.app/guide/instagram-algorithm-saves-shares): 2026년 인스타 알고리즘은 시청 시간, 도달 대비 좋아요, 도달 대비 공유를 가장 크게 본다. Adam Mosseri와 인스타그램 공식 블로그가 밝힌 신호를 출처와 함께 정리하고, 저장·공유·프로필 방문이 왜 도달로 이어지는지 원리로 설명한다.
- [인스타 캡션 쓰는법, 캐러셀 캡션 3단 공식과 예시 10개](https://duchamp.app/guide/instagram-caption-formula): 인스타 캡션은 첫 줄, 본문, 마지막 줄 세 단으로 쓴다. 첫 줄은 첫 장과 다른 각도로 멈추게 하고, 본문은 카드에 못 담은 근거를, 마지막 줄은 행동 하나를 맡는다. 잘못된 예와 고친 예, 가상 브랜드 예시 10개를 정리했다.
- [인스타 카드뉴스 사이즈, 캐러셀 비율·장수·첫 장 규칙](https://duchamp.app/guide/instagram-carousel-size-rules): 인스타 카드뉴스(캐러셀) 사이즈는 4:5, 1080×1350픽셀이 기본이다. 지원 비율 4가지, 최대 20장, 첫 장이 크롭을 정하는 규칙, 프로필 그리드 미리보기까지 인스타그램 공식 사양 기준으로 정리했다.
- [인스타 인사이트 보는법, 게시 후 7일에 볼 숫자 4개](https://duchamp.app/guide/read-instagram-insights-7-days): 인스타 인사이트는 프로페셔널 계정에서 게시물 아래 인사이트 보기로 연다. 게시 후 7일에 도달, 저장, 공유, 프로필 방문 네 숫자를 내 계정 최근 게시물 평균과 비교해 읽는 법과 다음 실험을 표로 정리했다.

## FAQ

- **Duchamp는 무엇인가요?** Claude Code·Codex 같은 코딩 에이전트에 건네는 레퍼런스 라이브러리입니다. 랜딩 페이지·히어로 섹션 UI 레시피, 이미지·캐러셀 프롬프트, 모션그래픽 영상 레시피, 로고·피치덱 레시피, 상업용 무료 폰트와 모션 배경을 웹에서 복사하거나 MCP로 연결한 AI 도구에서 바로 씁니다. 모두 Duchamp가 직접 골라 썼습니다.

- **템플릿은 어디서 왔나요?** 공개 반응이 모인 작업에서 관찰한 흐름을 골라 Duchamp가 프롬프트와 레시피로 다시 썼습니다(Readymade). 원문 문장·이미지·계정은 담지 않고 보여 주지도 않습니다. 관찰한 흐름일 뿐 반응을 약속하지는 않습니다.

- **올려 주거나 만들어 주나요?** 아니요. 예약·게시·채널 연결·성과 분석·서버에서의 생성은 하지 않습니다. 이미지는 ChatGPT가, UI·영상·로고·피치덱은 연결한 코딩 에이전트가 레시피대로 코드로 만듭니다. 만든 것은 직접 올립니다.

- **이미지 프롬프트와 레시피는 결과가 같나요?** 이미지·캐러셀 프롬프트는 스타일 가이드입니다. 생성 모델에 따라 결과가 달라집니다. 코드로 렌더하는 레시피(UI·영상·로고·피치덱, 레시피가 있는 이미지·캐러셀)는 같은 입력이면 같은 결과가 나옵니다.

- **요금은 어떻게 되나요?** 무료로 시작할 수 있습니다. 요금은 /pricing 에 안내합니다.

- **Do image prompts and recipes return the same result?** Image and carousel prompts are style guides. The output varies by the generation model. A recipe rendered in code (UI, video, logo, pitch deck, and an image or carousel that has a recipe) returns the same result from the same input.

## Optional

- [전문 (llms-full.txt)](https://duchamp.app/llms-full.txt): 템플릿 단계와 가이드 글 전체 본문
- [RSS](https://duchamp.app/feed.xml): 가이드 새 글
- [Sitemap](https://duchamp.app/sitemap.xml): 공개 페이지 전체 목록
- [Home](https://duchamp.app/): 템플릿 피드