브라우저 검수와 레퍼런스로 화면 품질을 높이는 에이전트 스킬

발행 2026.10.23출처 GitHub · github.com

깃허브사례준전문가

후원자

interfaces.dev · Jakub Krehel의 디자인 엔지니어링 매거진
React Bits · 창의적인 인터페이스를 위한 애니메이션 React 컴포넌트
IMG.LY · CreativeEditor SDK
Sent.dm · SMS, WhatsApp, RCS용 메시징 API

후원하기

Taste Skill은 코딩 에이전트가 흔한 랜딩 페이지를 조립하는 대신 웹사이트와 앱 화면을 디자인하도록 만드는 에이전트 스킬입니다. 에이전트에게 아트 디렉션과 실제 사진, 그리고 실제 브라우저에서 자신의 작업을 확인하는 방법을 제공합니다.

이 스킬이 단 하나의 브리프만으로 만든 페이지들:

사진은 모두 실제 사진이며, 공개 아카이브에서 찾아 스킬이 출처를 표기했습니다(출처). 출시 영상을 보세요.

설치

shell

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

그러면 npx skills CLI로 스킬이 설치됩니다.

이 스킬은 Node 22+와 설치된 Chrome, Edge 또는 Chromium으로 스크립트를 실행합니다. 아무것도 설치하지 않으며 API 키도 필요 없습니다. 이미지를 찾으려면 네트워크 접근이 필요합니다.

Claude Code 플러그인

Claude Code 안에서 아래 명령을 실행하세요. 이 스킬은 taste-skill: 네임스페이스를 사용하므로 다른 스킬과 충돌하지 않습니다.

코드

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

나중에 /plugin update를 실행하면 업그레이드됩니다.

Codex 플러그인

shell

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

그다음 새 Codex 세션을 시작해야 스킬이 로드됩니다.

복제본에서, 복사 대신 링크로 연결

./install.sh는 스킬을 Claude Code에 심볼릭 링크로 연결합니다(Codex에는 --codex, 둘 다에는 --all-agents), 따라서 git pull로 제자리에서 업데이트됩니다.

이미 스킬이 있나요? 설치 명령을 다시 실행하세요. 설치 이름은 바뀌지 않았습니다. 이전 스킬 중 하나를 찾고 있나요? Moved skills를 보세요.

v2의 동작 방식

이 스킬은 엄선된 247개 사이트에 대한 연구를 바탕으로 만들어졌습니다. 빌드는 여섯 단계로 진행됩니다.

브리프를 읽고 이 클라이언트만 가진 것을 나열합니다.
스크립트가 조사한 20가지 방향 중 3개를 뽑고, 에이전트가 하나를 선택합니다.
아이디어를 찾습니다: 클라이언트 고유의 자료와 그 방향을 하나의 문장으로 엮습니다.
공개 컬렉션에서 가져온 실제 사진과 영상으로 빌드하고, 출처를 표기합니다.
실제 브라우저에서 세 가지 너비로 페이지를 점검하고, 엉성하면 실패 처리합니다.
자체 스크린샷을 보고 가장 큰 문제 3가지를 고쳐 최대 3회 반복합니다.

빌드에는 대략 30~45분과 수십만 토큰이 듭니다. 자세한 내용은 변경 로그와 연구에 있습니다.

대시보드와 앱 화면(v2.1)은 별도의 경로를 따릅니다. 이 스킬은 실제 제품 화면에서 추려낸 앱 스타일 중 하나를 뽑아, 그 숫자에 맞춰 쉘, 데이터, 차트, 표를 만들고, 앱 규칙으로 결과를 점검합니다. 즉, 조용한 패널, 정렬된 수치, 데이터에만 색을 쓰기, 내비게이션이 접히는 휴대폰 레이아웃을 적용합니다. 제품의 랜딩 페이지는 보여 주는 앱을 같은 방식으로 만들기 때문에, 스크린샷이 실제로 동작하는 제품처럼 보입니다.

v2.1은 또한 모든 페이지의 프레임도 점검합니다(첫 화면에 분명한 제목, 같은 여백, 섹션이 한쪽으로 몰리지 않음, 이유 없는 빈 여백이 없음). 그리고 최신 Awwwards Site of the Day 100개를 기준으로 측정한 강한 수상작 사이트들이 움직이는 방식도 따릅니다.

이동한 스킬

이 저장소에는 design-taste-frontend 하나의 스킬만 들어 있습니다. 다른 스킬들은 각자의 저장소로 옮겨졌고, 설치 이름은 그대로 유지됩니다.

설치 이름	현재 위치

`high-end-visual-design`, `minimalist-ui`, `industrial-brutalist-ui`, `gpt-taste`, `stitch-design-taste`, `design-taste-frontend-v1`, `design-taste-frontend-v2-experimental`	Leonxlnx/taste-skill-classics
`imagegen-frontend-web`, `imagegen-frontend-mobile`, `brandkit`, `image-to-code`	Leonxlnx/imagegen-skills
`redesign-existing-projects`	실제 브라우저에서 기존 페이지를 감사한 뒤에야 변경하는 `design-taste-frontend`의 일부
`full-output-enforcement`	제거됨. 같은 문제에 대해서는 Leonxlnx/unlazy 를 보세요

이동한 스킬은 새 저장소에서 같은 이름으로 설치하세요.

shell

npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill "high-end-visual-design"

자주 묻는 질문

이 스킬에는 무엇이 필요한가요? Node 22 이상과 Chrome, Edge 또는 Chromium이 필요합니다. 아무것도 설치하지 않으며 API 키도 사용하지 않습니다. 인터넷은 이미지를 찾을 때만 필요합니다.

사진은 어디에서 오며, 사용해도 되나요? Wikimedia Commons, Openverse, The Met 같은 공개 컬렉션에서 가져옵니다. 퍼블릭 도메인, CC0, CC BY, CC BY-SA 파일만 제공되며, 스킬이 페이지에 출처를 표시합니다. 자신의 자료가 있으면 그것으로 교체하세요.

React, Vue, Svelte, 일반 HTML에서도 작동하나요? 네. 규칙은 프레임워크가 아니라 디자인에 관한 것입니다.

대시보드와 앱 화면용인가요? 네, v2.1부터 그렇습니다. 이 스킬은 페이지와 앱 화면을 구분하고, 자체적인 실행 방식으로 대시보드, 관리자 화면 또는 설정 화면을 만듭니다. 실제 제품 화면을 연구해 얻은 스타일, 차분한 패널, 사실적인 데이터와 차트, 그리고 자체 점검(inspect.mjs --app)을 갖추고 있습니다.