AI가 만드는 '촌스러운 UI' 이제 그만 — Taste Skill이 하루 1,100 별을 받은 이유

AI 코딩 에이전트가 만들어내는 UI를 보면 패턴이 있다. 회색 배경, Tailwind 기본값, 타이포그래피 없는 버튼, 어디서 본 듯한 카드 레이아웃. 커뮤니티는 이것을 슬롭(slop)이라 부른다. 이 문제를 정면으로 겨냥한 Taste Skill이 2026년 6월 8일 하루에만 1,104개의 별을 받으며 GitHub 트렌딩 상단에 올랐다. 누적 스타는 36,000개를 넘겼다.

이게 뭔가

에이전트 스킬이란 Claude Code·Codex·Cursor 같은 AI 코딩 도구에게 건네는 행동 지침 파일이다. 레시피가 아니라 조리 철학에 해당한다. '간격은 4px 단위, 모바일 퍼스트, 폰트 계층 세 단계 이내'처럼 디자인 원칙을 에이전트가 코드를 짜기 전에 읽게 만드는 구조다.

Taste Skill은 레이아웃·타이포그래피·모션·간격에 관한 규칙을 담은 스킬 파일 묶음이다. 에이전트에 적용하면 기본값 대신 좀 더 정제된 UI가 나온다. Shell 기반으로 작성되어 있어 도구를 가리지 않고 이식 가능하다는 점이 핵심 설계 원칙이다.

왜 지금 뜨는가

세 흐름이 교차했다. Claude Code·Codex 사용자가 폭발적으로 늘면서 'AI가 짠 UI는 다 비슷하게 생겼다'는 불만도 함께 터졌다. 바이브코딩 대중화의 역설이다. 비개발자도 프론트엔드를 만드는 시대가 됐지만 디자인 감각 없는 결과물이 범람하면서 노코드·로우코드의 품질 천장도 드러났다. Claude Code의 /skills 생태계가 성장하면서 단순 프롬프트를 넘어 에이전트 행동을 구조적으로 세팅하려는 에이전트 커스터마이제이션 붐이 그 뒤를 이었다.

Taste Skill은 디자인 감각을 설치한다는 개념 하나로 이 세 욕구를 동시에 건드렸다.

핵심 기능

레이아웃 스킬은 그리드·간격·정렬 원칙을 주입한다. 타이포그래피 스킬은 폰트 계층·행간·자간 기준을 제시하며 모션 스킬은 과하지 않은 애니메이션 패턴을 안내한다. 이미지 생성 스킬은 ChatGPT Images 등으로 레퍼런스 보드(웹·모바일·브랜드 키트)를 먼저 만들고 그 프레임을 Codex·Cursor·Claude Code에 넘겨 구현하는 워크플로우를 제공한다.

누구에게 쓸모 있나

바이브코더처럼 결과물이 코드보다 우선인 비개발자, 디자이너 없이 프론트를 만들어야 하는 1인 스튜디오·프리랜서 개발자, 반복 프로젝트에서 UI 품질 기준을 한 번에 세팅하려는 Claude Code·Codex 헤비 유저가 주요 대상이다.

시작하기

공식 README의 설치 가이드를 기준으로 한다.

# 레포 클론
git clone https://github.com/Leonxlnx/taste-skill.git

# 스킬 파일을 프로젝트의 에이전트 설정 경로에 복사
# Claude Code 기준 예시
cp -r taste-skill/skills/* .claude/skills/

Cursor는 .cursor/rules/, Codex는 해당 커스텀 인스트럭션 경로에 스킬 파일을 위치시킨다. MIT 라이선스이므로 상업 프로젝트에서도 자유롭게 사용 가능하다.

사용 예시

1. Claude Code에서 레이아웃 스킬 활성화

# Claude Code 프로젝트 루트에서 스킬 로드 후 요청
/skills taste-layout
# "카드 컴포넌트 만들어줘" 시 간격·그리드 원칙이 반영된 코드 생성

2. 이미지 레퍼런스 → 코드 구현 워크플로우

# ChatGPT Images로 레퍼런스 보드 생성 후 에이전트에 전달
[mockup.png] + taste-skill/skills/taste-web-image.md
→ Codex: "이 디자인을 React로 구현해줘"
# 레퍼런스 보드 기반으로 비슷한 스타일의 프론트엔드 코드 출력

3. Cursor rules에 타이포그래피 스킬 적용

<!-- .cursor/rules/typography.mdc -->
@../../taste-skill/skills/taste-typography.md
<!-- 이후 텍스트 관련 컴포넌트 생성 시 폰트 계층 규칙 자동 적용 -->

한계·주의

스킬 파일은 어디까지나 AI에게 건네는 지침이다. 에이전트가 지침을 얼마나 반영하는지는 모델·맥락에 따라 달라지므로 결과물은 반드시 사람이 검토해야 한다. Claude Code·Codex·Cursor 외 다른 도구에서 동작하려면 별도 검증이 필요하다. README가 명시적으로 경고하듯 이 프로젝트와 연관된 토큰·코인은 모두 무관하다. 트렌딩을 악용한 투자 사기 가능성에 주의할 것.