웹 아티팩트 빌더
shadcn 구성 요소 및 자동화 스크립트를 사용하여 React 및 Tailwind 아티팩트를 단일 HTML 출력으로 묶는 에이전트 기술입니다.
출처: 인류학/기술(MIT)에서 채택한 콘텐츠.
강력한 프런트엔드 clude.ai 아티팩트를 구축하려면 다음 단계를 따르세요.
scripts/init-artifact.sh를 사용하여 프런트엔드 저장소 초기화- 생성된 코드를 편집하여 아티팩트 개발
scripts/bundle-artifact.sh를 사용하여 모든 코드를 단일 HTML 파일로 묶습니다.- 사용자에게 아티팩트 표시
- (선택 사항) 아티팩트 테스트
스택: React 18 + TypeScript + Vite + Parcel(번들링) + Tailwind CSS + shadcn/ui
디자인 및 스타일 지침
매우 중요: 종종 "AI 슬롭"이라고 불리는 현상을 방지하려면 과도한 중앙 레이아웃, 보라색 그라데이션, 균일하고 둥근 모서리 및 인터 글꼴을 사용하지 마십시오.
빠른 시작
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 종속성이 포함됨
- 번들링을 위해 구성된 소포(.parcelrc를 통해)
- Node 18+ 호환성(Vite 버전 자동 감지 및 고정)
2단계: 아티팩트 개발
아티팩트를 빌드하려면 생성된 파일을 편집하세요. 지침은 아래의 일반적인 개발 작업을 참조하세요.
3단계: 단일 HTML 파일로 묶기
React 앱을 단일 HTML 아티팩트로 묶으려면 다음 안내를 따르세요.
bash scripts/bundle-artifact.sh이렇게 하면 모든 JavaScript, CSS 및 종속성이 인라인된 독립형 아티팩트인bundle.html가 생성됩니다. 이 파일은 Claude 대화에서 아티팩트로 직접 공유될 수 있습니다.
요구사항: 프로젝트의 루트 디렉터리에index.html가 있어야 합니다.
스크립트의 기능:
- 번들 종속성 설치(parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
- 경로 별칭 지원을 통해
.parcelrc구성을 생성합니다. - Parcel로 빌드(소스 맵 없음)
- html-inline을 사용하여 모든 자산을 단일 HTML로 인라인합니다.
4단계: 사용자와 아티팩트 공유
마지막으로 사용자와 대화하면서 번들 HTML 파일을 공유하여 사용자가 이를 아티팩트로 볼 수 있도록 합니다.
5단계: 아티팩트 테스트/시각화(선택 사항)
참고: 이는 완전히 선택적인 단계입니다. 필요하거나 요청한 경우에만 수행하십시오.
아티팩트를 테스트/시각화하려면 사용 가능한 도구(기타 기술이나 극작가 또는 Puppeteer와 같은 내장 도구 포함)를 사용하십시오. 일반적으로 요청과 완료된 아티팩트를 볼 수 있는 시기 사이에 대기 시간이 추가되므로 아티팩트를 미리 테스트하지 마세요. 요청이 있거나 문제가 발생하면 아티팩트를 제시한 후 나중에 테스트하세요.
참고자료
- shadcn/ui 구성요소: https://ui.shadcn.com/docs/components
리소스 파일
라이센스.txt
바이너리 리소스
스크립트/bundle-artifact.sh
#!/bin/bash
set -e
echo "📦 Bundling React app to single HTML artifact..."
# Check if we're in a project directory
if [ ! -f "package.json" ]; then
echo "❌ Error: No package.json found. Run this script from your project root."
exit 1
fi
# Check if index.html exists
if [ ! -f "index.html" ]; then
echo "❌ Error: No index.html found in project root."
echo " This script requires an index.html entry point."
exit 1
fi
# Install bundling dependencies
echo "📦 Installing bundling dependencies..."
pnpm add -D parcel @parcel/config-default parcel-resolver-tspaths html-inline
# Create Parcel config with tspaths resolver
if [ ! -f ".parcelrc" ]; then
echo "🔧 Creating Parcel configuration with path alias support..."
cat > .parcelrc << 'EOF'
{
"extends": "@parcel/config-default",
"resolvers": ["parcel-resolver-tspaths", "..."]
}
EOF
fi
# Clean previous build
echo "🧹 Cleaning previous build..."
rm -rf dist bundle.html
# Build with Parcel
echo "🔨 Building with Parcel..."
pnpm exec parcel build index.html --dist-dir dist --no-source-maps
# Inline everything into single HTML
echo "🎯 Inlining all assets into single HTML file..."
pnpm exec html-inline dist/index.html > bundle.html
# Get file size
FILE_SIZE=$(du -h bundle.html | cut -f1)
echo ""
echo "✅ Bundle complete!"
echo "📄 Output: bundle.html ($FILE_SIZE)"
echo ""
echo "You can now use this single HTML file as an artifact in Claude conversations."
echo "To test locally: open bundle.html in your browser"스크립트/init-artifact.sh
바이너리 리소스
스크립트/shadcn-comComponents.tar.gz
스크립트 다운로드/shadcn-comComponents.tar.gz
바이너리 리소스
클로데스킬스 문서