클로드 아티팩트 스킬 web-artifacts-builder 리뷰: 넣어 두면 안 불리고, 이름을 부르면 400KB React 화면

클로드에게 계산기나 관리 화면을 만들어 달라고 하면 보통 HTML 파일 하나에 코드를 바로 씁니다. web-artifacts-builder(웹 아티팩트 빌더)는 앤트로픽(Anthropic)이 공개한 클로드 스킬로, 같은 화면을 React(리액트)와 shadcn/ui(섀드씨엔 UI, 버튼·탭 같은 화면 부품 모음)로 만든 뒤 HTML 파일 하나로 묶어 줍니다. 클로드 아티팩트로 띄울 복잡한 화면용입니다. “우리 집 생활비 관리 화면”을 같은 요청으로 스킬 없이, 스킬을 넣어 두고, 요청에 스킬 이름을 붙여 각각 두 번 만들어 비교했습니다.

스킬은 클로드가 특정 일을 할 때 꺼내 읽는 작업 설명서 폴더(SKILL.md)입니다. 처음이라면 클로드 스킬 뜻과 만드는 법을 먼저 보세요.

결과부터 보기: 같은 요청, 세 가지 결과

직접 눌러 보기: 여섯 번 만든 생활비 관리 화면 열어 보기 (클로드가 만든 파일을 손대지 않고 올림)

따라 해 보기: 요청문과 실습 재료

스킬을 넣은 폴더에서 클로드 코드를 열고 아래 요청을 보냅니다. 마지막 문장을 빼면 스킬이 불리지 않았습니다. 클로드 코드가 처음이라면 클로드 코드 설치 방법을 먼저 보세요. 실습 재료(zip)에는 요청문 두 가지, 채점 기준, 조건별 결과 화면 3개를 넣었습니다.

우리 집 한 달 생활비를 관리하는 화면을 HTML 파일 하나로 만들어 줘. 지출을 추가(날짜·내용·분류·금액)하고 지울 수 있어야 하고, 탭으로 '지출 목록'과 '분류별 합계'를 오갈 수 있게. 분류는 식비·교통·주거·통신·기타. 처음 열 때 예시 지출 5개를 넣어 두고, 금액은 원 단위로 쉼표를 찍어 줘. 완성 파일은 이 폴더에 budget.html로 저장해 줘. web-artifacts-builder 스킬을 써서 만들어 줘.

좋은 결과라면 클로드가 먼저 스킬을 불러오고, 프로젝트를 만든 뒤 묶기 스크립트로 budget.html을 만듭니다. 답에 파일 크기(400KB 안팎)와 “파일 하나로 묶었다”는 말이 나옵니다.

web-artifacts-builder에 들어 있는 것

SKILL.md(74줄), LICENSE.txt, scripts 폴더의 파일 3개로 되어 있습니다. 저장소 마켓 목록에서는 단독 플러그인이 아니라 example-skills(예시 스킬) 묶음 안에 들어 있습니다. 설명 줄에는 “React, Tailwind CSS, shadcn/ui로 여러 부품이 든 claude.ai HTML 아티팩트를 만드는 도구 모음. 상태 관리·화면 이동·shadcn/ui 부품이 필요한 복잡한 아티팩트용이며, 간단한 단일 HTML·JSX 아티팩트용이 아님”이라고 적혀 있습니다.

파일	하는 일
SKILL.md	5단계 절차: ① 프로젝트 만들기 ② 코드 고치기 ③ 한 파일로 묶기 ④ 사용자에게 보여 주기 ⑤ (선택) 시험. 디자인 규칙 한 줄: 가운데 정렬 남용, 보라색 그라디언트, 똑같은 둥근 모서리, Inter 글꼴을 피함
scripts/init-artifact.sh	Vite로 React+TypeScript 프로젝트를 만들고 Tailwind CSS 3.4.1, Radix UI 부품, 화면 부품 40여 개를 설치. @/ 경로 별칭 설정
scripts/bundle-artifact.sh	Parcel로 빌드한 뒤 html-inline으로 자바스크립트·CSS를 모두 넣은 bundle.html 한 파일을 만듦
scripts/shadcn-components.tar.gz	버튼·카드·탭·대화상자 같은 shadcn/ui 부품 원본 묶음. 프로젝트의 src 폴더에 풀림

설치 전에 볼 것 init-artifact.sh는 pnpm이 없으면 npm install -g pnpm으로 컴퓨터 전체에 pnpm을 설치합니다(36행). 전역 설치를 피하려면 아래 1단계처럼 작업 폴더에 pnpm을 먼저 두면 됩니다. 스크립트는 실행할 때마다 인터넷에서 패키지를 받습니다. 이번 실행에서 프로젝트 하나의 node_modules(받은 패키지 폴더)는 288MB였습니다.

1단계. 스킬 넣기 (약 1분)

이 단계에서는 스킬 폴더를 작업 폴더에 넣습니다. 작업 폴더(my-project, 내 폴더 이름으로 바꿈)가 들어 있는 상위 폴더에서 터미널로 실행합니다.

git clone --depth 1 https://github.com/anthropics/skills.git anthropic-skills
mkdir -p my-project/.claude/skills && cp -r anthropic-skills/skills/web-artifacts-builder my-project/.claude/skills/

실행 기록 · 작업 폴더

$ git clone --depth 1 https://github.com/anthropics/skills.git anthropic-skills
Cloning into 'anthropic-skills'...

$ mkdir -p my-project/.claude/skills && cp -r anthropic-skills/skills/web-artifacts-builder my-project/.claude/skills/

$ ls -R my-project/.claude/skills/web-artifacts-builder
LICENSE.txt
SKILL.md
scripts

my-project/.claude/skills/web-artifacts-builder/scripts:
bundle-artifact.sh
init-artifact.sh
shadcn-components.tar.gz

$ grep -n 'npm install -g' my-project/.claude/skills/web-artifacts-builder/scripts/init-artifact.sh
36:  npm install -g pnpm

이렇게 나오면 성공 ls -R 결과에 SKILL.md와 scripts 폴더의 파일 3개가 보입니다.

pnpm이 없고 전역 설치를 원하지 않으면, 작업 폴더에서 pnpm을 폴더 안에만 설치하고 클로드 코드를 열기 전에 경로를 앞에 둡니다. 이번 실험도 이렇게 했습니다.

npm install --prefix tools/pnpm pnpm
export PATH="$PWD/tools/pnpm/node_modules/.bin:$PATH"
pnpm --version

이렇게 나오면 성공 pnpm --version에 버전 번호(이번에는 12.14.0)가 나옵니다.

• git이 없다는 오류가 나오면: 저장소 페이지에서 Code > Download ZIP(코드 > ZIP으로 받기)으로 받아 skills/web-artifacts-builder 폴더만 복사해도 됩니다.
• node: command not found가 나오면: 스크립트가 Node.js 18 이상을 요구합니다. Node.js부터 설치합니다.

필요 없어지면 작업 폴더에서 아래 명령으로 지웁니다.

rm -r .claude/skills/web-artifacts-builder tools/pnpm

받아 둔 저장소도 필요 없으면 상위 폴더에서 rm -rf anthropic-skills로 지웁니다.

2단계. 같은 요청을 세 조건으로 보내 비교하기 (약 10분)

같은 요청을 조건마다 두 번씩, 모두 여섯 번 보냈습니다. 채점 기준은 실행 전에 SKILL.md와 요청문에서 뽑아 고정했고, 결과 파일은 브라우저(Playwright)로 열어 실제로 지출을 넣고 지우고 탭을 눌러 확인했습니다. 세 번째 조건(스킬 이름 붙임)은 스킬을 넣어 둔 조건에서 스킬이 불리지 않는 것을 보고 나중에 더했습니다.

채점 항목	스킬 없이 1·2	스킬 넣어 둠 1·2	이름 붙임 1·2
스킬 도구로 불림	해당 없음	✗ ✗	✓ ✓
React·shadcn/ui 프로젝트로 만듦	✗ ✗	✗ ✗	✓ ✓
묶기 스크립트로 한 파일 만듦	✗ ✗	✗ ✗	✓ ✓ (고친 뒤)
보라색 그라디언트·Inter 글꼴 없음	✓ ✓	✓ ✓	✓ ✓
외부 요청 없이 한 파일로 열림	✓ ✓	✓ ✓	✓ ✓
예시 지출 5개·추가·삭제·탭·쉼표·콘솔 오류 0	✓ ✓	✓ ✓	✓ ✓
파일 크기	12KB · 13KB	12KB · 12KB	394KB · 400KB
걸린 시간	1분 안팎	1분 안팎	4분 가까이 · 3분 남짓

실행 기록 · 작업 폴더 runs.tsv에서 옮김

조건(회차)              달러   턴  클로드가 한 일                          파일 크기
none-1 스킬 없이         0.572  3   Write → Bash(문법 검사)                12KB
none-2 스킬 없이         0.579  3   Write → Bash(문법 검사)                13KB
skill-1 스킬 넣어 둠     0.562  3   Write → Bash(문법 검사)                12KB
skill-2 스킬 넣어 둠     0.589  4   Write → Bash → Edit                    12KB
named-1 이름 붙임        0.789  21  Skill → init → App.tsx → bundle(실패 2번) → 브라우저 확인  394KB
named-2 이름 붙임        0.761  18  Skill → init → App.tsx → bundle(실패 2번) → 브라우저 확인  400KB

넣어 두기만 하면 왜 안 불렸나

두 번 모두 클로드 코드가 시작할 때 읽은 스킬 목록에 web-artifacts-builder가 들어 있었습니다. 그런데도 클로드는 스킬을 부르지 않고 HTML을 바로 썼습니다. 스킬 설명에 “간단한 단일 HTML 아티팩트용이 아님”이라고 적혀 있고, 요청도 “HTML 파일 하나”였으니 설명대로 판단한 것으로 보입니다. 결과물만 보면 스킬이 없을 때와 구분이 안 됩니다.

이름을 붙이면: 3~4분, 고칠 곳 두 군데

이름을 붙인 두 번은 모두 첫 동작으로 스킬을 불렀고, 같은 순서로 일했습니다. 프로젝트 만들기(init-artifact.sh) → App.tsx 작성 → 묶기(bundle-artifact.sh) 순서입니다. 그런데 묶기가 두 번 다 같은 자리에서 두 차례 실패했습니다.

• 첫 실패: 새 pnpm이 Parcel(묶기 도구)의 설치 스크립트를 막았습니다. 클로드가 허용 목록 파일(pnpm-workspace.yaml)을 만들어 풀었습니다.
• 두 번째 실패: Parcel이 Radix UI 부품의 파일 하나를 찾지 못했습니다. 클로드가 package.json에 설정 한 줄을 넣어 풀었습니다.

실행 기록 · named-1, named-2 로그에서 같은 부분 발췌

# 1차 묶기 실패 (두 번 모두)
Ignored build scripts: @parcel/watcher@2.6.0, @swc/core@1.16.18,
      lmdb@2.8.5, msgpackr-extract@3.0.4
  help: Run "pnpm approve-builds" to pick which dependencies should be allowed
        to run scripts.
cp: bundle.html: No such file or directory

# 클로드가 고친 것 ① pnpm-workspace.yaml
allowBuilds:
  '@parcel/watcher': true
  '@swc/core': true
  lmdb: true
  msgpackr-extract: true
  esbuild: true

# 2차 묶기 실패 (두 번 모두)
@parcel/resolver-default: Cannot load file './is-development' from module
'@radix-ui/primitive'

# 클로드가 고친 것 ② package.json
  "@parcel/resolver-default": {
    "packageExports": true
  }

그 밖에 두 번 모두 프로젝트 폴더에 index.html''라는 파일이 하나 더 생겼습니다. 맥에서 스크립트의 sed 명령 따옴표가 글자 그대로 들어가 백업 파일 이름이 된 것으로, 클로드가 지웠습니다. 1회차는 TypeScript 6이 baseUrl 설정을 더는 쓰지 말라는 오류를 내서 그 줄과, 타입 검사에서 오류가 난 부품 두 개(calendar·resizable)를 지웠습니다. SKILL.md는 React 18이라고 적었지만 실제로 설치된 것은 React 19였습니다. 스크립트가 늘 최신 판을 받기 때문에 생기는 차이입니다. 클로드가 알아서 고치긴 했지만, 다음 판이 나오면 또 다른 곳에서 막힐 수 있습니다.

이름을 붙인 두 번은 끝난 뒤 스스로 브라우저를 띄워 추가·삭제와 휴대폰 폭을 확인했습니다. 나머지 네 번(스킬 없이·넣어 둠)은 문법 검사만 하고 “실제 브라우저에서 눌러 보지는 않았다”고 답했습니다. 1회차는 답을 영어로 했습니다.

화면은 어떻게 달랐나

기능은 여섯 개 모두 같았습니다. 모두 예시 지출 5개를 넣고, 금액 칸에 쉼표를 자동으로 찍고, 입력한 지출을 브라우저에 저장했습니다. 이름을 붙인 쪽은 shadcn/ui 특유의 검정 버튼, 회색 알약 모양 탭, 휴지통 아이콘이 들어가 관리 도구 느낌이 납니다. 스킬 없이 만든 쪽은 초록 버튼과 밑줄 탭으로 더 단순합니다. 어느 쪽이 낫다기보다 모양이 다릅니다.

이런 사람에게 권합니다

• ✅ 여러 화면, 대화상자, 날짜 선택 같은 부품이 많은 도구를 클로드로 만들고, 나중에 React 프로젝트로 이어서 고칠 사람. 만든 프로젝트 폴더가 그대로 남습니다.
• ✅ shadcn/ui 모양으로 화면을 맞추고 싶은 사람. 부품 40여 개가 미리 들어 있습니다.
• ❌ 계산기·체크리스트·관리 화면처럼 한 화면짜리를 빨리 받고 싶은 사람. 스킬 없이도 같은 기능이 1분 안팎, 더 적은 사용량으로 나왔습니다.
• ❌ 인터넷이 막혀 있거나 컴퓨터에 노드 패키지를 설치하기 어려운 환경. 쓸 때마다 수백 MB를 받습니다.

한계와 주의할 점

• 생활비 관리 화면 한 과제로 조건마다 두 번씩만 돌렸습니다. 화면 이동(라우팅)이 여러 개인 더 큰 앱에서는 결과가 다를 수 있습니다.
• 이번에는 클로드 코드(-p, 승인 없이 실행)에서만 시험했습니다. 클로드 앱(웹)의 코드 실행 환경에서 이 스크립트가 같은 결과를 내는지는 확인하지 않았습니다.
• 묶기 실패를 클로드가 고친 방식(설정 두 줄)은 이번 판(pnpm 12, Parcel 2.16)에서 통한 것입니다. 판이 바뀌면 다른 오류가 날 수 있습니다.
• 저장소 README는 이 스킬들이 시연·교육용 예시이며, 클로드 앱에 들어 있는 기능과 동작이 다를 수 있다고 밝힙니다.

대안

방법	다른 점	이럴 때 고르세요
스킬 없이 요청(이 글의 왼쪽 결과)	HTML·CSS·자바스크립트를 한 파일에 바로 씀, 12KB	한 화면짜리 도구를 빨리 받을 때
frontend-design 스킬	화면 디자인 규칙만 더하고 만드는 방식은 그대로	모양을 더 다듬고 싶을 때
web-artifacts-builder(이 글)	React·shadcn/ui 프로젝트를 만들어 한 파일로 묶음	부품이 많고 나중에 프로젝트로 이어 갈 때
클로드 앱 아티팩트에 직접 요청	앱이 React 아티팩트를 바로 띄움, 설치 없음	터미널 없이 결과만 보고 싶을 때

자주 묻는 질문

클로드 아티팩트를 만들려면 이 스킬이 꼭 필요한가요?

아닙니다. 이번 실험에서 스킬 없이도 같은 기능의 HTML 한 파일이 나왔습니다. 이 스킬은 React 부품을 많이 쓰는 큰 화면을 프로젝트 형태로 만들고 싶을 때 씁니다.

스킬을 넣었는데 안 불려요

이번에도 넣어 두기만 한 두 번은 불리지 않았습니다. 요청에 “web-artifacts-builder 스킬을 써서”를 붙이면 두 번 다 불렸습니다. 클로드 코드에서는 /web-artifacts-builder처럼 스킬 이름을 명령으로 부르는 방법도 있습니다(이 방법은 시험하지 않음).

클로드 앱(웹)에서도 쓸 수 있나요?

앤트로픽 공식 도움말(Use Skills in Claude)에 스킬 폴더를 zip으로 묶어 올리는 방법이 있고, 코드 실행 기능이 켜져 있어야 합니다. 이번에는 클로드 코드에서만 시험했습니다. 앱 디렉터리에서 스킬을 찾는 법은 클로드 스킬·플러그인 디렉터리 사용법에 정리했습니다.

web-artifacts-builder는 무료인가요?

스킬 파일은 Apache 2.0 라이선스로 무료로 받아 고쳐 쓸 수 있습니다. 쓸 때 클로드 사용량이 들고, 이번에는 스킬 이름을 붙인 쪽이 약 1.3배 더 썼습니다. 구독 요금제라면 요금제 사용량 한도에서 빠집니다.

다른 공식 스킬도 써 볼 만한가요?

같은 저장소의 스킬 7개를 클로드 스킬 추천 ① 공식 스킬 7개에서 비교했습니다.

출처

web-artifacts-builder 스킬 폴더, SKILL.md, anthropics/skills 저장소 README, shadcn/ui 부품 문서, Use Skills in Claude(공식 도움말) (모두 2026-10-19 확인, 저장소 별 182,071개)