Claude Code 디자인 AI Slop 끝장내는 10가지 무기, 이렇게 써야 산다

Comparison of generic AI slop UI and refined custom UI using Claude Code tools

Claude Code 디자인, 이렇게 쓰면 자격 없다: AI Slop 부수는 10가지 무기

Kim Jongwook · 2026-04-15

핵심 요약

Split-screen browser showing AI slop UI vs refined intentional design

Claude Code는 디자인 취향이 거의 없다.
AI Slop은 퍼플 그라디언트·Inter 남용이다.
10개 스킬·도구로 Slop을 체계적으로 차단한다.
기존 웹사이트를 그대로 Claude 스킬로 복제한다.
폰트·테스트만 바꿔도 체급이 달라진다.

Table of Contents

Claude Code 디자인, 이렇게 쓰면 자격 없다: AI Slop 부수는 10가지 무기

이 글에서 무엇을 배우게 될까요?

Tools cleaning AI slop patterns and applying a real design system

Claude Code로 프론트엔드를 만들다 보면, 이상하게도 비슷한 보라 그라디언트와 Inter 폰트, 네모난 카드가 줄줄이 붙은 레이아웃이 계속 나온다는 걸 눈치채게 된다. 바로 이 반복 패턴이 오늘 이야기의 중심인 AI Slop이다.

이 글은 AI Slop이 정확히 무엇인지 정의하고, 이를 깨부수기 위해 설계된 10가지 실전 도구(스킬, 플러그인, CLI)를 구조적으로 정리한다. 직접 시나리오를 몇 개 만들어 Claude Code에 적용해보니, 이 도구들을 섞어 쓰는 순간 결과물이 ‘AI가 대충 찍어낸 SaaS 템플릿’에서 ‘사람이 제대로 디렉팅한 웹’에 훨씬 가까워졌다.

앞으로 읽게 될 내용은 단순 도구 소개가 아니라, 언제 어떤 조합으로 써야 디자인이 확 달라지는지에 초점을 맞춘 워크플로우 중심 가이드다. 영상 출처는 Claude Code 관련 튜토리얼이지만, 이 글만 읽어도 핵심 전략과 사용 맥락을 이해할 수 있도록 재구성했다.

AI Slop이란 무엇인가? Claude Code 디자인의 근본 문제

Browser with GPU-like animated hero and floating design system docs

AI Slop이란 AI가 생성한 웹 디자인에서 반복적으로 등장하는 저품질·동질적 미적 패턴의 집합이다. 특히 Claude Code가 만들어 내는 전형적 결과물에서 두드러진다.

대표 패턴은 퍼플 그라디언트, Inter 폰트 남용, 2×2 벤토 박스다.
Claude Code는 디자인 ‘취향’이 아니라 훈련 데이터의 평균을 재현한다.
Anthropic 기본 프론트엔드 스킬은 “AI slop 하지 마” 수준의 추상 지침이다.
이 공백을 메워 주는 것이 이후 소개할 10가지 도구다.

“Claude Code 안에는 괴물이 하나 숨어 있는데, 그 이름이 바로 AI Slop이다. 퍼플 그라디언트, 모든 곳에 Inter 폰트, 모든 웹사이트에서 반복되는 똑같은 카드 레이아웃.”

한눈에 보는 핵심

AI Slop은 시각적 안티패턴 묶음이다.
Claude Code는 가장 많이 본 패턴을 그대로 반복한다.
기본 Front-end Design Skill만으로는 Slop을 막지 못한다.
Slop을 명시적으로 가르치는 스킬이 필요하다.

AI Slop의 핵심은 ‘나빠서’가 아니라 ‘똑같아서’ 문제라는 점이다. 퍼플 그라디언트나 글래스모피즘 자체가 죄는 아니지만, 수천 개 사이트가 똑같이 보이는 순간 그 디자인은 경쟁력을 잃는다.

Claude Code는 코드 생성에서는 업계 최상위지만, 취향(taste) 레벨에서는 극도로 보수적으로 움직인다. 훈련 데이터에서 자주 본 패턴이 가장 안전한 답이라고 가정하고, 그 중간값을 뽑아내는 쪽으로 수렴하기 때문이다.

Anthropic이 제공하는 기본 프론트엔드 스킬은 “AI slop 하지 마세요”라고 말할 뿐, 무엇이 Slop인지, 무엇을 구체적으로 피해야 하는지를 거의 설명하지 않는다. 이런 추상 지침만으로는 LLM이 행동을 바꾸지 않는다는 건 경험으로 확인한 사실이다.

그래서 등장한 것이 AI Slop을 “이게 Slop이다” 라고 콕 집어 가르치는 스킬과 도구들이다. 다음 섹션부터는 이 괴물을 길들이기 위한 10가지 무기를 하나씩 짚어 보자.

Impeccable 스킬이란? AI Slop을 정면으로 가르치는 18개 명령어

Pipeline of Claude Code design workflow from ideation to testing

Impeccable 스킬은 Claude Code에게 AI Slop의 구체적인 안티패턴을 직접 학습시키는 18개 명령어 패키지다.

18개 명령어가 각각 Slop 안티패턴·개선 패턴을 정의한다.
“좋은 디자인 해라”가 아니라 “이게 AI Slop이다”를 보여 준다.
에러 메시지, 반응형, 마이크로카피 등 UX 영역까지 다룬다.
Chrome 확장으로 실제 페이지의 Slop 요소를 하이라이트한다.

한눈에 보는 핵심

안티패턴 기반 학습으로 Slop을 회피시킨다.
Before/After 예시가 풍부해 LLM 이해도가 높다.
clarify, adapt 등 UX·반응형 특화 명령어가 있다.
출시 한 달 수준이지만 효과 범위가 넓다.

“왜 ‘AI slop 하지 마’라고 막연히 말하는 대신, ‘이게 AI slop이다’라고 그대로 알려 주는 스킬을 쓰지 않는가? 전자가 제대로 작동하지 않는 건 이미 드러났다.”

Impeccable의 가장 큰 특징은 안티패턴(anti-pattern) 중심 설계다. 다른 스킬들이 “선명한 타이포그래피를 써라”, “여백을 확보하라” 같은 긍정 지침을 주는 반면, Impeccable은 글래스모피즘, 스파크라인, 사이드 탭 액센트 보더 같은 Slop 요소를 정확히 이름 붙여 금지 목록에 올린다.

공식 사이트 Impeccable.style에서는 각 명령어별 Before vs After 예시를 시각적으로 확인할 수 있다. 예를 들면:

clarify는 에러 메시지의 문구·표현·상태 처리 방식을 개선한다.
adapt는 데스크톱·모바일·태블릿을 고려한 반응형 구성을 유도한다.

테스트할 때는 먼저 Claude Code로 평범한 SaaS 랜딩을 생성하고, 이어서 Impeccable의 명령어들을 단계적으로 적용했다. 그러자 슬롭스럽던 카드·글래스 효과가 줄고, 에러 메시지와 배치가 실제 서비스에 가까워지는 변화가 확실히 보였다.

Chrome 확장 기능으로 현재 보고 있는 웹페이지의 Slop 요소를 직접 하이라이트해 주는 것도 흥미롭다. 요즘 SaaS 랜딩을 돌아다니며 “어디가 AI Slop인지” 눈으로 확인하는 데 꽤 도움이 된다.

Skill UI란? 기존 웹사이트를 Claude Ready 스킬로 역공학하는 도구

Skill UI는 기존 웹사이트의 디자인 시스템을 분석해 Claude Code가 바로 사용할 수 있는 스킬로 변환하는 역공학 도구다.

마음에 드는 웹사이트를 Claude Ready 스킬로 자동 추출한다.
Playwright 기반 Ultra Mode로 동적 인터랙션까지 분석한다.
Stripe, Notion 등 어떤 사이트든 프로젝트 스킬로 저장할 수 있다.
극초기(출시 24시간·별 7개)지만 개념·실용성이 매우 높다.

한눈에 보는 핵심

HTML만이 아니라 스크롤·호버 등 동작까지 학습한다.
“Stripe 스타일로 가짜 Stripe 사이트”를 원샷 생성했다.
브랜드 일관성 유지용 프로젝트 스킬로 재사용할 수 있다.
디자인 방향이 막막할 때 튼튼한 출발점을 준다.

“이 도구는 어떤 디자인 시스템이든 Claude Ready 스킬로 역공학할 수 있게 해 준다.”

Skill UI의 진짜 강점은 단순 코드 파싱이 아니라, Playwright를 활용해 웹페이지의 ‘행동’을 함께 수집한다는 점이다. Ultra Mode에서는:

전체 스크롤 스크린샷을 캡처하고,
마우스 호버 시 나오는 애니메이션·트랜지션·툴팁 등을 관찰한다.

이 데이터가 하나의 스킬에 녹아 들어, Claude Code가 나중에 “Stripe 스타일로 랜딩 페이지 만들어 줘”라는 프롬프트만으로 색 감각·간격·모션까지 닮은 결과를 생성하게 된다. 영상 데모에서 Stripe를 대상으로 이 과정을 거친 뒤 원샷 생성한 결과는 상당히 인상적이었다.

어떤 도메인에도 쓸 수 있다는 것도 장점이다. SaaS(Stripe), 문서 도구(Notion), 포트폴리오 사이트, 브랜드 사이트 등 원하는 사이트를 골라 여러 개 스킬로 축적할 수 있다. Notion을 대상으로 클론 웹사이트를 만드는 GitHub 데모도 제공된다.

디자인 방향이 아예 없는 프로젝트의 첫 단계로 Skill UI만큼 빠르게 ‘좋은 기준점’을 주는 도구는 드물다. “이 느낌으로 만들고 싶다”는 참조 사이트 하나만 있으면 바로 Claude Code용 스킬로 변환해 버릴 수 있기 때문이다.

WebGPU Skill과 Awesome Design MD란? 고급 비주얼과 디자인 시스템의 양 축

WebGPU Skill은 Claude Code가 GPU 기반 고급 웹 애니메이션 컴포넌트를 작성하도록 가르치는 전문 스킬이다. Awesome Design MD는 실존 웹사이트의 디자인 시스템을 마크다운 프롬프트 형태로 정리해 둔 대형 레포지토리다.

WebGPU Skill은 렌더러·셰이더·노드 기반 머티리얼을 다룬다.
Igloo 같은 레벨 7급 인터랙티브 사이트 수준의 효과를 목표로 한다.
Awesome Design MD는 수만 개 스타를 받은 Design Markdown 모음이다.
색·타이포·폼·카드·버튼 등 디자인 시스템 전체를 텍스트로 정의한다.

한눈에 보는 핵심

WebGPU Skill은 WebGL·커스텀 셰이더 수준의 고급 영역이다.
텍스트 프롬프트 몇 개로 10분 내 GPU 애니메이션 시안을 만든다.
Awesome Design MD는 “디자인 시스템 설명서” 묶음이다.
Skill UI가 자동 추출이라면, Awesome Design MD는 수동 조립형이다.

WebGPU Skill은 기본적인 카드·버튼 스타일 수정과는 결이 다른, 시각적 임팩트 중심의 스킬이다. Claude Code에:

WebGPU 렌더러 설정법,
셰이더 코드 구조,
노드 기반 머티리얼 구성 방법

을 구체적으로 알려 준다. 영상에서는 WebGPU 개념을 모르는 상태에서 Claude Code와 이 스킬만으로, 텍스트 몇 줄을 던져 대략 10분 만에 그럴듯한 GPU 애니메이션 시안을 만든 사례를 보여 준다.

완성도는 WebGL 전문가가 손수 짠 코드보다 떨어질 수밖에 없다. 하지만 포트폴리오나 프로덕트 랜딩처럼 한 번에 시선을 잡아야 하는 페이지에서는 이 정도 인터랙션만 추가해도 전체 인상이 극적으로 달라진다.

반면 Awesome Design MD는 방향이 전혀 다르다. Google의 Stitch 개념을 확장해, 실제 웹사이트의 디자인 시스템을 마크다운 프롬프트로 정리해 둔 저장소다. 각 파일에는:

개요(Overview)와 북극성(North Star) 원칙,
색상 체계(Color System),
폼 요소, 카드, 버튼, 헤딩, 타이포그래피

같은 상세 정의가 들어 있다. 11Labs, Bugatti처럼 서로 다른 업계의 브랜드들이 포함돼 있어, “이 회사라면 어떻게 디자인했을까?”를 텍스트 레벨에서 이해할 수 있다.

여기서 중요한 차이가 하나 있다.

Skill UI가 “사이트 하나를 통째로 찍어 스킬로 자동 변환”해 준다면, Awesome Design MD는 “여러 사이트의 디자인 언어를 사람이 읽으며 골라 쓰는 라이브러리”에 가깝다.

디자인을 직접 디렉팅하고 싶은 사람이라면 Awesome Design MD 쪽이 더 맞다. 매뉴얼을 읽으며 “색은 여기서, 버튼 스타일은 여기서” 식으로 조합해, Claude Code에 상당히 정교한 프롬프트를 줄 수 있기 때문이다.

Stitch와 UI UX Pro Max란? 비주얼 목업부터 지능형 디자인 시스템까지

Stitch는 코드를 짜기 전에 비주얼 목업을 먼저 생성하는 Google의 무료 웹 목업 도구다. UI UX Pro Max는 Claude Code용 업종별 지능형 디자인 시스템 생성 스킬이다.

Stitch는 텍스트+스크린샷을 입력하면 디자인 시스템 MD와 변형 시안을 만든다.
클릭·우클릭·범위 조절 등으로 시안을 바로 편집할 수 있다.
UI UX Pro Max는 161개의 업종별 추론 규칙을 내장한다.
서비스 성격을 먼저 질문한 뒤 맞춤형 디자인 시스템을 생성한다.

한눈에 보는 핵심

Stitch는 “Claude Code 전에 쓰는 시각적 탐색 도구”다.
코드-빌드-리로드 루프를 줄여 워크플로우를 크게 단축한다.
UI UX Pro Max는 Anthropic 기본 스킬의 실질적 상위호환이다.
모든 사이트를 SaaS처럼 만들지 않고 스택 중립적으로 설계한다.

“AI는 취향이 없다. 그렇다면 취향 자체를 ‘스킬’로 주입해 보면 어떨까?”

Stitch의 사용 흐름은 단순하다.

만들고 싶은 페이지를 텍스트로 설명하고,
참고가 될 스크린샷이 있다면 같이 업로드한다.
Stitch가 색·폰트·버튼·레이블을 포함한 디자인 시스템 MD를 만들고,
동시에 히어로 섹션부터 전체 페이지 변형 시안을 시각적으로 보여 준다.

마음에 드는 변형을 골라 세부 요소를 클릭·우클릭해 수정하고, 완성된 버전의 코드를 Claude Code에 넘겨 추가 로직·상호작용 구현을 맡기는 방식으로 워크플로우를 구성할 수 있다.

실무 워크플로우에 적용해봤을 때 가장 크게 줄어든 것은, Claude Code 안에서의 끝없는 리로드 루프였다. 이제는 방향 탐색·실험은 Stitch로, 구현·리팩터링·테스트는 Claude Code로 역할을 깔끔히 나누는 편이 훨씬 효율적이다.

UI UX Pro Max는 다른 지점에서 강력하다. 핵심은 161개의 업종별 특화 추론 규칙이다. 스킬을 호출하면 Claude Code가 먼저 질문을 던진다. 서비스가 어떤 업종인지, 대상 사용자가 누구인지, 브랜드 톤앤매너가 어떤지. 이 정보를 바탕으로 맞춤형 디자인 시스템을 만들어 낸다.

재미있는 건 이 스킬이 React만을 강요하지 않는 스택 중립성을 유지한다는 점이다. 모든 웹사이트가 SaaS 랜딩처럼 생겼을 필요는 없다는 전제를 깔고 설계됐기 때문이다.

디자인 아이디어가 전혀 없는 상태라면, UI UX Pro Max로 대략적인 뼈대를 잡고, 그 결과를 Stitch로 시각적으로 다듬는 조합이 가장 빠르게 “사람 손 탄 듯한” 결과로 이어졌다.

21st.dev와 Taste Skill이란? 컴포넌트 디테일과 미적 감각의 주입

21st.dev는 고품질 UI 컴포넌트를 탐색하고 Claude Code에 바로 통합할 수 있는 컴포넌트 라이브러리 플랫폼이다. Taste Skill은 Claude Code에 ‘취향’을 주입해 Slop스러운 느낌을 줄이는 스킬 묶음이다.

21st.dev는 컴포넌트마다 Copy Prompt를 제공해 Claude에 최적화된 지시를 준다.
Spline 기반 3D 히어로, 조명 버튼, 커서 반응 카드 등 디테일 요소가 풍부하다.
Taste Skill은 추상적이지만 개성 있는 레이아웃 쪽으로 결과를 이동시킨다.
벤토 박스 반복 없이 스크롤 애니메이션·다양한 구조를 생성한다.

한눈에 보는 핵심

21st.dev는 “디자인 디테일을 주입하는 프롬프트 저장소”다.
대부분 무료이고 Claude Code에 붙여 넣기만 하면 된다.
Taste Skill은 결과물의 ‘다름’을 키우는 스펙트럼 설정처럼 동작한다.
Slop의 바다에서 눈에 띄게 만드는 데 충분한 차이를 만든다.

“AI에는 취향이 없다. 그렇다면 취향을 하나의 스킬로 부여해 보면 어떨까?”

21st.dev의 진짜 가치는 “Copy Prompt” 기능에서 나온다. 단순히 JSX 조각을 복사하는 게 아니라, 각 컴포넌트를 Claude Code가 맥락에 맞게 재구성할 수 있도록 최적화된 프롬프트를 함께 제공하기 때문이다. Spline을 이용해 마우스를 따라 움직이는 3D 로봇 히어로, 마우스 커서를 따라 빛이 흐르는 카드, 은은한 글로우가 있는 버튼 같은 디테일은 전체 페이지 품질을 한 단계 끌어올린다. 이런 컴포넌트 몇 개만 섞어도 “기본 Tailwind 샘플 느낌”에서 “디자이너가 공을 들인 제품”처럼 보이기 시작한다.

개인적으로 21st.dev를 일종의 “디자인 어휘장” 처럼 쓰고 있다. 버튼, 카드, 모달 등이 얼마나 다양한 변주를 가질 수 있는지 관찰하다 보면, 나중에는 Claude Code에게 직접 “조명감 있는 버튼” 같은 추상 지시를 줄 때도 표현력이 달라진다.

Taste Skill은 좀 더 추상적인 레벨에서 동작한다. 이 스킬을 활성화한 상태에서 Claude Code로 사이트를 생성하면 벤토 박스 레이아웃 반복이 줄어들고, 스크롤 애니메이션과 비정형 레이아웃이 늘어나며, 결과물이 전형적인 SaaS 랜딩에서 조금 비껴나게 된다.

극적인 혁명보다는, “어? 이건 좀 다르네?”라는 수준의 변위에 가깝다. 하지만 Slop이 넘쳐나는 지금 환경에서는, 이 정도 ‘다름’이 오히려 가장 강력한 무기다. 기본 Claude 결과와 Taste Skill 활성화 결과를 나란히 비교해 보는 실험만으로도 꽤 많은 인사이트를 얻었다.

Google Fonts와 Playwright CLI란? 타이포그래피와 자동화가 만드는 체급 차이

Google Fonts는 수천 개 무료 웹폰트를 제공하는 폰트 리포지토리이며, Playwright CLI는 웹페이지 상호작용을 자동화 테스트하는 커맨드라인 도구다.

Claude Code는 지시가 없으면 거의 항상 Inter를 고른다.
Google Fonts로 폰트를 미리 지정하면 Slop 타이포그래피를 탈출할 수 있다.
Playwright는 MCP보다 CLI 모드로 사용할 때 효과가 크다.
CLI는 여러 Chrome 인스턴스를 띄워 인터랙션을 자동 테스트한다.

한눈에 보는 핵심

“Claude Code의 기본 폰트 = Inter”는 Slop의 큰 축이다.
폰트를 느낌·외형·패밀리 기준으로 탐색해 성격에 맞게 고른다.
Playwright CLI는 폼 제출 같은 엣지 케이스를 대량 테스트한다.
Skill UI의 Ultra Mode에서도 Playwright가 인터랙션 분석에 쓰인다.

“Claude Code가 프론트엔드에 약하다는 사실은, 오히려 그 지점을 극복하는 사람이 군중 속에서 자신을 차별화할 수 있는 기회가 된다.”

폰트 이야기는 과소평가되기 쉽지만, 실제로는 디자인 인상의 50% 이상을 좌우한다. Claude Code에 아무 말도 하지 않으면 거의 항상 Inter를 선택한다. “Claude Code = Inter”라고 말해도 과언이 아닌 수준이다.

Google Fonts를 활용하면 성격(친근함, 진지함, 기술적 느낌 등), 외형(세리프/산세리프, 두께, 곡선), 언어 지원 기준으로 폰트를 탐색할 수 있다. 프로젝트를 시작할 때 “우리는 Inter를 쓰지 않는다” 는 원칙을 세우고, Google Fonts에서 2~3개 대안을 정한 뒤 Claude Code에 명시적으로 지시하는 것만으로도 페이지의 공기가 확실히 달라진다.

Playwright CLI는 프론트엔드의 기능·상호작용 품질을 보완해 주는 도구다. MCP 형태로 Claude에 연결할 수도 있지만, CLI 모드를 권장하는 이유가 있다. 이 모드에서는 Claude Code가 여러 개의 Chrome 인스턴스를 띄우고, 폼 제출·버튼 클릭·네비게이션 등 다양한 시나리오를 자동으로 실행하며, Headed/Headless 모두 지원해 눈으로 보거나 백그라운드에서 돌릴 수 있다.

실무 테스트 루틴에 넣어보니 특히 폼 관련 엣지 케이스에서 큰 효과가 있었다. “만들고 → 서버 실행하고 → 수동으로 클릭해 보고”를 반복하던 루프가 대폭 줄었다.

흥미롭게도 Playwright는 앞서 소개한 Skill UI의 Ultra Mode에서도 동적 인터랙션을 분석하는 데 핵심 역할을 한다. 단순 테스트를 넘어, 디자인 리서치(사이트 행동 패턴 수집)와 아이디에이션(새 인터랙션 아이디어 탐색)에도 쓸 수 있는 범용 도구다.

Claude Code vs 이 10가지 도구: 무엇이 더 적합할까?

Claude Code 자체 기능과 10가지 도구 집합은 상호 보완 관계다. 어느 쪽이 더 낫다기보다, 어떤 상황에 무엇을 덧붙여야 하는지 이해하는 게 핵심이다.

항목	Claude Code 단독	10가지 도구 조합
디자인 다양성	낮음, Slop 패턴으로 수렴	높음, 다양한 스타일·시스템 주입
작업 속도	초기 빠르나 수정 루프 길어짐	초반 세팅 필요하지만 리로드 감소
브랜드 일관성	프롬프트 의존, 유지 어려움	Skill UI·Awesome Design MD로 관리
기능 품질	기본 수준, 수동 테스트 필요	Playwright로 대규모 자동 검증
학습 곡선	낮음	도구별 학습 필요하지만 보상 큼

무엇을 선택할까? 주요 옵션 비교

디자인 시스템 추출 vs 직접 조립

기준	Skill UI	Awesome Design MD
방식	실제 사이트를 자동 역공학	수동으로 시스템을 읽고 조립
초기 노동	매우 낮음	중간~높음
제어권	중간 (원본 스타일에 종속)	높음 (요소를 선택·조합)
적합한 사람	방향이 막막한 개발자	디자인 언어를 깊게 이해하고 싶은 사람

시각 탐색 vs 코드 중심

기준	Stitch	Claude Code 내부 반복
피드백 속도	매우 빠른 시각 피드백	코드-빌드-리로드 루프
실험 비용	낮음, 클릭·드래그로 수정	높음, 코드 재생성 필요
최적 용도	방향 탐색·프로토타입	완성도 올리기·로직 구현

프로젝트 초반 20% 구간에서 이 선택을 가장 많이 하게 된다. 디자인 감각이 불안한 상태에서 바로 Claude Code에 올인하면, 나중에 Slop 느낌을 벗기기 위해 구조를 통째로 갈아엎게 되는 경우가 많았다. 반대로 Stitch·Skill UI·Awesome Design MD 같은 도구로 먼저 가이드를 정해 두면, Claude Code는 “구체적인 설계도를 보고 짓는 시공사”에 가까운 역할을 하게 된다.

지금 당장 무엇부터 할까?

AI Slop 금지 목록부터 정의한다.
Claude Code에게 “AI Slop은 무엇인가”를 설명하고, 퍼플 그라디언트·Inter 기본 사용을 금지하는 간단한 스킬·프롬프트를 먼저 정리한다.
UI UX Pro Max로 프로젝트 프로필을 만든다.
서비스 성격·타깃·톤을 충분히 답해 주고, 이 스킬이 제안하는 디자인 시스템 초안을 뽑는다.
디자인 레퍼런스 사이트 1~2개를 정한다.
마음에 드는 사이트를 선택해 Skill UI 또는 Awesome Design MD로 해당 디자인 언어를 Claude용 스킬/프롬프트로 정리한다.
Stitch에서 비주얼 목업을 뽑는다.
텍스트 설명과 레퍼런스 스샷을 넣고 여러 변형을 돌린 뒤, 가장 마음에 드는 버전의 코드를 Claude Code 워크스페이스에 가져온다.
21st.dev로 디테일 컴포넌트를 채운다.
히어로 섹션, CTA 버튼, 인터랙티브 카드 등 핵심 영역에 고급 컴포넌트를 Copy Prompt로 삽입한다.
Taste Skill과 Impeccable를 함께 켠다.
전체 레이아웃은 Taste Skill로, Slop 안티패턴 제거와 UX 디테일은 Impeccable 명령어로 다듬는다.
Google Fonts·Playwright CLI로 마무리한다.
Inter를 대체할 폰트를 명시하고, Playwright CLI로 폼·네비게이션·모바일 뷰를 자동 테스트해 기능 품질을 검증한다.

자주 묻는 질문 (FAQ)

Q: Impeccable와 Anthropic 기본 Front-end Design Skill은 무엇이 다른가요?

A: Impeccable는 글래스모피즘, 스파크라인 등 구체적인 안티패턴 목록과 예시를 제공해 “무엇을 피해야 하는지”를 명확히 가르친다. Anthropic 기본 스킬은 “AI Slop은 하지 마라” 수준의 추상적 지침에 머물러 있어, 실제 생성 결과를 크게 바꾸기 어렵다.

Q: 디자인 비전공자인데, 어떤 도구부터 쓰는 게 좋을까요?

A: 비전공자라면 UI UX Pro Max → Stitch → 21st.dev 순서를 추천한다. UI UX Pro Max로 업종에 맞는 기본 디자인 시스템을 얻고, Stitch에서 시각적으로 목업을 조정한 뒤, 21st.dev 컴포넌트로 디테일을 채우면 학습 부담 대비 효과가 크다.

Q: Skill UI와 Awesome Design MD는 둘 중 하나만 써도 되나요?

A: 상황에 따라 하나만 써도 충분하다. 좋아하는 레퍼런스 사이트가 명확하다면 Skill UI로 자동 스킬화하는 것이 빠르고, 여러 브랜드의 디자인 언어를 공부하며 조합하고 싶다면 Awesome Design MD가 더 맞다.

Q: WebGPU Skill은 모든 프로젝트에 써야 할까요?

A: 아니다. 포트폴리오, 제품 랜딩, 이벤트 페이지처럼 시각적 임팩트가 특히 중요한 프로젝트에 선택적으로 쓰는 것이 좋다. 일반 대시보드나 CMS 같은 업무용 UI에는 과도한 GPU 애니메이션이 오히려 방해가 될 수 있다.

Q: Playwright MCP 대신 CLI를 추천하는 이유가 있나요?

A: CLI 방식은 Claude Code가 여러 Chrome 인스턴스를 직접 띄워 대규모 시나리오를 병렬로 실행할 수 있어, MCP 연동보다 커버리지와 속도 면에서 유리하다. Skill UI의 Ultra Mode처럼 테스트를 넘어 동적 인터랙션 분석·리서치 용도로도 활용하기 수월하다.

핵심 정리와 다음 단계

Claude Code는 코드 생성 능력만 보면 최고의 도구에 가깝지만, 프론트엔드 디자인 취향 문제에서는 분명한 한계가 있다. 이 한계를 그대로 받아들이면 AI Slop의 바다에 섞여 버리지만, 오늘 소개한 10가지 도구를 익히는 순간 그 한계는 차별화 기회가 된다.

Impeccable·Taste Skill로 Slop 안티패턴과 취향을 주입하고,
Skill UI·Awesome Design MD·Stitch·UI UX Pro Max로 디자인 시스템의 뼈대를 세우며,
21st.dev·WebGPU Skill로 디테일과 임팩트를 채우고,
Google Fonts·Playwright CLI로 타이포그래피·기능 품질을 완성하면

동일한 Claude Code를 쓰더라도 결과물의 수준과 개성이 완전히 달라진다.

이 도구들을 한 번에 다 마스터하려 하기보다는, 현재 진행 중인 프로젝트 하나를 골라 2~3개씩 도입해 보는 방식이 가장 현실적이다. 오늘 정리한 순서를 참고해 작은 실험부터 시작하면, “AI가 대충 찍어낸 사이트”라는 인상을 벗어나 “사람이 디렉팅한 AI 결과물”에 더 가까워지는 변화를 빠르게 체감하게 될 것이다.

참고할 만한 공식 문서 및 리소스

Impeccable 스타일 및 명령어 예시:
https://impeccable.style
Playwright 공식 문서 (CLI 사용법 포함):
https://playwright.dev/docs/intro
Google Fonts 공식 페이지:
https://fonts.google.com
WebGPU 사양 및 개요 (W3C Working Draft):
https://www.w3.org/TR/webgpu/
Anthropic Claude Code 및 Skill 관련 문서:
https://docs.anthropic.com/claude
Awesome Design MD GitHub 레포지토리:
https://github.com/

(각 도구의 최신 사용법과 API는 반드시 공식 문서에서 다시 확인하기를 권장한다.)

Found this article helpful?

Get more tech insights delivered to you.

이메일로 블로그 구독하기