Nutlope/inspo

어떤 프로젝트인가요?

핵심 기능

• 01실제 웹사이트 832곳에서 캡처한 페이지 2,320개를 데스크톱과 모바일 환경에서 검색합니다
• 02복사해 붙여 넣을 수 있는 JSX가 포함된 참고 컴포넌트 68개를 제공합니다
• 03사이트별 색상 역할, 타이포그래피 스케일, CSS 변수가 담긴 DESIGN.md를 생성합니다
• 04여러 조회를 결합하는 recommend 도구를 포함해 MCP 도구 15개를 제공합니다
• 05npm을 통해 stdio로 실행하거나 호스팅된 Streamable HTTP 엔드포인트로 사용할 수 있습니다

활용 사례

• 랜딩 페이지를 만들기 전에 코딩 에이전트에 디자인 참고 자료 제공하기
• 활용할 만한 가격 안내 섹션, 히어로, 푸터의 실제 사례 찾기
• 영감을 얻기 위해 사이트의 색상 팔레트, 타이포그래피 스케일, 여백 확인하기
• 포함된 갤러리에서 엄선된 웹 디자인 사례 둘러보기

빠른 시작

1. 1

   사용 중인 MCP 클라이언트용 원커맨드 설치 프로그램을 실행하세요

   npx -y inspo-mcp install
2. 2

   또는 호스팅된 엔드포인트를 Claude Code에 추가하세요

   claude mcp add --transport http inspo https://inspomcp.dev/api/mcp
3. 3

   또는 저장소를 clone하고 종속 항목을 설치하세요

   git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install

사용 전 알아둘 점

• !아카이브는 정적 시드 데이터이므로 현재까지 수집된 사이트와 페이지만 포함합니다.
• !스크린샷의 권리는 원래 디자이너에게 있으며 저작권 및 삭제 요청의 대상이 됩니다.

토픽

자주 묻는 질문

inspo은(는) 무엇인가요?

실제 프로덕션 웹사이트의 스크린샷, 색상 팔레트, 글꼴, DESIGN.md를 검색 가능한 디자인 참고 자료로 코딩 에이전트에 제공하는 MCP 서버입니다. Inspo는 실제 프로덕션 웹사이트를 검색할 수 있는 아카이브로, Model Context Protocol (MCP)을 통해 코딩 에이전트에 제공합니다. 에이전트는 UI를 작성하기 전에 자신의 디자인 감각에만 의존하는 대신 아카이브에서 참고 자료를 검색할 수 있습니다. 현재 카탈로그에는 832개 사이트의 페이지 2,320개가 포함되어 있으며, 각 페이지는 데스크톱과 모바일 화면으로 캡처되고 색상 팔레트, 글꼴, 감지된 기술 스택, 화면을 스크롤하며 확인하는 구간별 분석 정보가 추출됩니다.

inspo은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

inspo은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

inspo은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. inspo의 마지막 커밋은 2026년 10월 1일입니다.

inspo은(는) 어디에 사용할 수 있나요?

랜딩 페이지를 만들기 전에 코딩 에이전트에 디자인 참고 자료 제공하기 활용할 만한 가격 안내 섹션, 히어로, 푸터의 실제 사례 찾기 영감을 얻기 위해 사이트의 색상 팔레트, 타이포그래피 스케일, 여백 확인하기 포함된 갤러리에서 엄선된 웹 디자인 사례 둘러보기

inspo는 어떻게 설치하나요?

사용 중인 MCP 클라이언트용 원커맨드 설치 프로그램을 실행하세요: npx -y inspo-mcp install 또는 호스팅된 엔드포인트를 Claude Code에 추가하세요: claude mcp add --transport http inspo https://inspomcp.dev/api/mcp 또는 저장소를 clone하고 종속 항목을 설치하세요: git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install

inspo은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/Nutlope/inspo