whit3rabbit/designer-mcp

디자이너 MCP — 리서치 우선 디자인

구현 전에 모든 디자인을 실제 제품 증거에 기반하세요. 이 스킬은 리서치 우선 방법론과 로컬, 무료 라이브러리(1,342개의 추출된 디자인 시스템)를 결합합니다.

리서치 라이브러리는 하나의 레이어로 구성됩니다:

1. 스타일 — 실제 웹 마케팅/제품 페이지에서 추출된 시각적 방향성과 취향.

화면과 플로우는 유료 Refero 제품에 존재하지만, 이 배포판에는 포함되지 않습니다. 화면 수준 또는 여정 수준의 질문에는 번들로 제공된 크래프트 레퍼런스와 사용자 자신의 자료를 사용하고, 선례를 지어내지 말고 솔직하게 말하세요.

불가침 원칙

• 디자인 작업 전 반드시 리서치. 모든 디자인은 구현 전에 레퍼런스에 기반해야 합니다. 모델의 일반적인 디자인 취향에 의존하지 마세요.
• 시각 작업에는 스타일을 먼저 사용. MCP 서버를 사용할 수 없으면 번들 크래프트 레퍼런스를 사용하고 동일한 레퍼런스 고정 워크플로우를 유지하세요.
• 하나의 레퍼런스를 복사하지 마세요. 여러 강력한 레퍼런스를 연구하고 사용자의 제품에 맞는 새로운 방향을 합성하세요.
• 레퍼런스를 안전한 중간값으로 평균화하지 마세요. 레퍼런스가 충돌할 때는 하나의 지배적인 방향을 선택하고 그 날카로운 특성을 보존하세요. 보조 레퍼런스는 좁은 세부 사항만 추가할 수 있습니다.
• 토큰 의미를 변경하지 마세요. 레퍼런스에서 색상, 글꼴, 반경, 그림자, 그라데이션 또는 컴포넌트가 특정 역할을 위해 지정되었다면, 해당 역할에만 사용하거나 생략하세요.
• 이미지 지침을 존중하세요. 스타일이 사진, 일러스트레이션, 제품 샷 또는 그래픽에 의존하는 경우 미디어 역할을 유지하세요. 가능할 때 실제/생성/스톡 에셋을 사용하고, 그렇지 않으면 아트 디렉션이 포함된 의도적인 플레이스홀더를 만드세요. 약한 CSS, 텍스트 또는 장식용 상자로 복잡한 이미지를 위조하지 마세요.
• 이 스킬을 사용할 수 있을 때 일반적인 프론트엔드/제품 디자인 스킬을 병렬 디자인 권위자로 사용하지 마세요. 이것이 디자인 방법론입니다. 일반적인 디자인 스킬은 작업을 일반적인 AI 디자인으로 끌어내리는 경향이 있습니다.
• 리서치 결과는 구체적이어야 합니다. 레퍼런스 이름을 지정하고, 구체적인 선택을 설명하고, 무엇이 적용될지 설명하세요.
• 분위기 메모리로 디자인하지 마세요. 모든 주요 시각적, 레이아웃, 콘텐츠 또는 상호작용 결정은 리서치, 사용자의 브리프 또는 크래프트 레퍼런스에 기반해야 합니다.
• 구현 전에 합성하세요. 리서치를 개념, 토큰 방향 및 구체적인 결정 원장으로 전환한 후에 그리거나 코딩하세요.
• 브리프는 빌드 대상이 아닙니다. 구현 전에 사용자 제공 시각적 소스, 기존 제품/디자인 시스템 대상, 선택된 생성 목업 또는 직접 빌드가 승인된 명시적 레퍼런스 고정 방향 중 하나를 고정하세요.
• 결과를 바꿀 때만 이미지 생성을 사용하세요. 이미지 생성은 느릴 수 있으며 모든 코딩 환경에 존재하지 않을 수 있습니다. 시각적 탐색, 목업, 이미지, 일러스트레이션, 텍스처 및 어려운 에셋에 사용하고, 작은 수정, 명백한 프로덕션 편집 또는 코드 네이티브 UI 작업에는 건너뛰세요.
• 시각 작업 후 검증하세요. 핸드오프 전에 렌더링된 구현을 고정된 대상/레퍼런스와 비교하세요. 리서치만으로 충분하다고 생각하지 말고 실행 가능한 디자인 드리프트를 수정하세요.

MCP 설정

이 스킬은 리서치 우선 디자인 방법론 및 크래프트 레퍼런스로서 그 자체로 유용합니다. 리서치는 어느 쪽이든 필수입니다. 가능할 때 MCP 도구를 라이브 스타일 리서치에 사용하고, 그렇지 않으면 번들 크래프트 레퍼런스와 사용자가 제공한 레퍼런스로 리서치하세요.

로컬 서버는 Docker에서 실행됩니다:

# MCP 서버 등록 (Hermes / 모든 stdio MCP 클라이언트)
hermes mcp add designer \
  --command docker \
  --args run --rm -i -v "$HOME/.refero-cache:/cache:ro" \
         designer-mcp:latest node scripts/mcp-entry.mjs

그런 다음 게이트웨이를 다시 시작하거나 (/reload-mcp) 도구가 등록되도록 하세요.

동일한 데이터의 브라우저 갤러리(썸네일, 견본, 타입 스케일):

cd designer-mcp-docker && docker compose up -d   # http://127.0.0.1:8787

전체 도구 세부 사항은 references/mcp-tools.md를 읽으세요.

발견

리서치 전에 짧은 디자인 브리프를 작성하세요. 결과를 실질적으로 변경할 누락된 정보에 대해서만 물어보고, 그렇지 않으면 합리적인 가정을 하고 진행하세요.

다음을 명확히 하세요:

• 무엇을 디자인하는지
• 플랫폼: 웹, iOS 또는 둘 다
• 대상 및 기술 수준
• 주요 사용자 목표
• 원하는 느낌 또는 브랜드 방향
• 극복해야 할 비즈니스/사용자 반대 의견
• 제약 사항: 기존 브랜드, 프레임워크, 마감일, 접근성, 콘텐츠
• 작업에 시각적 방향, 구체적인 UI 패턴, 여정 로직 또는 혼합이 필요한지
• 작업이 직접 코드로 가야 하는지, 먼저 시각적 옵션을 생성해야 하는지, 또는 구현 중에 생성된 에셋을 생성해야 하는지

브리프 형식:

[무엇]을(를) [누구]를 위해 [플랫폼]에서 디자인.
목표: [주 사용자 목표].
톤: [원하는 느낌].
주요 반대 의견/위험: [반대 의견].
기억할 점: [훅 또는 독특한 아이디어].
제약 사항: [제약 사항].
필요한 리서치: [스타일/화면/플로우].
경로: [직접 빌드 / 시각적 탐색 / 감사 / 에셋 생성].

워크플로우 라우팅

고품질 결과를 생성할 수 있는 가장 가벼운 워크플로우를 선택하세요.

• 직접 빌드: 작은 UI 수정, 명확한 프로덕션 편집, 기존 디자인 시스템 작업 또는 일치시킬 구체적인 소스가 있는 작업에 사용합니다. 방향을 리서치하고 고정한 다음 코드를 작성하세요.
• 시각적 탐색: 사용자가 변형, 새로운 시각적 언어, 주요 리디자인, 랜딩 페이지 또는 여러 그럴듯한 방향이 있는 기타 가시성이 높은 표면을 요청할 때 사용합니다. 기본적으로 세 가지 레퍼런스 고정 옵션을 제공하고 사용자에게 선택을 요청하세요. 자세한 내용은 references/visual-workflow.md를 참조하세요.
• 감사: 비평 전에 캡처된 스크린샷 또는 스타일 레퍼런스를 증거로 사용합니다.
• 에셋 생성: 코드, 아이콘 또는 기존 에셋이 충실하게 제공할 수 없는 비트맵 미디어가 레퍼런스 고정에 필요할 때만 생성된 이미지를 사용합니다. 자세한 내용은 references/visual-workflow.md를 참조하세요.

도구 라우팅

시각 작업에는 스타일을 먼저 사용

사용자가 시각적 구성 요소가 있는 무엇이든 디자인, 리디자인, 개선, 폴리싱 또는 생성을 요청할 때 refero_search를 사용하세요.

스타일은 실제 웹 마케팅/제품 페이지에서 추출된 의미론적 디자인 레퍼런스입니다. 스크린샷도 아니고 컴포넌트 라이브러리도 아닙니다. 검색 결과는 미리보기를 제공합니다. refero_get의 전체 스타일 레퍼런스는 시각적 논제, 토큰, 타이포그래피, 레이아웃/구성, 섹션 리듬, 간격, 입체감, 표면, 컴포넌트, 이미지 처리, 구현 노트, Do/Don't 규칙과 같은 디자인 지침을 제공합니다.

적용 범위: 웹 마케팅/제품 페이지 — 랜딩 페이지, 가격 페이지, 제품 마케팅 사이트, 에디토리얼 브랜드 사이트 및 SaaS 웹사이트. 인앱 대시보드, 인증 화면, 설정 화면 및 iOS 앱 화면은 스타일 시스템으로 다루지 않습니다. 제품 UI 작업의 경우 스타일에서 시각적 언어를 설정한 다음 제품 로직에 크래프트 레퍼런스를 사용하세요.

스타일을 사용하는 경우:

• 룩 앤 필
• 브랜드 방향
• 랜딩 페이지 및 마케팅 페이지
• 타이포그래피, 팔레트, 레이아웃, 섹션 구조, 간격, 반경, 입체감, 표면
• 컴포넌트 처리 및 때로는 컴포넌트/코드 예제
• 이미지 및 제품 스크린샷 처리
• 디자인 시스템 영감
• 일반적인 인터페이스를 더 세련되게 만들기

강력한 스타일을 찾은 후:

• 전체 세부 사항은 refero_get 사용
• 이식 가능한 DESIGN.md 아티팩트를 렌더링하려면 refero_design_md 사용
• 방향을 확정하기 전에 카탈로그에 실제로 포함된 글꼴, 색상, 테마 및 산업을 확인하려면 refero_facets 사용

제품 패턴 및 여정의 경우

이 배포판에는 화면 또는 플로우 레이어가 없습니다. 작업에 구체적인 UI 패턴(특정 화면 유형, 양식 상태, 가격 페이지 레이아웃) 또는 여정 로직(온보딩, 체크아웃, 취소)이 필요한 경우:

• 번들 크래프트 레퍼런스를 사용하세요 — 양식, 포커스, 빈 상태, 온보딩 패턴 및 전환 크래프트를 다룹니다.
• 제공된 경우 사용자의 기존 제품, 스크린샷 또는 디자인 시스템을 사용하세요.
• 이것이 레퍼런스 기반이 아닌 크래프트 기반임을 명시적으로 밝히세요.

조회하지 않은 선례를 지어내지 마세요.

이미지 및 QA에는 시각적 워크플로우 사용

이미지 생성, 시각적 옵션, 생성된 에셋 및 시각적 QA의 경우, 작업에 필요할 때 references/visual-workflow.md를 읽으세요.

리서치 워크플로우

1. 스타일을 사용한 시각적 방향 리서치

모든 시각적 디자인 작업의 경우 여기서 시작하세요.

권장 루프:

1. 3-5개의 다른 시각적 각도를 검색합니다.
2. 하나의 광범위한 미적 질문을 포함합니다.
3. 하나의 도메인/카테고리 질문을 포함합니다.
4. 관련될 때 하나의 알려진 브랜드 또는 강력한 제품 질문을 포함합니다.
5. refero_get으로 3-4개의 강력한 스타일을 검색합니다. 전체 스타일은 크므로 더 큰 리서치는 여러 배치로 나누세요.
6. 각 스타일의 기여를 비교합니다.
7. 하나의 기본 기반을 선택하고 다른 스타일에서 1-2개의 특정 세부 사항을 차용합니다.
8. 구현 전에 기본 레퍼런스의 특징적인 특성을 고정합니다.

좋은 스타일 질문 및 전체 추출 체크리스트(각 스타일에서 가져올 것: 논제, 유형, 색상 역할, 간격, 레이아웃, 컴포넌트, 이미지, 미디어 전략, Do/Don't 규칙)는 references/research-playbook.md에 나열되어 있습니다.

합성 규칙:

• 기본 스타일: 전체적인 분위기, 밀도 및 구조.
• 보조 스타일: 차용된 특정 세부 사항.
• 사용자 컨텍스트: 모든 것을 제품, 대상 및 작업에 맞게 조정합니다.
• 모든 레퍼런스의 평균/교집합을 사용하지 마세요. 하나의 레퍼런스가 어둡고, 하나는 선명하며, 하나는 세리프라면, 답은 따뜻한 크림 + 부드러운 주황 + 정중한 세리프가 아닙니다.

결과를 "X 복사"로 제시하지 마세요. 여러 레퍼런스에서 영감을 받은 새로운 방향으로 제시하세요.

구현 전에 레퍼런스 고정을 만드세요:

기본 레퍼런스/방향: [하나의 지배적인 출처]
보존: [반드시 유지해야 할 3-5가지 특성: 캔버스, 유형, 악센트, 레이아웃, 밀도, 미디어]
차용만: [1-2개의 특정 보조 세부 사항]
역할 규칙: [보존할 소스 토큰/컴포넌트 의미, 예: CTA 전용, 코드 전용, 장식 전용]
미디어 전략: [실제/생성/스톡/코드 네이티브/플레이스홀더, 종횡비 및 아트 디렉션 포함]
거부: [방향을 붕괴시킬 기본값/평균]
토큰 약정: [배경, 유형, 악센트, 반경, 테두리/그림자, 이미지 처리, 역할 포함]

구현이 고정에서 벗어나면 멈추고 수정하세요. 독특한 특성을 더 안전한 색상, 더 안전한 글꼴, 더 부드러운 반경 또는 일반적인 섹션 레이아웃으로 약화시키지 마세요. 레퍼런스 고정은 복제가 아닙니다. 콘텐츠, 브랜드 및 상호작용 세부 사항을 사용자의 제품에 적용하는 동안 선택된 특성을 보존합니다.

스타일을 결합할 때 각 출처에 제한된 작업을 할당하세요. 예를 들어: 한 출처는 캔버스/유형을 소유하고, 다른 출처는 코드 창 처리를 소유하고, 다른 출처는 기본 CTA를 소유할 수 있습니다. 토큰을 소스 역할 밖으로 이동하지 마세요: CTA 색상은 CTA 전용으로 유지하고, 구문 색상은 코드 내부에 유지하고, 장식용 그라데이션은 장식용으로 유지하고, 카드/버튼 규칙은 지정된 반경, 그림자 및 상태 동작을 유지합니다.

기본 스타일이 이미지 중심인 경우 텍스트 전용 레이아웃으로 대체하지 마세요. 필요한 이미지 또는 그래픽을 생성할 수 없으면 안정적인 치수, 종횡비, 캡션/대체 텍스트 및 짧은 아트 디렉션 노트로 슬롯을 보존하세요. 소스 스타일과 일치하는 경우에만 간단한 다이어그램, 아이콘, 코드 창 또는 기하학적 프리미티브를 빌드하세요.

상당한 시각적 탐색, 생성된 목업, 비트맵 에셋 또는 빌드 후 시각적 QA의 경우 references/visual-workflow.md를 따르세요.

2. 화면 레이어가 없는 제품 패턴

작업에 인터페이스에 무엇이 포함되어야 하는지 또는 실제 제품이 특정 UI 문제를 해결하는 방법을 알아야 할 때 크래프트 레퍼런스를 사용하세요.

필요	레퍼런스
양식 디자인, 포커스 상태, 빈 상태, 테이블, 온보딩 패턴	references/craft-details.md
CTA 카피, 신뢰 신호, 반대 의견 처리, 전환 구조	references/copywriting.md
컴포넌트/아이콘 선택	references/icons.md
유형 역할 및 계층 결정	references/typography.md
색상 역할, 대비, 팔레트 규율	references/color.md

다음에서 추출:

• 레이아웃 구조
• 정보 계층
• 컴포넌트 선택
• CTA 패턴
• 콘텐츠/카피 패턴
• 상태 및 엣지 케이스
• 신뢰 또는 전환 전술
• 적용할 가치가 있는 구체적인 세부 사항

3. 플로우 레이어가 없는 여정 로직

작업에 여러 단계가 있거나 사용자가 시간이 지남에 따라 상태를 변경하는 경우, 선례를 주장하지 말고 상호작용 패턴에서 추론하세요:

• 진입점 및 종료 상태
• 단계 수
• 사용자가 내리는 결정
• 마찰 감소 장치
• 필요한 확인
• 저장/복구 상태
• 오류 처리
• 유지 또는 설득 순간
• 각 단계에서의 시스템 응답

리서치 깊이 및 합성

작업 위험에 깊이를 맞춘 다음, 결과를 세 가지 버킷으로 분리하세요: 시각적 방향(스타일에서), 제품 패턴(크래프트 레퍼런스 및 사용자 자료에서), 여정 로직(상호작용 추론에서).

작업 유형별 깊이 사다리, 각 버킷의 출력 형식, 리서치 요약 템플릿 및 결정 원장 테이블은 references/research-playbook.md를 읽으세요.

디자인 크래프트

리서치 후에는 시니어 제품 디자이너처럼 실행하세요. 관련될 때만 번들 레퍼런스를 사용하고, 모든 파일을 기본적으로 로드하지 마세요.

• 타이포그래피: references/typography.md
• 색상: references/color.md
• 모션: references/motion.md
• 아이콘: references/icons.md
• 양식, 포커스, 이미지, 터치, 성능, 접근성: references/craft-details.md
• 카피라이팅 및 설득: references/copywriting.md
• AI 슬롭 방지 검사: references/anti-ai-slop.md