코딩 AI에디자인 감각넣기

중급자용깃허브 주간 인기 TOP10© AIKOREACLUB

Leonxlnx/taste-skill

코딩 AI에 디자인 감각 넣기

코딩 AI가 평균적인 홈페이지를 찍어 내는 대신, 미술 방향 20가지 중 셋을 뽑아 하나를 고르고 공개 자료실의 진짜 사진을 찾아 출처까지 붙여 화면을 짓게 해 주는 스킬이에요

★ 109,183 · 이번 주 +5,729에이전트 스킬 · MIT확인 2026-11-03

AI 티를 없애 달라고 하면 요즘 AI는 노란 크림 바탕에 벽돌색 포인트, 크게 기울인 세리프 제목을 내놓아요. AI 티를 고치라던 처방이 그대로 새 AI 티가 된 거예요.테이스트 스킬은 그래서 '이 글꼴, 이 색을 쓰라'고 알려 주지 않아요. 사이트 247곳을 연구해 정리한 미술 방향 20가지 중 셋을 스크립트가 뽑아 주고, 공개 자료실에서 진짜 사진을 찾아 출처까지 붙여요. 별 10만 개가 넘는 저장소인데 이번 주에도 5천 개 넘게 늘었어요.

AI 티는 물결처럼 바뀌어요

Build the future

The all-in-one platform for modern teams.

Get started

그라데이션 글자빛나는 버튼카드마다 회색 그림자

WorkAboutContact

New · v2 is here

Design that moves.

Available for work

떠 있는 알약 메뉴제목 위 알약 배지깜빡이는 상태 점

Hearth & Co.Shop · Story

Crafted with care, made to last.

Thoughtful goods for slow living.

Discover more크림 바탕 + 벽돌색기울인 세리프 큰 제목

보라 그라데이션의 시대

보라에서 남색으로 넘어가는 빛
제목 글자에 그라데이션
똑같은 카드 셋에 회색 그림자

tells.md 가 '금지'로 묶은 첫 물결이에요.

어두운 바탕에 네온 하나

제목 위 알약 배지("New", "Beta")
흐리게 떠 있는 알약 메뉴
깜빡이는 장식용 상태 점

첫 물결을 피하려던 결과가 또 하나의 기본값이 됐어요.

'따뜻하고 잡지처럼'이라는 처방

노란 크림 바탕에 벽돌색 포인트
고급스러워 보이려는 큰 세리프 제목
기울인 세리프로 크게

앞선 AI 티를 고치라는 처방을 모델이 통째로 따라 해서, 지금은 가장 알아보기 쉬운 AI 티가 됐다고 해요.

taste-skill 의 tells.md(물결별 AI 티 목록)를 이해하기 쉽게 저희가 그린 예시예요. 실제 AI 결과를 캡처한 게 아니고, 화면 속 영어는 AI가 흔히 쓰는 기본 문구를 흉내 낸 거예요.

한눈에

무엇인가요

테이스트 스킬은 코딩 AI가 평균적인 랜딩 페이지를 조립하는 대신 웹사이트와 앱 화면을 '디자인'하게 만드는 스킬이에요. 세 가지를 쥐여 줘요.첫째, 미술 방향이에요. 고른 사이트 247곳을 연구해 20가지 방향(이름을 기념비처럼 크게, 장소 사진 한 장이 다 말하게, 가게 물건을 도감처럼 등)으로 정리했어요. 방향은 모델이 아니라 스크립트가 뽑아요. 모델에게 고르라고 하면 늘 그 업종의 기본값을 고르기 때문이래요.둘째, 진짜 사진이에요. 위키미디어 공용, 오픈버스, 메트로폴리탄 미술관 같은 공개 자료실에서 퍼블릭 도메인, CC0, CC BY, CC BY-SA 사진만 골라 쓰고 페이지에 출처를 적어요.셋째, 스스로 확인하는 눈이에요. 실제 브라우저로 세 가지 폭에서 열어 보고 뻔한 디자인이면 불합격시키고, 자기 스크린숏을 보며 고쳐요.

함께 쓰는 도구 · 클로드 코드 · 코덱스 · 커서

이런 분께

AI로 랜딩 페이지나 포트폴리오, 가게 페이지를 만드는 분
AI가 만든 화면이 늘 비슷해 보여 아쉬운 분
대시보드나 관리 화면을 깔끔하게 뽑고 싶은 개발자

어떻게 작동하나요

한 번 지을 때 여섯 단계를 밟아요.
1. 의뢰서를 읽고 이 고객만 가진 것을 적어요.
2. 스크립트가 20가지 방향 중 셋을 뽑고, 에이전트가 하나를 골라요.
3. 고객의 재료와 그 방향을 잇는 아이디어를 한 문장으로 찾아요.
4. 공개 자료실의 진짜 사진과 영상으로 짓고 출처를 달아요.
5. 실제 브라우저에서 세 가지 폭으로 열어 보고 뻔한 디자인이면 불합격시켜요.
6. 자기 스크린숏을 보고 큰 문제 셋을 고쳐요. 최대 세 바퀴예요.한 번 짓는 데 대략 30~45분, 토큰은 수십만 개가 든다고 README가 밝혀요.대시보드와 앱 화면은 따로 가요. 실제 제품 화면을 연구해 정리한 앱 스타일 하나를 뽑고, 휴대폰에선 메뉴가 접히는지까지 앱 규칙으로 검사해요(inspect.mjs --app).

할 수 있는 일

미술 방향 고르기연구로 정리한 20가지 방향 중 셋을 뽑아 하나를 정하고, 고객의 재료와 잇는 아이디어 한 문장을 써요

진짜 사진 찾아 넣기공개 자료실에서 쓸 수 있는 사진과 영상만 골라 내려받고, 출처를 페이지에 달아요

브라우저로 스스로 점검세 가지 화면 폭에서 열어 보고 뻔한 디자인이면 불합격 처리해요

스크린숏 보고 고치기자기 화면을 보고 큰 문제 세 개를 고치는 일을 최대 세 번 되풀이해요

앱 화면 만들기2.1부터 대시보드, 관리 화면, 설정 화면을 앱 규칙(조용한 패널, 줄 맞춘 숫자, 데이터에만 쓰는 색)으로 만들어요

기존 페이지 손보기바꾸기 전에 지금 페이지를 브라우저로 먼저 점검하고, 바꾼 뒤 폭마다 전후를 비교해요

바로 쓸 수 있나요

도구 연결 필요

필요한 것코딩 AI 도구(클로드 코드 유료 요금제 등), Node 22 이상, 크롬 계열 브라우저, 사진을 찾을 인터넷 연결

비용저장소는 MIT 라이선스로 무료예요. 한 번 짓는 데 토큰이 수십만 개 들어 쓰는 AI 요금제 사용량은 따로 봐야 해요

시작하기

준비물 확인
Node 22 이상과 크롬, 엣지, 크로미움 중 하나가 있어야 해요. 따로 설치하는 것도 API 키도 없고, 사진을 찾을 때만 인터넷이 필요해요.
```
node --version
```
스킬 설치
npx skills 도구로 설치해요. 이미 있다면 같은 명령을 다시 돌리면 돼요.
```
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
```
클로드 코드 플러그인으로 설치(선택)
클로드 코드 안에서 이 두 줄을 써요. taste-skill: 이름표가 붙어 다른 스킬과 겹치지 않아요. 나중엔 /plugin update 로 올려요.
```
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill
```
코덱스 플러그인으로 설치(선택)
설치 뒤 코덱스 대화를 새로 시작해야 스킬이 읽혀요.
```
codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill
```

의뢰서 한 줄이 페이지가 되기까지

의뢰서를 읽고 이 고객만 가진 것을 적어요. 다른 가게에도 있는 말(신선한, 정성 가득)은 빼요.

의뢰 예시라이프치히 운하 옆 골목의 작은 로스터리 카페. 좌석은 스무 개, 로스터는 한 대. 월요일엔 문을 닫고 원두를 볶아요.

로스터 한 대좌석 스무 개월요일은 볶는 날운하 옆 옛 공장 동네

스크립트가 20가지 방향 중 셋을 뽑아요. 모델에게 고르라고 하면 늘 업종 기본값을 고르기 때문이래요. 셋 중 하나는 에이전트가 정해요.

이름을 기념비처럼문장이 곧 배치고정된 포스터장마다 다른 색장소가 다 말한다페이지가 곧 그 물건모양 하나로제품이 직접 일한다조용한 악기물건을 크게표본 도감다른 업종처럼 꾸미기밀착 인화지인쇄된 연차 보고서시끄럽고 납작한 포스터반으로 나뉜 무대잘 정리된 게시판크기가 다른 사진들어두운 방글자만으로

고객의 재료와 고른 방향을 한 문장으로 묶어요. 이 문장이 페이지 전체를 끌고 가요.

월요일은 볶는 날+표본 도감=

생두가 다 볶인 원두가 되기까지, 같은 크기 같은 각도의 사진 네 장을 도감처럼 나란히.

사진은 공개 자료실에서 찾아요. 퍼블릭 도메인, CC0, CC BY, CC BY-SA만 내놓고, 쓰면 출처를 페이지에 적어요.

$ node assets.mjs "coffee roasting"

## Wikimedia Commons

385 degrees cinnamon roast coffee

licence CC BY-SA 3.0; credit required

credit "385 degrees cinnamon roast coffee" by Dan Bollinger, CC BY-SA 3.0, via Wikimedia Commons

Coffee beans in Ethiopia

licence CC BY-SA 4.0; credit required

credit "Coffee beans in Ethiopia" by Ninaras, CC BY-SA 4.0, via Wikimedia Commons

실제 브라우저로 세 가지 폭에서 열어 봐요. 뻔한 디자인이 보이면 불합격이에요.

1440

768

불합격: 똑같은 카드 셋

390

자기 스크린숏을 보고 큰 문제 셋을 고쳐요. 최대 세 바퀴까지 돌아요.

1/32/33/3

그림자 붙은 똑같은 카드 셋
첫 화면에 제목이 흐림
좌우 여백이 섹션마다 다름

taste-skill 로 만든 커피 가게 페이지의 볶는 날 칸 — README에 실린 실제 결과의 한 칸이에요. 사진은 스킬이 공개 자료실에서 찾아 출처를 단 것이라고 해요.

README의 여섯 단계를 보여 주려고 저희가 그린 예시예요. 어떤 방향이 뽑히고 무엇을 고칠지는 의뢰서와 그때의 무작위 뽑기에 따라 달라져요. 사진 검색 결과는 README 예시 페이지의 실제 출처를 빌려 왔어요.

비슷한 도구

셋 다 'AI 티'를 겨눠요. 테이스트 스킬은 정해진 테마 대신 연구로 뽑은 방향과 고객 고유의 재료, 공개 자료실 사진에서 페이지를 끌어내는 쪽이에요(각 README 기준).

AI가 만든 화면, 왜 다 비슷할까이미 있는 화면을 한 부분씩 명령으로 고치고 검사하는 쪽에 강함pbakaus/impeccable

AI 티 안 나는 웹페이지 만들기정해 둔 테마 50개 중 셋을 내밀고 여덟 가지 폭으로 검사함Nutlope/hallmark

주의할 점

README에 따르면 한 번 만드는 데 30~45분, 토큰 수십만 개가 들어요. 요금제에 따라 사용량이 빨리 찰 수 있어요.
공개 자료실 사진은 CC BY, CC BY-SA처럼 출처 표시 조건이 붙을 수 있어요. 출처 표기를 지우지 말고, 내 사진이 있으면 바꿔 넣으라고 README가 권해요. 스킬도 이 사진을 고객의 실제 상품이나 매장인 것처럼 쓰지 말라고 안내해요.
예전에 있던 여러 스킬(high-end-visual-design, image-to-code 등)은 다른 저장소로 옮겨졌어요. 옛 이름으로 찾는다면 README의 옮겨진 스킬 표를 보세요.
이 프로젝트 이름을 쓴 코인이나 토큰은 공식이 아니라고 만든 사람이 밝혀 두었어요.

낯선 말

에이전트 스킬 · 코딩 AI가 특정 일을 할 때 꺼내 읽는 작업 설명서 묶음이에요
아트 디렉션 · 화면 전체의 분위기, 색, 글꼴, 사진 쓰는 방식을 정하는 미술 방향이에요
슬롭(slop) · AI가 찍어 낸 듯 성의 없고 뻔한 결과물을 부르는 말이에요
오픈버스(Openverse) · 플리커, 위키미디어 공용, 박물관 자료를 한데 모아 찾아 주는 공개 이미지 검색이에요

AI 답은 참고 자료예요. 법·세금·돈·건강처럼 삶에 큰 영향을 주는 일에서는 AI 답이 정답이 될 수 없어요. 최종 판단은 전문가나 공식 기관에서 확인하세요.