Codex와 Claude Code에서 Taste Skill 사용하는 방법.

Taste Skill은 AI가 만든 웹사이트를 덜 뻔하게 만들어 주는 가장 유명한 디자인 스킬입니다. 2026년 11월 4일에 나온 버전 2.5는 회사·마케팅 웹사이트를 위한 전면 재구성입니다. 이 튜토리얼은 필요한 것, Codex와 Claude Code에 설치하는 방법, 빌드가 진행되는 과정, 더 잘 활용하는 방법을 다룹니다.

2026년 11월 6일 업데이트 · 7분 분량

Taste Skill 2.5가 하는 일

Taste Skill은 Leonxlnx가 만든 오픈소스 스킬(MIT 라이선스)로, design-taste-frontend라는 이름으로 설치됩니다. 버전 2.5는 담백한 카피, 하나의 디자인 시스템, 화면당 하나의 섹션, 같은 좌우 가장자리, 실제 사진, 실제 브랜드 아이콘, 실제 제품 UI로 회사 웹사이트를 만듭니다. 셰이더 효과와 스크롤 장면은 소프트웨어, 테크, 게임 페이지에만 쓰고, 에이전트가 결과를 넘기기 전에 체커가 실제 브라우저에서 모든 페이지를 검증합니다.

필요한 것

Node.js 22 이상.
Chrome, Edge, Chromium 중 하나. 특이한 위치에 설치되어 있다면 CHROME_PATH를 설정하세요.
선택: ffmpeg. WebP 사진과 히어로 사진의 모바일 크롭에 쓰입니다.

아무것도 따로 설치하지 않으며 API 키도 필요 없습니다. 번들된 사진은 오프라인에서 작동하고, 추가 사진, 폰트, 아이콘을 내려받으려면 네트워크가 필요합니다.

설치하기

Codex:

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

설치 후 새 Codex 세션을 시작해야 스킬이 로드됩니다.

Claude Code:

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

Claude Code에서는 스킬이 taste-skill: 네임스페이스로 표시됩니다. 나중에 업그레이드하려면 /plugin update를 실행하세요.

npx skills CLI를 지원하는 모든 에이전트:

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

이전 버전을 이미 설치했다면 같은 설치 명령을 다시 실행하세요. 설치 이름은 바뀌지 않았습니다.

페이지 만들기

에이전트에게 회사 웹사이트를 만들거나 리디자인해 달라고 요청하세요. 스킬이 알아서 로드되어 에셋을 프로젝트에 복사하고 스타터 페이지에서 출발합니다. 이 스킬은 내용을 중심으로 만들어졌으므로 실제 재료를 주세요. 이름, 사업 내용, 실제 숫자, 영업시간, 있다면 사진까지.

회사 웹사이트 브리프

[리스본에 있는 24석 규모의 작은 해산물 바 Ostra]의 웹사이트를 만들어 줘. 영업시간은 [화요일부터 토요일까지 오후 6시부터 자정까지]이고, 메뉴는 [그날 아침에 잡은 해산물에 따라 매일] 바뀌고, 예약은 [전화번호와 Instagram]으로 받아. Taste Skill로 마크업을 쓰기 전에 화면별로 페이지를 먼저 설계하고, 페이지를 넘기기 전에 체커를 실행해 줘.

모든 빌드는 같은 단계를 따릅니다.

업종을 분류합니다. 소프트웨어, 게임, 테크, 제품, 서비스, 장소 중 하나로 나누고 화면별로 페이지를 계획합니다.
토큰과 레이아웃을 뽑습니다. 스크립트가 해당 페이지 유형에 맞는 팔레트와 Google Fonts 조합, 그리고 검증된 히어로 레이아웃 11가지 중 하나를 뽑아 줍니다.
하나의 시스템에서 시작합니다. 1440×900에서 화면당 섹션 하나, 같은 좌우 가장자리, 고정된 내비게이션 바, 마무리 푸터.
실제를 보여 줍니다. 소프트웨어와 테크에는 제품 UI 조각과 다이어그램, 장소, 상점, 서비스에는 엄선하고 출처를 표기한 사진을 씁니다.
효과는 테크와 게임에만 씁니다. 카페, 호텔, 상점, 스튜디오, 서비스에는 WebGL이나 스크롤 효과를 쓰지 않습니다.
실제 브라우저에서 확인합니다. 너비 1440, 1024, 768, 390픽셀에서 빈 비주얼, 대비 저하, 어긋난 컬럼, 플레이스홀더 텍스트 등을 잡아냅니다.

기존 페이지를 리디자인하려면 같은 방식으로 요청하세요. 스킬은 무엇이든 바꾸기 전에 브라우저에서 현재 페이지를 먼저 점검합니다.

도구를 직접 실행하기

모든 도구는 스킬 폴더 안의 평범한 Node 스크립트입니다. 알아 둘 만한 것은 두 가지입니다.

# Deal a palette and font pairing for a kind of page
node scripts/start.mjs deal --page software

# Check a built page (a URL or a file) against the rules
node scripts/consistency.mjs <url or file> --page software

체커는 규칙마다 PASS, WARN, FAIL을 출력하므로 페이지가 왜 아직 어색한지 빠르게 알 수 있습니다.

다른 Taste 스킬은 어디로 갔나

저장소에는 이제 스킬이 하나만 있습니다. 이전의 스타일 스킬(high-end-visual-design, minimalist-ui, industrial-brutalist-ui, gpt-taste, stitch-design-taste)은 Leonxlnx/taste-skill-classics로, 이미지 우선 스킬(imagegen-frontend-web, imagegen-frontend-mobile, brandkit, image-to-code)은 Leonxlnx/imagegen-skills로 옮겨졌습니다. 설치 이름은 그대로입니다.

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

다른 도구가 나은 경우

모바일 앱과 대시보드. 버전 2.5는 웹사이트용입니다. 앱 화면이라면 Impeccable과 UI UX Pro Max를 보거나, 디자인 시스템 라이브러리의 앱 시스템에서 시작하세요.
기존 브랜드가 있을 때. Taste Skill은 자체 팔레트와 폰트를 뽑습니다. 브랜드에 이미 있다면 DESIGN.md에 적어 두고 에이전트에게 그것을 유지하라고 말하세요.
방향 중에서 고르고 싶을 때. 빌드마다 팔레트, 폰트 조합, 히어로 레이아웃을 하나씩 뽑습니다. 여러 룩을 비교하고 싶다면 첫 화면을 두세 가지 버전으로 요청해 나란히 놓고 보세요.

자주 묻는 질문

Taste Skill은 무료인가요?

네. MIT 라이선스의 오픈소스입니다. 제작자는 스킬과 디자인 에이전트가 내장된 무료 오픈소스 데스크톱 앱 TasteCode도 제공합니다.

Taste Skill은 React나 Next.js에서도 쓸 수 있나요?

네. 스킬이 만드는 평범한 HTML을 그대로 배포해도 되고, 에이전트에게 같은 토큰, 섹션 레이아웃, 검사를 React, Next.js, Vue, Svelte, Astro, Tailwind로 옮기라고 요청해도 됩니다.

Taste Skill에 Chrome이 필요한 이유는 무엇인가요?

체커가 코드를 믿는 대신, 헤드리스 Chrome에서 네 가지 너비로 각 페이지를 렌더링해 대비나 정렬 같은 규칙을 직접 검증하기 때문입니다.