| 한눈에 보기 | |
|---|---|
| 저장소 | Leonxlnx/taste-skill |
| 개발 | Leonxlnx (개인) |
| GitHub 스타 | 104,211 (이번 주 +3,941) |
| GitHub 트렌딩 | 주간 전체 8위 |
| 포크 | 7,051 |
| 주 언어 | JavaScript |
| 라이선스 | MIT |
| 공개일 | 2026-02-19 |
| 최신 릴리스 | v2.1.5 (2026-10-24) |
AI 코딩 에이전트에게 웹사이트를 맡기면 결과물이 어디서 본 듯한 '평균적인 랜딩 페이지'로 수렴하는 경우가 많다. 개인 개발자 Leonxlnx가 공개한 Leonxlnx/taste-skill은 이 문제를 에이전트 스킬(Agent Skill)로 푼다. 이번 주에만 스타가 3,900개 이상 늘며 GitHub 주간 트렌딩 전체 8위에 올랐고, 클로드 코드·코덱스·커서 등 주요 코딩 에이전트에서 쓸 수 있다.
무엇을 하나: 웹 디자인 에이전트 스킬
핵심은 에이전트가 페이지를 '조립'하지 않고 '디자인'하게 만드는 것이다. README는 세 가지를 제공한다고 설명한다.
- 아트 디렉션: 20가지 조사된 디자인 방향 중 무작위로 세 개를 제시하고, 에이전트가 하나를 고른다.
- 실제 이미지: 위키미디어 커먼즈, 오픈버스(Openverse), 메트로폴리탄 박물관 등 공개 컬렉션에서 사진을 찾아 출처를 표기한다. 퍼블릭 도메인, CC0, CC BY, CC BY-SA 파일만 쓴다.
- 브라우저 검수: 실제 브라우저에서 세 가지 너비로 페이지를 확인하고, 상투적 결과물(슬롭)이면 실패 처리한다.
v2.1부터는 대시보드와 관리자 화면 같은 앱 화면도 별도 경로로 다룬다고 밝혔다.
작동 방식: 여섯 단계 빌드
개발팀은 큐레이션한 247개 사이트를 분석한 결과를 바탕으로 스킬을 구성했다고 설명한다. 빌드는 여섯 단계로 진행된다.
- 브리프를 읽고 해당 고객만 가진 소재를 정리한다.
- 스크립트가 20개 방향 중 세 개를 제시하고 에이전트가 선택한다.
- 고객의 소재와 방향을 한 문장으로 묶는 핵심 아이디어를 정한다.
- 공개 컬렉션의 사진·영상으로 제작한다.
- 실제 브라우저에서 세 가지 너비로 검사한다.
- 스스로 스크린샷을 보고 가장 큰 문제 세 가지를 최대 세 차례 고친다.
v2.1은 첫 화면의 제목, 균등한 여백, 불규칙한 빈 공간 같은 페이지 프레임도 점검하고, 어워즈(Awwwards) 최근 사이트 100개를 측정해 움직임 규칙에 반영했다고 한다. 앱 화면은 inspect.mjs --app 규칙으로 정렬된 수치, 데이터에만 쓰는 색 등을 검사한다.
써보면
npx skills CLI로 설치한다.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
클로드 코드에서는 플러그인으로도 설치할 수 있다.
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill
코덱스는 codex plugin marketplace add Leonxlnx/taste-skill 후 codex plugin add taste-skill@taste-skill을 실행한다. 클론한 저장소에서는 ./install.sh로 심볼릭 링크를 걸어 git pull만으로 갱신할 수 있다.
최근 업데이트: v2.1.5
지난 24일 나온 v2.1.5는 커뮤니티 제보를 반영한 수정 릴리스다.
charts.js와Stage.split대체 경로가 삽입 텍스트를 이스케이프해, 사용자 데이터의 라벨이나 제목으로 마크업이 주입되던 문제를 막았다.- 모든 컨트롤이 키보드로 동작하고 접근성 이름을 갖도록 고쳤다.
- 보스카(Boska), 이로드(Erode), 센티언트(Sentient) 서체의 이탤릭이 로드되도록 했다.
- 개발 서버가 아닌 프로덕션 빌드를 검사하도록 안내하고, 개발 서버를 보고 있으면 검사기가 경고한다.
누구에게 유용한가
디자이너 없이 에이전트로 랜딩 페이지를 만드는 1인 개발자와 스타트업, 에이전트 산출물의 'AI 티'를 줄이고 싶은 프런트엔드 개발자에게 맞다. README에 따르면 React, Vue, Svelte, 순수 HTML 등 프레임워크를 가리지 않는다. 기존 페이지를 실제 브라우저에서 점검한 뒤 고치는 리디자인 용도도 지원한다.
의의와 한계
라이선스는 MIT다. 올해 2월 저장소가 만들어졌고 v2 이후 v2.1.5까지 빠르게 이어졌지만, 개인 프로젝트라는 점은 감안해야 한다. 노드(Node) 22 이상과 크롬·엣지·크로미움이 필요하고, 사진 검색에는 네트워크가 필요하다. 개발팀은 한 번 빌드에 30~45분, 수십만 토큰이 든다고 밝혀 비용 부담이 작지 않다. 또 공개 이미지는 직접 보유한 자료로 교체하는 것이 좋다고 안내한다. 이전 스킬들은 별도 저장소(taste-skill-classics, imagegen-skills)로 옮겨졌다.
