Leonxlnx/taste-skill GitHub 저장소 설치 및 활용 가이드
코딩 에이전트에게 디자인 감각을 부여하는 taste-skill 설치 및 활용 방법을 안내합니다. Claude Code, Codex 등 다양한 환경에서의 설치를 지원합니다. 출처: https://github.com/Leonxlnx/taste-skill
taste-skill 소개
taste-skill은 코딩 에이전트에게 디자인 방향, 참조 이미지, 브라우저 확인 기능을 제공하여 일반적인 AI 페이지와 차별화된 결과물을 생성하도록 돕는 에이전트 스킬 모음입니다. 특히 프롬프트 엔지니어링 및 코드 생성 시 시각적 요소를 효과적으로 통합하고자 할 때 유용합니다.
설치 방법
taste-skill 저장소의 모든 스킬을 설치하려면 터미널에서 다음 명령어를 사용합니다:
npx skills add https://github.com/Leonxlnx/taste-skill
특정 스킬만 설치하고 싶다면 --skill 옵션과 함께 설치 이름을 지정하세요. 예를 들어, design-taste-frontend 스킬만 설치하려면 다음 명령어를 사용합니다:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
기본적으로 이 스킬은 Node 22 이상과 설치된 Chrome, Edge 또는 Chromium 브라우저를 사용하여 스크립트를 실행합니다. 별도의 API 키나 설정이 필요 없으며, 이미지 검색을 위해 네트워크 접근이 필요합니다.
Claude Code 환경에서의 설치
Claude Code 내에서 taste-skill을 사용하려면 다음 플러그인 명령어를 실행합니다. 스킬은 taste-skill: 네임스페이스 아래에 설치되어 다른 스킬과의 충돌을 방지합니다.
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill
나중에 업데이트하려면 /plugin update 명령어를 사용합니다.
Codex 환경에서의 설치
Codex 환경에서는 다음 명령어를 사용하여 플러그인을 설치합니다.
codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill
설치 후에는 새로운 Codex 세션을 시작하여 스킬이 로드되도록 해야 합니다.
로컬 저장소 클론 후 연결 설치
저장소를 직접 클론하여 링크 방식으로 설치할 수도 있습니다. ./install.sh 스크립트를 사용하면 스킬이 Claude Code 또는 Codex 환경에 심볼릭 링크로 연결됩니다. --codex 옵션은 Codex용, --all-agents 옵션은 Claude Code와 Codex 모두에 적용됩니다. 이 방식을 사용하면 git pull 명령어로 스킬을 최신 상태로 유지할 수 있습니다. 설치된 모든 스킬의 이름 목록은 ./install.sh --list 명령어로 확인할 수 있습니다.
이미 스킬이 설치된 경우, 설치 명령어를 다시 실행해도 됩니다. 설치 이름은 변경되지 않으며 이전 버전은 별도로 유지됩니다.
활용 사례
상황 1: 웹사이트 디자인 시 시각적 참고 자료 부족
사용자: 웹사이트의 사용자 인터페이스(UI) 디자인을 개선하고 싶은 개발자.
문제: 원하는 디자인 방향을 명확히 제시할 시각적 참고 자료가 부족하여 AI에게 구체적인 스타일을 지시하기 어렵습니다.
활용 단계: design-taste-frontend 스킬을 사용하여 원하는 스타일의 이미지 검색 및 분석을 요청합니다.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
이후, AI에게 "이런 스타일의 랜딩 페이지 디자인 이미지를 찾아줘"와 같은 프롬프트를 사용하여 관련 시각 자료를 얻고, 이를 바탕으로 디자인 개선 방향을 설정합니다.
결과: AI가 생성하는 디자인 시안이 보다 명확한 시각적 방향성을 가지게 되며, 개발자는 이를 바탕으로 만족스러운 UI를 구현할 수 있습니다.
상황 2: 코드 생성 시 디자인 컨셉 적용 어려움
사용자: 특정 디자인 컨셉을 가진 프론트엔드 컴포넌트를 생성하려는 개발자.
문제: AI가 생성하는 코드가 일반적이거나 원하는 디자인 컨셉과 거리가 멥니다.
활용 단계: Claude Code 환경에서 taste-skill 플러그인을 설치하고, taste-skill:design-taste-frontend를 활용하여 디자인 컨셉을 명시적으로 전달합니다.
/plugin install taste-skill@taste-skill
이후, AI에게 "미니멀리즘 디자인 컨셉에 맞는 버튼 컴포넌트 코드를 생성해줘. 참조 이미지는 [URL]을 참고해" 와 같이 구체적인 지시와 함께 스킬을 사용합니다.
결과: AI가 사용자의 디자인 의도를 더 잘 이해하고, 명시된 컨셉에 부합하는 코드를 생성하여 개발 생산성을 향상시킵니다.