클로드로 만든 웹사이트가 왜 늘 비슷해 보일까요? 보라색 그라데이션, 가운데 정렬된 큰 제목, 똑같이 생긴 카드 세 장. 최신 모델을 써도 "AI가 만들었네" 하는 티가 납니다.
이 글에서는 그 티를 빼기 위해 클로드 코드에 붙이는 디자인 스킬과 연결 도구를 정리했습니다. 2026년 10월 6일에 각 저장소와 공식 문서를 직접 열어 확인한 내용이에요.
결론부터 말씀드리면 모델이 못해서가 아닙니다. 따라 할 디자인 기준이 없고, 참고할 방향이 없고, 자기 결과를 직접 볼 눈이 없어서입니다.
비어 있는 것 | 메우는 도구 | 하는 일 |
|---|---|---|
디자인 기준 | Emil Kowalski 스킬, Impeccable | 여백·글꼴·레이아웃·애니메이션 판단 규칙 |
방향과 취향 | Taste Skill | 뻔한 AI식 패턴을 피하고 방향 잡기 |
보는 눈 | Figma MCP, Playwright MCP | 디자인 원본 읽기, 만든 화면 직접 열어 보기 |
용어 두 개만 짚고 갈게요. 스킬은 클로드 코드가 필요할 때 꺼내 읽는 지침 묶음이고, MCP는 클로드 코드가 바깥 도구를 쓰게 해 주는 연결입니다. 스킬은 "뭐가 좋은 디자인인가"를, MCP는 "실제로 어떻게 생겼나"를 채워요.
그럼 기준을 주는 스킬부터 보겠습니다.
웹 애니메이션 분야에서 이름이 알려진 디자인 엔지니어 에밀 코왈스키가 공개한 스킬 묶음입니다. MIT 라이선스이고, GitHub 별이 4만 3천 개를 넘어요.
중심은 애니메이션이에요. README의 예시가 이 스킬이 왜 필요한지 잘 보여줍니다. 들어오는 애니메이션에는 ease-out을 써야 하는데 AI는 ease-in을 넣는다는 거죠.
한 단어 차이인데요.
이런 미세한 차이가 쌓이면 화면이 어딘가 굼뜨게 느껴집니다.
npx skills@latest add emilkowalski/skills애니메이션이 아니라 화면 전체를 점검하고 싶다면 다음 스킬이 맞습니다.
Impeccable은 "AI 코딩 에이전트를 위한 디자인 지침"을 내건 도구입니다. Apache 2.0 라이선스, 별 7만 7천 개. 명령 24개와 탐지 규칙 60개가 들어 있어요.
규칙이 구체적인 게 장점입니다. 흔한 기본 글꼴(Inter, Arial), 카드 안에 카드를 또 넣는 구조, 튕기는 애니메이션, 순수한 검정색 같은 걸 짚어 주죠. audit(점검), polish(다듬기), quieter(덜 시끄럽게) 같은 명령으로 방향을 지정할 수 있습니다.
npx impeccable install
/impeccable init【직접 확인 · 2026-10-06】 제가 쓰는 Impeccable은 작업 전에 프로젝트 폴더에서 PRODUCT.md와 DESIGN.md를 먼저 찾습니다.
그다음 이 화면이 브랜드 화면인지 업무용 화면인지를 갈라서 다른 참고 문서를 읽고요. 레퍼런스 사이트에서 디자인 값을 뽑아 DESIGN.md로 넣어 두는 방법은 잘 만든 사이트 카피하는 법에 정리했습니다.
기준이 생겼으면, 이번엔 "어떤 느낌으로 갈지"를 정해 줄 차례입니다.
Taste Skill은 "AI 에이전트를 위한 안티 슬롭(anti-slop) 프론트엔드 프레임워크"를 내건 스킬입니다. 슬롭은 대충 찍어낸 결과물을 낮춰 부르는 말이에요. MIT 라이선스, 별 9만 3천 개.
이 스킬의 첫 단계는 그리는 게 아니라 읽는 겁니다. 어떤 페이지인지, 사용자가 쓴 분위기 단어가 뭔지, 참고 링크가 있는지, 누가 볼 화면인지를 먼저 따지죠. 그리고 변화 폭, 움직임 강도, 정보 밀도를 1~10 다이얼로 조절합니다.
npx skills add https://github.com/Leonxlnx/taste-skill【직접 확인 · 2026-10-06】 제가 쓰는 Taste Skill 문서 첫 줄에 적용 범위가 적혀 있습니다. 랜딩 페이지, 포트폴리오, 리디자인용이고 대시보드나 데이터 표, 여러 단계짜리 업무 화면은 대상이 아니라고요.
이게 가장 자주 놓치는 부분입니다. 관리자 화면에 이 스킬을 걸면 오히려 어울리지 않는 장식이 붙을 수 있어요.
기준과 방향이 생겼어도 아직 하나가 비어 있습니다. AI가 자기 결과물을 볼 수가 없다는 거죠.
피그마가 공식으로 제공하는 MCP 서버입니다. 클로드 코드가 피그마 파일에서 선택한 프레임을 읽고, 색·간격 변수와 컴포넌트 정보를 가져와서 코드로 만들 수 있게 해 줘요.
claude mcp add --transport http figma https://mcp.figma.com/mcp공식 문서 기준으로 원격 서버는 모든 요금제에서 쓸 수 있고, 데스크톱 서버는 유료 요금제의 Dev 또는 Full 좌석이 필요합니다. 지금은 베타라 무료지만 나중에 사용량 기반 유료 기능이 될 예정이라고 적혀 있어요.
피그마로 디자인을 안 하신다면 이 단계는 건너뛰셔도 됩니다. 그 대신 다음 도구는 꼭 보세요.
세 구멍 중 제일 중요한 게 이거예요. 아무리 규칙을 알려줘도 AI가 자기 결과물을 볼 수 없으면 뭐가 이상한지 모릅니다.
Playwright MCP는 마이크로소프트가 만든 브라우저 자동화 도구입니다. 클로드 코드가 브라우저로 페이지를 열고, 클릭하고, 화면 크기를 바꾸고, 스크린샷을 찍을 수 있게 돼요. Apache 2.0 라이선스, 별 3만 7천 개입니다.
claude mcp add playwright npx @playwright/mcp@latest이게 붙으면 작업이 이렇게 돕니다.
만든다
브라우저로 열어 본다
문제를 찾는다 (글자가 넘친다, 모바일에서 버튼이 잘린다)
고친다
다시 열어 본다
하나는 꼭 알아두세요. README에 Playwright MCP는 보안 경계가 아니라고 명시돼 있습니다. 로그인된 관리자 페이지나 결제 화면을 마음대로 돌아다니게 두시면 안 됩니다.
여기까지 다섯 개를 봤는데, 다 까셔야 하는 건 아닙니다.
눈부터 붙입니다. Playwright가 효과가 제일 큽니다
기준 스킬은 하나만 고릅니다. 애니메이션이 중요하면 Emil, 전반 점검이면 Impeccable
Taste는 랜딩·포트폴리오에만 씁니다
피그마를 안 쓰면 Figma MCP는 생략합니다
그리고 제3자 스킬은 설치하는 순간 그 지침이 AI의 작업 맥락에 들어가고, 일부는 내 컴퓨터에서 코드를 실행합니다. Impeccable은 실행 파일을 내려받고 훅 설정을 설치하죠. 별이 많아도 저장소를 한 번은 열어 보고 까세요.
이 조합이면 디자이너가 필요 없어진다고까지는 말 못 하겠습니다. 이 도구들이 걷어내는 건 뻔한 기본값이고, 이 화면에서 뭘 강조할지는 여전히 사람이 정해서 넘겨야 하거든요.
그 판단 기준은 UX 법칙 5가지에, 손으로 기본값을 바꾸는 방법은 AI 티 빼는 법에 정리해 두었습니다. 오늘은 Playwright 하나만 붙여 보세요.
emilkowalski/skills README: https://github.com/emilkowalski/skills
pbakaus/impeccable README: https://github.com/pbakaus/impeccable
Leonxlnx/taste-skill README: https://github.com/Leonxlnx/taste-skill
Figma, Figma MCP server 개발자 문서: https://developers.figma.com/docs/figma-mcp-server/
Figma 도움말, Figma MCP server 안내: https://help.figma.com/hc/en-us/articles/32132100833559
microsoft/playwright-mcp README: https://github.com/microsoft/playwright-mcp