AI가 만든 화면이 다 똑같아 보이는 이유, 깃허브 스타 8만 개 넘은 Taste Skill로 확인해봤습니다
클로드 코드나 커서로 랜딩 페이지를 만들어본 적이 있다면 익숙한 장면이 있습니다. 히어로 섹션에 큰 제목, 그 아래 부제, 3열로 나열된 카드형 기능 소개, 은은한 그라데이션 배경. 프롬프트를 바꿔도 결과물은 어딘가 비슷비슷합니다.
이 현상을 정면으로 짚은 오픈소스 프로젝트가 Taste Skill입니다. GitHub 저장소 Leonxlnx/taste-skill에 공개돼 있고, 이 글을 쓰는 시점 기준 스타 8만 3천 개, 포크 5천7백 개를 넘겼습니다.
Taste Skill GitHub 저장소 화면, 별표 8만 3천 개를 넘겼다
디자이너가 만든 것처럼 보이게 해준다는 말이 실제로 무슨 뜻인지, 어떤 원리로 작동하는지, 클로드 코드에 어떻게 설치하는지 확인해봤습니다.
Taste Skill이 해결하려는 문제
Taste Skill을 만든 개발자 Leon Lin은 저장소 소개에서 이 프로젝트를 “AI를 위한 안티 슬롭(anti-slop) 프론트엔드 프레임워크”라고 부릅니다. 여기서 슬롭은 AI가 대충 뽑아낸 듯한, 어디서나 본 것 같은 결과물을 뜻하는 표현입니다.
공식 사이트 tasteskill.dev는 이 문제를 이렇게 설명합니다.
“Codex, Cursor, Claude Code는 로직에는 뛰어나지만 취향에는 서툽니다. 완성을 최적화할 뿐 완성도를 최적화하지 않습니다. 가장 안전한 시각적 패턴, 가장 흔한 Tailwind 클래스, 모든 SaaS를 서로의 클론처럼 보이게 만드는 보일러플레이트로 손이 갑니다.”
AI 코딩 에이전트는 학습 데이터에서 가장 자주 등장한, 실패할 확률이 낮은 패턴을 고르는 쪽으로 편향돼 있습니다. 그 결과가 바로 어디서나 본 듯한 카드형 레이아웃과 뻔한 그라데이션입니다. Taste Skill은 이 기본값을 깨는 규칙을 에이전트에 미리 심어두는 방식으로 접근합니다.
Taste Skill 공식 홈페이지, 캐치프레이즈는 Less slop, designs pop
SKILL.md 파일 하나로 동작하는 원리
Taste Skill의 정체는 거창한 프로그램이 아니라 SKILL.md라는 마크다운 파일 묶음입니다. 클로드 코드, 커서, 코덱스 같은 에이전트가 이 파일을 프롬프트처럼 읽고, 화면을 설계할 때 지켜야 할 규칙으로 삼는 구조입니다.
기본 스킬인 design-taste-frontend(v2)는 작업을 시작하기 전에 브리프를 먼저 읽고 세 가지 값을 1부터 10 사이로 정하도록 안내합니다.
- DESIGN_VARIANCE : 레이아웃을 얼마나 비대칭적으로 실험할지. 1은 완벽한 대칭, 10은 예술적인 혼돈에 가깝습니다.
- MOTION_INTENSITY : 애니메이션의 강도. 1은 정적인 화면, 10은 영화적이고 물리 기반에 가까운 모션입니다.
- VISUAL_DENSITY : 화면에 정보를 얼마나 채울지. 1은 여백이 넉넉한 갤러리 느낌, 10은 정보가 빽빽한 콕핏 느낌입니다.
브리프에 “미니멀”이나 “공공기관” 같은 키워드가 있으면 이 값을 낮추고, “플레이풀”이나 “임팩트 있게” 같은 키워드가 있으면 값을 올리는 식으로, 프로젝트 성격에 맞춰 세 다이얼을 조정하라고 규칙에 명시돼 있습니다.
세부 규칙 중 눈에 띄는 항목 하나는 본문에서 줄표(em-dash, —)를 완전히 금지한다는 조항입니다. 문서는 이 기호가 “LLM의 대표적인 문체 습관이자 실제 테스트에서 AI가 쓴 티가 가장 많이 나는 요소”라고 설명하며, 제목이든 버튼 텍스트든 예외 없이 쓰지 말라고 못 박습니다.
기존 웹사이트를 새로 단장하는 작업을 위한 별도 규칙도 있습니다. 손을 대기 전에 기존 브랜드 색상과 폰트, 정보 구조, 유지할 콘텐츠와 버릴 콘텐츠를 먼저 문서화하도록 하고, URL 구조와 주요 내비게이션 라벨, 로고는 사용자의 명시적 승인 없이는 바꾸지 말라고 규정합니다.
코드를 최종 출력하기 전에는 색상 일관성, 버튼과 폼의 대비, 히어로 섹션이 뷰포트에 맞는지, 줄표가 정말 하나도 없는지 등을 하나씩 확인하는 사전 점검 체크리스트도 거치도록 돼 있습니다.
설치 방법과 지원하는 도구
설치는 npx skills add 명령어로 합니다. 저장소 전체를 설치하려면 다음과 같이 실행합니다.
npx skills add Leonxlnx/taste-skill
특정 스킬 하나만 선택해서 설치하려면 --skill 옵션으로 설치 이름을 지정합니다.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
ChatGPT처럼 CLI 설치가 불가능한 환경에서는 SKILL.md 파일 내용을 그대로 복사해서 대화창에 붙여넣는 방식도 안내합니다.
공식 홈페이지 기준 커서, 클로드 코드, 코덱스, 오픈코드, 제미나이 CLI, AI 스튜디오, v0, 러버블까지 총 8종의 도구와 호환됩니다.
npx 명령어 한 줄로 SKILL.md가 설치되는 과정을 보여주는 tasteskill.dev 공식 소개 화면
다양한 목적별 스킬 변형
저장소에는 기본 스킬 외에도 목적에 따라 골라 쓸 수 있는 여러 변형이 함께 들어 있습니다.
- gpt-taste : GPT나 코덱스용으로 규칙을 더 엄격하게 조정한 버전입니다.
- image-to-code : 참고 이미지를 먼저 만들고 그 이미지를 분석한 뒤 코드로 옮기는 파이프라인용입니다.
- redesign-existing-projects : 기존 프로젝트의 UI를 감사하고 개선하는 데 특화된 버전입니다.
- minimalist-ui, industrial-brutalist-ui : 미니멀 또는 브루탈리즘처럼 특정 스타일을 고정해서 쓰고 싶을 때 쓰는 스타일별 변형입니다.
- imagegen-frontend-web, imagegen-frontend-mobile : 코드 없이 화면 시안 이미지만 생성하는 용도로, 여기서 나온 이미지를 다시 클로드 코드나 커서에 전달해 실제 코드로 옮기는 흐름을 제안합니다.
문서는 이미지 우선으로 작업하고 싶다면 프롬프트에 파이프라인 순서를 직접 명시하라고 권장합니다. 예를 들어 “이미지를 먼저 생성하고, 분석한 다음, 코드로 만들어줘” 같은 지시를 스킬 이름과 함께 붙이는 식입니다.
실제로 얼마나 효과가 있을까
리뷰 사이트 OpenTools는 Taste Skill의 핵심 쓰임새를 자동조종 장치가 아니라 검토 레이어로 보라고 조언합니다. AI가 만든 결과물이 기술적으로는 문제없어도 밋밋한 카피와 클리셰로 조립된 듯한 기능으로 채워지는 경우가 많은데, 재사용 가능한 스킬 파일이 에이전트로 하여금 타깃과 취향, 제약 조건에 대해 더 날카로운 질문을 던지게 만들 수 있다는 설명입니다.
다만 한계도 뚜렷합니다. 저장소는 스스로도 이 스킬이 “랜딩 페이지, 포트폴리오, 리디자인”을 위한 것이지 대시보드나 데이터 테이블, 여러 단계로 이어지는 제품 UI를 위한 것은 아니라고 명시합니다. 국내 반응에서도 마케팅 페이지에서는 카드형 구성과 과한 그라데이션을 줄이는 효과가 뚜렷하지만, 복잡한 서비스 화면은 여전히 수동 조정이 필요하다는 평가가 나옵니다.
즉 디자이너를 완전히 대체한다기보다는, AI가 기본값으로 고르는 가장 안전하고 뻔한 선택지를 걷어내는 규칙집에 가깝습니다. 랜딩 페이지나 포트폴리오처럼 첫인상이 중요한 화면을 AI로 빠르게 만들어야 할 때 시도해볼 만합니다.
정리
Taste Skill은 클로드 코드나 커서 같은 AI 코딩 에이전트가 기본값으로 고르는 뻔한 레이아웃과 문체를 걷어내기 위해, VARIANCE와 MOTION, DENSITY라는 세 다이얼과 줄표 금지 같은 구체적인 규칙을 SKILL.md 파일에 담아둔 오픈소스 프로젝트입니다. npx skills add 한 줄로 설치할 수 있고 MIT 라이선스라 부담 없이 시도해볼 수 있지만, 대시보드나 복잡한 제품 UI까지 만능으로 다듬어주는 도구는 아니라는 점은 감안해야 합니다.
참고 자료
이 도구를 포함해 클로드 코드로 코딩할 때 써볼 만한 오픈소스 도구 5가지를 아래 글에 모아 정리했습니다.
Leave a comment