Communitygithub.com

uxKero/anydesign

이미지, 웹사이트, Figma 파일을 분석하여 토큰 시스템, 컴포넌트 인벤토리, 재구성 노트가 포함된 구조화된 design.md를 생성하는 Claude 스킬입니다.

anydesign란 무엇인가요?

이 스킬은 디자이너와 개발자가 이미지, 웹사이트, Figma 파일 등 다양한 디자인 입력 소스를 분석하여 일관된 디자인 시스템 문서를 자동으로 생성할 수 있도록 도와줍니다. Claude 데스크톱 앱, Claude Code, Cursor, Codex 등 주요 AI 에이전트 플랫폼에서 사용할 수 있습니다. 이 스킬은 분석 결과를 구조화된 마크다운 파일(design.md)로 출력하며, 여기에는 디자인 토큰(색상, 타이포그래피, 간격 등), 컴포넌트 인벤토리(버튼, 입력 필드, 카드 등), 그리고 재구성 노트(프로젝트에 디자인을 적용하기 위한 구체적인 단계)가 포함됩니다. SKILL.md에는 시스템 요구 사항, 설치 가이드, 사용 예시, 각 기능의 상세한 동작 방식이 설명되어 있어 AI 에이전트가 이 스킬을 정확히 실행하고 결과를 해석하는 데 도움을 줍니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add uxKero/anydesign

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

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

문서

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

이미지, 웹사이트, Figma 파일을 분석하여 토큰 시스템, 컴포넌트 인벤토리, 재구성 노트가 포함된 구조화된 design.md 파일을 생성하는 Claude 스킬입니다.

기능

  • 이미지, 웹사이트 URL, Figma 파일 링크 등 다양한 입력 소스 지원
  • 디자인 토큰(색상, 타이포그래피, 간격 등) 자동 추출
  • 컴포넌트 인벤토리(버튼, 입력 필드, 카드 등) 생성
  • 재구성 노트 제공

사용 방법

Claude에게 이미지, 웹사이트 URL, 또는 Figma 파일 링크를 제공하면 자동으로 분석을 시작합니다.

예시

이 웹사이트 디자인을 분석해줘: https://example.com

출력

분석 결과는 design.md 파일로 저장되며, 다음 섹션을 포함합니다:

  1. 디자인 토큰 - 색상, 폰트, 간격 등의 시스템
  2. 컴포넌트 인벤토리 - 사용된 UI 컴포넌트 목록
  3. 재구성 노트 - 코드로 재구현하기 위한 가이드

관련 스킬