83.3K+다운로드
사용 가이드로 건너뛰기
web-artifacts-builder작성자 Anthropic

Web Artifacts Builder 스킬.

UI 디자인을 위한 Claude Code 및 Codex 스킬입니다: React, Tailwind, shadcn/ui를 사용한 다중 컴포넌트 인터랙티브 HTML 산출물.

  • Web & UI
  • HTML
OpenDesign 다운로드사용 가이드 보기
anthropics/skills · skills/web-artifacts-builder/SKILL.mdSKILL.md
--- name: web-artifacts-builder description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. --- ## Design & Style Guidelines ## Quick Start
2026-09-14에 업스트림 파일에서 읽은 전면부 및 섹션 제목 · 전체 3,073자

01 기능

Claude Code와 Codex에서 web-artifacts-builder 스킬이 수행하는 작업

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

React 18, TypeScript, Vite, Parcel, Tailwind CSS, shadcn/ui로 구성된 최신 스택을 사용하여 claude.ai용 복잡한 다중 컴포넌트 React 산출물을 구축하기 위한 스킬입니다. 이 스킬은 40개 이상의 사전 설치된 shadcn/ui 컴포넌트로 완전히 구성된 프로젝트를 설정하는 초기화 스크립트와, 모든 것을 하나의 독립된 HTML 파일로 컴파일하는 번들링 스크립트를 제공합니다.

이 스킬은 상태 관리, 라우팅 또는 shadcn/ui 컴포넌트가 필요한 산출물을 위해 설계되었으며, 단순한 단일 파일 HTML 또는 JSX 산출물을 위한 것은 아닙니다. 워크플로우는 다섯 단계로 진행됩니다: 프런트엔드 저장소 초기화, 생성된 코드를 편집하여 산출물 개발, 하나의 HTML 파일로 번들링, 사용자에게 표시, 선택적으로 테스트.

HTML
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    구성된 React 프로젝트 초기화

    프로젝트 이름과 함께 init-artifact.sh 스크립트를 실행하여 React, TypeScript, Tailwind CSS, 경로 별칭, 40개 이상의 shadcn/ui 컴포넌트, Parcel 번들링 구성이 완전히 갖춰진 프로젝트를 생성합니다.

  2. 02
    생성된 파일을 편집하여 개발

    스킬에서 제공하는 일반적인 개발 작업 안내에 따라, 초기화 과정에서 생성된 파일을 편집하여 산출물을 구축합니다.

  3. 03
    독립된 HTML로 번들링

    bundle-artifact.sh를 실행하여 React 앱을 bundle.html로 컴파일합니다. 이는 Parcel과 html-inline을 사용하여 모든 JavaScript, CSS, 의존성이 인라인으로 포함된 단일 파일입니다.

  4. 04
    사용자에게 산출물 표시

    번들링된 HTML 파일을 대화창에 공유하여 사용자가 claude.ai 산출물로 볼 수 있도록 합니다.

02 적합성 확인

web-artifacts-builder 스킬 사용 시점

Claude Code 또는 Codex에서 이러한 종류의 UI 디자인 작업을 수행할 때 web-artifacts-builder 스킬을 사용합니다. 적합성과 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

  • shadcn/ui 컴포넌트 라이브러리를 사용한 다중 컴포넌트 인터페이스

한계 인지하기

  • 상태 관리, 라우팅 또는 shadcn/ui 컴포넌트가 필요한 복잡한 산출물에 사용하며, 단순한 단일 파일 HTML/JSX 산출물에는 사용하지 않습니다.

제공할 사항

  • 초기화를 위한 프로젝트 이름init-artifact.sh 스크립트를 실행할 때 새 React 프로젝트 디렉터리에 사용할 이름입니다.

03 스킬 내부

Claude Code와 Codex에 web-artifacts-builder 스킬이 부여하는 규칙

SKILL.md가 에이전트에 설정하는 5가지 구체적 지침, 기본값, 한계 — 결과를 바꾸는 파일의 부분입니다.

  1. 복잡한 산출물에만 사용

    이 스킬은 상태 관리, 라우팅 또는 shadcn/ui 컴포넌트가 필요한 복잡한 산출물을 위한 것입니다. 단순한 단일 파일 HTML 또는 JSX 산출물에는 사용하지 마십시오.

  2. AI 슬롭 디자인 패턴 피하기

    이른바 AI 슬롭으로 불리는 것을 피하기 위해 과도한 중앙 정렬 레이아웃, 보라색 그라디언트, 균일한 모서리 둥글기, Inter 폰트를 사용하지 마십시오.

  3. 프로젝트 루트에 index.html이 있어야 함

    번들링 스크립트는 프로젝트의 루트 디렉터리에 index.html 파일이 있어야 합니다.

  4. 필요한 경우에만 테스트

    테스트는 완전히 선택 사항이며 필요하거나 요청된 경우에만 수행해야 합니다.

  5. 5단계 워크플로 따르기

    산출물 빌드 과정은 특정 순서를 따릅니다: 프런트엔드 저장소 초기화, 생성된 코드를 편집하며 개발, 모든 코드를 단일 HTML 파일로 번들링, 사용자에게 표시, 선택적으로 테스트.

04 활용하기

Claude Code 또는 Codex에 web-artifacts-builder 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용 중인 에이전트에 web-artifacts-builder 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder

skills/web-artifacts-builder/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소에서 자체 경로를 문서화할 수 있습니다.

스킬에 첫 UI 디자인 작업 부여하기

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt
Build a task management dashboard artifact with a sidebar navigation, data table showing tasks with status filters, and a modal form for adding new tasks. Use shadcn/ui components for the table, dialog, and form elements. Include state management for the task list and filtering logic.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • 요청이 있거나 문제가 발생한 경우 Playwright나 Puppeteer 같은 사용 가능한 도구로 산출물을 테스트하거나 시각화합니다
  • 디자인이 과도한 중앙 정렬 레이아웃, 보라색 그라디언트, 균일한 모서리 둥글기, Inter 폰트를 피하는지 확인합니다

OpenDesign에서는 web-artifacts-builder가 기본 포함되어 있습니다: Plugins → Skills에서 상단 바에서 선택하십시오.

OpenDesign 다운로드빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
Anthropic
Repository
github.com/anthropics/skills 브랜치 main
스킬 파일
skills/web-artifacts-builder/SKILL.md 검증 시 콘텐츠 체크섬 기록됨; 커밋 34040c9
License
Apache-2.0 skills/web-artifacts-builder/LICENSE.txt에서 가져옴; SKILL.md에는 "전체 조건은 LICENSE.txt 참조"라고 명시되어 있음.
리포지토리 스타
176,183 이 카탈로그에 7개의 스킬을 포함하는 전체 anthropics/skills 리포지토리에 대해 2026-09-14에 촬영한 GitHub 스냅샷입니다. web-artifacts-builder에 대한 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 별 개수가 확인되었습니다. OpenDesign 메인에 번들로 포함됨(2026-08-28 확인됨); 이 페이지에 실시간 실행이 기록되지 않았습니다.

SKILL.md 내부

  1. 디자인 및 스타일 가이드라인과도한 중앙 정렬, 보라색 그라디언트, 균일한 모서리 둥글기, Inter 폰트와 같은 AI 슬롭 패턴을 피하기 위한 지침
  2. 빠른 시작초기화부터 개발, 번들링, 공유, 선택적 테스트까지 이어지는 5단계 워크플로
  3. 1단계: 프로젝트 초기화init-artifact.sh를 실행하여 TypeScript, Tailwind, shadcn/ui 컴포넌트, Parcel로 구성된 React 프로젝트를 생성합니다
  4. 2단계: 산출물 개발일반적인 개발 작업 가이드를 따라 생성된 파일을 편집하여 산출물을 빌드합니다
  5. 3단계: 단일 HTML 파일로 번들링bundle-artifact.sh를 실행하여 JavaScript, CSS, 의존성이 인라인된 자체 완결형 bundle.html을 생성합니다
  6. 4단계: 사용자에게 산출물 공유번들된 HTML 파일을 대화 중에 공유하여 산출물로 볼 수 있도록 합니다
  7. 5단계: 산출물 테스트/시각화(선택)지연 시간을 줄이기 위해 사전 테스트를 피하고, Playwright나 Puppeteer 같은 도구로 선택적으로 테스트합니다
  8. 참고 자료shadcn/ui 컴포넌트 문서 링크
스킬 자체 설명
"최신 프론트엔드 웹 기술(React, Tailwind CSS, shadcn/ui)을 사용하여 정교하고 다중 컴포넌트로 구성된 claude.ai HTML 산출물을 생성하기 위한 도구 모음입니다. 상태 관리, 라우팅 또는 shadcn/ui 컴포넌트가 필요한 복잡한 산출물에 사용하며, 단순한 단일 파일 HTML/JSX 산출물에는 사용하지 않습니다."

SKILL.md의 전문 설명입니다. 전체 파일은 약 3,073자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

web-artifacts-builder 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

어떤 컴포넌트와 라이브러리가 이미 설치되어 있습니까?

초기화 스크립트는 React 18, Vite를 통한 TypeScript, shadcn/ui 테마가 적용된 Tailwind CSS 3.4.1, 사전 설치된 40개 이상의 shadcn/ui 컴포넌트, 모든 Radix UI 의존성, 그리고 번들링을 위해 구성된 Parcel을 포함하는 프로젝트를 생성합니다. 경로 별칭이 구성되어 있어 at-슬래시 접두사를 사용하여 임포트할 수 있습니다.

Web Artifacts Builder

실제 UI 디자인 작업에서 web-artifacts-builder를 실행합니다.

web-artifacts-builder 스킬은 OpenDesign에 내장되어 있습니다. 앱을 다운로드하고 Plugins → Skills에서 스킬을 선택한 다음, 위의 프롬프트를 붙여넣고 결과를 확인하기 전에 계획을 읽으십시오.

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder