Claude 디자인 스킬로 뻔한 웹사이트를 벗어나는 방법

URL: https://www.youtube.com/watch?v=tfgY2AEtklY
날짜: 2026-08-26
채널: Tech Bridge
원문 제목: [한영자막] Claude로 예쁜 웹사이트를 만드는 디자인 스킬, 진짜 차이는 이것입니다
영상 ID: tfgY2AEtklY

---

📌 핵심 질문 / Claude가 만든 웹사이트를 어떻게 뻔한 결과에서 벗어나게 할 것인가

==AI 모델의 코딩 능력만으로는 충분하지 않다. 모델마다 디자인을 생성하는 고유한 패턴이 있고, 전문 디자이너의 검증된 작업 흐름을 담은 스킬이 그 패턴을 조정해 차별화된 결과를 만든다.==

• AI 웹 디자인 스킬의 품질은 복잡한 절차의 길이가 아니라 실제 디자인 원칙, 레퍼런스, 검토 기준을 모델의 작업 흐름에 연결하는 방식에서 갈린다.
• 생성 전 요구사항을 질문으로 구체화하고, 실제로 잘 작동한 디자인을 참고하며, 생성 후에는 애니메이션·레이아웃·접근성·반응형·인지 원칙을 검토하는 순환이 필요하다.
• 랜딩 페이지처럼 목적이 하나인 화면과 제품의 기능 화면, 몰입형 스크롤 사이트는 서로 다른 스킬 조합이 필요하므로 모든 스킬을 한꺼번에 설치할 필요가 없다.

AI 모델은 이미 훌륭한 웹사이트를 만들 수 있지만, 그 결과에는 모델마다 쉽게 알아볼 수 있는 반복 패턴이 남는다. 디자인 경험이 많은 사람들이 실제로 시험해 효과를 확인한 작업 흐름을 재사용 가능한 스킬로 포장하면, 모델의 기본값에서 벗어나면서도 일관된 시각 체계와 검증 가능한 품질을 얻을 수 있다.

1. AI 웹 디자인에서 스킬이 필요한 이유

1.1. 모델의 기본 패턴과 전문 작업 흐름

1. 강력한 모델도 동일한 인상을 반복한다

   1. 능력과 결과의 간극: AI로 아름다운 웹사이트를 설계하게 해 주는 스킬은 많지만, 인상적인 워크플로를 거쳐도 결과가 다른 사이트와 똑같아지는 경우가 있다.
   2. 눈에 보이는 모델의 습관: 모델이 아무리 강력해도 디자인을 생성할 때 따르는 고유 패턴이 있으며, 그 패턴은 사용자가 쉽게 알아볼 수 있다.
   3. 차별화의 조건: 모델이 기본 패턴으로 흘러가지 않도록 방향을 조정하는 장치가 있어야 웹사이트가 눈에 띈다.

2. 스킬은 디자이너의 검증된 경험을 재사용한다

   1. 경험의 압축: 디자인에 폭넓은 경험을 가진 사람들이 직접 테스트해 효과가 있었던 작업 흐름을 재사용 가능한 형식으로 재구성한다.
   2. 복잡함보다 결과: 보기에는 집중적인 워크플로라도 실제 사이트가 평범하다면 가치가 없다. 효과가 검증된 스킬은 모델의 결과물에 실제 차이를 만들어야 한다.
   3. 도구 독립성: 같은 스킬은 Claude Design뿐 아니라 Claude Code, Codex, 그 밖의 에이전트에서도 사용할 수 있다.

1.2. Claude에서 스킬을 적용하는 기본 절차

1. Claude Design에 직접 내장할 필요가 없다

   1. 설정 위치: Claude Design 자체에 스킬을 추가하는 것이 아니라 Claude 설정에서 원하는 스킬을 추가한다.
   2. 공통 적용: Claude 설정에 설치한 스킬은 Claude Design 안에서도 동일하게 사용할 수 있다.

2. 슬래시 명령으로 호출한다

   1. 호출 방식: 스킬을 추가한 뒤 Claude Design에서 /를 입력하고 스킬 이름을 선택한다.
   2. 요구사항 전달: 프롬프트에 만들고 싶은 사이트가 무엇인지 함께 적는다.
   3. 질문 단계: 여러 스킬은 바로 코드를 만들지 않고 앱이나 사이트의 요구사항을 질문한다. 답변이 끝난 뒤 설계를 시작한다.

2. Emil Kowalski의 스킬 컬렉션: 애니메이션과 디자인 엔지니어링

Emil Kowalski의 컬렉션에는 모두 9개의 스킬이 있으며, 각각 디자인의 다른 부분을 바꾼다. Claude Code와 Claude Design으로 작업할 때 실제로 활용하는 컬렉션이며, 특정 영역만 골라 적용할 수 있다.

2.1. 9개 스킬 중 핵심적인 두 가지

1. Apple Design

   1. 원칙의 이식: Apple 제품에 실제로 사용되는 디자인 원칙을 정리해 다른 웹사이트에서도 활용할 수 있게 한다.
   2. 용도: Apple 특유의 구조, 절제, 상호작용 원칙을 참고하고 싶을 때 디자인의 기준점으로 쓸 수 있다.

2. Animation Vocabulary

   1. 모호한 요구의 변환: “부드럽게 나타나게 해 줘”처럼 막연한 애니메이션 설명을 모델이 이해할 수 있는 정확한 표현으로 바꾼다.
   2. 효과: 애니메이션 의도를 구체적인 동작과 타이밍 언어로 전달해 모델이 원하는 움직임에 더 가깝게 구현하도록 돕는다.

3. Design Engineering

   1. 시작점: 아직 디자인을 만들지 않은 상태에서 먼저 적용하기 좋은 스킬이다.
   2. 절차: 스킬을 호출하면 Claude Design처럼 앱의 목적과 요구사항을 먼저 묻고, 답변을 반영해 초기 디자인을 만든다.
   3. 초기 결과: 생성된 첫 버전은 미니멀하고 모노톤인 경향이 있었다.

4. Animate

   1. 후처리 전용: 이미 만들어진 웹사이트에 애니메이션을 추가하거나 다듬는 완전한 워크플로를 제공한다.
   2. 판단 기능: 사이트의 구조와 기능을 파악한 뒤 무엇을 움직여야 하고 무엇은 움직이지 않아야 하는지 결정한다.
   3. 실행 순서: 단계별 지침에 따라 기존 화면의 움직임을 분석하고, 필요한 애니메이션을 추가하며, 결과를 다시 정돈한다.

2.2. 랜딩 페이지와 기능 화면에서의 차이

1. 초기 애니메이션의 문제

   1. 완성도 부족: Design Engineering으로 만든 첫 버전의 애니메이션은 충분히 세련되지 않았다.
   2. 동기화 오류: 일부 움직임이 서로 맞지 않았고, 스크롤과 애니메이션의 타이밍이 어긋나는 곳이 있었다.

2. Animate 적용 후의 개선

   1. 스크롤 동기화: 애니메이션이 스크롤과 더 잘 맞게 되었다.
   2. 의도성: 요소마다 움직임의 이유가 분명해지고, 전체 사이트가 이전보다 더 의도적으로 설계된 인상을 줬다.
   3. 랜딩 페이지의 한계: 랜딩 페이지에서는 이미 모델이 만드는 결과와 크게 다르지 않아 보일 수 있다. 랜딩 페이지에서 가장 효과적인 큰 애니메이션은 스크롤 기반 애니메이션인데, 이 분야의 별도 스킬은 이전 콘텐츠에서 다뤄진 바 있다.

3. 기능적 제품 화면에서의 강점

   1. 레스토랑 사이트 사례: 레스토랑용 사이트에 Animate를 적용해 기능을 사용하는 감각을 개선했다.
   2. 폼 제출 피드백: 폼을 제출할 때 작은 애니메이션을 넣어 사용자의 행동에 반응하도록 했다.
   3. 호버 그래픽: 마우스를 올렸을 때 그래픽이 나타나거나 반응하게 만들어 화면이 살아 움직이도록 했다.
   4. 누적 효과: 각각은 작은 디테일이지만 함께 작동하면 사이트가 훨씬 인터랙티브해지고, 실제 사용 경험이 좋아진다.

4. 선택적 설치의 원칙

   1. Emil의 스킬은 여러 개를 추가해도 각각 디자인 툴킷에 의미 있는 보탬이 된다.
   2. 모든 스킬을 동시에 쓰기보다 초기 설계에는 Design Engineering, 완성된 기능 화면의 움직임에는 Animate처럼 단계와 목적에 맞춰 조합할 수 있다.

3. Connard Lee의 Garden 컬렉션: 레퍼런스에서 출발하는 시각 설계

3.1. Web Design Engineer의 목적

1. 다섯 개 스킬로 구성된 컬렉션

   1. 범위: Garden은 비디오 프레젠테이션과 이미지 등 여러 영역을 다루는 5개의 스킬 모음이다.
   2. 핵심 스킬: 그중 가장 중요한 것은 Web Design Engineer다.

2. 시각적 완성도에 집중한다

   1. 전문가 수준의 설계: 최상급 디자인 엔지니어처럼 설계하는 지침을 담고 있다.
   2. 범위의 한계: 기능 구현보다 시각적으로 놀라운 결과를 만드는 데 집중한다. 따라서 기능성과 시각성을 모두 한 번에 해결하는 스킬이라기보다 비주얼 품질을 강화하는 도구다.

3.2. ‘허공에서 시작하지 않는’ 디자인 방법

1. 요구사항을 명확하게 만든다

   1. 사용자의 요구를 곧바로 코드로 바꾸지 않고, 원하는 결과가 명확해질 때까지 대화하며 요구사항을 구체화한다.
   2. 무엇을 만들고 싶은지, 어떤 분위기와 목적을 가져야 하는지를 질문과 답변으로 정리한다.

2. 실제 디자인을 찾아 기준으로 삼는다

   1. 핵심 원칙: “좋은 디자인은 결코 허공에서 시작되지 않는다.” 모든 디자인은 앞서 존재한 무언가에서 영감을 얻듯, 이미 효과가 입증된 디자인을 토대로 설계를 시작한다.
   2. 레퍼런스 기반: 스킬은 요구사항이 정리되면 실제 디자인을 찾아 작업의 기준으로 삼는다.
   3. 내장 레퍼런스: 디자인을 평가하는 방법, 디자인이 흔히 잘못되는 지점, Apple과 Linear처럼 잘 알려진 사이트의 스타일 레시피가 함께 들어 있다.
   4. 구체적 관찰: Apple이나 Linear의 스타일을 이름만 빌리는 것이 아니라 해당 사이트의 디자인이 실제로 작동하는 방식을 참고한다.

3. 생성 결과와 반복 평가

   1. Web Design Engineer로 만든 사이트는 Claude Design만 사용했을 때보다 훨씬 흥미롭고 철저했으며, 디자인 관점에서도 더 나았다.
   2. 이미 만들어진 디자인에 스킬을 실행하면 여러 영역별로 점수를 매긴다.
   3. 점수와 피드백을 반영해 계속 수정하고 다시 실행하면, 원하는 디자인에 가까워지고 점수를 완벽한 수준까지 끌어올릴 수 있다.

4. Aliya Design의 AI Design 스킬: 랜딩 페이지를 행동으로 연결하는 시스템

4.1. 홈페이지와 랜딩 페이지의 목적은 다르다

1. 단일 스킬·단일 파일 구조

   1. Aliya Design의 AI Design은 여러 파일의 컬렉션이 아니라 한 파일에 모든 기능을 담은 하나의 스킬이다.
   2. 아이디어를 페이지 전체가 따르는 규칙의 집합인 **비주얼 시스템(visual system)**으로 변환한다.

2. 비주얼 시스템의 구성요소

   1. 색상: 브랜드와 페이지의 분위기를 결정하는 색상 체계를 정한다.
   2. 타이포그래피: 제목·본문·버튼의 위계와 글꼴 사용 규칙을 정한다.
   3. 간격: 요소 사이의 여백과 화면 전체의 리듬을 정한다.
   4. 일관성: 페이지의 각 요소가 같은 시각 규칙을 따르도록 만든다.

3. 홈페이지와 랜딩 페이지의 구분

   1. 홈페이지: 여러 종류의 방문자를 동시에 응대해야 하므로 다양한 정보와 목적을 수용한다.
   2. 랜딩 페이지: 방문자가 실제로 행동하게 만드는 하나의 목적을 가진다.
   3. 모델의 기본 경향: 일반 모델은 작동하는 홈페이지를 잘 만들지만, 단일 행동을 중심으로 최적화된 랜딩 페이지를 만드는 데 자동으로 특화되어 있지는 않다.

4.2. 하나의 행동과 검색 가능성을 중심에 둔다

1. CTA에 집중하는 구조

   1. 방문자가 사이트에 들어온 뒤 무엇을 하기를 원하는지 먼저 정한다.
   2. 페이지 구조 전체를 그 행동 주변에 배치해 시선과 흐름이 해당 행동으로 향하게 한다.
   3. 화면의 모든 요소가 목적을 강화하도록 설계해 구매나 신청 같은 전환 가능성을 높인다.

2. 놓치기 쉬운 웹 디자인 영역까지 다룬다

   1. 페이지가 하나의 시각적 스타일을 끝까지 유지하게 한다.
   2. 대부분의 모델이 간과하기 쉬운 검색 노출 가능성도 고려한다.
   3. 따라서 단순히 보기 좋은 화면이 아니라 발견되고, 이해되고, 행동으로 이어지는 랜딩 페이지를 목표로 한다.

3. 질문과 결과

   1. Claude의 스킬 설정에 설치한 뒤 디자인 프롬프트와 함께 호출한다.
   2. 스킬은 먼저 질문하고 답변을 받은 뒤 설계를 시작한다.
   3. 생성된 사이트는 실제 브랜드처럼 느껴졌고, 원하는 분위기와 정확히 맞았다.
   4. 각 요소의 배치가 행동을 유도하도록 구성되어 사이트에 들어온 사람이 실제로 구매할 가능성이 더 높아졌다.

5. Meng To의 스킬: 고품질 시각 효과와 스크롤 스토리텔링

5.1. 보기 좋은 화면을 넘어 이야기를 설계한다

1. 디자이너의 경험을 시스템화한다

   1. Meng To는 오랫동안 업계에서 활동한 디자이너다.
   2. 몰입형 스크롤 기반 스토리텔링 디자인으로 알려져 있으며, 자신이 발견한 원칙과 방법을 여러 디자인 스킬로 포장했다.

2. 품질의 기준

   1. 컬렉션은 여러 디자인 영역을 다루지만, 공통 목표는 단순히 예쁘게 보이는 화면이 아니다.
   2. 고품질 디자인이 사용자의 이동과 상호작용을 따라 이야기를 전달하도록 만드는 데 초점을 둔다.

3. Video to Super Prompt

   1. 웹사이트의 화면 녹화나 워크스루를 입력으로 사용한다.
   2. 컴퓨터에서 실행되는 도구로 녹화 내용을 분석해 에이전트가 사용할 수 있는 프롬프트로 바꾼다.
   3. 말로 사이트의 모든 동작을 설명하기보다, 실제 화면 흐름을 프롬프트로 변환하는 방식이다.

5.2. Awwwards Quality Sites

1. 수상작의 원칙을 모델에 주입한다

   1. Awwwards는 뛰어난 웹 디자인을 겨루는 사이트 공모전이며, 수상 사이트는 웹에서 가장 잘 설계된 사이트로 인정받는다.
   2. Awwwards Quality Sites 스킬은 그런 사이트에 공통으로 들어가는 디자인 원칙과 세부 요소를 목록화한다.
   3. Claude가 기본 상태에서 Awwwards 수준의 디자인을 만들지는 못하기 때문에, 스킬이 그 원칙을 작업 과정에 넣고 설계 방향을 조정한다.

2. 고가의 인상을 만드는 구체적 기법

   1. 원칙만 설명하는 것이 아니라 실제 효과와 기법도 함께 제공한다.
   2. 모델이 스스로는 잘 만들지 않는 세부 효과가 사이트를 ‘비싸 보이게’ 만드는 중요한 부분이다.
   3. 스킬을 설치한 뒤 만들고 싶은 사이트를 프롬프트로 설명하면, 수상작과 같은 방식으로 구조화되고 설계된 결과가 나온다.

3. 확인된 결과

   1. 배경에는 미묘한 애니메이션이 들어갔다.
   2. 가장 눈에 띄는 부분은 스크롤이었다.
   3. Awwwards에 소개되는 사이트처럼 스크롤 기반 스토리텔링으로 사용자의 이동을 디자인했다.

6. Jakub Krchel의 모듈형 스킬: 평가와 교정을 반복하는 품질 관리

6.1. 디자인의 각 영역을 분리한다

1. 한 스킬에 모두 맡기지 않는다

   1. 다른 컬렉션이 사이트의 여러 부분을 한 번에 처리하는 것과 달리, Jakub Krchel의 컬렉션은 영역마다 별도 스킬을 둔다.
   2. 타이포그래피, 색상, 접근성 등 디자인의 구성요소가 각각 독립된 검토 단위가 된다.

2. Review 스킬

   1. 모든 디자인 측면을 종합적으로 검토한다.
   2. 평가 점수를 기반으로 다음 반복 작업의 우선순위를 정한다.
   3. 디자인을 한 번 만들고 끝내지 않고, 점수를 올리는 방향으로 계속 개선한다.

3. GitHub 연결의 효과

   1. GitHub에 연결하면 변경 전과 변경 후의 디자인을 비교할 수 있다.
   2. 마지막 변경 전에 작동하던 기능이 사라졌다면 그 사실을 표시한다.
   3. 무엇이 망가졌는지만 알려주는 것이 아니라, 특정 변경 때문에 문제가 생겼다고 원인을 연결해 알려준다.
   4. 애니메이션, 접근성, 다양한 화면 크기에서의 반응형 동작을 점검하고 발견한 문제를 목록으로 제시한다.

6.2. Better Layout과 Tastemaker

1. Better Layout

   1. Claude Design이 특히 어려워하는 간격, 위치, 정렬을 다룬다.
   2. 화면 전체에서 요소가 어떻게 맞물리는지 세밀하게 점검한다.
   3. 실제 사례에서 페이지의 날짜 요소에 할당된 공간이 부족하다는 점을 찾아냈다.
   4. 단순히 공간이 부족하다고 끝내지 않고, 몇 픽셀을 더 확보해야 하는지까지 알려줬다.
   5. 표시된 문제를 모두 수정하라고 지시하면 사이트의 인상이 극적으로 바뀌지는 않지만, 실무 디자이너가 따르는 원칙에 맞게 결과가 정확해진다.

2. Tastemaker의 출발점

   1. 모델이 만들어 내는 제네릭한 기본 스타일을 피하는 것이 핵심 목적이다.
   2. 일반적으로 모델에 레퍼런스 이미지를 주면 이미지를 글로 요약하고, 나중에 그 텍스트를 레퍼런스로 사용한다.
   3. 텍스트 요약 과정에서는 픽셀 수준의 세부사항이 사라질 수 있다.

3. 픽셀에서 구조화된 데이터로

   1. Tastemaker는 레퍼런스 이미지의 실제 픽셀을 스크립트로 추출한다.
   2. 색상, 간격, 형태 등 텍스트로 바꾸는 순간 손실되기 쉬운 디자인 세부사항을 에이전트가 나중에 사용할 수 있는 구조화된 형식으로 저장한다.
   3. 에이전트가 혼자 처리할 필요가 없는 작업은 먼저 스크립트가 처리한다.

4. 프로젝트 전체에 적용되는 취향

   1. 스크립트가 디자인을 여러 방향으로 밀어 보고 변형을 시도한다.
   2. 한 화면에서만 통하는 선택이 아니라 프로젝트 전체에 걸쳐 결정이 유지된다.
   3. 결과적으로 모델이 매번 같은 일반적인 패턴으로 돌아가지 않고, 주어진 레퍼런스의 분위기와 요구사항에 맞는 ‘취향(taste)’을 가지고 설계하게 된다.
   4. 실제로 사이트와 스타일 요구사항을 함께 주자 제네릭한 스타일이 사라지고 요청한 사이트의 모양과 감각에 맞는 인상적인 결과가 나왔다.

7. 연구 기반 디자인 법칙 컬렉션: 시선과 행동을 기준으로 검토하기

7.1. 명명된 법칙을 개별 스킬로 활용한다

1. 실제 연구에 근거한 컬렉션

   1. 마지막 컬렉션은 디자이너가 실제로 사용하는 이름 붙은 법칙과 연구에 기반한다.
   2. 각 법칙을 별도 스킬로 나누어 필요할 때만 설치할 수 있다.

2. 사용자 이탈과 행동의 흐름

   1. 일부 스킬은 사용자가 사이트를 중간에 떠나는 이유를 다룬다.
   2. 사용자가 사이트를 이동할 때 행동이 어떻게 나타나는지도 분석한다.
   3. 설계의 목표를 미적인 화면에만 두지 않고, 사람이 실제로 무엇을 보고 어디에서 멈추며 왜 이탈하는지까지 확장한다.

7.2. Screen Critique와 Perception Laws

1. Screen Critique

   1. 특정 화면을 여러 관점에서 검토한다.
   2. 화면이 어디에서 잘못되고 있는지 찾아낸다.
   3. 임의의 취향이 아니라 디자인 품질을 판단하기 위한 적절한 가이드라인을 기준으로 문제를 제시한다.

2. Perception Laws

   1. 인간의 눈이 디자인을 실제로 어떻게 보고 이해하는지에 대한 지침을 담는다.
   2. 시각적 위계, 시선이 먼저 닿는 요소, 정보의 인지 과정을 고려해 화면을 다듬는다.

3. 검토 결과와 개선 순환

   1. 완성된 디자인에 검토를 실행하면 무엇이 먼저 눈에 들어오는지, 타이포그래피가 적절한지, 간격이 맞는지 등의 문제가 목록으로 돌아온다.
   2. 목록을 바탕으로 직접 수정할 수 있다.
   3. Perception Laws를 사이트에 적용하면 화면 전체가 더 정제된 느낌을 준다.

8. 실전 적용을 위한 스킬 조합

8.1. 목적과 단계에 맞춰 선택한다

1. 처음부터 만드는 제품

   1. 요구사항을 질문으로 정리하는 Design Engineering이나 Web Design Engineer를 초기 설계에 사용한다.
   2. 랜딩 페이지라면 AI Design으로 단일 CTA, 비주얼 시스템, 검색 노출을 함께 설계한다.

2. 이미 만들어진 사이트를 다듬는 경우

   1. Animate로 기능 화면의 작은 상호작용과 스크롤 동기화를 개선한다.
   2. Review와 Better Layout으로 변경 전후 회귀, 접근성, 반응형, 간격, 정렬을 검사한다.
   3. Screen Critique와 Perception Laws로 시각적 위계와 인간의 인지 흐름을 검토한다.

3. 강한 시각적 개성과 스토리텔링이 필요한 경우

   1. Tastemaker로 실제 레퍼런스의 픽셀 세부사항을 보존한다.
   2. Awwwards Quality Sites로 고급 효과와 스크롤 기반 스토리텔링을 보강한다.
   3. Video to Super Prompt로 참고 사이트의 워크스루를 에이전트용 프롬프트로 변환한다.

8.2. 최소 설치와 반복 검토

1. 모두 설치할 필요가 없다

   1. 컬렉션 전체를 설치하기보다 자신의 작업 방식과 제품 목적에 맞는 스킬만 고른다.
   2. 시각적 완성도, 랜딩 전환, 기능 상호작용, 접근성, 레이아웃 정확성처럼 현재 병목이 되는 영역을 먼저 선택한다.

2. 생성 → 평가 → 수정의 루프

   1. 생성 전 질문을 통해 목적과 요구사항을 명확히 한다.
   2. 실제로 검증된 레퍼런스와 원칙을 작업에 연결한다.
   3. 생성 후에는 점수, 픽셀, 접근성, 화면 크기, 시선 흐름, 애니메이션 동기화를 검토한다.
   4. 발견된 문제를 수정하고 같은 검토를 다시 실행한다.
   5. 모델의 기본 패턴을 완전히 없애는 것이 아니라, 전문 기준과 반복 피드백으로 결과가 그 패턴에 머물지 않도록 유도한다.

주요 발언 모음

“모델이 아무리 강력해도 디자인할 때는 각자의 패턴을 따르며, 그 패턴은 쉽게 알아볼 수 있다.”

“좋은 디자인은 결코 허공에서 시작되지 않는다.”

“랜딩 페이지는 홈페이지가 아니다.”

“모델에 레퍼런스의 모습을 말로 요약하게 하면, 원래 디자인의 디테일이 손실된다.”

“작은 디테일이 모두 합쳐지면 사이트가 훨씬 더 인터랙티브해지고, 사용하는 경험도 좋아진다.”

핵심 데이터 & 수치

• 9개: Emil Kowalski 컬렉션에 포함된 스킬 수다.
• 5개: Connard Lee의 Garden 컬렉션에 포함된 스킬 수다.
• 1개 파일: Aliya Design의 AI Design 스킬은 모든 지침을 하나의 파일에 담는다.
• 2개 선택: 실전 구성에서 연구 기반 컬렉션 중 Screen Critique와 Perception Laws를 선택해 사용했다.
• 몇 픽셀: Better Layout은 날짜 요소에 필요한 추가 공간을 막연한 지적이 아니라 픽셀 단위로 제시했다.
• 11분 37초: 자막 기준으로 제품 제작에 활용한 공개 스킬 컬렉션과 자체 제작 스킬의 방향을 설명하는 분량이다.

결론 및 시사점

1. AI가 예쁜 웹사이트를 만드는 능력보다 중요한 것은 모델이 반복하는 기본 패턴을 어떤 원칙과 레퍼런스로 조정하느냐다.
2. Design Engineering은 요구사항을 질문으로 정리하고 초기 구조를 만드는 출발점이며, Animate는 이미 만들어진 기능 화면의 움직임을 정교하게 다듬는 후속 도구다.
3. 랜딩 페이지는 홈페이지처럼 많은 요구를 담기보다 하나의 행동을 중심으로 비주얼 시스템과 검색 가능성을 설계해야 한다.
4. Web Design Engineer와 Awwwards Quality Sites는 실제로 잘 작동한 디자인을 기준으로 삼아 모델이 허공에서 임의의 스타일을 만들지 않게 한다.
5. Review, Better Layout, Screen Critique, Perception Laws는 생성 결과를 점수·레이아웃·접근성·반응형·인지 법칙으로 검증하는 안전망이다.
6. Tastemaker는 레퍼런스를 텍스트로만 요약할 때 사라지는 픽셀 수준의 정보를 보존해 프로젝트 전체의 시각적 취향으로 확장한다.
7. Video to Super Prompt는 화면 녹화와 워크스루를 에이전트가 활용할 수 있는 구체적인 프롬프트로 바꾼다.
8. 모든 스킬을 설치하는 것보다 현재 제품의 목적과 가장 큰 품질 병목에 맞는 스킬을 선택하고, 생성·평가·수정 루프를 반복하는 편이 효과적이다.
9. 공개 GitHub 스킬 외에도 AI Labs는 제품을 실제로 만들며 테스트하고 다듬은 자체 스킬을 별도로 사용한다.

핵심 요약 (20줄)

1. AI 모델은 강력해도 각자 반복하는 디자인 패턴이 있어 결과가 쉽게 비슷해진다.
2. 전문 디자이너의 검증된 작업 흐름을 스킬로 재사용하면 모델의 기본 패턴에서 벗어날 수 있다.
3. Claude 설정에 추가한 스킬은 Claude Design뿐 아니라 Claude Code와 Codex에서도 활용할 수 있다.
4. 스킬은 Claude Design에 직접 내장하는 것이 아니라 Claude 설정에서 설치한다.
5. /와 스킬 이름을 입력한 뒤 만들고 싶은 사이트를 프롬프트로 전달하면 스킬을 호출할 수 있다.
6. Emil Kowalski의 컬렉션은 9개 스킬로 Apple 원칙과 애니메이션 언어 등을 제공한다.
7. Design Engineering은 질문으로 요구사항을 정리한 뒤 초기 웹사이트 디자인을 생성한다.
8. Animate는 완성된 사이트에서 필요한 움직임을 선별하고 애니메이션을 단계적으로 개선한다.
9. Animate는 랜딩 페이지보다 폼 제출과 호버 그래픽 같은 기능 화면의 작은 상호작용에서 특히 강점을 보였다.
10. Connard Lee의 Garden 컬렉션은 5개 스킬로 구성되며 Web Design Engineer가 시각적 품질을 담당한다.
11. Web Design Engineer는 요구사항을 명확히 한 뒤 실제로 검증된 디자인을 레퍼런스로 삼는다.
12. Aliya Design의 AI Design은 랜딩 페이지를 색상·타이포그래피·간격의 비주얼 시스템으로 조직한다.
13. 랜딩 페이지는 홈페이지와 달리 방문자가 취해야 할 하나의 행동에 모든 구조를 집중해야 한다.
14. Meng To의 스킬은 고품질 화면을 단순한 장식이 아니라 스크롤 기반 스토리텔링으로 연결한다.
15. Awwwards Quality Sites는 수상작의 원칙과 고급 효과를 모델의 설계 과정에 주입한다.
16. Jakub Krchel의 Review는 GitHub 변경 이력을 활용해 애니메이션·접근성·반응형 문제를 추적한다.
17. Better Layout은 간격과 정렬을 점검하고 필요한 추가 공간을 픽셀 단위로 제시한다.
18. Tastemaker는 레퍼런스 이미지의 픽셀 정보를 구조화해 텍스트 요약에서 사라지는 디테일을 보존한다.
19. Screen Critique와 Perception Laws는 시선의 우선순위·타이포그래피·간격을 인간의 인지 법칙으로 검토한다.
20. 목적에 맞는 스킬을 선택해 생성·평가·수정을 반복하는 과정이 AI 웹사이트의 차별화와 완성도를 결정한다.