O czym jest ten film
- Prezentacja nowego sposobu projektowania przy użyciu agentów AI - Fable 5 w połączeniu z aplikacją Paper
- Demonstracja automatycznego tworzenia miniaturek YouTube, grafik na Instagram, prezentacji i stron internetowych
- Instrukcja konfiguracji połączenia między Claude Code a aplikacją Paper poprzez serwer MCP
- Praktyczne przykłady wykorzystania AI do projektowania w czasie rzeczywistym
Redakcyjne tłumaczenie
Riley Brown przedstawia rewolucyjne podejście do projektowania graficznego wykorzystujące agenty AI. Głównym bohaterem jest Fable 5 - system działający w środowisku Claude Code, który potrafi w pełni kontrolować aplikację Paper - narzędzie podobne do Figmy, ale stworzone specjalnie z myślą o agentach AI.
Konfiguracja systemu
Proces rozpoczyna się od pobrania aplikacji Paper ze strony paper.design. Aplikacja działa zarówno na systemach Mac, jak i Windows. Po instalacji należy skonfigurować połączenie z Claude Code poprzez serwer MCP (Model Context Protocol). W interfejsie Paper znajduje się przycisk “using agents”, który prowadzi do instrukcji konfiguracji. Wystarczy skopiować link do dokumentacji (paper.design/docs/mcp) i przekazać go Claude Code z prośbą o skonfigurowanie serwera MCP.
Test połączenia
Brown demonstruje test połączenia, prosząc Claude Code o rozpoznanie otwartej tablicy w Paper i stworzenie prostej grafiki. System natychmiast reaguje, tworząc ramkę z napisem “Hello from Claude Code” i rysując niebieską linię, potwierdzając sprawne działanie integracji.
Tworzenie miniaturek YouTube
Pierwszym praktycznym zastosowaniem jest generowanie miniaturek do filmów. Paper ma wbudowane modele generowania obrazów AI. Brown pokazuje, jak można łatwo zastąpić postać na istniejącej miniaturce własnym zdjęciem, zachowując wysoką jakość grafiki.
Szczególnie imponująca jest funkcja importowania miniaturek innych twórców. Brown demonstruje, jak Claude Code może automatycznie pobrać 12 najlepszych miniaturek YouTubera o pseudonimie Callaway, wykorzystując specjalną umiejętność (skill) do scrapowania miniaturek z YouTube. Następnie pokazuje, jak można wykorzystać te miniatury jako inspirację, zastępując elementy własnymi treściami - na przykład zmieniając tekst na “Addicting Apps” i dodając ikonę App Store.
Grafiki na Instagram
Kolejnym zastosowaniem jest tworzenie grafik na Instagram. Brown importuje przykładową grafikę z konta “Wealth” i pokazuje, jak Claude Code może odtworzyć charakterystyczny efekt czarnego gradientu za tekstem. System automatycznie nakłada tekst, który można bezpośrednio edytować - nie jest to obraz z “wypalonym” tekstem, ale prawdziwy, edytowalny element.
Agent potrafi także generować wiele wariantów tej samej grafiki, zmieniając tło, kolory poszczególnych elementów tekstu (np. “Riley Brown” na czerwono, “Paper” na niebiesko) oraz tworzyć różne wersje copywritingu dostosowane do konkretnego przypadku użycia.
Prezentacje i strony internetowe
Najbardziej zaawansowanym przykładem jest stworzenie profesjonalnej prezentacji dla sponsorów. Brown prosi Fable 5 o stworzenie sześcioslajdowego pokazu w stylu marki Perplexity. System wykorzystuje umiejętność “scraper skill” opartą na API Firecrawl, aby pobrać styl wizualny ze strony Perplexity i zastosować go w prezentacji.
Prezentacja powstaje automatycznie, zawierając slajdy takie jak:
- Strona tytułowa
- “What I Do” - opis działalności
- Statystyki zasięgu
- Proces tworzenia treści
- Podsumowanie z wezwaniem do działania
Na koniec Brown demonstruje, jak w jednym poleceniu można przekształcić prezentację w responsywną stronę internetową, automatycznie wdrożyć ją na platformie Vercel i otrzymać publiczny link do udostępnienia.
Aspekty techniczne
Cały system działa w oparciu o HTML, co zapewnia szybkość działania i wysoką jakość rezultatów. Paper wykorzystuje model kredytowy - początkowe użycie jest darmowe, ale intensywne korzystanie wymaga subskrypcji. Brown podkreśla, że film nie jest sponsorowany ani przez Claude, ani przez Paper - przedstawia autentyczny przepływ pracy, który sam stosuje.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Agenty AI mogą w pełni kontrolować narzędzia projektowe
Na czym polega: Fable 5 działający w Claude Code może samodzielnie tworzyć i edytować projekty w aplikacji Paper, wykonując złożone zadania projektowe na podstawie prostych poleceń tekstowych.
Jak stosować: Skonfiguruj połączenie MCP między Claude Code a Paper, następnie wydawaj polecenia w języku naturalnym opisujące pożądany efekt wizualny.
Na co uważać: System wymaga precyzyjnych instrukcji - warto dokładnie opisywać oczekiwany rezultat i iterować w razie potrzeby.
2.Importowanie i modyfikacja istniejących projektów
Na czym polega: Claude Code może automatycznie pobierać miniatury z YouTube lub grafiki z innych źródeł, a następnie je modyfikować według wskazówek.
Jak stosować: Użyj specjalnej umiejętności “youtube thumbnails skill” do pobrania miniaturek, następnie wykorzystaj je jako bazę do własnych projektów.
Na co uważać: Pamiętaj o prawach autorskich - używaj cudzych prac tylko jako inspiracji, nie kopiuj ich bezpośrednio do celów komercyjnych.
3.Generowanie wielu wariantów projektu
Na czym polega: System może tworzyć kilka wersji tego samego projektu z różnymi elementami, kolorami czy tekstami.
Jak stosować: Po stworzeniu bazowego projektu poproś o wygenerowanie wariantów z konkretnymi zmianami (np. inne tło, kolory tekstu).
Na co uważać: Generowanie wielu wariantów zużywa kredyty w Paper - planuj swoją pracę efektywnie.
4.Bezpośrednia edycja tekstu w projektach
Na czym polega: Teksty w Paper są prawdziwymi, edytowalnymi elementami, nie obrazami z “wypalonym” tekstem.
Jak stosować: Kliknij bezpośrednio na tekst w projekcie i edytuj go jak w zwykłym edytorze tekstowym.
Na co uważać: Zachowaj spójność typograficzną - nie mieszaj zbyt wielu czcionek i rozmiarów w jednym projekcie.
5.Wykorzystanie ramek do grupowania elementów
Na czym polega: Ramki (frames) pozwalają grupować elementy i odwoływać się do całej grupy jednym linkiem.
Jak stosować: Zaznacz elementy, utwórz ramkę (klawisz F), nadaj jej nazwę i skopiuj link do przekazania Claude Code.
Na co uważać: Dobrze nazywaj ramki - ułatwi to późniejsze zarządzanie projektami.
6.Automatyczne usuwanie tła ze zdjęć
Na czym polega: Paper ma wbudowaną funkcję usuwania tła, która działa natychmiastowo.
Jak stosować: Zaznacz zdjęcie i wybierz opcję “remove background” z menu kontekstowego.
Na co uważać: Funkcja najlepiej działa ze zdjęciami o wyraźnym kontraście między obiektem a tłem.
7.Kopiowanie stylów z istniejących stron internetowych
Na czym polega: Umiejętność “scraper skill” z API Firecrawl pozwala pobrać i zastosować styl wizualny dowolnej strony internetowej.
Jak stosować: W poleceniu wskaż stronę, której styl chcesz naśladować (np. “chcę, żeby wyglądało jak Perplexity”).
Na co uważać: Upewnij się, że masz prawo do wykorzystania elementów stylu w swoich projektach komercyjnych.
8.Tworzenie responsywnych stron internetowych
Na czym polega: Claude Code może przekształcić projekt w Paper w pełnoprawną stronę internetową zoptymalizowaną pod urządzenia mobilne.
Jak stosować: Poproś o stworzenie strony na podstawie projektu i automatyczne wdrożenie na Vercel.
Na co uważać: Sprawdź, czy masz skonfigurowane konto Vercel i odpowiednie uprawnienia do wdrażania.
9.Iteracyjne ulepszanie projektów
Na czym polega: Możesz stopniowo poprawiać projekt, dodając szczegółowe instrukcje po każdej generacji.
Jak stosować: Zacznij od prostego polecenia, oceń rezultat, następnie dodawaj konkretne wskazówki dotyczące zmian.
Na co uważać: Dokumentuj udane prompty - przyspieszy to pracę w przyszłości.
10.Zarządzanie poziomem szczegółowości (effort level)
Na czym polega: Fable 5 pozwala ustawić poziom “wysiłku” (low/high), który wpływa na jakość i szczegółowość generowanych projektów.
Jak stosować: Używaj “low” do testów i prostych zadań, “high” do finalnych projektów wymagających wysokiej jakości.
Na co uważać: Wyższy poziom wysiłku zużywa więcej tokenów Fable - używaj go rozważnie przy bardziej złożonych projektach.