Install
scripts/init-artifact.sh누구에게 맞나
복잡하고 다중 컴포넌트인 claude.ai HTML artifact를 만들며 상태 관리, 라우팅 또는 shadcn/ui 컴포넌트가 필요할 때 web-artifacts-builder를 사용한다. 기술 스택은 React, Tailwind CSS, shadcn/ui. 단순한 단일 파일 HTML/JSX artifact에는 쓰지 말 것.
더 알맞은 전제는 React 18 + TypeScript + Vite + Parcel(번들) + Tailwind CSS + shadcn/ui를 받아들인다는 것이다. 요약은 Node 18+ 호환도 언급한다. 자료는 에이전트 제품 목록을 주지 않는다. 공식 설명 페이지는
https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md
3분 안에 첫 시도 끝내기
권장하는 첫 명령은 초기화 스크립트이며 다른 로드 경로를 만들지 말 것:
scripts/init-artifact.sh
이 명령은 프론트엔드 저장소를 생성하므로 디스크에 쓴다. 현재 디렉터리를 초기화해도 되는지 확인한 뒤 실행한다. 성공 신호: 편집 가능한 프론트엔드 코드가 생성된다. 디렉터리를 확인하지 않고 초기화하지 말 것.
초기화 후 바로 묶지 말 것. 다음은 생성 코드를 편집해 다중 컴포넌트 UI로 만드는 것이다. 스타일에서는 자료가 지목한 「AI slop」을 피한다: 과도한 가운데 정렬, 보라 그라데이션, 일률적인 둥근 모서리, Inter 글꼴. 이는 되돌릴 수 있는 디자인 제약이다. 스타일을 바꾸기 전에 기존 생성 파일을 보고 방금 쓴 구조를 덮어쓰지 않는지 확인한다.
스택이 맞는지 먼저 보고 싶다면 이 확인에서 멈춰도 된다. 상태, 라우팅 또는 shadcn/ui가 필요할 때만 계속한다. 목표가 단일 파일 HTML이면 여기서 멈추고 init하지 말 것.
사용 사례
사례 1: 초기화하고 상태가 있는 UI를 한 판 고친다. 먼저 scripts/init-artifact.sh를 돌린 뒤 생성 코드를 편집한다. 완료 기준은 저장소가 생성되었고 바꾼 것이 생성 파일이라는 것이며, 이름 없는 스캐폴드를 따로 세우지 않는 것이다. 4단계는 사용자에게 보여주는 것이지만 발췌는 표시 명령을 쓰지 않으므로 미리보기를 지어내지 말 것. 보여주기 전에 생성 페이지를 로컬에서 열어 확인한다.
사례 2: 프로젝트를 공유 가능한 단일 파일로 묶는다. 명령은 scripts/bundle-artifact.sh. bundle.html을 생성하고 JavaScript, CSS, 의존성을 인라인한다. Claude 대화에서 artifact로 바로 공유할 수 있다. 전제: 프로젝트 루트에 index.html이 있어야 한다. 디스크 쓰기이므로 덮어쓸 bundle.html 경로를 확인한 뒤 묶는다. 완료 기준은 루트에 자체 완결 bundle.html이 나타나는 것이다. index.html이 없을 때 스크립트가 대신 만든다고 가정하지 말 것.
사용 경계
복잡하고 다중 컴포넌트이며 상태/라우팅/shadcn/ui가 필요한 artifact만 대상으로 하며, 단순 단일 파일 HTML/JSX는 대상이 아니다. 스택은 React 18, TypeScript, Vite, Parcel, Tailwind, shadcn/ui로 고정. 묶기 산출물은 bundle.html이며 루트에 index.html이 있어야 한다. 과도한 가운데 정렬, 보라 그라데이션, 일률적인 둥근 모서리, Inter를 피한다.
init와 bundle 밖의 설치 경로를 지어내지 말 것. 자료는 클라이언트 목록도, 단순 단일 파일이 어떤 명령으로 바꿔야 하는지도 쓰지 않는다. bundle.html을 덮어쓰거나 비어 있지 않은 디렉터리에 초기화하기 전에 부작용을 확인한다. 여기에 적힌 네 단계와 스타일 금지를 넘는 범위는 이 설명이 다루지 않는다.