AllGoodInsp MCP 서버

AI 에이전트를 위한 엄선된 디자인 레퍼런스 데이터베이스입니다. 수백 개의 엄선된 웹사이트에서 구조화된 디자인 데이터(실제 CSS 값, 타이포그래피 사양, 색상 팔레트, 디자인 근거)를 검색하여 더 나은 웹 디자인을 생성하세요.

일반적인 프롬프트에서 생성하는 대신, AI가 품질 높은 사이트에서 실제 디자인 결정을 검색하고 이를 코드 준비가 완료된 사양으로 합성합니다.

빠른 시작

Claude Desktop / Claude Code / Cursor

MCP 구성에 추가하세요:

{
  "mcpServers": {
    "allgoodinsp": {
      "url": "https://mcp.allgoodinsp.com"
    }
  }
}

구성 파일 위치:

첫 연결 시 브라우저를 통해 Google OAuth 인증을 수행하라는 메시지가 표시됩니다.

API 키 인증

서버 간 통신이나 CI/CD 사용을 위해 allgoodinsp.com/account에서 API 키를 생성하고 Bearer 토큰으로 전달하세요:

Authorization: Bearer agi_your_key_here

기본 사용 흐름

AllGoodInsp를 사용하는 일반적인 디자인 워크플로우는 다음과 같습니다:

1단계: 방법론 로드

get_reference_guide()
get_methodology({ layers: ["principles", "patterns"] })

AI에게 디자인 어휘(범용 원칙: 타이포그래피, 레이아웃, 색상, 모션, IA)와 반복되는 패턴을 제공합니다. 세션당 한 번 로드하세요. 이것이 기초입니다: 레퍼런스 없는 방법론은 정확하지만 지루한 디자인을 만듭니다.

2단계: 레퍼런스 검색

search_sites({ query: "minimal SaaS landing page, confident and warm" })

구축하려는 내용을 자연어로 설명하세요(분위기, 목적, 미학). 검색은 3축 매칭(목적 + 분위기 + 대비 다양성)을 사용하여 다양하고 관련성 높은 결과를 반환합니다.

3단계: 레퍼런스 선택 및 읽기

get_site({ site_id: "stripe-com", detail: "full" })
get_site({ site_id: "linear-app", detail: "full" })
get_site({ site_id: "vercel-com", detail: "full" })

3개 이상의 레퍼런스를 선택하세요. 각 레퍼런스에는 CSS 값, 타이포그래피 사양, 색상 팔레트 및 디자인 근거가 포함되어 있습니다. 각 사이트를 특정 결정을 위한 전문가로 활용하세요. 평균을 내지 마세요.

4단계: 디자인 브리프로 합성

extract_essence({
  site_ids: ["stripe-com", "linear-app", "vercel-com"],
  brief: "SaaS landing page for a developer tool, confident and minimal"
})

extract_essence는 선택한 레퍼런스를 코드 준비가 완료된 디자인 사양(CSS 변수, 색상 팔레트, 타이포그래피 스케일, 간격 시스템, 섹션 구조 및 고정/탐색 가능한 경계가 있는 디자인 규칙)으로 결합합니다.

5단계: 빌드 및 검토

합성된 브리프를 사용하여 디자인을 빌드한 다음 품질 체크리스트를 실행하세요:

self_review()

디자인 안티 패턴, 제작 품질, 원칙 준수 및 IA 구조를 확인합니다.

도구

extract_essence — 기본 도구

2~5개의 사이트 레퍼런스를 코드 준비가 완료된 디자인 브리프로 합성합니다. CSS 변수, 색상 팔레트, 타이포그래피 스케일, 간격 시스템, 섹션 구조 및 고정/탐색 가능한 경계가 있는 디자인 규칙을 반환합니다.

extract_essence({
  site_ids: ["stripe-com", "linear-app", "vercel-com"],
  brief: "SaaS landing page for a developer tool, confident and minimal"
})

search_sites

분위기, 목적 또는 설명별로 모든 레퍼런스를 의미론적으로 검색합니다. 3축 검색(목적 + 분위기 + 대비 다양성)을 사용하여 다양한 결과를 반환합니다.

search_sites({ query: "warm editorial magazine layout" })
search_sites({ query: "bold fintech landing page", category: "software-saas" })

get_site

특정 사이트에 대한 전체 디자인 분석(색상 팔레트, 타이포그래피, 섹션, CSS 값과 근거가 포함된 컴포넌트)을 검색합니다.

get_site({ site_id: "stripe-com" })
get_site({ site_id: "stripe-com", detail: "full" })

search_by_component

특정 디자인 요소별로 사이트를 찾습니다. 모든 레퍼런스의 모든 컴포넌트를 검색합니다.

search_by_component({ query: "hero with video background" })
search_by_component({ query: "pricing table with toggle" })

get_methodology

디자인 방법론(범용 원칙, 제작 가이드라인, 반복되는 패턴 및 정보 아키텍처)에 액세스합니다.

get_methodology({ layers: ["principles", "patterns"] })

get_principles

특정 도메인에 대한 디자인 원칙입니다.

get_principles({ category: "typography" })
get_principles({ category: "color" })

사용 가능한 카테고리: typography, layout, color, motion, ia

get_patterns

여러 사이트의 증거를 바탕으로 컬렉션에서 추출한 반복되는 기술 조합입니다.

get_patterns()

get_reference_guide

디자인 레퍼런스를 효과적으로 읽고 결합하기 위한 가이드입니다.

get_workflow

레퍼런스로부터 디자인 시스템을 구축하는 AI 에이전트를 위한 자율 워크플로우입니다.

self_review

디자인 패턴, 안티 패턴, 제작 품질 및 정보 아키텍처에 대한 구현 후 품질 체크리스트입니다.

데이터 내용

각 레퍼런스에는 실제 웹사이트의 구조화된 디자인 결정이 포함되어 있습니다:

• 색상 팔레트 — 배경, 텍스트 기본/보조, CTA, 강조 색상(16진수 값 및 근거 포함)

• 타이포그래피 — 제목, 본문, 내비게이션, CTA를 위한 폰트 패밀리, 굵기, 크기, 줄 간격, 자간

• 관습 파괴 — 범위와 근거가 포함된 의도적인 디자인 원칙 위반 사례

• 섹션 — 히어로, 내비게이션, 콘텐츠, CTA, 푸터(각각 주요 디자인 결정 포함)

• 컴포넌트 — CSS 값, 원칙 레퍼런스 및 "이유" 설명이 포함된 개별 요소

3계층 지식 시스템

카테고리

에이전시, 전자상거래, 컨설팅, 소프트웨어/SaaS, 포트폴리오, 식음료, 호스피탈리티, 교육, 건강 및 웰니스, 미디어/편집, 딥테크, 건축, 비즈니스/금융, 채용 등.

REST API

MCP 외부에서 프로그래밍 방식으로 액세스할 수 있는 REST API도 제공됩니다.

기본 URL: https://api.allgoodinsp.com/v1

더 높은 속도 제한을 위해서는 인증이 필요합니다. allgoodinsp.com/account에서 API 키를 생성하세요.

링크

• 갤러리: allgoodinsp.com

• MCP 엔드포인트: https://mcp.allgoodinsp.com

• REST API: https://api.allgoodinsp.com/v1

• MCP 문서: allgoodinsp.com/docs/mcp

• API 문서: allgoodinsp.com/docs/api

라이선스

MIT