Claude Design 3.0 Destroys AI Slop

01핵심 개요

02핵심 기능/내용 구조

1) 문제 제기 — AI 슬랍이란

• 진행자는 Claude로 만든 디자인이 서로 비슷비슷해 보이는 현상을 "AI 슬랍"이라 부르며, 원인은 모두가 같은 시스템·같은 프롬프트로 생성하기 때문이라고 짚었다. (0:00)
• 해결책으로 반복 재사용 가능한 "디자인 시스템"을 먼저 구축하는 방식을 제시했다.

2) 1단계 — 디자인 시스템 만들기

• Claude 화면 좌측 하단 "Design" 메뉴에서 Claude Design을 열고, "Design Systems → Create design system"으로 새 시스템을 생성한다.
• 디자인 시스템은 AI가 따라야 할 규칙 모음으로, 모바일 앱·슬라이드·문서·와이어프레임 등 어떤 산출물에도 재사용된다.
• GitHub 저장소 연동이나 파일 업로드로 브랜드 정보를 채울 수 있으며, 예시로 가상의 프리미엄 버거 브랜드("Smash and Grab Burger Co")를 들어 시연했다.
• Claude가 대화형으로 제품·브랜드·분위기·피해야 할 클리셰 등을 질문(인터뷰)하며 시스템 프롬프트를 완성해간다. (2:53)

3) 에셋 생성 — Hicksfield 스킬 연동

• 로고·이미지 등 브랜드 에셋이 없을 때는 이미지·영상 생성 서비스 Hicksfield를 Claude Code에 연결하는 별도 스킬을 활용한다.
• 스킬 텍스트를 Claude에 붙여넣으면 Hicksfield 계정과의 CLI 연동을 자동 관리해 로고, 제품 사진(버거, 재료 텍스처팩 등)까지 생성해준다.
• 완성된 디자인 시스템("Smash grab burger co")을 예시로 보여주며, 브랜드 이미지 전체가 하나의 재사용 가능한 자산으로 묶인다고 설명했다. (5:33)

4) 2단계 — 시스템 기반 웹사이트 빌드

• 생성된 에셋 폴더를 Claude Design의 "Level 2" 단계에 첨부(browse)하고, 스킬이 제공하는 브랜드 설명 문구를 붙여넣은 뒤 "Continue to generation"을 누르면 약 5분 내 웹사이트가 생성된다.
• 이 단계에서는 가장 강력한 모델(Claude Fable 5)을 쓰기를 권장했다.
• 완성된 디자인 시스템은 "Projects → Design systems"에서 다시 열람·수정할 수 있고, 이후 어떤 요청을 해도 이 스타일을 기준으로 반영된다.
• "버거 비즈니스용 에셋을 활용해 스크롤 애니메이션이 있는 아름다운 웹사이트를 만들어달라"는 한 문장 프롬프트만으로 색상 팔레트·이미지가 통합된 사이트 초안이 나왔다.

5) 3단계 — Claude Code로 핸드오버

• Claude Design에서 만든 결과물을 "Share → Project archive → Export"로 zip 파일로 내려받아 Claude Code에서 열면, 로컬호스트에서 그대로 이어서 작업할 수 있다.
• Claude Code는 Claude Design이 할 수 있는 모든 것을 할 수 있으며(Claude Design 자체가 Claude Code 기반), 여기서 더 정교한 커스터마이징이 가능해진다.
• 디자인 시스템 자체도 같은 방식으로 내보내 팀과 공유하거나 다른 프로젝트에 재사용할 수 있다.

6) 4단계 — Showstopper 요소 추가(3D 애니메이션)

• 원샷 결과물로는 충분하지 않으며, 반복(iteration)과 "튀는 한 방(moving piece)" 요소 추가가 완성도를 좌우한다고 강조했다. (9:16)
• 3D 웹사이트 전용 스킬을 업로드하면 Claude가 애니메이션 스타일(스크롤 스크럽 히어로/자동재생 배경/독립 섹션 등)과 클립 길이(권장 약 25초)를 대화형으로 물어보며 진행한다. (11:52)
• Hicksfield로 3D 애니메이션 클립을 생성해 웹사이트 히어로 섹션에 삽입하는 예시를 시연했다.

7) UI 스니핑(UI Sniping) — 레퍼런스 활용법

• 21st.dev, UI 이터니티(shader 컴포넌트), React Bits.dev 같은 UI 컴포넌트 갤러리에서 마음에 드는 버튼·캐러셀·셰이더 코드를 찾아 그대로 복사한다.
• Claude Code에 "이 코드를 설치하되 이미지는 버거 사진으로 교체해달라"는 식으로 요청하면 레퍼런스 디자인을 브랜드에 맞게 이식할 수 있다.
• 코드를 못 구하는 경우 스크린샷만 찍어 "이 느낌으로 비슷하게 만들어달라"고 요청해도 된다.

8) 5단계 — 디자인 시스템 재사용(다른 산출물에 적용)

• 이미 만든 디자인 시스템을 다른 작업(예: 유튜브 영상용 애니메이션 그래픽)에도 그대로 선택해 재사용할 수 있다.
• 예시로 본인이 쓰는 영상용 HTML 덱 PDF를 첨부하고 "이 문장을 3개 섹션으로 나눠 애니메이션화해달라"고 요청, Claude에게 프롬프트 자체를 개선해달라고 재요청하는 과정을 보여줬다. (15:09)
• 결과물에 대해 "불필요한 태그 대신 깔끔한 HTML 컴포넌트로", "사용자가 고민하지 않아도 되게 단순화"해달라는 식으로 피드백을 주며 다듬는 과정을 반복했다.

03기술적 맥락

• Claude Design은 Claude Code를 기반으로 동작하는 상위 레이어 도구로, 디자인 시스템·프로젝트·템플릿을 저장·재사용하는 UI를 추가로 제공한다.
• 파일 첨부 용량 제한(50MB 초과 시 업로드 실패)이 있어 대용량 PDF 등은 재시도가 필요할 수 있다고 언급됐다.
• Hicksfield는 외부 이미지·영상 생성 서비스이며, 별도 계정과 스킬(CLI 연동 스크립트)을 통해 Claude Code와 연결된다.

04전략적 의미

• "같은 프롬프트→같은 결과물"이라는 AI 슬랍의 구조적 원인을 이해하면, 시스템(규칙)과 브랜드 에셋을 먼저 고정하는 것이 결과물 차별화의 핵심 레버리지 포인트가 된다.
• 초기 디자인 시스템 구축에 투자하는 시간이 이후 모든 산출물(웹사이트, 슬라이드, 영상 그래픽)의 일관성과 품질을 결정하므로, 사전 투자가 장기적으로 더 효율적이다.
• 레퍼런스 UI 갤러리 활용과 3D 애니메이션 같은 "튀는 한 방"을 더하는 반복 작업이 원샷 산출물과 실제 클라이언트 납품물의 품질 격차를 좁혀준다.

05핵심 워크플로·방법론

1. Claude Design에서 Design System 생성 → 대화형 인터뷰로 브랜드 정보(제품, 톤, 피할 것) 입력
2. (에셋 없을 시) Hicksfield 스킬로 로고·이미지·텍스처팩 자동 생성
3. 생성된 에셋을 Level 2 단계에 첨부 + 브랜드 설명 붙여넣기 → 웹사이트 원샷 생성 (Fable 5 권장)
4. Share → Project archive → Export로 Claude Code에 핸드오버, 로컬호스트에서 이어 작업
5. 3D 웹사이트 스킬로 showstopper 애니메이션(스크롤 스크럽 히어로 등) 추가
6. UI 스니핑(21st.dev, UI 이터니티, React Bits.dev)으로 레퍼런스 컴포넌트를 브랜드 색상·이미지로 교체
7. 완성된 디자인 시스템을 다른 산출물(슬라이드, 영상 그래픽 등)에도 재사용

06활용 시나리오

• 에이전시가 신규 클라이언트(예: 버거 프랜차이즈) 브랜드 웹사이트를 처음부터 디자인 시스템 기반으로 빠르게 시제작할 때.
• 유튜버·크리에이터가 영상 소개 그래픽/애니메이션을 만들 때 기존에 구축한 디자인 시스템(PDF 덱)을 그대로 재사용해 톤을 통일할 때.
• 스타트업이 로고·제품 이미지 등 브랜드 에셋이 전혀 없는 상태에서 Hicksfield로 에셋을 먼저 만들고 이를 웹사이트·슬라이드에 일관되게 적용할 때.
• 디자이너가 21st.dev·React Bits.dev 등에서 발견한 트렌디한 UI 컴포넌트(캐러셀, 셰이더 효과)를 자사 브랜드 색상·이미지로 빠르게 이식할 때.

07현황 및 전망

• 영상은 Claude Design이 반복 가능한 "시스템" 개념을 도입해 AI 슬랍 문제를 구조적으로 완화하려는 시도임을 보여주며, 이는 향후 AI 디자인 툴들이 공통적으로 채택할 방향으로 제시됐다.
• 진행자는 디자인 시스템 콘텐츠에 대한 시청자 반응에 따라 후속 영상을 이어갈 계획을 언급했다.
• Hicksfield, 3D 웹사이트 스킬 등 서드파티 스킬 생태계가 Claude Code의 핵심 확장 축으로 자리잡고 있음을 시사한다.

08용어 사전