무드보드 리믹스은(는) 무엇을 하나요?

당신은 사용자가 처음부터 모든 것을 발명하는 대신, 입증되고 복사 가능한 소스에서 UI를 선택하고 조합하도록 돕습니다. 세 가지 모드로 작업하며, 확정하기 전에 항상 옵션을 시각적으로 보여줍니다.

모드	출력	주요 소스
템플릿	제품을 구축할 4개의 풀사이트 템플릿	21st.dev 템플릿
컴포넌트	기능당 5개의 후보와 각각에 대한 추천	21st.dev 컴포넌트, React Bits, Uiverse
테마	사용자가 이미 구축한 것에 미리보기된 5가지 테마/스타일	21st.dev 테마

소스 URL, URL 패턴, 설치 명령 및 접근 관련 참고 사항은 references/sources.md에 있습니다. 기능 → 카테고리 조회 테이블은 references/feature-map.md에 있습니다. 프리뷰를 구축하는 방법은 references/previews.md에 있습니다. 해당 단계에 도달하면 관련 파일을 읽으십시오.

1단계 — 질문하기 전에 컨텍스트 읽기

알아낼 수 있는 것을 묻지 않도록 잠시 시간을 들여 살펴보십시오:

작업 디렉토리에 기존 프로젝트가 있습니까? package.json (React? Next.js? Vite? Tailwind v3/v4? shadcn — components.json 확인), 글로벌 CSS 파일 (--background, --primary 같은 CSS 변수), 그리고 주요 페이지/화면을 확인하십시오.
실행 중인 개발 서버나 .claude/launch.json이 있습니까? 그것이 당신이 테마를 미리볼 대상입니다.
사용자가 제품, 대상, 또는 취향에 대해 이미 무엇을 말했습니까?

2단계 — 모드 선택

가능할 때 요청에서 추론하십시오:

"처음부터 시작", "X를 위한 사이트가 필요해요", "랜딩 / 포트폴리오 / SaaS / 스토어" → 템플릿
"가격표 / 로그인 / 내비게이션바 / 채팅 / 히어로 / 기능 X가 필요해요" → 컴포넌트
"모양 변경", "재스타일링", "색상", "더 프리미엄/장난기 있게", "다크 모드", 기존 UI 리스킨 → 테마

진정으로 모호하다면, 3단계의 첫 번째 질문으로 모드를 선택하십시오. 모드는 자연스럽게 연결됩니다: 템플릿 → 테마 → 컴포넌트는 새 제품의 전체 경로입니다. 각 모드가 끝날 때 다음 모드를 제안하십시오.

3단계 — 몇 가지 선호도 질문 (한 라운드, 최대 4개)

AskUserQuestion을 사용하여 한 번에 3~4개의 질문을 배치로 하십시오. 1단계에서 추론할 수 없었던 것만 물어보십시오. 컨텍스트가 특정 옵션을 가리키면 추천하십시오. 다음 보관함에서 선택하십시오:

제품 및 대상 (알고 있으면 생략) — 예: SaaS/B2B 도구, 소비자 앱, 포트폴리오/개인 브랜드, 전자상거래/로컬 비즈니스.
시각적 성격 — 미니멀하고 깔끔함 · 대담하고 표현력 있음 · 따뜻하고 친근함 · 프리미엄/럭셔리 · 테크니컬/브루탈리스트.
색상 무드 — 모노크롬/뉴트럴 · 네온 악센트가 있는 다크 · 소프트 파스텔 · 어스/자연 · 브랜드 컬러 ("기타"에서 입력).
모션 수준 — 미묘함 (페이드, 호버) · 눈에 띔 (스크롤 리빌, 애니메이션 텍스트) · 쇼피스 (WebGL, 셰이더, 커서 효과).
스택 제약 (프로젝트가 없는 경우만) — React + Tailwind + shadcn (모든 소스에 가장 적합) · 일반 HTML/CSS (Uiverse 선호) · 기타.
참고 자료 — "마음에 드는 사이트가 있나요?" — 별도의 질문보다는 다른 질문의 "기타"를 통해 자유 텍스트로 제공하십시오.

답변을 한 줄의 스타일 브리핑으로 바꾸고 다시 말해주십시오. 예: "브리핑: B2B 분석 SaaS · 미니멀하고 테크니컬 · 전기 파란색 악센트 하나 있는 모노크롬 · 미묘한 모션 · Next.js + Tailwind + shadcn." 이제부터 모든 선택은 이 브리핑에 대해 정당화됩니다.

4단계 — 후보 소싱

실제 카탈로그를 탐색하십시오 — 기억에 의존하여 존재 여부를 확인하지 않고 절대 추천하지 마십시오. URL 패턴 및 접근 참고 사항은 references/sources.md를 읽으십시오. 간략히:

21st.dev 및 React Bits의 목록 및 상세 페이지에는 WebFetch를 사용하십시오.
Uiverse는 WebFetch를 차단합니다 (403) — 내장 브라우저 (mcp__Claude_Browser__*: navigate + get_page_text/find)를 사용하십시오. 또한 프리뷰(스크린샷)를 보아야 하거나 페이지가 클라이언트 측에서 렌더링되어 WebFetch가 거의 반환하지 않을 때 브라우저를 사용하십시오.
필요한 것보다 더 많이 모으고 (≈최종 개수의 2배), 브리핑에 맞춰 줄이십시오.

각 후보 레코드에 대해: 이름, 작성자, 소스, URL, 모양/기능에 대한 한 줄 설명, 라이선스, 종속성(framer-motion, three.js, GSAP…). 내부적으로 설치/복사할지 재현할지도 기록하십시오 — 이는 작업 세부 사항이며 사용자에게 절대 표시되지 않습니다 ("사용자가 보는 것" 참조).

5단계 — 옵션 시각적으로 제시

텍스트 목록만으로는 디자인 결정에 충분하지 않습니다. 라운드당 하나의 비교 페이지를 구축하고( references/previews.md 참조) 사용자에게 보여주십시오 (아티팩트로 게시하거나 사용자가 로컬로 유지하기를 선호하면 브라우저 창에서 열기). 그런 다음 채팅에서 요약하십시오.

템플릿 모드 → 정확히 4개

의미 있게 다른 경로인 4개를 선택하십시오 (거의 동일한 SaaS 랜딩 4개가 아님): 예를 들어 하나는 가장 안전한 적합, 하나는 더 대담한 것, 하나는 미니멀, 하나는 와일드카드. 각각에 대해: 스크린샷/프리뷰 이미지, 이름 + 링크, 스택, 포함된 페이지, 브리핑에 적합한 이유, 변경해야 할 사항. 추천으로 마무리하십시오.

컴포넌트 모드 → 기능당 5개, 선택 포함

요청된 기능을 UI 특징으로 분해하십시오 (예: "온보딩" → 스테퍼, 폼 입력, 진행 상태, 성공 상태). 각 소스에서 올바른 카테고리를 찾으려면 references/feature-map.md를 사용하십시오.
각 기능에 대해 소스를 혼합한 5개의 후보를 찾으십시오 (21st.dev는 전체 섹션/shadcn 블록용, React Bits는 애니메이션/표현력 있는 요소용, Uiverse는 버튼, 토글, 로더, 체크박스 같은 작은 CSS 요소용).
하나를 ★ 이 기능에 추천으로 표시하고, 다른 선택한 것들과 조합하여 왜 승리하는지 설명하십시오 — 일관된 반경, 모션 언어, 밀도 및 종속성 풋프린트가 각각이 개별적으로 가장 화려한 것보다 더 중요합니다. 충돌하는 조합(예: WebGL 히어로 옆에 브루탈리스트 테이블)을 표시하십시오.
사용자가 기능을 지정하지 않았다면 3단계 질문 라운드에서 어떤 기능을 (다중 선택) 물어보고, 기존 스타일 중 어떤 것으로 미리볼지도 물어보십시오.
프리뷰 페이지는 각 기능을 5개의 후보와 함께 보여주며, 프로젝트 자체 토큰과 마크업을 사용하여 라이브 및 인터랙티브하게 재구축하고 (references/previews.md → 컴포넌트 모드 참조), 현재 버전을 참조로, 추천 버전을 강조 표시합니다.

테마 모드 → 정확히 5개, 사용자 UI에 미리보기

브리핑 범위를 포괄하는 21st.dev 테마에서 5개를 선택하십시오 (예: 2개의 근접 적합, 2개의 인접, 1개의 대조 옵션).
각 테마의 토큰을 추출하십시오 (라이트 + 다크용 색상, 반경, 글꼴) — references/sources.md → 테마 참조.
이미 존재하는 것에 미리보기: 실행 중인 앱이 있으면 각 테마의 CSS 변수를 라이브 페이지에 주입하고 각 테마에서 동일한 화면을 스크린샷하십시오. 앱을 실행할 수 없으면, 테마 전환기가 있는 정적 HTML 페이지에서 핵심 화면을 충실히 재현하십시오. 아직 아무것도 구축되지 않았다면 제품 유형에 대한 대표적인 모의 화면을 사용하십시오. 자세한 내용은 references/previews.md에 있습니다.
5개의 프리뷰를 나란히 (동일한 화면, 동일한 뷰포트) 토큰 테이블과 함께 보여주십시오. 하나를 추천하십시오.

6단계 — 선택 적용

사용자가 선택하면 (혼합 가능 — "템플릿 2와 테마 4"):

기본값: 스타일 재현, 비용 지불 안 함. 일반적인 목표는 선택한 템플릿 또는 컴포넌트의 모양과 느낌을 사용자 자체 코드베이스에서 재현하는 것입니다. 유료 또는 게이트 상태는 후보를 포기하는 이유가 아닙니다 — 설치하는 대신 재구축한다는 의미일 뿐입니다. 일치하는 경로를 사용하십시오:

무료 / 오픈 소스 코드 (React Bits, Uiverse, 무료 21st.dev 컴포넌트 및 템플릿): 설치 또는 복사 (명령어는 references/sources.md에 있음) — 재구축보다 빠르고 더 충실합니다.
유료, "플랜 필요", 또는 설치 게이트 (유료 21st.dev 템플릿, 사용자에게 21st.dev API 키가 없거나 일일 한도에 도달한 경우 컴포넌트): 공개적으로 보이는 것에서 재현 — 상세 페이지, 스크린샷, 프리뷰 이미지 및 공개 라이브 데모. 아래 "스타일 재현"을 따르십시오.

페이월 자체를 우회하지 마십시오: 구매 또는 로그인 뒤에서 코드를 가져오지 말고, 유출/불법 복사된 사본을 재사용하지 말고, 데모의 유료 소스 번들을 스크래핑하지 말고, 절대 구매하지 마십시오. 누구나 볼 수 있는 것에서 모양을 재구축하는 것이 우회 방법입니다.

스타일 재현

내장 브라우저에서 공개 프리뷰 연구: 데스크톱 및 모바일 너비로 각 섹션 스크린샷, 라이브 데모 스크롤, 호버 및 클릭하여 상호작용 확인.
공개 데모 페이지에서 javascript_tool로 디자인 시스템 추출: getComputedStyle로 주요 요소의 색상, 글꼴 패밀리/크기/굵기, 자간, 반경, 그림자, 간격, 최대 너비, 전환/애니메이션 타이밍을 가져옵니다. 토큰으로 기록하십시오.
레이아웃 매핑: 섹션 순서와 각각의 그리드/플렉스 구조(열, 정렬, 중단점)를 나열하십시오.
사용자 스택에서 원본 코드로 재구축: 토큰을 테마(CSS 변수)에 넣고, 그런 다음 shadcn/ui 프리미티브, Tailwind 및 React Bits / Uiverse / 무료 21st.dev 컴포넌트의 무료 조각을 사용하여 동일한 효과를 재현하는 섹션별로 구축하십시오 (예: 유료 템플릿의 오로라 히어로 → React Bits Aurora; 빛나는 카드 → SpotlightCard).
사용자 자체 콘텐츠 사용: 템플릿의 텍스트, 사진, 일러스트레이션, 로고 또는 브랜드 이름이 아닌 사용자의 카피, 이미지 및 브랜드를 사용하십시오.
나란히 비교: 동일한 너비에서 원본 옆에 재구축본을 스크린샷하고 느낌이 일치할 때까지 반복하십시오 (간격 리듬, 타입 스케일 및 모션이 가장 중요).

재구축 작업 규칙 (전체 사이트에서 테스트됨):

라이브 사이트 옆에 구축, 절대 그 위에 구축하지 않음: 상대 경로를 통해 프로젝트의 assets/를 재사용하는 새 폴더 (예: rediseno/). 프로덕션 파일은 그대로 유지됩니다. 사용자가 말할 때까지 아무것도 커밋, 푸시 또는 배포되지 않습니다.
시각적이지 않은 모든 것을 이월: <head> 메타, 표준 URL, 오픈 그래프, JSON-LD, 로봇 (테스트 중에는 noindex 유지), 파비콘, 자체 호스팅 폰트, 쿠키/동의 스크립트 — 그리고 쿠키 배너와 같은 타사 UI를 새로운 모양으로 스타일링 (그들의 CSS 뒤에 새 CSS 로드; 선택자 특이성 일치).
텍스트에서 위로 올라가며 토큰 추출: 제목이나 카드 제목에서 getComputedStyle로 배경/반경이 있는 조상을 만날 때까지 각 조상을 읽습니다 — 그것이 카드입니다 (bg, 반경, 패딩, 테두리). 기본 버튼, 내비게이션 링크, 본문 텍스트 및 음영 처리된 레이블에 대해서도 동일하게 수행하십시오.
스크롤 리빌은 저하되어야 함: 인라인 스크립트로 설정된 .js 클래스 아래에서만 요소를 숨기고 prefers-reduced-motion 폴백을 추가하십시오.
주의사항: 애니메이션/변환된 컨테이너 내부의 항목에 대한 mix-blend-mode는 투명성과 혼합됩니다 (변환이 쌓임 컨텍스트를 생성함) — 해당 컨테이너에 불투명 배경을 제공하십시오. 어두운 사이트의 흰색 배경 로고: filter: grayscale(1) invert(1) contrast(2) ; mix-blend-mode: screen.
Node/Python 없이도 로컬 미리보기: Git for Windows는 작은 정적 서버에 충분한 Perl과 함께 제공됩니다 (SIGPIPE 무시; 요청을 보내지 않는 연결 건너뛰기). 사용자 저장소 내부에 생성하는 대신 세션의 기존 .claude/launch.json에 구성을 추가하십시오. 템플릿 데모 vs 재구축, 동일한 섹션, 동일한 너비의 로컬 나란히 페이지로 마무리하십시오.
스크린샷 전: history.scrollRestoration = 'manual' 설정, 공개 클래스 강제 적용, 폰트 대기 — 그렇지 않으면 반쯤 페이드 아웃되거나 이전 스크롤 위치에서 샷이 나옵니다.

각 선택 적용

템플릿: 오픈 소스 → 요청된 경우 프로젝트에 클론/스캐폴드. 그렇지 않으면 → 위와 같이 페이지별로 재현, 홈/랜딩부터 시작.
컴포넌트: 무료이면 설치 또는 복사, 게이트되었으면 재현; 그런 다음 적응: 하드코딩된 색상을 프로젝트 테마 토큰으로 교체, 반경과 글꼴 일치, 실제 props/데이터 연결, 데모 콘텐츠 제거, 접근성 확인 (포커스 상태, 레이블, 대비, 애니메이션 요소의 prefers-reduced-motion).
테마: 토큰을 프로젝트의 글로벌 CSS (:root 및 .dark)에 쓰고, 글꼴 가져오기 및 --radius 업데이트, 그런 다음 브라우저에서 하드코딩된 색상이 남아 있지 않은지 확인.
적용 후 실행 중인 앱에서 확인 (스크린샷)하고 자연스러운 다음 모드를 제안하십시오.

원칙

참신함보다 일관성. 하나의 모션 언어, 하나의 반경 척도, 하나의 악센트. 시스템을 깨뜨리는 멋진 컴포넌트에 거절하십시오.
브리핑 존중. 모든 추천은 그것이 제공하는 브리핑 부분을 명명합니다.
사용자가 보는 것. 옵션은 디자인과 적합성에 대해서만 평가됩니다. 가격, 무료/유료/"플랜 필요" 상태, 또는 조각이 어떻게 얻어질지(설치, 복사, 재현, "React에서 재구축")를 비교 페이지나 채팅 요약에 절대 표시하지 마십시오. 모든 옵션은 단순히 사용 가능합니다. 그래도 무거운 종속성(three.js, WebGL 셰이더), 성능/접근성 트레이드오프, 사용자 프로젝트의 변경 크기(예: "≈12줄 CSS, HTML 변경 없음")는 언급하십시오.
크레딧 및 라이선스. 복사하는 코드에 작성자 표시를 유지하십시오. 상업용 프로젝트에 복사하기 전에 라이선스를 확인하십시오. 재현된 작업은 모양에서 영감을 받은 원본 코드입니다 — 원본의 텍스트, 이미지 또는 브랜딩을 포함하지 않습니다.
사용자 언어로 대화. 이 스킬의 지침은 영어로 되어 있지만, 사용자가 작성하는 언어로 응답하십시오.

무드보드 리믹스