Możesz przejść od projektu Figmy do działającej, wdrożonej strony internetowej w ciągu jednego popołudnia, używając Claude — bez wymaganego doświadczenia w kodowaniu. Przepływ pracy jest prosty: projektuj w Figmie, eksportuj lub opisz projekt dla Claude, wygeneruj kod, wdróż na Vercel lub Netlify. Całość kosztuje 0 zł, jeśli korzystasz z darmowych wersji.

Ludzie publikują na X klipy „Strona za 5000 zł w 2 godziny", ale większość z nich pomija faktyczne kroki. Ten przewodnik wypełnia tę lukę. Każdy prompt jest zawarty, każdy punkt decyzyjny jest wyjaśniony, a kompromisy są uczciwe.

Szybkie fakty
Stos technologiczny
Figma → Claude → Vercel lub Netlify
Czas
1,5–3 godziny dla strony 4–6 stron
Koszt
Darmowe wersje, lub ~20 zł/mies. z Claude Pro
Umiejętności
Zerowe kodowanie — przydatna jest zmysł projektowy
Najlepsze dla
Strony lądowania, portfolio, strony małych firm, MVP
Ostatnio zweryfikowano
Kwiecień 2026

Dlaczego to teraz działa (a rok temu nie działało)

Rok temu zamienianie projektu na kod za pomocą AI oznaczało wklejenie zrzutu ekranu i otrzymanie przybliżonego wyniku, który wymagał godzin pracy porządkującej. Dzisiaj okno kontekstu Claude'a na 1 milion tokenów oznacza, że możesz mu przekazać cały system projektowania — kolory, typografię, odstępy, szczegóły komponentów — i otrzymać kod gotowy do produkcji, który ściśle odpowiada Twojemu projektowi za pierwszym razem.

Kluczowa obserwacja: jakość tego, co otrzymujesz, zależy prawie całkowicie od tego, jak dobrze opisujesz projekt. Niejasne opisy dają niejasne strony internetowe. Konkretne, ustrukturyzowane opisy dają konkretne, dopracowane strony internetowe.

Co Ci potrzeba

Trzy narzędzia, wszystkie z darmowymi wersjami:

Figma — do Twojego projektu. Darmowa wersja działa dobrze. Jeśli nie masz projektu, weź darmowy szablon z Figma Community i go dostosuj.

Claude — do generowania kodu. Darmowa wersja daje Ci Sonnet, który sprawdza się dobrze. Pro (20 zł/mies.) daje Ci Opus 4.7 dla bardziej złożonych stron.

Vercel lub Netlify — do wdrożenia. Obie mają darmowe wersje. Połącz swoje repozytorium GitHub, wyślij kod, strona jest na żywo.

Krok 1: Przygotuj swój projekt Figmy

Zanim zaangażujesz Claude'a, uporządkuj swój plik Figmy. Ten krok określa jakość wszystkiego, co następuje.

Twój projekt powinien mieć jasno zdefiniowane strony (Home, About, Contact, itp.), spójne odstępy i wyrównanie, widoczną paletę kolorów (zanotuj dokładne wartości hex), zidentyfikowane czcionki i responsywne punkty przerwania dla komputera stacjonarnego i urządzeń mobilnych, jeśli to możliwe.

Nie martw się o doskonałość pikselową. Claude dobrze obsługuje szczegóły implementacji. Ważne jest to, że Twój projekt wyraźnie komunikuje strukturę, hierarchię i styl wizualny.

Porrada: Nadaj swoim warstwom Figmy znaczące nazwy. „Hero Section", „Feature Cards", „Pricing Table" są znacznie bardziej przydatne, gdy piszesz prompty, niż „Frame 247".

Krok 2: Eksportuj informacje o Twoim projekcie

Claude nie może bezpośrednio czytać pliku Figmy, więc musisz przełożyć swój projekt na informacje, z którymi Claude może pracować. Masz trzy podejścia, od najłatwiejszego do najdokładniejszego:

Podejście A: Zrzut ekranu + opis. Zrób pełnostronicowe zrzuty ekranu każdej strony w Twoim projekcie. Wyślij je do Claude'a wraz z opisem tekstowym układu, kolorów i interakcji. To najszybsze podejście i zadziała zaskakująco dobrze.

Podejście B: Export Figma Dev Mode. Jeśli masz płatny plan Figmy, użyj Dev Mode, aby eksportować wartości CSS, tokeny odstępów i specyfikacje komponentów. Przekaż je Claude'owi wraz z zrzutami ekranu, aby uzyskać dokładniejsze wyniki.

Podejście C: Pisemna specyfikacja projektu. Napisz szczegółowy opis każdej sekcji — nagłówek, hero, funkcje, testimoniale, stopka — включая kolory, czcionki, rozmiary i układ. To trwa dłużej, ale daje Ci większą kontrolę nad wynikiem. Jeśli budujesz bez projektu Figmy, to jest Twoja droga.

Krok 3: Napisz swój początkowy prompt

Tu większość ludzi robi źle. Piszą „zbuduj mi stronę internetową, która wygląda jak ten zrzut ekranu" i otrzymują generyczne wyniki. Oto struktura promptu, która konsekwentnie daje wyniki wysokiej jakości:

Zbuduj stronę internetową o liczbie stron [liczba] z następującymi specyfikacjami: SYSTEM PROJEKTOWANIA: - Kolor podstawowy: [hex] - Kolor dodatkowy: [hex] - Tło: [hex] - Tekst: [hex] - Czcionka: [nazwa czcionki] do nagłówków, [nazwa czcionki] do tekstu głównego - Promień obramowania: [wartość] - Skala odstępów: [wartości] STRONA 1 — HOME: - Sekcja hero: [dokładny opis — tekst nagłówka, podtekst, tekst przycisku CTA, traktowanie tła] - Sekcja funkcji: [liczba] kart, każda z [ikoną/obrazem, tytułem, opisem] - Testimoniale: [opis układu] - Sekcja CTA: [opis] - Stopka: [linki i układ] STRONA 2 — ABOUT: [ten sam poziom szczegółowości] TECHNICZNE: - Użyj Next.js z Tailwind CSS - Responsywne na urządzenia mobilne - Płynne przewijanie między sekcjami - Wszystkie obrazy jako objaśniające divy z kolorami tła (dodam prawdziwe obrazy później)

Im bardziej konkretnie opisujesz to, co widzi użytkownik, tym lepszy wynik. Nie opisuj kodu — opisuj doświadczenie. Jeśli potrzebujesz pomocy w wyostrzeniu tego promptu przed wysłaniem, nasz bezpłatny optymalizator promptów może pomóc w jego ustrukturyzowaniu, aby uzyskać lepsze wyniki.

Krok 4: Przejrzyj i powtórz

Pierwszy wynik Claude'a zwykle captures 60–80% Twojego projektu. Pozostałe 20–40% pochodzi z iteracji. To jest krok, w którym większość samouczków „vibe codingu" się kończy, ale to jest miejsce, gdzie naprawdę zaczyna się jakość.

Przejrzyj wynik, sprawdzając trzy rzeczy: czy układ odpowiada Twojemu projektowi? Czy kolory i typografia czują się dobrze? Czy wygląda dobrze na urządzeniu mobilnym?

Następnie powtórz z konkretnym opiniowaniem zwrotnym. Nie mów „zrób to lepiej". Powiedz:

  • „Sekcja hero potrzebuje więcej pionowego dopełnienia — dodaj 120px góra i dół"
  • „Karty funkcji powinny być w siatce 3 kolumn na komputerze stacjonarnym, jedna kolumna na urządzeniach mobilnych"
  • „Przycisk CTA powinien mieć efekt hover — przyciemnij tło o 10% i nieznacznie powiększ"
  • „Linki w stopce powinny być ułożone w 4 kolumnach: Product, Company, Resources, Legal"

Każda runda opinii powinna dotyczyć 3–5 konkretnych problemów. Trzy rundy zwykle prowadzą Cię do 95% Twojego projektu.

Czerpiesz wartość z tego? Publikujemy jedno dogłębne opracowanie w tygodniu na temat przepływów pracy AI, narzędzi i praktycznych przewodników. Dołącz do czytających, którzy otrzymają to pierwsi →

Krok 5: Dodaj rzeczywistą zawartość i obrazy

Zastąp tekst zastępczy swoją rzeczywistą kopią. Zastąp divy obrazów zastępczych rzeczywistymi obrazami. Jeśli potrzebujesz pomocy w napisaniu tekstu strony internetowej, Claude doskonale się do tego nadaje — przekaż mu opis marki i poproś o tekst strony głównej, który odpowiada Twojemu tonowi.

W przypadku obrazów użyj darmowych z Unsplash lub Pexels, lub wygeneruj niestandardowe obrazy za pomocą narzędzia AI do generowania obrazów. Upuść pliki obrazów do folderu /public projektu i zaktualizuj atrybuty src.

Krok 6: Wdróż jednym klikiem

Jeśli użyłeś Next.js (zalecane), wdrożenie na Vercel zajmuje 60 sekund:

  1. Wyślij kod do repozytorium GitHub
  2. Przejdź do vercel.com i zaloguj się za pośrednictwem GitHub
  3. Kliknij „Import Project" i wybierz swoje repozytorium
  4. Vercel automatycznie wykrywa Next.js i konfiguruje wszystko
  5. Kliknij „Deploy"

Twoja strona jest na żywo z adresem URL .vercel.app. Połącz domenę niestandardową w ustawieniach Vercel, jeśli ją masz.

Netlify działa prawie identycznie — importuj z GitHub, automatycznie wykryj framework, wdróż. Obie platformy automatycznie obsługują SSL, CDN i wdrożenie ciągłe. Za każdym razem, gdy wyślesz do GitHub, Twoja strona zostanie zaktualizowana.

Nie wiesz, którą platformę wdrożeniową wybrać? Napisaliśmy pełne porównanie: Gdzie wdrażasz się po Vibe Codingu?

Typowe błędy, które wprowadzają ludzi w błąd

1. Podanie Claude'owi zrzutu ekranu bez pisemnego kontekstu. Zrzuty ekranu pomagają, ale Claude potrzebuje pisemnych opisów kolorów, czcionek, odstępów i układu, aby wytworzyć dokładny kod. Zrzut ekranu jest odniesieniem — tekst jest instrukcją.

2. Próba zbudowania wszystkiego w jednym promptie. Strona 6-stronicowa z animacjami, formularzami i CMS to zbyt dużo na jedną przejście. Buduj stronę po stronie, sekcję po sekcji. Zacznij od strony głównej, wciśnij ją dobrze, a następnie przejdź do następnej strony.

3. Pomijanie responsywności mobilnej. Jeśli nie wspomniałeś mobilnego w swoim promptie, Claude zbuduje układ tylko na komputerze stacjonarnym. Zawsze uwzględniaj „responsywne na urządzenia mobilne" w wymaganiach technicznych i testuj wynik przy szerokości 375 pikseli.

4. Nietestowanie interakcji. Kliknij każdy przycisk, wypełnij każdy formularz, przewiń każdą stronę. Kod wygenerowany sztuczną inteligencją często wygląda dobrze, ale ma zerwane linki, niefunkcjonujące formularze lub brakujące stany hover. Testuj przed wdrażaniem.

5. Perfekcjonizm przed wdrożeniem. Dostarczaj przy 90% i powtarzaj. Twoje pierwsze wdrażanie nie musi być doskonałe — musi być na żywo. Możesz wysyłać aktualizacje w sekundy.

Budujesz dla klientów? Przeczytaj nasz przewodnik na temat 5 błędów bezpieczeństwa, które popełnia każdy vibe coder przed dostarczeniem.

Podsumowanie

Przepływ pracy Figma-to-Claude-to-deploy to najszybszy sposób na przekształcenie projektu w działającą stronę internetową bez pisania kodu. Jakość zależy od konkretności Twoich promptów, a nie od umiejętności kodowania. Trzy rundy iteracji zwykle prowadzą Cię od pierwszego wersji do gotowości do produkcji.

Zacznij od prostego projektu — portfolio lub strona lądowania — i przejdź przez cały cykl raz. Drugi raz zajmie połowę czasu, ponieważ będziesz dokładnie wiedzieć, jak ustrukturyzować swoje prompty.

Nie wiesz, które narzędzie AI jest najlepsze dla Twojego przepływu pracy? Weź naszą 60-sekundową quizę Model Picker, aby się dowiedzieć, lub zobacz pełne porównanie State of AI Models.

To właśnie robimy co tydzień. Jedno dogłębne opracowanie na temat narzędzi AI, przepływów pracy i uczciwych poglądów — bez szumu, bez wypełniaczy. Dołącz do nas →

Ujawnienie: Niektóre linki w tym artykule to linki afiliacyjne. Rekomendujemy tylko narzędzia, które osobiście testowaliśmy i regularnie używamy. Przeczytaj naszą pełną politykę ujawniania.