INSANE0777/Awwwards-mcp

해결하는 문제

이 프로젝트는 AI 에이전트가 Awwwards에서 고품질 디자인 영감과 기술 청사진을 얻을 수 있는 능력을 제공합니다. 아름다운 웹사이트를 보는 것과 그것이 정확히 어떻게 구축되었는지 이해하는 것 사이의 격차를 해소하여, 에이전트가 복잡한 웹 디자인을 분석, 재현, 검증할 수 있게 합니다.

작동 방식

코딩 에이전트에 연결되는 MCP(모델 컨텍스트 프로토콜) 서버로 작동합니다. 라이브 스크래핑과 로컬 SQLite 인덱스를 결합하여 색상, 태그 또는 기술로 웹사이트를 검색합니다. 사이트가 선택되면 에이전트는 심층 포렌식을 수행할 수 있습니다: 페이지 구조 매핑, 모션(스크롤/호버 애니메이션) 기록, 기술 스택 핑거프린팅, 3D 캔버스 포즈 캡처까지. 마지막으로 이러한 결과를 기능적인 Vite, Astro 또는 Next.js 프로젝트로 변환하고 원본 사이트와 비교하여 빌드 품질을 검증할 수 있습니다.

대상 사용자

Claude Code, Cursor, Cline과 같은 AI 코딩 에이전트를 사용하는 개발자를 위해 설계되었으며, 고급스럽고 모션이 풍부한 웹사이트를 구축하고 전문적인 디자인 패턴을 체계적으로 연구하고 복제할 필요가 있는 사람들을 대상으로 합니다.

하이라이트

• 디자인 DNA 추출: 모든 사이트의 색상 팔레트, 기술 스택, 수상 이력을 추출합니다.
• 모션 포렌식: 라이브 URL에서 스크롤 트리거 애니메이션, 호버 상호작용, GSAP 타임라인을 캡처합니다.
• 자동 재구축: 분석된 페이지 구조를 즉시 실행 가능한 프레임워크 프로젝트로 변환합니다.
• 검증 엔진: 밴드 맵 비교와 모션 핑거프린트 차이를 사용하여 참조 사이트와 비교해 빌드를 점수화합니다.
• 범용 도구: 대부분의 분석 도구(캡처, 인구 조사, 검증)는 Awwwards 수상 사이트뿐만 아니라 모든 URL에서 작동합니다.
• 오프라인 우선: API 키나 계정 없이 작동하며, 로컬 SQLite 캐시를 사용하여 빠르고 안정적인 데이터 액세스를 제공합니다.