83.3K+Download
Zur Nutzungsanleitung springen
web-artifacts-buildervon Anthropic

Web Artifacts Builder Skill.

Ein Claude Code- und Codex-Skill für UI-Design: interaktive HTML-Artefakte mit mehreren Komponenten, React, Tailwind und shadcn/ui.

  • Web & UI
  • HTML
OpenDesign herunterladenAnleitung ansehen
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
Einleitungstext und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 3.073 Zeichen insgesamt

01 Was es tut

Was der web-artifacts-builder Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Ein Skill zum Erstellen komplexer, mehrteiliger React-Artefakte für claude.ai mit einem modernen Stack aus React 18, TypeScript, Vite, Parcel, Tailwind CSS und shadcn/ui. Der Skill stellt Initialisierungsskripte bereit, um ein vollständig konfiguriertes Projekt mit über 40 vorinstallierten shadcn/ui-Komponenten einzurichten, sowie Bundling-Skripte, um alles in eine einzelne, in sich geschlossene HTML-Datei zu kompilieren.

Er ist für Artefakte gedacht, die State-Management, Routing oder shadcn/ui-Komponenten benötigen, nicht für einfache Single-File-HTML- oder JSX-Artefakte. Der Workflow umfasst fünf Schritte: das Frontend-Repo initialisieren, das Artefakt durch Bearbeiten des generierten Codes entwickeln, es in eine einzelne HTML-Datei bündeln, es dem Nutzer anzeigen und optional testen.

HTML
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Ein konfiguriertes React-Projekt initialisieren

    Führen Sie das Skript init-artifact.sh mit einem Projektnamen aus, um ein vollständig konfiguriertes Projekt mit React, TypeScript, Tailwind CSS, Pfad-Aliassen, über 40 shadcn/ui-Komponenten und einer Parcel-Bundling-Konfiguration zu erstellen.

  2. 02
    Durch Bearbeiten generierter Dateien entwickeln

    Entwickeln Sie das Artefakt, indem Sie die während der Initialisierung erzeugten Dateien bearbeiten, gemäß den im Skill enthaltenen Hinweisen zu gängigen Entwicklungsaufgaben.

  3. 03
    In eine in sich geschlossene HTML-Datei bündeln

    Führen Sie bundle-artifact.sh aus, um die React-App zu bundle.html zu kompilieren – einer einzelnen Datei, in der mithilfe von Parcel und html-inline sämtliches JavaScript, CSS und alle Abhängigkeiten inline eingebettet sind.

  4. 04
    Das Artefakt dem Nutzer anzeigen

    Teilen Sie die gebündelte HTML-Datei in der Konversation, damit der Nutzer sie als claude.ai-Artefakt ansehen kann.

02 Finden Sie Ihren Favoriten

Wann Sie das web-artifacts-builder Skill verwenden

Verwenden Sie den web-artifacts-builder Skill in Claude Code oder Codex, wenn es um UI-Design dieser Art geht. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Mehrteilige Oberflächen mit der shadcn/ui-Komponentenbibliothek

Grenzen kennen

  • Verwenden für komplexe Artefakte, die State-Management, Routing oder shadcn/ui-Komponenten erfordern – nicht für einfache einteilige HTML/JSX-Artefakte.

Was Sie bereitstellen sollten

  • Projektname für die InitialisierungEin Name für das neue React-Projektverzeichnis beim Ausführen des Skripts init-artifact.sh.

03 Innerhalb des Skills

Regeln, die der web-artifacts-builder Skill Claude Code und Codex vorgibt

5 konkrete Anweisungen, Standardwerte und Grenzen, die SKILL.md für den Agenten festlegt — der Teil der Datei, der das Ergebnis verändert.

  1. Nur für komplexe Artefakte verwenden

    Dieser Skill ist speziell für komplexe Artefakte gedacht, die State-Management, Routing oder shadcn/ui-Komponenten erfordern. Verwenden Sie ihn nicht für einfache Single-File-HTML- oder JSX-Artefakte.

  2. AI-Slop-Designmuster vermeiden

    Verwenden Sie keine übermäßig zentrierten Layouts, violette Farbverläufe, einheitlich abgerundete Ecken oder die Schriftart Inter, um sogenannten AI Slop zu vermeiden.

  3. Projekt muss eine index.html im Root haben

    Das Bundling-Skript setzt voraus, dass Ihr Projekt eine index.html-Datei im Root-Verzeichnis enthält.

  4. Nur bei Bedarf testen

    Das Testen ist völlig optional und sollte nur durchgeführt werden, wenn es notwendig oder ausdrücklich gewünscht ist.

  5. Fünfstufigen Workflow befolgen

    Der Prozess zur Erstellung von Artefakten folgt einer festen Abfolge: Frontend-Repo initialisieren, durch Bearbeiten des generierten Codes entwickeln, den gesamten Code zu einer einzigen HTML-Datei bündeln, dem Nutzer anzeigen und optional testen.

04 In Betrieb nehmen

web-artifacts-builder in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

web-artifacts-builder zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

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

Generische skills-CLI-Form für skills/web-artifacts-builder/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste UI-Design-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

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.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

  • Verwenden Sie verfügbare Tools wie Playwright oder Puppeteer, um das Artefakt bei Bedarf oder bei auftretenden Problemen zu testen oder zu visualisieren
  • Überprüfen Sie, dass das Design übermäßig zentrierte Layouts, violette Farbverläufe, einheitlich abgerundete Ecken und die Schriftart Inter vermeidet

In OpenDesign ist web-artifacts-builder gebündelt: Plugins → Skills, wählen Sie ihn in der oberen Leiste aus.

OpenDesign herunterladenQuickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author
Anthropic
Repository
github.com/anthropics/skills Branch main
Skill-Datei
skills/web-artifacts-builder/SKILL.md Inhalts-Prüfsumme bei Verifikation aufgezeichnet; Commit 34040c9
License
Apache-2.0 Aus skills/web-artifacts-builder/LICENSE.txt; SKILL.md sagt „Vollständige Bedingungen in LICENSE.txt".
Repository-Sterne
176.183 GitHub-Snapshot vom 14.09.2026 für das gesamte anthropics/skills-Repository, das 7 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für web-artifacts-builder.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. Design- und StilrichtlinienAnweisungen zur Vermeidung von AI-Slop-Mustern wie übermäßiger Zentrierung, violetten Farbverläufen, einheitlich abgerundeten Ecken und der Schriftart Inter
  2. SchnellstartFünfstufiger Workflow von der Initialisierung über die Entwicklung und das Bundling bis zum Teilen und optionalen Testen
  3. Schritt 1: Projekt initialisierenFühren Sie init-artifact.sh aus, um ein konfiguriertes React-Projekt mit TypeScript, Tailwind, shadcn/ui-Komponenten und Parcel zu erstellen
  4. Schritt 2: Ihr Artefakt entwickelnBearbeiten Sie die generierten Dateien, um das Artefakt gemäß den gängigen Entwicklungsaufgaben zu erstellen
  5. Schritt 3: Zu einer einzigen HTML-Datei bündelnFühren Sie bundle-artifact.sh aus, um ein eigenständiges bundle.html mit eingebettetem JavaScript, CSS und Abhängigkeiten zu erstellen
  6. Schritt 4: Artefakt mit dem Nutzer teilenTeilen Sie die gebündelte HTML-Datei im Gespräch, damit sie als Artefakt angezeigt werden kann
  7. Schritt 5: Testen/Visualisieren des Artefakts (optional)Optionales Testen mit Tools wie Playwright oder Puppeteer, wobei vorab durchgeführte Tests vermieden werden, um die Latenz zu reduzieren
  8. ReferenzLink zur Dokumentation der shadcn/ui-Komponenten
Die eigene Beschreibung des Skills
„Suite von Werkzeugen zum Erstellen aufwendiger, mehrkomponentiger claude.ai-HTML-Artefakte mit modernen Frontend-Web-Technologien (React, Tailwind CSS, shadcn/ui). Für komplexe Artefakte verwenden, die State-Management, Routing oder shadcn/ui-Komponenten erfordern – nicht für einfache Einzeldatei-HTML/JSX-Artefakte."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 3.073 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum web-artifacts-builder-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Welche Komponenten und Bibliotheken sind bereits installiert?

Das Initialisierungsskript erstellt ein Projekt mit React 18, TypeScript über Vite, Tailwind CSS 3.4.1 mit shadcn/ui-Theming, mehr als 40 vorinstallierten shadcn/ui-Komponenten, allen Radix-UI-Abhängigkeiten und Parcel für das Bundling. Pfad-Aliase sind so konfiguriert, dass Sie mit dem Präfix at-slash importieren können.

Web Artifacts Builder

web-artifacts-builder bei einer realen UI-Design-Aufgabe ausführen.

Der web-artifacts-builder-Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie den Skill unter Plugins → Skills, fügen Sie den Prompt oben ein und lesen Sie den Plan vor dem Ergebnis.

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