Artifacts - dokumenty, kod i wizualizacje
- Rozumiesz, czym są Artifacts i kiedy się pojawiają
- Znasz wszystkie typy Artifacts i ich zastosowania
- Potrafisz tworzyć, edytować i eksportować Artifacts
- Wiesz, jak publikować i udostępniać Artifacts
Czym są Artifacts
Artifacts to osobna przestrzeń robocza w claude.ai, która pojawia się obok okna rozmowy. Zamiast wyświetlać wszystko w czacie, Claude generuje dokumenty, kod i wizualizacje w osobnym panelu - gdzie możesz je przeglądać, edytować i pobierać.
Artifacts zmieniają rozmowę z jednokierunkowego Q&A w interaktywną współpracę.
Kiedy Artifact się pojawia? Claude sam decyduje. Gdy generuje dłuższy fragment kodu, gotowy dokument lub wizualizację - automatycznie tworzy Artifact. Krótkie odpowiedzi (kilka linii kodu, szybka notatka) pozostają w czacie.
Możesz też poprosić wprost: "Pokaż to jako artifact" lub "Stwórz artifact z...".
8 typów Artifacts
| Typ | Co to | Przykład |
|---|---|---|
| Dokumenty tekstowe | Artykuły, raporty, instrukcje | Raport biznesowy, artykuł blogowy |
| Kod (snippety) | Fragmenty kodu z podświetlaniem składni | Funkcja Python, skrypt Bash |
| HTML/CSS/JS | Kompletne strony z podglądem live | Landing page, formularz |
| React Components | Interaktywne komponenty renderowane w przeglądarce | Dashboard, kalkulator, gra |
| SVG | Grafiki wektorowe | Logo, ikony, diagramy |
| Mermaid Diagrams | Diagramy w składni Mermaid | Flowcharty, wykresy Gantta |
| Dashboardy | Wizualizacje danych z wykresami | Dashboard finansowy |
| AI-powered Apps | Artifacts korzystające z API Claude | Aplikacje z wbudowanym AI |
Od września 2025 Claude może też tworzyć pliki: Excel (z formułami), PowerPoint, Word, PDF - to wychodzi poza klasyczne Artifacts.
Artifacts w praktyce - tworzenie
Claude automatycznie tworzy Artifact, gdy:
- Generuje dłuższy fragment kodu (>15 linii)
- Tworzy dokument lub artykuł
- Buduje stronę HTML, komponent React
- Produkuje diagram (SVG, Mermaid)
Możesz też poprosić wprost:
- "Stwórz aplikację React, która..."
- "Napisz mi HTML strony..."
- "Wygeneruj diagram Mermaid..."
- "Pokaż to jako artifact"
Edycja i iteracja
Tu jest sedno Artifacts - możesz je iterować:
- Claude tworzy Artifact (np. landing page)
- Ty: "Zmień kolor nagłówka na niebieski"
- Claude aktualizuje Artifact
- Ty: "Dodaj formularz kontaktowy na dole"
- Claude aktualizuje ponownie
Każda wersja jest zapisywana - możesz przeglądać historię wersji i wrócić do poprzedniej.
Możesz też edytować treść bezpośrednio w panelu Artifact (edycja inline).
Eksport i udostępnianie
Kopiowanie - przycisk kopiowania treści Artifact do schowka.
Pobieranie - pobranie jako pliku (np. .html, .py, .svg).
Publikowanie - użytkownicy Free i Pro mogą publikować Artifacts i udostępniać je społeczności Claude.
Remixowanie - inni użytkownicy mogą modyfikować Twoje opublikowane Artifacts.
Udostępnianie w Teams - użytkownicy Team mogą udostępniać Artifacts w ramach projektów zespołowych.
Ograniczenia
- Brak zewnętrznych API - Artifacts nie mogą wywoływać zewnętrznych API (poza API Claude w AI-powered apps)
- Brak trwałego storage - dane nie są przechowywane między sesjami
- Ograniczone biblioteki React - nie można importować dowolnych pakietów npm
- Rendering w przeglądarce - Artifacts działają w sandboxie przeglądarki
- Złożoność - bardzo skomplikowane aplikacje mogą przekraczać limity kontekstu
Artifact vs czat - kiedy co
| Użyj Artifact, gdy: | Zostań w czacie, gdy: |
|---|---|
| Dłuższy kod (>15 linii) | Krótka odpowiedź tekstowa |
| Kompletny dokument | Wyjaśnienie koncepcji |
| Strona HTML / aplikacja React | Krótki fragment kodu |
| Diagram / wizualizacja | Odpowiedź na pytanie |
| Treść do edycji i iteracji | Dyskusja, burza mózgów |
Dostępność
Artifacts są dostępne na wszystkich planach - włącznie z darmowym. Nie potrzebujesz Pro, żeby z nich korzystać.
Ćwiczenie praktyczne: Stwórz 3 różne Artifacts w claude.ai:
1. Dokument: "Napisz executive summary raportu o trendach AI w marketingu 2026. Format: profesjonalny dokument z nagłówkami i bullet pointami."
2. Kod HTML: "Stwórz prostą stronę HTML z formularzem kontaktowym. Styl: ciemny motyw, nowoczesny design."
3. Wizualizacja React: "Stwórz interaktywny wykres słupkowy pokazujący wydatki na AI w firmach: 2023: $50M, 2024: $120M, 2025: $280M, 2026: $500M."
Dla każdego Artifact: spróbuj edytować go przez chat ("Zmień X na Y") i przez edycję inline.
Wyzwanie: Stwórz interaktywną miniaplikację jako Artifact. Pomysł: kalkulator ROI z AI, quiz wiedzy o AI lub timer Pomodoro z statystykami.
Co dalej
W następnej lekcji poznasz Projects - dzięki nim zbudujesz bazę wiedzy dla Claude i sprawisz, że "rozumie" Twój biznes.