Artefakty – kod i dokumenty w osobnym oknie
Artefakty to jeden z tych feature’ów po których powiedziałem “o, to zmienia wszystko”.
Czym są artefakty?
Gdy prosisz Claude o coś rozbudowanego – długi dokument, kod HTML, komponent React, SVG – zamiast wklejać to do czatu, otwiera się osobny panel po prawej stronie. Masz jednocześnie rozmowę i podgląd efektu.
Typy artefaktów
| Typ | Przykład zastosowania |
|---|---|
| Kod | Skrypt PHP, funkcja JS, snippet CSS |
| HTML | Gotowa strona, landing page, email HTML |
| React | Interaktywny komponent, kalkulator, formularz |
| Markdown | Dokumentacja, README, artykuł |
| SVG | Diagram, logo, ilustracja wektorowa |
Jak to wygląda w praktyce
Napisz do Claude: “Stwórz prostą stronę HTML z formularzem kontaktowym – imię, email, wiadomość, przycisk Wyślij. Dark mode, nowoczesny design.”
Zamiast bloku kodu w czacie, otwiera się panel z podglądem – widzisz gotową stronę HTML od razu. Możesz prosić o zmiany a artefakt jest aktualizowany na żywo.
Iterowanie artefaktu
Ty: "Zmień kolor przycisku na niebieski"
Ty: "Dodaj walidację emaila"
Ty: "Przesuń formularz na środek strony"
Każda zmiana aktualizuje artefakt, historia zmian jest w czacie.
Eksportowanie
Pod artefaktem znajdziesz przyciski:
- Kopiuj – kopiuje zawartość do schowka
- Pobierz – zapisuje jako plik
- Otwórz w nowej karcie (dla HTML/React)
Następna strona: Claude w aplikacjach