블로그 / AI 도구
AI 도구

AI로 만든 홈페이지, 글은 그대로 두고 AI 티만 걷어낸 방법 (Taste Skill)

2026.09.28 · 자비스스튜디오

AI로 만든 홈페이지가 다 비슷해 보인다면 이 글이 맞습니다. 벨기에 한 회사 사이트가 글과 기능은 그대로 두고 겉모습만 바꾼 과정을 카드 일곱 장으로 따라가고, 끝에는 직접 설치해 보며 정리한 순서와 막히는 곳을 담았습니다.

AI 티 나던 홈페이지, 글 한 줄 안 바꾸고 새 옷

AI 티 나던 홈페이지, 글 한 줄 안 바꾸고 새 옷
카드뉴스 1

AI로 홈페이지를 만들면 이상하게 다 비슷해 보입니다. 같은 글꼴, 보라색 그라데이션 버튼, 똑같은 크기로 늘어선 칸들. 오늘 소개할 Taste Skill은 이런 모습을 줄이려고 만든 무료 스킬입니다. 저장소 소개 문구는 "stops the AI from generating boring, generic slop"으로, AI가 밋밋하고 흔한 화면을 뽑지 못하게 막는다는 뜻입니다. 클로드 코드 같은 AI 코딩 도구에 깔아 두면, 화면을 만들 때 이 스킬의 규칙을 먼저 읽고 방향을 정합니다. 이미 만들어 둔 사이트도 고칠 수 있다는 점이 이번 글의 핵심입니다.

이런 소식, 남들보다 먼저 받으실 분?
직접 돌려보고 되는 것만 골라 매주 보내드립니다. 광고성 하이프는 거릅니다.

📮 뉴스레터 신청

벨기에 한 회사의 가격 페이지 전과 후

벨기에 한 회사의 가격 페이지 전과 후
카드뉴스 2

실제로 써 본 사례가 있습니다. 벨기에 회사 TALOX의 소개 사이트를 만드는 한 GitHub 사용자가 AI로 만든 사이트를 이 스킬로 다시 입혔습니다. 사진은 두 판의 가격 페이지입니다. 전에는 똑같은 모양의 가격표 세 칸이 나란히 서 있었고, 후에는 비교할 수 있는 카드 두 장과 맞춤 견적 띠 하나로 바뀌었습니다. 이 사용자는 두 판을 따로 공개해 두어서, 같은 내용이 모습만 어떻게 달라졌는지 누구나 열어 비교할 수 있습니다.

가장 먼저 바뀐 건 버튼 모양이었다

가장 먼저 바뀐 건 버튼 모양이었다
카드뉴스 3

사용자가 저장소에 남긴 표를 보면 무엇을 AI 티로 봤는지가 드러납니다. 보라에서 자주로 번지는 그라데이션에 알약처럼 둥근 버튼이 대표적입니다. 이 버튼은 모서리를 적당히 각지게 줄이고 한 가지 색으로 채운 버튼으로 바뀌었습니다. 글꼴도 모든 곳에 쓰이던 Inter 대신 제목용 Space Grotesk와 본문용 Manrope로 나눴습니다. 늘 가운데로 모이던 구역은 기본을 왼쪽 정렬로 바꾸고, 가운데 정렬은 의미가 있을 때만 남겼습니다.

8페이지와 3개 언어는 손대지 않았다

8페이지와 3개 언어는 손대지 않았다
카드뉴스 4

눈여겨볼 점은 바뀌지 않은 쪽입니다. 사용자는 V2가 V1과 같은 사이트라고 적었습니다. 같은 8페이지, 불어·영어·네덜란드어 세 언어로 된 같은 내용, 같은 문의 폼, 같은 ROI 계산기를 그대로 두고 보이는 모습만 다르게 만들었습니다. 새로 만들면 문구를 다시 쓰고 폼을 다시 연결해야 하지만, 이 방식은 이미 돌아가는 사이트를 건드리지 않고 겉모습만 손봅니다. AI로 사이트를 만들어 둔 뒤 모양이 마음에 걸렸던 분에게 맞는 길입니다.

점검이 먼저, 입히는 건 그다음

점검이 먼저, 입히는 건 그다음
카드뉴스 5

순서도 저장소에 적혀 있습니다. 먼저 같은 저장소에 든 리디자인 스킬(redesign-existing-projects)로 기존 사이트를 점검했습니다. 이 스킬의 설명은 "Existing projects: audit the UI first, then fix layout, spacing, hierarchy, styling."입니다. 화면을 먼저 살펴 AI 티가 나는 곳을 찾고, 그다음 배치와 간격, 위계, 스타일을 고친다는 뜻입니다. 사용자는 이 점검 결과를 표로 정리한 뒤 테이스트 스킬로 겉모습을 다시 입혔습니다.

AI 화면이 닮아 가는 이유는 확률이다

AI 화면이 닮아 가는 이유는 확률이다
카드뉴스 6

스킬을 만든 Leon Lin은 2026년 2월 22일 X에 스킬을 처음 공개하며 이유를 이렇게 적었습니다. "The problem tho is LLMs are just based on probability. Without strict rules, they statistically default to the most likely patterns, that's where AI slop comes from." AI는 확률로 움직이기 때문에 엄격한 규칙이 없으면 가장 흔한 모양으로 간다는 말입니다. 그래서 이 스킬은 요청을 먼저 읽고 디자인 방향을 정한 뒤, 레이아웃 변화·움직임·빽빽함 세 가지 다이얼로 결과를 조절하게 합니다.

설치는 명령 한 줄, 무료

설치는 명령 한 줄, 무료
카드뉴스 7

설치는 명령 한 줄입니다. MIT 라이선스로 공개된 무료 스킬이고, 2026년 9월 28일 기준 GitHub 별이 9만 개를 넘었습니다. 이 저장소에는 스킬이 13개 들어 있습니다. 코드를 짜는 스킬 10개와 참고 이미지를 만드는 스킬 3개입니다. 기본 스킬은 design-taste-frontend이고, 지금 받는 기본판은 스스로 시험판(v2 experimental)이라고 밝히고 있습니다. 대시보드나 데이터 표, 여러 단계로 된 입력 폼 같은 화면은 이 스킬이 다루는 범위 밖이라고 적혀 있으니, 회사 소개나 랜딩 페이지처럼 보여 주는 화면에 쓰는 편이 맞습니다.

설치 정리본

2026년 9월 28일 Windows 11, Node 24, Claude Code 2.1.269에서 직접 설치해 보고 정리했습니다. 이 스킬로 화면을 만들어 본 결과는 아직 없고, 설치와 준비까지의 기록입니다.

설치 순서

  1. 터미널을 열고 스킬 하나만 받으려면 아래 명령을 칩니다. 사용자 전체에 깔리고, 클로드 코드용으로만 들어갑니다.
npx -y skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend -g -a claude-code -y
  1. 다 되면 ~\.claude\skills\design-taste-frontend 폴더가 생깁니다. 우리가 설치했을 때는 새 세션을 열지 않아도 바로 스킬 목록에 떴습니다.
  2. 설치기는 끝에 보안 평가를 보여 줍니다. 우리가 받은 판은 Gen Safe, Socket 0 alerts, Snyk Low Risk였습니다.

이미 만든 사이트를 고치려면

TALOX 사례처럼 기존 사이트를 손볼 거라면 리디자인 스킬도 같이 받습니다. --skill redesign-existing-projects를 붙여 한 번 더 치면 됩니다. 순서는 점검 먼저, 다시 입히기 그다음입니다.

막히는 곳과 우회법

  • 클로드 코드에 설치를 맡기면 자동 권한 모드가 "외부 코드 설치"로 보고 막을 수 있습니다. 우리도 처음에 막혔고, 설정에 해당 명령 허용 규칙을 넣은 뒤 설치됐습니다. 터미널에서 직접 치면 이 단계가 없습니다.
  • --skill을 빼고 치면 이미지 생성 스킬까지 13개가 한꺼번에 깔립니다. 홈페이지용이면 기본 스킬 하나로 충분합니다.

스킬이 시키는 대로 다 하지 않아도 됩니다

TALOX 사용자는 보라색(#7c3aed)을 강조색으로 그대로 남겼습니다. 스킬 규칙은 보라 그라데이션을 AI 티로 보지만, 이미 쓰고 있는 브랜드 색이라 예외로 남겼다고 적었습니다. 회사 색이 정해져 있다면 그 색은 지키고 나머지를 손보는 식으로 쓰면 됩니다.

출처: GitHub - Leonxlnx/taste-skill · Leon Lin — Taste-Skill 공개 게시물 (X, 2026-02-22) · Mathieuherbos/talox-website-v2 · TALOX V1 가격 페이지 · TALOX V2 가격 페이지

실측 위주 AI 뉴스레터 — 직접 돌려보고 되는 것만 골라 매주 보내드립니다.

#TasteSkill #AI홈페이지 #클로드코드 #자비스스튜디오