개발

클로드가 만든 화면에서 'AI 티' 걷어내는 무료 레포 5개

2026. 9. 21. Claude

지금 다 못 읽겠다면 · 이 가이드 링크를 메일로 받기

목차 · 7개 섹션

클로드로 화면을 뽑으면 보는 사람이 3초 만에 알아챈다. 보랏빛 그라데이션, 똑같이 생긴 카드 3단, 과하게 둥근 모서리. 프롬프트를 아무리 고쳐 써도 잘 안 바뀐다.

바뀌지 않는 이유는 단순하다. 취향을 안 알려줬기 때문이다. 모델은 “예쁘게”라는 말을 들으면 학습 데이터에서 가장 흔했던 모양을 꺼낸다. 흔한 모양이 곧 “AI 티”다.

해결책은 취향을 파일로 적어서 주는 것이다. 아래 다섯 개는 전부 무료·MIT 라이선스이고, 그 일을 각각 다른 방식으로 한다.

수치는 2026년 9월 21일 GitHub API 기준이다. 별 개수는 매일 바뀐다.

1. Taste Skill — AI 티 나는 데만 골라서 걷어낸다

“예쁘게 만들어줘”가 아니라 “흔한 걸 하지 마” 쪽으로 미는 스킬이다. 레포가 스스로를 The Anti-Slop Frontend Framework for AI Agents라고 부른다.

tasteskilltasteskillRepository

별 204개 · MIT.

설치

⚠️ README에 적힌 설치 주소는 죽어 있다. README는 jeettrench/taste-skill을 안내하는데 그 주소는 현재 404다. 레포가 tasteskill/tasteskill로 옮겨졌고 README가 갱신되지 않았다. 아래 주소를 쓴다.

# 전부 설치
npx skills add https://github.com/tasteskill/tasteskill

# 하나만 설치
npx skills add https://github.com/tasteskill/tasteskill --skill "taste-skill"

함정: 폴더명과 설치명이 다르다

--skill 뒤에 넣는 값은 폴더 이름이 아니라 SKILL.md 안의 name: 필드다. 실제로 확인한 대조표다.

폴더	`--skill`에 넣을 이름
`skills/taste-skill`	`taste-skill`
`skills/brutalist-skill`	`industrial-brutalist-ui`
`skills/gpt-tasteskill`	`gpt-taste`
`skills/image-to-code-skill`	`image-to-code`
`skills/brandkit`	`brandkit`

폴더명을 그대로 넣으면 세 개는 조용히 실패한다. 스킬은 총 12개 들어 있다.

tasteskill/tasteskillSKILL.mdskills/taste-skill · mainMarkdown

2. UI UX Pro Max — 레이아웃·폰트·색을 한꺼번에 잡아준다

별이 12만 개 넘게 붙은 레포다. 이 목록에서 규모가 압도적으로 크다.

nextlevelbuilderui-ux-pro-max-skillRepository

별 129,437개 · MIT.

Taste Skill이 “하지 마”를 담당한다면 이쪽은 “이렇게 해”를 담당한다. 레이아웃 규칙, 타이포 스케일, 컬러 시스템을 플랫폼별로 들고 있다.

설치 — 클로드 코드면 두 줄

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

설치 — 다른 도구면 CLI

npm install -g ui-ux-pro-max-cli

uipro init --ai claude --global    # ~/.claude/skills/
uipro init --ai cursor --global    # ~/.cursor/skills/
uipro init --ai universal --global # ~/.agents/skills/

패키지 이름을 헷갈리지 말 것. 설치하는 패키지는 ui-ux-pro-max-cli이고 실행 명령은 uipro다. 이름이 비슷한 uipro-cli는 오래된 버전이라 지금 에셋과 맞지 않는다.

uipro init --dry-run으로 뭐가 쓰이는지 먼저 보고 결정할 수 있다.

3. Awesome Claude Design — 완성된 디자인 68개에서 고른다

설치할 게 없다. README 자체가 카탈로그다. Airbnb, Stripe 같은 서비스의 디자인 시스템이 DESIGN.md 형식으로 68개 정리돼 있고, 마음에 드는 걸 받아서 쓰면 된다.

VoltAgentawesome-claude-designRepository

별 3,832개 · MIT.

`DESIGN.md`가 뭔가

브랜드의 시각 언어를 AI가 읽을 수 있게 적은 마크다운 파일 하나다. 핵심은 토큰·규칙·이유를 한 파일에 같이 두는 것이다. Figma 내보내기는 “무엇을” 쓸지는 알려주지만 “왜”가 빠지고, 브랜드 가이드 PDF는 반대다.

파일	읽는 쪽	정의하는 것
`AGENTS.md`	코딩 에이전트	프로젝트를 어떻게 만들지
`DESIGN.md`	디자인 에이전트	프로젝트가 어떻게 보일지

쓰는 법

목록에서 원하는 느낌의 시스템을 골라 DESIGN.md를 받는다
Claude Design을 연다
둘 중 하나로 넣는다
- 디자인 시스템으로 시작 — Create new design system 화면에서 파일 업로드
- 프로토타입으로 시작 — 채팅에 파일 첨부 후 Create a design system from this DESIGN.md

몇 분 뒤에 컬러 토큰, 타입 스케일, 버튼·카드·내비게이션이 들어간 스타터 패키지가 나온다.

4. Design Motion Principles — 움직임이 어색한 데를 잡아준다

앞의 셋이 정지 화면을 다룬다면 이쪽은 움직임이다. 트랜지션, 이징 커브, 인터랙션 타이밍.

kylezantosdesign-motion-principlesRepository

별 1,113개 · MIT.

모드가 두 개다.

만들기 — 목적이 있는 모션으로 컴포넌트를 새로 짠다
감사 — 이미 있는 애니메이션을 훑어서 어색한 지점을 지적한다

이미 만들어둔 화면이 있다면 감사 모드부터 돌려보는 게 빠르다.

설치

npx skills add kylezantos/design-motion-principles

직접 복사해도 된다.

git clone https://github.com/kylezantos/design-motion-principles.git
cp -r design-motion-principles/skills/design-motion-principles ~/.claude/skills/
# 커서를 쓰면 ~/.cursor/skills/

kylezantos/design-motion-principlesSKILL.mdskills/design-motion-principles · mainMarkdown

5. DESIGN.md Chrome — 맘에 드는 사이트를 그대로 뽑는다

크롬 확장이다. 아무 사이트나 열고 버튼을 누르면 그 사이트의 타이포·컬러·간격·라운드·그림자·모션을 읽어서 DESIGN.md로 만들어준다.

bergsidedesign-md-chromeRepository

별 2,874개 · MIT.

설치

Chrome 웹스토어에 없다. 직접 올려야 한다.

chrome://extensions 접속
개발자 모드 켜기
압축해제된 확장 프로그램을 로드 클릭
내려받은 폴더 선택

쓸 수 있는 동작

동작	설명
자동 추출	현재 탭의 스타일을 읽는다
`DESIGN.md` 생성	디자인 시스템 문서로 만든다
`SKILL.md` 생성	에이전트용 스킬 형식으로 만든다
다운로드	파일로 저장

DESIGN.md 대신 SKILL.md로 뽑으면 클로드 코드·커서에 스킬로 바로 꽂을 수 있다.

bergside/design-md-chromegenerate-design-md.mjslib · mainJavaScript

세 번째와 다섯 번째는 같이 써야 한다

이게 이 다섯 개의 핵심이다.

둘 다 결과물이 DESIGN.md로 같다. 형식이 같으니 이어서 쓸 수 있다.

상황	쓰는 도구
유명한 사이트 68개 중에 있다	세 번째(Awesome Claude Design)에서 고른다
목록에 없는 사이트다	다섯 번째(DESIGN.md Chrome)로 직접 뽑는다

즉 68개는 시작점이지 한계가 아니다. 목록에 없는 사이트를 발견하면 크롬 확장으로 뽑아서 자기 컬렉션에 계속 쌓으면 된다.

어디서부터 깔면 되나

다섯 개를 한 번에 깔 필요는 없다. 지금 상태에 따라 갈린다.

지금 상태	먼저 깔 것
만든 화면이 AI 티가 난다	1번 Taste Skill
뭘 만들지 감이 안 온다	3번에서 시안 고르기
레이아웃·폰트·색이 매번 흔들린다	2번 UI UX Pro Max
애니메이션이 어색하다	4번 감사 모드
참고하고 싶은 사이트가 있다	5번으로 뽑기

가장 빠른 조합은 3번에서 시안 하나 고르고 → 1번으로 AI 티 걷어내기다. 둘 다 5분이면 된다.

이 가이드, 내 업무에 30일 안에 적용해보고 싶다면

개인 실무자용 AI 자동화 챌린지 오픈 알림 · 지금 내는 돈 없음

FOR TEAMS

이 가이드, 우리 팀에 적용하려면?

회사명과 업무 한 줄만 남겨주시면 널포인터스튜디오가 직접 검토해 회신드립니다.

회사명

업무용 이메일

자동화하고 싶은 업무 한 줄