playground

Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt. Use when the user asks to make a playground, explorer, or interactive tool for a topic.

1. Poproś Claude'a o stworzenie playgroundu, eksploratora lub interaktywnego narzędzia do wybranego tematu. Opisz, co chcesz konfigurować wizualnie — na przykład parametry projektu, zapytania SQL, koncepcje do nauki lub kod do przeglądu.

2. Claude wybierze odpowiedni szablon na podstawie Twojego żądania: dla decyzji projektowych (komponenty, kolory, typografia), eksploracji danych (SQL, API, wyrażenia regularne), nauki (mapy pojęć, luki w wiedzy), recenzji dokumentów (zatwierdzanie/odrzucanie sugestii) lub przeglądu kodu (komentarze linia po linii).

3. Claude wygeneruje kompletny plik HTML z kontrolkami po jednej stronie, podglądem na żywo po drugiej i polem do skopiowania promptu na dole. Plik zawiera całe CSS i JavaScript wbudowane — nie potrzebuje żadnych zewnętrznych bibliotek.

4. Skopiuj wygenerowany kod HTML i zapisz go jako plik .html na swoim komputerze.

5. Otwórz plik w przeglądarce internetowej — kliknij na niego dwukrotnie lub przeciągnij do okna przeglądarki. Zacznij dostosowywać kontrolki i obserwuj zmiany w podglądzie w czasie rzeczywistym.

6. Gdy skonfigurujesz coś, co Ci się podoba, skopiuj wygenerowany prompt z pola na dole playgroundu i wklej go z powrotem do Claude'a, aby kontynuować pracę na podstawie Twoich wyborów.