Artifacts Builder
강력한 프론트엔드 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