웹 아티팩트 빌더|웹 아티팩트 만들기

한 파일로 동작하는 웹 결과물을 만듭니다. 계산기, 대시보드, 인터랙티브 문서 같은 것들입니다.

도도리 AI연구소 · 최종 수정 2026년 10월 4일 · CC BY-NC 4.0

직접 만들기 분야 · 바이브코딩·만들기 용도 · 조금 준비가 필요합니다.

web-artifacts-builder 스킬 설치 한 줄

Claude Code 용 명령입니다. Claude Code 는 터미널뿐 아니라 데스크톱 앱(Mac·Windows), 웹(claude.ai/code), VS Code·JetBrains 확장으로도 씁니다. 어디서 쓰시든 명령을 넣는 자리에 붙여 넣으시면 됩니다. 터미널로 쓰시면 그 터미널이고, 앱·웹·확장으로 쓰시면 그 안의 명령 입력 칸입니다. 헷갈리기 쉬운 곳은 하나입니다. 대화만 하는 Claude 앱의 채팅창은 Claude Code 가 아니라서 여기에 붙여 넣으면 동작하지 않습니다. 터미널로 쓰실 때만 Node.js 가 따로 필요하며, node -v 를 쳐서 버전이 나오면 준비된 것입니다.

뒤의 두 가지는 붙여 두시는 편이 좋습니다. -g 는 계정 전체에 넣는다는 뜻으로, 없으면 지금 열려 있는 폴더에만 깔려 다른 곳에서는 스킬이 보이지 않습니다. -a claude-code 는 Claude Code 에만 넣는다는 뜻입니다. 이걸 빼면 전역 설치를 지원하지 않는 다른 도구 때문에 빨간 Failed to install 이 뜨는데, 실제로는 설치가 된 상태라 헷갈립니다.

web-artifacts-builder 스킬 설치 절차 전체

위 한 줄에서 막히셨다면 여기를 보십시오. 터미널로 쓰시는 분을 위해 터미널 여는 법부터 확인 명령까지 순서대로 적어 두었습니다. 데스크톱 앱·웹·편집기 확장으로 쓰시면 터미널 여는 단계는 건너뛰고 명령 입력 칸에 같은 줄을 넣으시면 됩니다.

# web-artifacts-builder 설치

## 0. 어디에 붙여 넣나

Claude Code 를 쓰는 방법이 네 가지입니다. 어느 쪽이든 됩니다.

  터미널           macOS 는 터미널, Windows 는 PowerShell
  데스크톱 앱       Mac · Windows 용 Claude Code 앱
  웹              claude.ai/code
  편집기 확장       VS Code · JetBrains

명령을 넣는 자리에 아래 한 줄을 붙여 넣으시면 됩니다. 터미널로
쓰시면 그 터미널이고, 앱·웹·확장으로 쓰시면 그 안의 명령 입력 칸입니다.

헷갈리기 쉬운 곳이 하나 있습니다. 대화만 하는 Claude 앱의 채팅창은
Claude Code 가 아닙니다. 거기에 붙여 넣으면 Claude 가 명령을 글로
읽고 설명만 해 줍니다.

터미널로 쓰실 때만 Node.js 가 따로 필요합니다. node -v 를 쳐서
v20.1.2 처럼 버전이 나오면 준비된 것입니다. "찾을 수 없습니다" 가
나오면 nodejs.org 에서 LTS 버전을 먼저 설치하십시오.
(앱·웹·확장에는 이미 들어 있습니다.)

  macOS    Spotlight(Command + 스페이스)에서 "터미널" 을 여십시오
  Windows  시작 메뉴에서 "PowerShell" 을 여십시오

## 1. 넣기

npx skills add anthropics/skills -g -a claude-code

  성공하면 이 한 줄이 나옵니다.
  Installed 1 skill → ~/.claude/skills/...

  -g 는 계정 전체에 넣는다는 뜻입니다(~/.claude/skills).
  어느 폴더에서 Claude Code 를 열든 쓸 수 있습니다.
  빼면 지금 열려 있는 폴더에만 깔려서(./.claude/skills), 다른 데서
  열면 스킬이 안 보입니다. "깔았는데 안 보인다" 는 대개 이것입니다.

  -a claude-code 는 Claude Code 에만 넣는다는 뜻입니다.
  빼면 전역 설치를 지원하지 않는 다른 도구 때문에 빨간
  "Failed to install" 이 뜹니다. 실제로는 설치가 끝난 상태인데
  실패한 것처럼 보여 여기서 멈추기 쉽습니다.

  저장소에 스킬이 여러 개면 어느 것을 넣을지 물어봅니다.
  미리 보시려면 --list 를 붙이십시오.

  npx skills add anthropics/skills --list

## 2. Claude Code 를 다시 시작합니다

이미 열어 두셨다면 끝내고 다시 여십시오.
실행 중인 세션은 시작할 때 읽은 목록을 그대로 씁니다.

  터미널이면 claude 를 끝내고 다시 실행합니다.
  데스크톱 앱·웹·편집기 확장이면 그 세션을 새로 엽니다.
  대화만 하는 Claude 앱은 해당되지 않습니다 — 스킬이 들어가지 않습니다.

## 3. 확인

npx skills list -g

  전역으로 넣은 스킬이 이름과 경로와 함께 나옵니다.
  -g 를 빼면 지금 폴더의 스킬만 보이므로 "없다" 고 나올 수 있습니다.

## 4. 쓰기

"웹 아티팩트 만들기" 관련 작업을 시켜 보십시오.
스킬이 붙었다면 알아서 불러 씁니다.

이렇게 시켜 보세요

넣고 나서 바로 던져 볼 수 있는 지시문입니다. 누르면 복사됩니다.

알아 둘 것

web-artifacts-builder 스킬 안 될 때 확인할 것

서버가 필요한 기능은 안 됩니다

로그인, 데이터베이스 저장 같은 것은 한 파일 구조로 만들 수 없습니다. 정적으로 동작하는 도구에 맞습니다.

큰 데이터를 다루면 느려집니다

파일 하나에 다 담기는 구조라 대용량 데이터 처리에는 맞지 않습니다.

언제 쓰고, 언제 안 쓰나

설치 없이 바로 열어 보는 계산기나 대시보드에 씁니다. 백엔드가 필요한 서비스는 다른 방식으로 만들어야 합니다.

비슷한 것 중에 왜 이걸

한 파일로 끝나는 결과물을 만든다는 점에서 guizang-ppt-skill 과 닮았지만, 저쪽은 넘겨 보는 슬라이드고 이건 눌러서 쓰는 것입니다. 계산기나 대시보드처럼 값을 넣으면 답이 나오는 것이 여기입니다. canvas-design 과도 갈립니다. 저쪽은 보고 끝나는 이미지, 이쪽은 동작하는 화면입니다. 서버가 필요한 서비스는 셋 다 답이 아닙니다. 한 장짜리 도식이나 차트가 목적이라면 diagram-design 쪽이 맞습니다. 이건 동작하는 화면을 만듭니다. 결과물이 앱에 가깝습니다.

직접 만들기 도구를 고를 때

직접 만들거나 커스터마이징하는 도구입니다. 유지보수를 스스로 맡아야 한다는 점과, 실행에 필요한 최소 사양을 미리 확인하세요.

원본 보기

스킬의 실제 내용은 SKILL.md 파일 하나에 들어 있습니다. 넣기 전에 한 번 읽어 보시는 것을 권합니다. 스킬은 Claude 에게 그대로 들어가는 지시문이라, 무엇을 시키는지 확인하지 않고 쓰면 의도치 않은 동작을 할 수 있습니다.

GitHub 에서 anthropics/skills 열기

별점과 댓글

이 스킬을 써 보신 분의 별점(5점 만점)과 한마디입니다. 작성자는 아이디 앞 3자만 보입니다(예: wor****). 읽는 데는 제한이 없고, 남기는 것은 로그인한 회원만 됩니다. 한 사람이 한 번이며 다시 쓰면 앞의 것을 덮어씁니다.

자주 묻는 것

웹 아티팩트 빌더 스킬(web-artifacts-builder)은 어떻게 설치합니까?

터미널에 npx skills add anthropics/skills -g -a claude-code 한 줄이면 됩니다. -g 는 계정 전체에 넣는다는 뜻으로, 빼면 지금 열려 있는 폴더에만 깔려 다른 곳에서는 안 보입니다. -a claude-code 를 빼면 전역 설치를 지원하지 않는 다른 도구 때문에 빨간 실패 문구가 뜨는데 실제로는 깔린 상태라 헷갈립니다.

웹 아티팩트 빌더 스킬은 무엇을 합니까?

한 파일로 동작하는 웹 결과물을 만듭니다. 계산기, 대시보드, 인터랙티브 문서 같은 것들입니다.

웹 아티팩트 빌더 스킬은 언제 씁니까?

설치 없이 바로 열어 보는 도구를 만들 때입니다. 설치 없이 바로 열어 보는 계산기나 대시보드에 씁니다. 백엔드가 필요한 서비스는 다른 방식으로 만들어야 합니다.

웹 아티팩트 빌더 스킬을 쓸 때 걸리는 데가 있습니까?

서버가 필요한 기능은 안 됩니다. 로그인, 데이터베이스 저장 같은 것은 한 파일 구조로 만들 수 없습니다. 정적으로 동작하는 도구에 맞습니다. 큰 데이터를 다루면 느려집니다. 파일 하나에 다 담기는 구조라 대용량 데이터 처리에는 맞지 않습니다.

함께 보면 좋은 스킬

어느 것부터 깔지 모르겠다면 클로드 스킬 추천 15개를 보십시오. 67개를 직접 깔아 보고 골랐습니다.