Taste Skill: AI가 만든 '뻔한 화면'을 막아주는 오픈소스 스킬, 사용법부터 주의사항까지

AI의 등장으로 작업은 빨라졌지만 개성은 사라지고 있습니다. 지식이 보편화되면서 누구나 원하는 작업을 이전보다 빠르게 처리할 수 있게 되었지만, 결과물이 비슷한 패턴과 디자인으로 수렴하는 경향이 뚜렷합니다.

이런 흐름 속에서 AI 코딩 도구가 만드는 밋밋하고 뻔한 화면을 막고 디자인 완성도를 높이기 위한 오픈소스 스킬이 등장했습니다. 바로 Taste Skill입니다. AI 모델에 탑재된 추론 능력과 디자인 규칙을 활용해, 뻔한 디자인을 뻔하지 않게 수정합니다.

이 글에서는 Taste Skill이 무엇인지, 기존 AI 도구들과 다른 점은 무엇인지 살펴보고, 실제 기능 테스트를 통해 파악한 주의사항까지 정리했습니다. 

Taste Skill이란?

* 이미지 출처: Taste Skill 메인 홈페이지

Taste Skill은 개발자 Leonxlnx가 만든 오픈소스 스킬로, AI 코딩 도구가 만드는 프론트엔드(사용자가 보는 화면)의 완성도를 높여주는 규칙 모음입니다.

스스로를 '안티 슬롭(Anti-Slop) 프론트엔드 프레임워크'라 부르는데, 여기서 '슬롭(slop)'은 AI가 대충 찍어낸 듯한 결과물을 뜻합니다. 즉 AI가 만든 티가 나는 밋밋한 화면을 막아준다는 의미입니다.

작동 방식은 AI 에이전트의 작업을 도와주는 '스킬' 형태로 SKILL.md라는 파일을 통해 이루어집니다.

컴포넌트 라이브러리나 브라우저 플러그인이 아니기 때문에 특정 프레임워크에 묶이지 않고 React, Vue, Svelte 등 어떤 환경에서도 쓸 수 있습니다.

Taste Skill이 주목받는 이유

'AI가 만든 티'를 줄여줍니다.

AI로 웹 화면을 만들면 코드는 잘 나오지만, 디자인은 대개 비슷비슷합니다. 큰 그라데이션, 큰 둥근 모서리, 중앙 정렬된 카드 세 개처럼 전형적인 패턴이 반복됩니다. 

Taste Skill은 이런 기본값 대신, 화면의 성격에 맞는 레이아웃과 여백, 타이포그래피를 적용하도록 유도해 결과물이 AI가 만든 템플릿처럼 보이지 않게 합니다.

리뷰 부담을 앞단으로 옮깁니다. 

AI로 디자인 작업을 할 때, 다 만든 뒤에야 어색함을 느껴 고치는 경우 많죠? 결과물이 나온 뒤에 방향을 되돌리게 되면 토큰 비용도 만만치 않습니다. 

Taste Skill은 AI가 코드를 짜기 전에 디자인 방향부터 정하게 해, 어긋난 방향으로 가는 것을 미리 막습니다. 

AI 에이전트가 큰 작업을 시작하기 전에 계획부터 세우듯, 처음부터 방향을 잡아 더 효율적으로 작업해 불필요한 재작업을 줄일 수 있습니다. 

상황에 맞게 골라 쓸 수 있습니다. 

Taste Skill은 하나의 규칙이 아니라 목적별로 나뉜 여러 스킬의 모음입니다. 차분하고 고급스러운 느낌, 미니멀한 편집 디자인, 거친 브루탈리즘 스타일 등 원하는 방향을 고를 수 있습니다. 

또 디자인 실험성, 모션 강도, 정보 밀도를 1~10으로 조절하는 다이얼이 있어, 같은 스킬도 세기를 바꿔 쓸 수 있습니다. 이 세밀함이 다른 디자인 스킬과의 차별점을 만듭니다.

Taste Skill 사용법

* 이미지 출처: Taste Skill 깃허브 저장소

Taste Skill의 설치 방법은 Taste Skill 깃허브 저장소에 나와있는데요. 사용법을 하나씩 차근차근 알려드리겠습니다.

Taste Skill 설치하기

Taste Skill은 명령어 한 줄로 설치할 수 있습니다. 명령어에 따라 전체 스킬 또는 Taste Skill에서 제공하는 일부 스킬만 따로 설치할 수도 있는데, 처음이라면 전체 스킬을 한 번에 설치하는 방법을 추천드립니다.

위의 명령어를 입력하면 저장소의 모든 스킬(코드용 10개, 이미지용 3개)을 설치할 수 있는 목록을 불러옵니다.

설치를 실행하기 전에 필요한 도구(skills 패키지)를 먼저 깔아도 되냐고 확인하는 메시지가 나옵니다. y를 입력하고 엔터를 누르면 설치가 진행됩니다.

설치 가능한 스킬 목록이 나옵니다. 스페이스 바를 눌러 원하는 스킬을 선택합니다.

스킬 목록을 선택하면 어떤 에이전트에 설치할지 선택하는 화면이 나옵니다. Codex부터 Cursor, Claude Code 등 총 72개의 에이전트에 설치할 수 있습니다.

• Universal (.agents/skills): 항상 포함되는(always included) 공용 설치 영역입니다. Amp, Cline, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode, Warp, Zed 등이 여기에 속하며, 따로 체크하지 않아도 자동으로 설치됩니다. Codex나 Cursor를 쓰고 있다면 이미 설치 대상에 포함되어 있는 셈이죠.
• Additional agents: Universal에 포함되지 않은 에이전트를 직접 골라 추가하는 영역입니다. Claude Code, AiderDesk, Augment 등이 목록에 보이는데, 각 항목 옆에 설치 경로가 함께 표시됩니다. 예를 들어 Claude Code를 선택하면 .claude/skills 경로에 스킬이 설치됩니다.

스킬을 어디에 설치할지(설치 범위, Installation scope) 선택하는 화면이 나옵니다. 아래 두가지 옵션 중 원하는 것을 선택합니다.

• Project: 현재 디렉토리(지금 작업 중인 프로젝트)에만 설치합니다. 괄호 설명에 나온 것처럼 Git에 커밋되어 팀원들과 공유됩니다.
• Global: 사용자 계정 전역에 설치합니다. 특정 프로젝트에 묶이지 않고, 내 컴퓨터에서 여는 모든 프로젝트에서 이 스킬을 쓸 수 있습니다.

스킬 파일을 실제로 어떤 방식으로 설치할지(설치 방법, Installation method) 선택하는 화면입니다. 두 가지 옵션이 있습니다.

• Symlink (Recommended): 스킬 원본 파일을 한 곳에 두고, 각 에이전트 폴더에는 그 원본을 가리키는 바로가기(심볼릭 링크)만 만듭니다. 단일 원본(single source of truth)이라 관리가 깔끔하고, 나중에 스킬을 업데이트하면 원본 하나만 고쳐도 모든 에이전트에 자동으로 반영됩니다.
• Copy to all agents: 스킬 파일을 각 에이전트 폴더마다 실제로 복사해서 넣습니다. 에이전트별로 독립된 사본이 생기지만, 업데이트할 때는 모든 사본을 각각 다시 설치해야 합니다.

에이전트가 상황에 맞는 스킬을 스스로 찾아보고 추천해주도록 돕는 find-skills라는 별도의 스킬도 같이 설치할지 물어보는 화면이 나옵니다. 

여러 개의 스킬을 사용한다면 설치를 고려하는 것이 좋고 그렇지 않다면 No를 선택하는게 좋습니다.

설치된 항목들을 정리하는 화면과 함께 설치 완료 메시지가 나옵니다. 이제 설치가 완료되어 사용할 수 있습니다. 

Taste Skill 성능 테스트

Taste Skill의 성능을 테스트해보겠습니다. SaaS 랜딩 페이지 히어로 섹션을 만드는 상황에서, 정보 밀도가 높은 화면을 깔끔한 위계로 정리해주는지 확인해보겠습니다. 테스트에 사용한 프롬프트는 아래와 같습니다.

프롬프트 A - 적용 진행 요청

프롬프트 B - 비적용 진행 요청

프롬프트 A - 적용 진행 요청 결과

프롬프트 B - 비적용 진행 요청 결과

작업 결과물을 확인해 보니 디자인뿐만 아니라 기능까지 완전히 다른 결과물이 생성됐습니다. 미적용 버전이 '요구사항을 충족한 화면'이라면, 적용 버전은 '메시지를 전달하는 화면'으로 만들어졌습니다.

프롬프트 요청에 그대로 부합하는 건 미적용 버전입니다. 제목, 부제목, CTA 버튼, 보조 버튼, 제품 스크린샷 영역이라는 구성 요소를 지정한 대로 배치했고, 스크린샷 자리에 플레이스홀더를 넣은 것도 요청한 '이미지 영역'을 있는 그대로 반영한 결과입니다.

반면 적용 버전은 요청 범위를 넘어섰습니다. 스크린샷 영역을 문서에서 회의, 코드 리뷰로 이어지는 카드 구성으로 바꿨고, 요청하지 않은 브랜드명과 로고까지 만들어 넣었습니다. 디자인 완성도는 높지만 프롬프트에 정확히 부합하는 결과물이라고 보기는 어렵습니다.

정리하면 Taste Skill은 완성도를 끌어올리는 대신, 지정한 요구사항을 그대로 따르기보다 스스로 판단해 재해석하는 경향을 보였습니다.

Taste Skill, 어떤 작업에 활용할 수 있을까

원하는 디자인 스타일 지정하기

디자인 방향이 이미 정해졌다면 그에 맞는 스킬을 골라 적용할 수 있습니다. 부드러운 대비와 넉넉한 여백의 차분한 UI(soft-skill), Notion·Linear 스타일의 미니멀한 편집형 UI(minimalist-skill), 스위스 타이포그래피에 거친 구조와 강한 대비를 살린 산업풍(brutalist-skill)처럼 스타일별로 스킬이 나뉘어 있습니다. 

방향이 확정된 상태에서 해당 스킬만 얹으면, 매번 길게 설명하지 않아도 원하는 스타일이 일관되게 반영됩니다. 그래서 브랜드 톤이 정해진 랜딩 페이지나 소개 화면을 만들 때 유용합니다.

기존 사이트 개선하기

Taste Skill은 새로 만드는 작업뿐 아니라 이미 있는 화면을 다듬는 데도 쓸 수 있습니다. 기존 사이트를 여섯 가지 항목으로 점검해 밋밋한 패턴을 찾아 고치도록 안내하는 리디자인 스킬(redesign-skill)과, AI가 플레이스홀더나 건너뛴 섹션을 남기며 대충 끝내지 않도록 결과물을 끝까지 완성하게 강제하는 스킬(output-skill)이 있습니다. 처음부터 새로 만들지 않고도 기존 디자인의 완성도를 끌어올릴 수 있습니다.

디자인 참고 이미지 먼저 만들기

본격적인 개발에 앞서 화면 방향을 먼저 잡아야 할 때도 활용할 수 있습니다.

 웹사이트 참고 이미지를 만드는 스킬(imagegen-frontend-web), 모바일 화면 컨셉을 만드는 스킬(imagegen-frontend-mobile), 로고와 색상 시스템을 담은 브랜드킷 이미지를 만드는 스킬(brandkit)이 나뉘어 있어, 원하는 디자인의 느낌을 코드 작업 전에 빠르게 확인할 수 있습니다. 

이 스킬들은 코드가 아니라 참고용 이미지만 출력합니다. 생성한 이미지를 분석해 그대로 코드로 구현하는 과정까지 한 번에 잇고 싶다면 별도의 스킬(image-to-code-skill)을 쓰면 됩니다. 

시안을 먼저 확인하고 마음에 드는 방향을 코드로 넘기는 방식이라, 디자인 워크플로를 훨씬 효율적으로 가져갈 수 있습니다.

Taste Skill 사용 시 주의사항 4가지

적용 대상이 정해져 있습니다

Taste Skill은 모든 디자인에 통하는 도구가 아닙니다. 랜딩 페이지나 포트폴리오, 기존 사이트 리디자인처럼 디자인 판단이 결과물의 인상을 좌우하는 화면에서 강점이 드러납니다. 

반대로 대시보드나 데이터 테이블, 여러 단계로 이뤄진 제품 화면은 애초에 겨냥한 대상이 아닙니다. 실제로 같은 프롬프트로 대시보드를 만들어봤을 때 스킬 적용 여부에 따른 차이가 거의 느껴지지 않았는데, 이런 화면에서는 규칙 대부분이 발동하지 않기 때문입니다. 

구조가 정형화된 화면이라면 별도의 디자인 시스템을 쓰는 편이 낫습니다.

요청을 그대로 따르기보다 스스로 판단합니다

Taste Skill은 요청을 받으면 사용자가 실제로 원하는 방향을 먼저 추론한 뒤, 그에 맞다고 판단한 디자인을 스스로 구현하는 성격을 가지고 있습니다. 그래서 지정한 요소를 있는 그대로 배치하기보다, 더 낫다고 본 방향으로 바꾸거나 요소를 덧붙이는 경우가 있습니다. 

직접 테스트했을 때도 제품 스크린샷 자리를 카드 구성으로 바꾸고, 요청하지 않은 브랜드명과 로고까지 만들어 넣었습니다. 

완성도는 올라가지만 정해진 스펙을 정확히 구현해야 하는 작업에서는 통제가 어려운 셈입니다. 반드시 지켜야 할 문구나 구성이 있다면 프롬프트에 미리 명시해두는 것이 안전합니다.

버전과 도구에 따라 결과가 달라집니다

Taste Skill은 세부 규칙이 꾸준히 바뀌고 있습니다. 기본 스킬은 2026년에 v2로 크게 개편됐고, 아직 실험 단계라 규칙이 계속 다듬어지는 중입니다. 그래서 설치 시기에 따라 같은 작업을 시켜도 다른 결과가 나올 수 있습니다. 

안정적인 결과가 중요하다면 이전 버전을 따로 지정해 고정하는 방법이 있습니다. 또 SKILL.md 파일을 읽어 작동하는 방식이라, Cursor나 Claude Code, Codex처럼 도구마다 파일을 해석하는 정도가 달라 결과물에 차이가 생기기도 합니다.

목적이 겹치는 스킬을 한꺼번에 쓰지 않는 것이 좋습니다

Taste Skill은 역할이 다른 여러 스킬로 나뉘어 있고, 전부 한꺼번에 쓸 필요는 없습니다. 

스타일 스킬은 방향이 정해졌을 때만 하나를 골라 얹고, 리디자인이나 출력 보완처럼 목적이 다른 스킬은 필요한 상황에서만 더하는 방식이 좋습니다. 

‘목적이 겹치거나 상충하는 스킬을 동시에 적용하면 방향이 흐려지고, 어떤 규칙이 결과에 영향을 줬는지 파악하기 어려워집니다.

AI를 활용한 디자인 도구 사용법이 궁금하다면

Astryx, Meta가 공개한 AI 에이전트형 디자인 시스템 정리

Open Design 사용법: 클로드 디자인의 한도가 아쉬웠던 분들께

클로드 디자인(Claude Design) 사용법, 디자인 작업 방식이 달라지고 있습니다

AI 시대, IT 전문가의 기준이 바뀌었습니다.

AI가 완성도를 높여주더라도, 실제 서비스로 완성하는 일은 결국 전문가의 몫입니다. 도구를 도입한다고 결과가 저절로 나아지지는 않습니다. 

기업에 필요한 사람은 단순히 AI를 다룰 줄 아는 사람이 아니라, AI가 만든 결과를 판단하고 완성도를 검증하며, 시스템을 구축하고 오류와 품질까지 점검할 수 있는 전문가입니다. 

"27년의 매칭 데이터를 바탕으로 

프로젝트에 바로 투입가능한 IT 프리랜서를 매칭합니다."

이랜서는 27년간 쌓아온 노하우와 데이터를 바탕으로, AX·DX·클라우드·핀테크·개발·기획·디자인 등 주요 산업군에 IT 전문 프리랜서를 연결하는 검증된 매칭 플랫폼입니다.

• 삼성·SK·현대 등 주요 기업 프로젝트 매칭 8만 건 +
• 기업 프로젝트 재의뢰율 98% 

프로젝트를 실행하는 건 결국 사람입니다. 현장의 맥락을 이해하고 운영과 검증에 곧바로 뛰어들 수 있는, 프로젝트에 가장 적합한 IT 프리랜서를 매칭합니다.

▶ AI에 최적화된 전문 IT 프리랜서 매칭받기