Communitygithub.com

designer

Designer(designeer.xyz) 검색 — 랜딩 페이지, 히어로, 내비게이션, 푸터, 가격 페이지, 포트폴리오 등 실전 프론트엔드 참고 자료를 위한 엄선된 디자인 영감, UI 리소스, 도구 및 포트폴리오 카탈로그입니다.

designer란 무엇인가요?

Designer는 실제 웹사이트 기반의 디자인 참고 자료를 찾는 개발자와 AI 에이전트를 위한 전문 스킬입니다. 랜딩 페이지, 히어로, 내비게이션, 푸터, 가격 페이지, 포트폴리오 등 구체적인 디자인 유형을 검색하거나, 디자인이 '평범하다'는 피드백에 대해 실제 사례를 제시할 때 사용합니다. 지원하는 컬렉션은 inspiration(영감), resources(리소스), tools(도구), portfolios(포트폴리오)이며, 명령어 기반 CLI를 통해 메타데이터와 마크다운만 검색합니다. 검색 결과는 항상 원작자와 출처를 함께 표시하며, 미디어 파일을 다운로드하거나 재배포하지 않습니다. 캐싱, 속도 제한, ETag 재검증 등을 내장하여 안정적이고 효율적인 참고 자료 검색 환경을 제공합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/HaiXuNan/designeer-skill/tree/HEAD

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

designer은(는) 무엇을 하나요?

Designeer를 참조 인덱스로 사용하세요. 재료 라이브러리가 아닙니다. 무엇이 존재하고 어디에 있는지 알려줄 뿐입니다. 실제 저작물은 원작자에게 귀속됩니다.

필수 규칙

  • 항상 Designeer — <제목>(<정식 URL>)을 인용하고, 페이지에서 제공할 경우 제작자 및 원본 URL도 함께 명시하세요.
  • 포스터, 비디오, Find 미디어를 다운로드, 복사, 재호스팅하거나 번들로 제공하지 마세요. CLI는 cdn.designeer.xyz를 절대 접근하지 않습니다.
  • Designeer의 설명이나 큐레이션을 자신의 발견인 것처럼 제시하지 마세요.
  • 한 페이지에서 25단어 이상 인용하지 마세요.
  • 카탈로그를 미러링하거나 대량 크롤링하지 마세요. 상세 정보 가져오기는 요청당 최대 5개로 제한하고 CLI의 캐싱 및 속도 제한 처리를 맡기세요.
  • 사용자가 디자인을 정확히 복제해 달라고 요청하면, 기본 원칙을 전달하고 원본을 가리키세요. 클론을 만들지 마세요.

명령어

스킬 디렉터리에서 실행하세요:

node scripts/designeer.mjs search "핀테크 랜딩" --collection inspiration --limit 5
node scripts/designeer.mjs get resources/fontshare --json
node scripts/designeer.mjs palette resources/fontshare
node scripts/designeer.mjs latest --collection resources --limit 5
node scripts/designeer.mjs sync
node scripts/designeer.mjs health

search 명령은 --collection inspiration|resources|tools|portfolios, --limit 1-20, 로컬 인덱스를 우회하는 --live, --json 플래그를 지원합니다. get과 palette 명령은 슬러그, 사이트 경로 또는 전체 Designeer URL을 인자로 받습니다.

CLI는 응답을 ~/.cache/designeer/에 7일간 캐싱하고, 해당 경로에 쓸 수 없으면 시스템 임시 디렉터리로 대체하며, ETag로 재검증하고, 요청 간 1초 간격을 두며, 429/5xx 오류 시 백오프와 함께 재시도합니다. 캐시 위치는 DESIGNEER_CACHE_DIR 환경 변수로 재정의할 수 있습니다.

워크플로우

  1. 브리핑을 두세 가지 디자인 축(분위기, 정보 밀도, 움직임, 서체 성격, 색온도)으로 변환합니다.
  2. 메타데이터를 먼저 검색합니다. 이름, 태그라인, 카테고리, 컬렉션을 기준으로 판단하고, 아직 상세 정보는 가져오지 않습니다.
  3. 최대 5개 후보의 상세 정보를 가져옵니다. 마크다운에서 팔레트, 카테고리, 웹사이트, 원작자를 추출합니다.
  4. 후보당 하나의 참조 카드를 작성하고 출처를 명시합니다.
  5. 두 가지 독창적인 방향을 종합합니다. 각 방향은 어떤 원칙을 차용했는지 밝히고, 어떤 픽셀을 복사했는지가 아닌 어떤 개념을 빌렸는지 서술합니다.
  6. 구현한 후, 참조 스크린샷 대신 방향성에 맞춰 결과물을 점검합니다.

참조 카드

참조: <제목>
적합한 이유: <브리핑과 연결된 한 줄>
팔레트: <16진수 목록>
출처: Designeer — <제목>(<정식 URL>)
제작자 / 원본: <제작자>(<원본 URL>)

디자인 방향

방향 <n>: <이름>
논제: <한 문장>
서체: <패밀리 또는 페어링>, <크기 관련 참고사항>
색상: <역할이 포함된 3~5개의 토큰>
레이아웃: <그리드, 밀도, 가장자리 처리>
모션: <한두 가지 동작과 지속 시간, 이징 의도>
차용 원칙: <무엇을, 어떤 참조에서>
의도적으로 다르게 한 점: <복사하지 않은 부분>

실패 모드

  • 검색 결과가 없으면: 더 포괄적인 명사를 사용하거나, 컬렉션을 바꾸거나, latest를 사용하세요.
  • 사이트 구조가 변경되면: health를 실행하세요. 스키마 불일치가 보고되면 get index와 llms.txt로 대체하고, 추측하지 말고 변경 사항을 보고하세요.
  • 페이지가 사라지면: Designeer는 실시간 카탈로그이므로, 참조를 기억에서 재구성하지 말고 제거하세요.

관련 스킬