Awwwards의 디자인 영감을 제공하는 오픈소스 MCP 서버

Awwwards에서 AI 에이전트에게 디자인 영감을 제공하는 무료 오픈 소스 MCP 서버입니다. 웹상의 최고의 수상작 웹사이트에서 가져온 Mobbin 스타일의 시각적 레퍼런스 루프를 제공합니다.

에이전트는 자연어("다크 3D 포트폴리오 사이트", "소프트 파스텔 이커머스")로 검색하고, 실제 스크린샷을 인라인으로 확인하며, 모든 웹사이트의 디자인 DNA를 추출할 수 있습니다. 여기에는 색상 팔레트, 기술 스택(tech stack), 디자인 요소, 수상 기록 등이 포함됩니다.

자유 텍스트 검색은 포터 스테밍(porter-stemmed) 및 접두사 일치(prefix-matching) FTS5 인덱스를 사용하며 BM25 순위 지정 방식을 적용합니다. 이제 "magazines"는 Magazine 태그가 지정된 사이트(실시간 인덱스에서 68개)를 검색하며, 이전의 부분 문자열 경로 방식이 결과가 없던 경우에도 가장 적합한 일치 항목을 먼저 찾습니다. 다중 단어 검색은 AND 의미론(AND semantics)을 유지합니다: 모든 토큰은 동일한 사이트에 해당해야 합니다.

viewport: "mobile"로 390×844인 iPhone급 렌더링을 지정하거나 ("desktop" 기본값은 1440×900) 실행합니다. (playwright 필요). |
analyze_page_structure |
페이지의 섹션별 밴드 맵(실시간 URL 또는 로컬 파일:// 빌드): 각 밴드의 태그, 배경, 오프셋, 높이. 참고 사이트의 구조를 사용자의 빌드와 비교합니다. 무거운 사이트에 적합한 대기 시간(waitStrategy: "networkidle" 사용 가능); viewport: "mobile"은 휴대폰급 레이아웃을 분석하고 ("desktop" 기본값). (playwright 필요). |
record_site_motion |
선택 사항: 실시간 URL의 짧은 움직임 영상 — 프리로더, 스크롤 트리거 및 호버/커서 애니메이션. 인라인 필름스트립 JPEG와 저장된 .webm 경로를 반환합니다. viewport: "mobile"은 휴대폰 크기로 녹화하며 — 필름스트립은 선택한 뷰포트에서 렌더링되어, 레터박싱이 없습니다 ("desktop" 기본값). (playwright + ffmpeg-static 필요). |
search_elements |
무료 텍스트로 영감 요소 갤러리(푸터, 히어로, 가격 책정, 404 등)를 검색합니다; 제목/저자/카테고리보다 BM25 점수를 우선합니다. |
get_element |
하나의 요소 기록: 제목, 카테고리, 저자, 빌드 스택, 관련 요소 및 awwwards CDN을 가리키는 미디어 URL(이미지 또는 비디오). |
get_motion_dna |
실시간 URL의 런타임 움직임 지문: 애니메이션 라이브러리, 렌더 엔진, ScrollTrigger 통계(트리거 개수, 스크럽 비율), 트윈 이징/지속 시간 어휘 및 스크롤 모델. 새로운 캡처 또는 타임스탬프가 찍힌 캐시된 캡처. |
search_motion |
라이브러리, 스크롤 모델 또는 이징 어휘로 이전에 캡처한 움직임-DNA 스캔을 검색합니다 — 사이트의 움직임을 통해 레퍼런스를 찾습니다. |
new_winners |
오늘 새로 선정된 수상작(SOTD / 개발자상 / 명예 언급)을 지속적인 기준선과 비교하여 투표합니다. 첫 번째 호출은 목록을 시드하고 덤프하며; 이후 호출은 차이점만 보고합니다. 각 신규 수상작의 요소 섹션은 검색 가능한 요소 코퍼스에 백필되므로, 새로운 수상작은 즉시 요소 검색이 가능합니다. |
watch_site |
스튜디오, 태그 또는 특정 사이트에 대한 지속적인 관찰(추가/목록/제거).

list는 각 작품을 가장 최신 캐시된 목록과 대조하여 작품별 NEW since last check 변화량(delta)을 보고하며, 데이터를 가져오지 않습니다. new_winners /search_sites가 풀(pool)을 최신 상태로 유지합니다. |

데이터 포스터(Data posture): 요소 기록은 awwwards 자체 CDN을 가리키는 메타데이터와 미디어 URL만 저장하며, 아무것도 미러링하지 않습니다. Motion DNA 기록은 로컬 캡처이며, 각각 촬영된 시간으로 스탬프가 찍힙니다.

v1.0.0 — 첫 번째 안정화 버전입니다. MCP 호환 코딩 에이전트라면 누구나 awwwards-mcp를 사용할 수 있습니다. API 키나 계정이 필요 없습니다.
Node ≥ 22.13 (node -v로 확인)가 필요합니다. 사용하려는 에이전트를 선택하세요:

업데이트: 서버는 매일 npm 레지스트리를 확인하고, 더 새로운 awwwards-mcp가 존재할 경우 표준 오류(stderr)에 알림을 출력합니다 (표준 출력(stdout)은 JSON-RPC 채널용으로 깨끗하게 유지되어 에이전트가 이 알림을 로그 라인으로 인식합니다). 서버의 env에 AWWWARDS_AUTO_UPDATE=1을 설정하여 백그라운드 셀프 업데이트를 활성화할 수 있습니다. 이후 에이전트를 다시 시작하면 적용됩니다. 하루에 한 번 이상 데이터를 가져오지 않으며, 서비스 제공 시 확인(check)을 기다리지 않습니다.

Claude Code

claude mcp add awwwards -- npx -y awwwards-mcp

codex mcp add awwwards -- npx -y awwwards-mcp

또는 ~/.codex/config.toml에서:

(프로젝트 범위: .codex/config.toml):

[mcp_servers.awwwards]
command =

**pi coding agent**는 설계상 내장된 MCP가 없습니다. 대신 스킬(skills)과 확장 기능(extensions)을 사용합니다. 두 가지 옵션이 있습니다:**

- `awwwards-inspiration` 스킬을 설치합니다 (아래 참조). pi는 `~/.pi/agent/skills/` 또는 `~/.agents/skills/`에서 스킬을 읽습니다 (후자는 Agent Skills 표준을 따르는 모든 에이전트가 공유합니다). 이 스킬은 워크플로우를 가르치며, 라이브 데이터에 접근하려면 MCP를 지원하는 pi 확장 기능을 추가하거나 다른 에이전트에서 쿼리를 실행하여 결과를 붙여넣어야 합니다. - MCP 사용을 완전히 건너뛰기: pi에게 awwwards.com 주변의 작은 CLI 래퍼(wrapper)를 구축하도록 요청하거나, 공유 스킬 디렉토리(`~/.agents/skills/`)를 사용하여 동일한 스킬 파일이 pi와 다른 모든 에이전트에 서비스되도록 할 수 있습니다.

**선택적 전체 페이지 캡처 (필요한 기능: `capture_live_site`, `analyze_page_structure`, `record_site_motion`):**

```bash
npm install -g playwright && npx playwright install chromium

record_site_motion은 추가적으로 ffmpeg을 사용합니다. 이 패키지는 ffmpeg-static 패키지가 존재하면 자동으로 해결합니다.

이 패키지는 네 가지 에이전트 스킬을 제공합니다. Agent Skills 표준을 따르는 모든 에이전트는 이를 로드할 수 있습니다. 다음 명령어를 사용하여 에이전트의 스킬 디렉토리에 복사하세요:

npm install awwwards-mcp
mkdir -p ~/.agents/skills && cp -r node_modules/awwwards-mcp/skills/awwwards-inspiration node_modules/awwwards-mcp/skills/awwwards-setup node_modules/awwwards-mcp/skills/awwwards-doctor node_modules/awwwards-mcp/skills/awwwards-motion-study ~/.agents/skills/ 

search_sites는 기본적으로 작동하지만(out of the box), 그 깊이는 정중한 라이브 스크래핑(~필터 페이지당 31개 사이트)에 의해 제한됩니다. 로컬 인덱스를 한 번 구축하면 수천 개의 수상작 사이트에서 즉시 검색할 수 있습니다:

npx -y -p awwwards-mcp awwwards-index # 게시 후 한 번만 실행
# 또는, 이 저장소의 로컬 체크아웃에서:
pm run index

• 모든 ~200개의 태그 페이지를 초당 1 요청으로(약 4분 소요) ~/.awwwards-mcp/에 있는 로컬 SQLite 캐시로 크롤링합니다. - 재개 가능(Resumable): 중단했다가 다시 실행할 수 있으며, 완료된 페이지는 건너뜁니다. - MCP 서버는 인덱스가 7일보다 오래되었을 때 백그라운드에서 자동으로 재색인(re-indexes)하며(세션을 방해하지 않음). 완료된 크롤링 체크포인트는 지워져서 매번 새로고침할 때마다 실제로 태그 페이지를 다시 방문하게 됩니다. 진행 상황이나 마지막 크롤링 오류를 확인하려면 get_index_status를 실행하세요.

search_elements

tool은 첫 번째 갤러리 페이지(~48개 항목)를 최초 사용 시 자동 인덱싱합니다. 전체 코퍼스(~1,500+개 항목, 48개/페이지 기준 ~15페이지):

npm run index -- --elements all # 소진될 때까지 페이지네이션을 따라 진행
npm run index -- --elements 10 # 첫 10개 목록 페이지

첫 페이지를 넘어 크롤링할 경우 분류학(taxonomy) 패스도 실행됩니다. 모든 속성 페이지(/elements/footer/, /elements/cta/, … 46개 카테고리)가 한 번 가져와지고, 그 아래의 각 요소는 해당 카테고리로 태그가 지정되므로, search_elements의 'category' 필터가 코퍼스 전체에서 작동합니다. 요소 페이지에는 브레드크럼(breadcrumb)이 없기 때문에 이 목록 측 패스가 유일한 카테고리 출처입니다. 속성 페이지에서 보이지 않은 요소는 unsorted로 유지됩니다.

요소 행은 제목, 작성자, 카테고리 및 슬러그 토큰으로 검색됩니다 (슬러그는 FTS5 인덱싱 컬럼이며, 이전 스키마 버전에서 열린 캐시는 최초 열림 시 검색 인덱스를 자동으로 재구축합니다). 각 요소는 또한 해당 수상 사이트가 어디서 왔는지에 대한 슬러그(siteSlug/siteUrl in search_elements/get_element 결과)를 가지고 있습니다. 두 개의 요소 목록과, 새로운 SOTD(Site of the Day) 우승자의 자체 요소 섹션에서 new_winners에 의해 백필된 source:"site" 레코드는 — 그 슬러그가 site-<siteslug>-<title>로 네임스페이스 지정되어 두 가지가 충돌하지 않습니다. 요소 인덱스는 사이트 인덱스와 동일한 7일 신선도 게이트를 가집니다 — 이 기간 내에 재실행하면 스스로 건너뜁니다.

사이트 세부 정보(팔레트, 기술 스택)는 여전히 온디맨드로 가져와져 7일 동안 캐시됩니다. Awwwards 페이지 및 CDN 요청은 응답 본문 읽기를 포함하여 시도당 10초의 마감 시간을 가집니다. 일시적인 페이지 실패는 한 번 재시도되지만, 블록(403/429) 및 CDN 실패는 재시도되지 않습니다.

• awwwards.com 공개 페이지에 대해 실시간으로 정중하게 스크래핑합니다 (최대 1회 요청/초, robots.txt 준수 경로만 사용, SQLite의 ~/.awwwards-mcp/에서 7일 동안 캐시). - 스크린샷은 Awwwards 자체 CDN(880×660)에서 제공되며 디스크에 캐시됩니다.
• API 키, 계정, 비용이 없습니다.

이 도구는 개인적인 디자인 영감 활용 목적으로 공개적으로 사용 가능한 페이지를, 사람이 요청하는 속도에 맞춰, robots.txt를 준수하며 가져옵니다. Awwwards의 스크린샷과 콘텐츠는 Awwwards와 해당 크레딧을 받은 제작자의 자산이므로, 대량 스크래핑, 재배포 또는 재게시해서는 안 됩니다. 상업적으로 사용하려면 awwwards.com의 이용 약관을 직접 검토하십시오.

MCP가 가능하게 하는 전체 영감 루프를 통해 네 개의 완벽한 사이트가 구축되었으며, 서버의 도구와 배포된 awwwards-inspiration 스킬만을 사용했습니다. 각 사이트는 루프의 다른 영역을 활용했으며, 루프가 과정 중에 포착한 모든 수정 사항은 해당 스킬의 교리가 되었습니다.

비디오를 볼 수 없는 모델이 한 번에 구축한 것입니다. 세 사이트 모두 GLM 5.3-flash에서 단일 프롬프트 실행으로 만들어졌는데, 이 모델은 비디오 입력을 지원하지 않습니다. 루프의 모션 스터디는 녹화된 영상을 보는 대신 완전히 프레임 타일 필름스트립(ffmpeg, 요소당 1~2 fps)을 통해 작동했습니다. 비디오 네이티브 모델을 사용했다면, 동일한 get_site_elements 비디오와 record_site_motion .webm 파일을 직접 볼 수 있었을 것입니다— 타이밍, 이징(easing), 오버랩(overlap)을 완전한 충실도로 읽고 모션에 진실된 결과는 훨씬 더 좋을 것입니다. 현재 스킬의 프레임 타일 교리가 그 격차를 메우는 부분입니다.

전체 루프 실행 영상 보기 (1:50):