웹 아티팩트 빌더은(는) 무엇을 하나요?
강력한 프론트엔드 claude.ai 아티팩트를 구축하려면 다음 단계를 따르세요:
scripts/init-artifact.sh를 사용하여 프론트엔드 저장소를 초기화합니다.- 생성된 코드를 편집하여 아티팩트를 개발합니다.
scripts/bundle-artifact.sh를 사용하여 모든 코드를 단일 HTML 파일로 번들링합니다.- 아티팩트를 사용자에게 표시합니다.
- (선택 사항) 아티팩트를 테스트합니다.
스택: React 18 + TypeScript + Vite + Parcel (번들링) + Tailwind CSS + shadcn/ui
디자인 및 스타일 가이드라인
매우 중요: 소위 'AI 슬롭'이라고 불리는 현상을 피하기 위해 과도한 중앙 정렬 레이아웃, 보라색 그라데이션, 균일한 둥근 모서리 및 Inter 글꼴 사용을 피하십시오.
빠른 시작
1단계: 프로젝트 초기화
초기화 스크립트를 실행하여 새 React 프로젝트를 만듭니다:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
이 명령은 완전히 구성된 프로젝트를 생성합니다:
- ✅ React + TypeScript (Vite 기반)
- ✅ shadcn/ui 테마 시스템이 포함된 Tailwind CSS 3.4.1
- ✅ 경로 별칭 (
@/) 구성됨 - ✅ 40개 이상의 shadcn/ui 구성 요소 사전 설치됨
- ✅ 모든 Radix UI 종속성 포함
- ✅ 번들링을 위해 Parcel 구성됨 (.parcelrc)
- ✅ Node 18+ 호환성 (자동 감지하여 Vite 버전 고정)
2단계: 아티팩트 개발
아티팩트를 빌드하려면 생성된 파일을 편집합니다. 지침은 아래의 일반적인 개발 작업을 참조하세요.
3단계: 단일 HTML 파일로 번들링
React 앱을 단일 HTML 아티팩트로 번들링하려면:
bash scripts/bundle-artifact.sh
이 명령은 bundle.html을 생성합니다. 이는 모든 JavaScript, CSS 및 종속성이 인라인 처리된 자체 포함 아티팩트입니다. 이 파일은 Claude 대화에서 아티팩트로 직접 공유할 수 있습니다.
요구 사항: 프로젝트 루트 디렉토리에 index.html이 있어야 합니다.
스크립트가 수행하는 작업:
- 번들링 종속성 설치 (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
- 경로 별칭 지원을 위한
.parcelrc설정 생성 - Parcel로 빌드 (소스 맵 없음)
- html-inline을 사용하여 모든 자산을 단일 HTML로 인라인 처리
4단계: 사용자와 아티팩트 공유
마지막으로, 사용자가 아티팩트로 볼 수 있도록 번들된 HTML 파일을 대화에서 공유합니다.
5단계: 아티팩트 테스트/시각화 (선택 사항)
참고: 이는 완전히 선택적인 단계입니다. 필요하거나 요청된 경우에만 수행하십시오.
아티팩트를 테스트/시각화하려면 사용 가능한 도구 (Playwright 또는 Puppeteer와 같은 다른 스킬 또는 내장 도구 포함)를 사용하십시오. 일반적으로 아티팩트 테스트는 요청과 완성된 아티팩트를 볼 수 있는 시간 사이에 지연을 추가하므로 사전에 테스트하지 마십시오. 요청이 있거나 문제가 발생하는 경우 아티팩트를 제시한 후에 테스트하십시오.
참고 자료
- shadcn/ui 구성 요소: https://ui.shadcn.com/docs/components