Google Stitch + Claude Code: projektowanie stron bez „wyglądu AI”

Dodatkowe instrukcje dotyczące korzystania z Ailoot znajdziesz w dokumentacji.

Dlaczego strony zbudowane przez Claude Code wyglądają jak „AI slop”?#

W opisanym tu praktycznym przypadku prace nad stroną główną aplikacji do połączeń zaczęły się od pustego projektu i prośby, by Claude Code zbudował stronę docelową. Rezultat był klasyczny: tło slate-950, akcent indigo-500, nagłówek pogrubionym krojem Inter, a pod nim trzy identyczne karty z cieniami. Ten sam układ co w pierwszym v0, pierwszym Lovable i pierwszej wersji wygenerowanej przez ChatGPT. Przepisałem prompt pięć razy, dodając „premium”, „nie jak wszyscy”, „nowoczesny” — a strona nadal wyglądała jak motyw WordPressa z 2015 roku.

Logika jest prosta: bez ograniczeń model bierze statystyczną średnią z tego, co widział. A widział milion identycznych stron docelowych zbudowanych w Bootstrapie i Tailwindzie. Żeby uzyskać wynik, który nie będzie przeciętny, trzeba podać agentowi konkretne informacje: jakie kolory, jakie fonty, jakie odstępy i które komponenty mają być wzorcowe. Dla modelu słowo „piękny” oznacza „mediana z 2020 roku”. Przymiotniki niczego tu nie zmienią; potrzebne są dokładne parametry.

Tę samą różnicę omówiłem w przewodniku po gotowych systemach projektowych w Refero — tam bierzesz czyjś styl (Apple, Linear, Stripe) i przekazujesz go agentowi. Google Stitch podchodzi do sprawy z drugiej strony: zamiast pożyczać styl od kogoś innego, generujesz własny na podstawie swojego opisu.

Czym jest Google Stitch i jak może pomóc?#

Stitch to eksperymentalne narzędzie Google Labs, zaprezentowane podczas Google I/O w maju 2025 roku. Wpisujesz w polu promptu, jak ma wyglądać aplikacja (albo przesyłasz zrzut ekranu, szkic na tablicy lub stronę konkurencji), a Stitch generuje ekrany interfejsu na nieskończonym obszarze roboczym. Pod spodem korzysta z Gemini 2.5 Pro i Flash; w grudniu 2025 roku dodano Gemini 3, który tworzy bardziej dopracowane układy.

Co jest dla nas przydatne:

• Vibe Design — opisz słowami pożądany klimat („minimalistyczny i premium, jak Stripe”) i wybierz jedną z kilku propozycji wizualnych.
• Materiały referencyjne — prześlij obraz z Dribbble lub Pinterest; Stitch zachowa jego układ i zastosuje Twoje wymagania.
• Eksport w trzech formatach: do Figma (z edytowalnymi warstwami), jako czysty HTML/CSS oraz przez MCP — bezpośrednio do agenta.

Różnica między Stitch a gotowymi stylami, takimi jak Refero, ma znaczenie. Refero to biblioteka systemów projektowych już wyodrębnionych z rzeczywistych stron internetowych; wybierasz istniejącą markę. Stitch generuje system dla Twojego produktu od podstaw. Nie masz projektu referencyjnego i chcesz własny wygląd? Wybierz Stitch. Chcesz szybko zastosować styl znanego produktu? Wybierz Refero. Narzędzia obsługują różne etapy i dobrze się uzupełniają.

Claude ma również wbudowany tryb projektowania; opisałem go w przewodniku po Claude Design. Stitch różni się tym, że dostarcza gotowy system w zewnętrznym pliku, który agent odczytuje za każdym razem, gdy coś buduje.

Wymagania dotyczące dostępności Google Stitch#

Stitch nie jest dostępny we wszystkich krajach: przedstawiciel Google napisał na oficjalnym forum, że z usługi mogą korzystać użytkownicy w wieku co najmniej 18 lat w 212 krajach, a lista jest rozszerzana. W regionach objętych ograniczeniami po wejściu na stronę zobaczysz tylko jeden komunikat: „Przepraszamy, Stitch jest niedostępny”.

Potrzebujesz konta Google — możesz zalogować się tylko za jego pomocą.

Gdy autoryzacja Stitch MCP blokuje pracę Claude Code#

W internecie jest mnóstwo kiepskich instrukcji dotyczących łączenia z MCP, a połowa z nich po prostu nie działa. Na przykład wiele poradników, w tym popularne anglojęzyczne, zaleca instalację pakietu @google/stitch-mcp poleceniem npx -y @google/stitch-mcp@latest. Ten pakiet nie istnieje — npm zwraca 404. Nie kopiuj tego polecenia, bo stracisz czas. Z tego samego powodu wybieraj integracje, których instalację i weryfikację podczas rzeczywistego zadania już potwierdzono.

Opisana próba zdalnego MCP zakończyła się Incompatible auth server w Claude Code. To zaobserwowany błąd, nie działająca recepta ani dowód awarii każdej obecnej konfiguracji. Nie kontynuuj nieokreślonego kroku „połącz MCP”: do sprawdzenia dokładnej zgodnej konfiguracji używaj ręcznego eksportu HTML/CSS poniżej.

Nie podano tutaj kompletnej sprawdzonej konfiguracji lokalnego proxy. Poniższy eksport HTML/CSS pozwala wykonać zadanie bez zgadywania poleceń i ustawień autoryzacji MCP.

Przepływ pracy Stitch i DESIGN.md to czysta postać inżynierii kontekstu: z góry umieszczasz w kontekście Claude'a dokładne tokeny, a on buduje ściśle według nich, bez „zgadywania, co miałem na myśli”. Pełna metodologia łączy wszystkie trzy filary — klona AI, Drugi Mózg i inżynierię kontekstu. Dzięki temu Claude przestaje być „asystentem, który zgaduje” i staje się narzędziem dającym przewidywalne rezultaty.

Czym jest DESIGN.md i dlaczego jest lepszy od zrzutu ekranu?#

Oto ważny szczegół, który większość instrukcji podaje błędnie: w Stitch nie ma przycisku „Export DESIGN.md”. Plik składa sam agent. Według oficjalnego codelabu Google prompt wygląda mniej więcej tak: „przejdź przez Stitch MCP do projektu, wyodrębnij paletę i typografię, a następnie przygotuj na ich podstawie DESIGN.md”. Ten codelab zakłada działające MCP. W opisanej ręcznej ścieżce Claude Code czyta zamiast tego wyeksportowany HTML/CSS i zapisuje uporządkowany plik w korzeniu projektu; brakujące tokeny musi wskazać, a nie zgadywać z obrazu.

DESIGN.md zawiera konkrety zamiast przymiotników:

# DESIGN.md
## Kolory
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## Typografia
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## Odstępy (podstawa 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Układ
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## Komponenty
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)

Aby Claude Code z niego korzystał, odwołaj się do tego pliku w CLAUDE.md (na przykład dodając wiersz „Przyjmuj projekt wszystkich komponentów z DESIGN.md”). Wtedy agent w każdej sesji wczytuje te same tokeny. Przycisk utworzony w poniedziałek i karta utworzona w piątek będą miały ten sam styl, bo obowiązuje jedno źródło prawdy.

W tej konfiguracji współpracują dwa lokalne źródła. DESIGN.md zawiera reguły: kolor, typografię, odstępy i komponenty. Eksport HTML/CSS Stitch i zasoby dostarczają układ konkretnego ekranu. MCP jest opcjonalne i nie warunkuje tej ścieżki.

Jak zbudować witrynę: pełna droga od tekstu do projektu?#

Oto cały proces, po kolei:

1. Otwórz Stitch. Sprawdź dostępność w kraju i zaloguj się kontem Google do stitch.withgoogle.com.
2. Opisz produkt. Podaj ekrany i ścieżkę użytkownika; potwierdź lub zmień ich proponowaną listę.
3. Dodaj referencję. Prześlij zamierzony zrzut i określ zachowywane kolory, typografię i układ.
4. Wygeneruj i dopracuj. Wybierz jeden ekran i dopracuj przed rozszerzaniem projektu.
5. Wyeksportuj wybrany ekran jako HTML/CSS. Zapisz pliki i potrzebne zasoby w folderze referencji projektu. Otwórz HTML lokalnie i potwierdź wybór ekranu; sam zrzut nie niesie dokładnych wartości CSS.
6. Zbuduj DESIGN.md z lokalnego eksportu. Poproś Claude Code o odczyt HTML/CSS i zapis faktycznych kolorów, fontów, odstępów, układu i komponentów oraz brakujących wartości do Twojej decyzji. Ta ścieżka nie wymaga klucza Stitch ani autoryzacji MCP.
7. Zbuduj i sprawdź jedną stronę. Przekaż prompty, zastępując folder prawdziwą ścieżką eksportu:

Przeczytaj eksport HTML/CSS Stitch w refs/stitch-export/. Utwórz DESIGN.md w korzeniu projektu z wartości obecnych w plikach. Wskaż brakujące wartości zamiast je wymyślać.

Zbuduj jedną stronę z DESIGN.md i lokalnego eksportu Stitch. Zachowaj modułowe komponenty. Porównaj wyrenderowaną stronę z eksportem na szerokości komputera i telefonu, a potem osobno sprawdź nawigację i stany interaktywne.

Od tego momentu wszystko należy do Claude Code: routing między ekranami, responsywność w punktach przerwania zdefiniowanych w DESIGN.md, animacje i interaktywność. Stitch dostarcza statyczne ekrany i klikalny prototyp, ale nie buduje działającej logiki ani nie publikuje strony na hostingu — tym zajmuje się agent.

Jak pozbyć się „wyglądu AI”: co dokładnie zmienić?#

Oto konkretne miejsca, w których witryna przestaje zdradzać swoje pochodzenie:

• Kolor. Fioletowe indigo-500 to pierwszy znak rozpoznawczy. Ustaw dokładne kolory szesnastkowe — podstawowy i akcentowy — bezpośrednio w DESIGN.md. Każdy agent inaczej zinterpretuje „błękit marki”.
• Font. Inter jest najbezpieczniejszym wyborem, a przez to najbardziej rozpoznawalnym „fontem AI”. Wybierz wyraziste połączenie: na przykład krój bezszeryfowy do tekstu głównego i bardziej charakterystyczny do nagłówków. Ustaw je w projekcie Stitch i zapisz w DESIGN.md.
• Referencja zamiast przymiotnika. Model rozumie „zrób to nowocześnie” jako „mediana z 2020 roku”. Polecenie „użyj układu tej strony” wraz z prawdziwym zrzutem ekranu potraktuje dosłownie. Prześlij obraz referencyjny do Stitch; nie da się przekazać gustu słowami.
• Odstępy i przestrzeń. Szablonowy układ można rozpoznać po ściśniętych, identycznych blokach. Określ w DESIGN.md rozbudowaną skalę odstępów, a agent rozmieści elementy swobodniej.

Konkretność wygrywa z subiektywnymi przymiotnikami. Stitch działa jak maszyna, która przekłada Twoje „chcę, żeby wyglądało tak” na precyzyjne tokeny, więc agent nie musi już niczego zgadywać.

Google Stitch czy alternatywy: co wybrać?#

Porównałem narzędzia pod kątem aspektów, które naprawdę mają znaczenie przy vibe codingu z ograniczonym budżetem:

Mój własny przepływ pracy wygląda tak: Stitch do eksplorowania projektu → Claude Code do budowania i pisania logiki. Dla vibe codera z ograniczonym budżetem Stitch wygrywa, bo jest darmowy i tworzy od podstaw unikatowy wygląd produktu. Jeśli chcesz poznać pełny zestaw narzędzi dostępnych na rynku, opisałem je w artykule filarowym czego używać do programowania w 2026 roku.

Gdzie Google Stitch sobie nie radzi: jakie ma ograniczenia?#

Oto szczera lista ograniczeń, żeby trzecie wygenerowane okno nie było rozczarowaniem:

• Tylko interfejs. Brak backendu, bazy danych i publikacji na hostingu. Potrzebujesz do tego Claude Code (albo Lovable, jeśli chcesz mieć wszystko w jednym miejscu).
• Ograniczona edycja w narzędziu. Nie możesz przesuwać pojedynczego elementu myszą — możesz zmienić go tylko za pomocą promptu i wygenerować ponownie. To nie Figma.
• Niedeterminizm. Ten sam prompt daje różne wyniki. To dobre do eksplorowania pomysłów, ale uciążliwe, gdy potrzebujesz powtarzalnego rezultatu.
• Limit. Wyczerpiesz bezpłatny limit generacji (obecnie dzienny); nie możesz dokupić kolejnych, więc trzeba czekać na odnowienie limitu. Dokładna liczba się zmienia — sprawdź ją w interfejsie.
• Status eksperymentalny. Google Labs nie zobowiązuje się do długoterminowego wsparcia. Usługa może się zmienić albo zostać zamknięta.
• Ograniczenia geograficzne i problem z autoryzacją MCP w Claude Code, opisane w sekcjach o dostępności i konfiguracji.

Stitch nie sprawdzi się, jeśli masz ścisły przewodnik po marce dla wielu projektów, jeśli projekt jest już w Figma albo jeśli potrzebujesz opublikowanej aplikacji z backendem.

Co dalej?#

Zbuduj najprostszy przepływ pracy z jednym ekranem: opisz produkt w Stitch, wygeneruj stronę główną i poproś Claude Code o przygotowanie DESIGN.md oraz zbudowanie strony na jego podstawie. Gdy zobaczysz, jak fioletowy gradient znika sam, reszta pójdzie łatwiej.

Projektowanie w Stitch to jedna z technik inżynierii kontekstu. Pełny system łączy klona AI, Drugi Mózg i inżynierię kontekstu, dzięki czemu Claude może polegać na przygotowanych wcześniej regułach i kontekście.

Klon AI, Drugi Mózg i inżynieria kontekstu mają znaczenie dla produktu. Projektowanie w Stitch to pierwszy element składowy tego połączenia.

Jeśli chcesz dalej pracować z modelami, odwiedź Ailoot.