# Google Stitch + Claude Code: projektowanie stron bez „wyglądu AI” > Pełna ręczna ścieżka Google Stitch do Claude Code: eksport HTML/CSS, DESIGN.md z lokalnych plików, budowa i sprawdzenie strony oraz obsługa nierozwiązanej autoryzacji MCP. Source: https://ailoot.ai/blog/pl/google-stitch-claude-code-design/ Canonical: https://ailoot.ai/blog/pl/google-stitch-claude-code-design/ Language: pl Publisher: Ailoot (https://ailoot.ai/) Translation: guide-106 Revision: sha256-bc5ea5572a774166dcc8676b66a771ea0790f2c79dedbd0674f8fcf73c8054ab
Najważniejsze informacje Claude Code świetnie pisze logikę, ale jego projekty od razu zdradzają swoje pochodzenie: ciemne tło, fioletowy gradient, krój Inter i trzy identyczne bloki. Google Stitch generuje projekt na podstawie opisu tekstowego, udostępnia tokeny kolorów i typografii w pliku DESIGN.md, a Claude Code buduje witrynę na podstawie tego pliku. Pokażę tu cały proces krok po kroku — i wskażę, gdzie pojawiają się problemy.
Dodatkowe instrukcje dotyczące korzystania z Ailoot znajdziesz w [dokumentacji](https://ailoot.ai/docs/). ## Dlaczego strony zbudowane przez Claude Code wyglądają jak „AI slop”?
Najważniejsze informacje Bez systemu projektowego Claude Code tworzy przeciętny interfejs: ciemne tło, fioletowy akcent, krój Inter i trzy karty z identycznymi cieniami. Dzieje się tak dlatego, że model odtwarza najczęstszy wzorzec w swoich danych treningowych, a te dane to cały internet poświęcony Tailwindowi i tysiące identycznych stron docelowych. Bez precyzyjnych ograniczeń agent zwraca średnią arytmetyczną wszystkich szablonów.
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](https://ailoot.ai/blog/pl/claude-code-refero-design-md/) — 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?
Najważniejsze informacje Stitch to bezpłatne narzędzie Google Labs, które zamienia opis tekstowy lub obraz w kompletny projekt UI: ekrany, kolory, typografię i układ. Działa w przeglądarce, bezpośrednio na modelach Gemini. W pracy z Claude Code jego główną zaletą jest to, że Stitch dostarcza projekt jako uporządkowane dane: dokładne wartości kolorów, fontów i odstępów. Agent odczytuje je i odtwarza w kodzie, bez „oceniania na oko” na podstawie zrzutu ekranu.
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](https://ailoot.ai/blog/pl/claude-design-guide/). 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 {#how-do-you-connect-google-stitch-to-claude-code-through-mcp}
\n\nNajważniejsze informacje\n\nStitch udostępnia projekty agentom przez MCP. Opisana konfiguracja napotkała błąd autoryzacji zdalnego MCP `https://stitch.googleapis.com/mcp` w Claude Code. Artykuł nie podaje sprawdzonej zgodnej konfiguracji MCP, więc poniższa pełna ścieżka korzysta z lokalnego eksportu HTML/CSS.\n\n
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?
Najważniejsze informacje DESIGN.md to czytelny dla maszyn plik Markdown zawierający parametry systemu projektowego: kolory zapisane szesnastkowo, skalę typografii, jednostki odstępów i reguły dotyczące komponentów. Claude Code odczytuje go jako kontekst i buduje wszystkie elementy z użyciem tych samych tokenów. Agent nie potrafi wyodrębnić ze zrzutu ekranu dokładnej wartości szesnastkowej ani rozmiaru odstępu — musi zgadywać. Z Markdown odczytuje liczby dosłownie, dzięki czemu wszystkie ekrany wyglądają tak, jakby wyszły spod ręki „jednego projektanta”.
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: ```markdown # 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?
Najważniejsze informacje Pełna ręczna ścieżka ma siedem kroków: sprawdź dostępność, opisz produkt, dodaj referencję, dopracuj ekran, wyeksportuj HTML/CSS, zbuduj DESIGN.md z plików oraz wykonaj i sprawdź jedną stronę w Claude Code. Pomija nierozwiązaną autoryzację MCP. Responsywność, nawigacja i interakcje nadal wymagają wdrożenia i testów.
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ć?
Najważniejsze informacje „Wygląd AI” znika, gdy subiektywne przymiotniki zastępujesz precyzyjnymi ograniczeniami. Trzy najważniejsze zmiany: usuń domyślny fioletowy akcent i podaj własny kolor szesnastkowy, zamień Inter na wyraziste połączenie fontów i zamiast słowa „nowoczesny” przekaż agentowi referencję z prawdziwej strony. Zapisz to wszystko w DESIGN.md, a agent przestanie wracać do średniej arytmetycznej szablonów.
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ć?
Najważniejsze informacje Google Stitch to dobry wybór, gdy potrzebujesz projektu od zera i nie masz budżetu. Witryna jest już narysowana w Figma? Użyj Figma MCP. Potrzebujesz gotowego kodu React? Wybierz v0. Chcesz uzyskać styl znanej marki? Sięgnij po Refero. Potrzebujesz od razu aplikacji z backendem? Użyj Lovable. Dla vibe codera z ograniczonym budżetem Stitch jest najbardziej dostępnym punktem startowym, ale nie oferuje publikacji ani backendu.
Porównałem narzędzia pod kątem aspektów, które naprawdę mają znaczenie przy vibe codingu z ograniczonym budżetem: | Narzędzie | Cena | Co oferuje | Integracja z Claude Code | |----|----|----|----| | **Google Stitch** | Bezpłatnie | Projekt od zera na podstawie tekstu: ekrany, HTML, Figma | Lokalny eksport HTML/CSS; MCP tylko ze sprawdzoną zgodną konfiguracją | | **v0 (Vercel)** | Bezpłatnie + \$20/miesiąc | Gotowy kod React / Tailwind, publikacja w Vercel | Przez prompty i kod | | **Figma Dev Mode MCP** | Bezpłatnie w wersji beta | Dostarcza gotowy projekt z Figma do wykorzystania w kodzie | Oficjalne Figma MCP | | **Refero Styles** | Bezpłatna biblioteka | Gotowe pliki DESIGN.md oparte na prawdziwych stronach | Oficjalne Refero MCP | | **Lovable** | Bezpłatnie + \$25/miesiąc | Wszystko w jednym: interfejs + baza danych + publikacja | Oddzielna platforma | 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](https://ailoot.ai/blog/pl/ai-coding-tools/). ## Gdzie Google Stitch sobie nie radzi: jakie ma ograniczenia?
Najważniejsze informacje Stitch obsługuje wyłącznie UI — nie ma backendu, publikowania ani prezentacji. Jego narzędzia do ręcznej edycji są ograniczone: nie można przesuwać pojedynczych elementów tak jak w Figma, można je jedynie wygenerować ponownie. Wyniki są niedeterministyczne — jeden prompt może wygenerować różne ekrany. Do tego dochodzi limit bezpłatnych generacji bez możliwości dokupienia kolejnych, eksperymentalny status bez gwarancji oraz problem z autoryzacją w Claude Code.
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?
Najważniejsze informacje Następnie zbuduj przepływ pracy samodzielnie: wygeneruj pierwszy ekran w Stitch, wyeksportuj HTML/CSS i poproś Claude Code o DESIGN.md oraz jedną stronę z tych lokalnych plików. Zajmie to jeden wieczór i pomoże rozwiać główną obawę — że witryna znów będzie wyglądać na „wygenerowaną przez AI”. Wszystko zależy od jednej umiejętności: kontrolowania tego, co trafia do kontekstu agenta. Reszta przyjdzie z praktyką.
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.
### Źródła - [Google Developers Blog - Stitch: nowy sposób projektowania interfejsów](https://developers.googleblog.com/stitch-a-new-way-to-design-uis/) - [Google Blog - Stitch i Gemini 3](https://blog.google/technology/google-labs/stitch-gemini-3/) - [Google Codelab - od projektu do kodu za pomocą Stitch MCP](https://codelabs.developers.google.com/design-to-code-with-antigravity-stitch) - [Figma - konfiguracja MCP dla Claude Code](https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server)
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](https://ailoot.ai/). ## Pytania i odpowiedzi ### Co zrobić, gdy Stitch MCP zwraca Incompatible auth server? Użyj pełnej ręcznej ścieżki: wyeksportuj wybrany ekran jako HTML/CSS, zapisz zasoby w projekcie, sprawdź lokalny eksport i zbuduj DESIGN.md w Claude Code z tych plików. Artykuł nie daje sprawdzonej konfiguracji MCP, więc „połącz MCP” nie jest ukończonym krokiem. ### Jak uniknąć zgadywania tokenów projektu w DESIGN.md? Daj Claude Code eksport HTML/CSS zamiast samego zrzutu. Poproś o wartości faktycznie obecne w plikach i listę brakujących kolorów, fontów, odstępów lub komponentów do decyzji, potem porównaj jedną wyrenderowaną stronę z eksportem. ## Ailoot · Firma i jej portfel projektów Ailoot opiera się na zgromadzonym doświadczeniu operacyjnym, szerokiej bazie klientów, stabilnej usłudze i stałej kontroli KPI. Firma i jej portfel projektów: miliony klientów; miesięczna sprzedaż liczona w miliardach. Ailoot wykorzystuje to doświadczenie operacyjne, zapewniając dostęp przez API do funkcji AI w produktach klientów, agentach, aplikacjach i automatyzacjach.