클로드 웹디자인 스킬 설치 방법, 피그마 MCP·플레이라이트 연결까지

클로드 웹디자인 스킬 세 개를 붙이고 피그마 MCP와 플레이라이트를 연결하는 방법을 정리했습니다. 게으른빌더 채널의 37초 쇼츠가 말한 6단계 순서를 그대로 따르되, 영상이 문서로 미룬 스킬의 실제 이름과 설치 명령, 연결 확인법, 첫 프롬프트 예시를 채워 넣었습니다.

이 영상이 말하는 클로드 웹디자인 구성

클로드 웹디자인 스킬을 세 개 붙이고 외부 도구 두 개를 연결하면, 클로드가 디자인부터 스크린샷까지 혼자 한다는 주장입니다. 첫 문장은 "클로드가 방금 웹 디자인을 전부 끝장냈어요"입니다. 37초 안에서 화자는 무엇을 붙이는지만 말하고, 어디를 눌러 추가하는지는 말하지 않습니다. 그 부분은 아래 단계마다 명령어로 채웠습니다.

준비물

• 클로드 코드: 터미널에서 쓰는 클로드. 클로드 유료 요금제가 필요하고, 요금은 공식 안내를 확인해야 합니다.
• Node.js: 스킬 설치 명령(npx)과 플레이라이트 실행에 필요합니다. nodejs.org에서 LTS 버전을 받아 설치하고, 터미널에서 node -v를 쳐서 버전 숫자가 나오면 됩니다.
• 피그마 계정: 피그마 MCP를 쓰려면 로그인해야 합니다.
• 비용: 영상에 언급이 없습니다. 아래 스킬들은 GitHub에 공개된 무료 오픈소스입니다.

클로드 코드가 없다면 먼저 설치합니다. 맥은 터미널(Cmd+스페이스 → "터미널")에 아래를 붙여 넣습니다.

curl -fsSL https://claude.ai/install.sh | bash

윈도우는 PowerShell에서 irm https://claude.ai/install.ps1 | iex를 실행합니다. 설치 뒤 claude를 입력해 로그인합니다.

1단계. 에밀 코발스키 디자인 스킬을 추가한다

화자가 "먼저"라고 못 박은 첫 동작입니다. 자막의 "애밀코알스키"는 디자인 엔지니어 에밀 코발스키(Emil Kowalski)입니다. 그가 공개한 스킬 묶음은 애니메이션과 인터랙션 다듬기에 강합니다.

터미널에서 작업할 프로젝트 폴더로 이동한 뒤 실행합니다.

npx skills add emilkowalski/skills

설치 도중 어떤 에이전트(클로드 코드 등)에 넣을지 물으면 클로드 코드를 고릅니다.

• 확인: 클로드 코드를 다시 실행하고 /를 입력하면 새 스킬 이름이 목록에 보입니다.

2단계. 임페커블 스킬을 추가한다

같은 방식으로 두 번째 디자인 스킬을 붙입니다. 자막의 "임팩커블"은 Impeccable입니다.

npx skills add pbakaus/impeccable

• 확인: 스킬 목록에 디자인 스킬이 두 묶음이 됩니다.

이 두 개가 잡아주는 항목을 화자는 네 가지로 말합니다. 타이포그래피, 간격, 레이아웃 애니메이션, 규칙. Impeccable은 폰트, 여백, 색 같은 화면 품질을 손보는 쪽이고, 에밀 코발스키 스킬은 움직임 쪽을 맡는다고 보면 역할이 나뉩니다.

3단계. 테이스트 스킬을 추가한다

디자인 규칙 다음은 취향입니다. 역할은 한 문장으로 설명됩니다. 뻔한 AI 느낌 대신 멋진 웹사이트를 참고하게 해준다는 것.

npx skills add https://github.com/Leonxlnx/taste-skill

• 확인: 스킬 목록에 taste 관련 스킬이 보입니다.

4단계. 피그마 MCP를 연결한다

화자가 "마지막으로"라고 말하는 묶음의 앞쪽입니다. MCP(클로드가 외부 서비스를 직접 쓰게 해주는 연결 규격)로 피그마를 붙이면, 클로드가 피그마 파일의 레이아웃과 색 정보를 읽어 코드로 옮길 수 있습니다.

피그마 공식 안내 기준으로 터미널에서 아래를 실행합니다.

claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp

1. 클로드 코드를 실행하고 /mcp를 입력합니다.
2. 목록에서 figma-remote-mcp를 골라 엔터를 누르면 브라우저가 열립니다.
3. 피그마에 로그인하고 "Allow access"를 누릅니다.

• 확인: /mcp 목록에서 피그마가 연결됨으로 표시됩니다.

5단계. 플레이라이트를 연결한다

플레이라이트(Playwright)는 브라우저를 자동으로 열고 클릭하고 스크린샷을 찍는 도구입니다. 이게 붙어야 클로드가 만든 페이지를 직접 열어 보고 확인할 수 있습니다.

claude mcp add playwright -- npx @playwright/mcp@latest

• 확인: claude mcp list에 playwright가 보입니다. 처음 쓸 때 브라우저 설치를 물으면 허용합니다.

이 둘을 붙이면 클로드가 직접 디자인하고, 빌드하고, 테스트해서 스크린샷까지 찍어준다고 화자는 말합니다.

6단계. 원하는 웹사이트를 설명한다

세팅이 끝나면 할 일은 하나입니다. 만들고 싶은 웹사이트를 말로 설명하면 나머지는 클로드가 알아서 한다는 것. 영상에는 프롬프트 예시가 없어서 편집자가 만든 예시를 붙입니다.

동네 베이커리 소개 웹사이트를 만들어 줘.
- 목적: 방문자가 "오늘의 빵" 목록을 보고 매장 위치를 찾게 한다.
- 섹션: 첫 화면(대표 사진 자리와 한 줄 소개), 오늘의 빵, 매장 이야기, 오시는 길, 문의.
- 설치한 디자인 스킬과 taste 스킬 규칙을 따르고, 뻔한 AI 템플릿 느낌(보라색 그라데이션, 똑같은 카드 3개 나열)은 피해.
- 만든 뒤 플레이라이트로 데스크톱과 모바일 크기에서 각각 스크린샷을 찍고, 겹치거나 잘린 부분이 있으면 고친 다음 다시 찍어서 보여줘.

피그마 시안이 있다면 첫 줄을 "이 피그마 링크의 디자인대로 만들어 줘: (피그마 프레임 링크)"로 바꿉니다. 프레임 링크는 피그마에서 해당 프레임을 선택하고 마우스 오른쪽 버튼 > 링크 복사로 얻습니다.

• 확인: 클로드가 디자인 → 빌드 → 테스트 → 스크린샷 순으로 진행합니다(화자 주장).

최종 체크리스트

• 디자인 스킬 두 개가 추가돼 있다
• 테이스트 스킬이 추가돼 있다
• 피그마 MCP가 연결돼 있다
• 플레이라이트가 연결돼 있다
• 웹사이트를 말로 설명했을 때 스크린샷까지 돌아온다

되돌리려면 claude mcp remove figma-remote-mcp, claude mcp remove playwright로 연결을 해제하고, 스킬은 설치된 스킬 폴더(프로젝트의 .claude/skills/ 등)에서 해당 폴더를 지웁니다.

화자가 실제로 권한 것

화자는 스킬 설치·연결 방법과 제작 방법을 문서로 정리해 뒀다며, 댓글에 "웹사이트"라고 남기면 보내준다고 합니다. 게으른빌더 팔로우도 요청합니다. "전문가가 만든 것 같은 웹사이트"라는 평가는 비교 대상 없이 화자가 한 말입니다.

출처: youtube.com/…