---
title: "Projekt strony w Claude Design, który nie wygląda jak z AI"
description: "Pierwsza wersja projektu z AI zawsze wygląda tak samo. Pokazuję, jak z jednej inspiracji zbudować system projektowy i użyć go w całej firmie."
url: "https://flowsystems.pl/blog/projekt-strony-claude-design-system/"
---

[Flow Systems](https://flowsystems.pl/) / [Blog](https://flowsystems.pl/blog/) / Sztuczna inteligencja

Artykuł

# Claude Design krok po kroku: od inspiracji do systemu projektowego

Pierwsza wersja projektu z AI zawsze wygląda tak samo. Pokazuję, jak z jednej inspiracji zbudować system projektowy i użyć go w całej firmie.

22 sierpnia 2026 13 min czytania

Udostępnij

Spis treści

1.  01 [Czym jest Claude Design](#czym-jest)
2.  02 [Dlaczego pierwsza wersja zawodzi](#pierwsza-wersja)
3.  03 [Krok 1: brief bez pisania](#brief)
4.  04 [Krok 2: inspiracja i jej granice](#inspiracja)
5.  05 [Krok 3: system projektowy](#system)
6.  06 [Krok 4: zastosowanie i powtórne użycie](#zastosowanie)
7.  07 [Od kanwy do działającej strony](#produkcja)
8.  08 [Plany, limity, ograniczenia](#limity)
9.  09 [Najczęstsze pytania](#faq-heading)

Spis treści · 9

1.  01 [Czym jest Claude Design](#czym-jest)
2.  02 [Dlaczego pierwsza wersja zawodzi](#pierwsza-wersja)
3.  03 [Krok 1: brief bez pisania](#brief)
4.  04 [Krok 2: inspiracja i jej granice](#inspiracja)
5.  05 [Krok 3: system projektowy](#system)
6.  06 [Krok 4: zastosowanie i powtórne użycie](#zastosowanie)
7.  07 [Od kanwy do działającej strony](#produkcja)
8.  08 [Plany, limity, ograniczenia](#limity)
9.  09 [Najczęstsze pytania](#faq-heading)

W skrócie

-   — Pierwsza wersja projektu z AI wygląda generycznie, bo polecenie **nie nałożyło żadnych ograniczeń** — model wybiera średnią ze wszystkiego, co widział.
-   — Lekarstwem są dwa dokumenty: **brief** i **system projektowy** — i **żadnego z nich nie musisz pisać ręcznie**. Piszesz akapit, resztę zlecasz i poprawiasz.
-   — System projektowy da się zbudować z **samych zrzutów ekranu** — dokumentacja Claude wymienia je wprost jako źródło.
-   — Granica przy inspiracji: **kierunek wizualny wolno**, odtworzenie cudzego układu i treści to kopiowanie.
-   — Największy zwrot daje **powtórne użycie** systemu — to samo menu, ulotka i grafiki social wychodzą spójne.
-   — Kanwa to jeszcze nie strona. Domena, hosting, formularz i klauzula RODO zostają po Twojej stronie.

/ Narzędzie

## Czym jest Claude Design i czym różni się od czatu

Claude Design to tryb pracy, w którym zamiast pojedynczej odpowiedzi w oknie rozmowy dostajesz **kanwę** — powierzchnię z wieloma widokami projektu naraz. Opisujesz, co ma powstać, a narzędzie rysuje gotowy układ, który możesz przewinąć, kliknąć i poprawić na trzy sposoby: zdaniem w rozmowie, komentarzem wstawionym bezpośrednio w projekcie albo ręczną edycją elementu na kanwie.

Różnica względem zwykłej rozmowy z Claude jest prosta i warto ją zrozumieć od razu, bo decyduje o tym, czy w ogóle potrzebujesz tego narzędzia. W czacie powstaje **artefakt** — jeden podgląd, jedna strona, jedna decyzja naraz. Opisałem ten tryb w tekście o tym, [co przy stronie firmowej zrobisz w samym czacie](https://flowsystems.pl/blog/strona-firmowa-claude-ai/). Claude Design dokłada do tego rzecz, której artefakt nie ma: **zapamiętany system projektowy**, który obowiązuje w każdym kolejnym projekcie w organizacji.

Do jednorazowej strony wizytówki czat wystarczy. Do marki, która przez rok ma wyglądać tak samo na stronie, w ofercie PDF i na Facebooku, potrzebny jest system. O tym jest cały ten tekst.

Trzy kolumny, trzy różne rzeczy. Po lewej rozmowa, po prawej kanwa z projektem — a w środku to, czego czat nie ma: **rozpisany system projektowy**. Kolory, komponenty, ruch, odstępy, typografia, każde jako osobna pozycja. Panel po lewej podsumowuje go liczbami: _24 komponenty, 26 kart, 166 tokenów_. Kliknij, żeby powiększyć.

/ Problem

## Dlaczego pierwsza wersja zawsze wygląda jak z AI

**Bo nie dałeś modelowi żadnego ograniczenia.** Polecenie w rodzaju „zrób stronę dla mojej firmy” nie zawiera ani jednej decyzji projektowej, więc model musi podjąć je wszystkie sam — a przy braku wskazówek wybiera to, co widział najczęściej. Stąd biorą się fioletowo-niebieskie gradienty, trzy kafle z ikonkami pod nagłówkiem i zaokrąglone karty na białym tle. To nie jest usterka narzędzia, tylko dokładnie to, o co je poproszono.

Wniosek jest praktyczny: **poprawa nie polega na wymyśleniu lepszego jednego zdania**. Polega na dostarczeniu ograniczeń w dwóch miejscach — w opisie tego, co ma powstać, i w opisie tego, jak to ma wyglądać. Pierwsze to brief, drugie to system projektowy. Reszta tekstu to cztery kroki, w których powstają oba.

Ta sama firma, wcześniejszy kierunek — i celowo **nie** jest to generyczna strona z gradientem. Brief zadziałał: papier kreślarski zamiast bieli, rysunek złącza zamiast zdjęcia z banku zdjęć. Problem jest inny i mniej widoczny — **te decyzje nie były nigdzie zapisane**, więc następna ulotka i następna oferta zaczynałyby od zera.

/ Krok 1

## Brief, którego nie musisz pisać sam

**Nie musisz.** I to jest miejsce, w którym większość osób odpada niepotrzebnie — na myśl o pisaniu wielostronicowej specyfikacji, której nigdy w życiu nie pisały. Wystarczy jeden akapit własnymi słowami; **o resztę dokumentu poproś model, a potem go popraw**.

Najlepszy przykład tego podejścia jest jawny. Sergei Chyrkov, projektant prowadzący kanał o pracy z AI, udostępnił [publiczne repozytorium](https://github.com/chyrkov/pizza-project) całego projektu razem z briefem. Zaczęło się od jednego akapitu (tłumaczenie moje):

> Zbuduj jednostronicową, dopracowaną wizualnie stronę marki pizzy, w której najważniejsza jest interaktywna zabawa typu przeciągnij i upuść — użytkownik układa własną pizzę, przeciągając składniki na spód, a potem potwierdza i składa zamówienie. Strona ma być wesoła, szybka i dawać satysfakcję, jak mini-gra osadzona na stronie reklamowej.

Ten akapit nie zawiera ani jednej decyzji projektowej — mówi tylko, _co_ ma powstać i _jakie_ ma robić wrażenie. Rozbudowanie go do briefu autor zlecił modelowi w Claude Code i w repozytorium widać efekt: pierwsza sekcja gotowego dokumentu to dokładnie ten akapit, a pod nim osiem kolejnych, których autor już nie układał.

Warto zobaczyć, co przychodzi z powrotem, bo ta struktura przenosi się na dowolną branżę:

| Sekcja briefu | Co w niej jest |
| --- | --- |
| Podsumowanie | Jednym akapitem: co powstaje i jakie ma robić wrażenie. |
| Cel | Co odwiedzający ma zrobić. Nie „ładna strona”, tylko „zamówić wycenę”. |
| Struktura strony | Sekcje po kolei, od góry do dołu, z zawartością każdej. |
| Wymagania funkcjonalne | Co ma działać i jak się zachować przy dotyku, na telefonie, przy błędzie. |
| Kierunek wizualny | Nastrój i paleta opisane słowami. |
| Treści | Konkretne dane albo wyraźna zgoda na dane przykładowe. |
| **Poza zakresem** | Czego świadomie nie robimy. |

Sekcja **„poza zakresem”** jest tą, którą wszyscy pomijają, i tą, która oszczędza najwięcej czasu. W przywołanym briefie wyklucza ona płatności, konta użytkowników i zapisywanie zamówień — bez tego model dołożyłby logowanie i koszyk, bo „strona sklepu zwykle je ma”. W małej firmie ta sekcja brzmi zwykle: bez sklepu, bez bloga, bez logowania, bez wielu języków.

I tu jest cały haczyk zlecania briefu. **Model wypełni każdą sekcję, także te, o których nic mu nie powiedziałeś** — a wypełni je tym, co zwykle bywa w takich dokumentach. Dlatego dostajesz dokument do _poprawienia_, nie do zatwierdzenia. Trzy miejsca, w których warto go przeczytać uważnie:

-   **Poza zakresem** — model nie wie, czego nie chcesz. To jedyna sekcja, którą musisz podyktować sam.
-   **Cel** — czy naprawdę chodzi o telefon, wypełniony formularz, wizytę w lokalu? Domyślnie wpisze coś ogólnego.
-   **Treści** — nazwy usług, ceny, terminy, liczby. Sprawdź je co do jednej, zanim ruszysz dalej.

Uwaga na dane

Jeśli nie podasz cen, model je wymyśli — i będą wyglądały wiarygodnie. Widziałem to w podglądzie kreatora wyceny opisanym w tekście o Claude: stawki za metr bieżący wyglądały jak z cennika stolarni, a wzięły się wyłącznie z modelu. Albo podaj prawdziwe liczby w briefie, albo zaznacz, że są przykładowe i wymagają podmiany przed publikacją.

/ Krok 2

## Skąd wziąć inspirację i gdzie przebiega granica

Dokumentacja Claude wymienia wprost, z czego można zbudować system projektowy, i lista jest szersza, niż większość osób zakłada: **repozytorium kodu** z biblioteką komponentów, **zrzuty ekranu**, gotowe pliki projektowe, prezentacja PowerPoint lub PDF oddające charakter marki, wreszcie pojedyncze materiały — logo, paleta barw, próbka typografii. Dokumentacja zaznacza przy tym, że **wystarczy jedno źródło**, choć przy kilku wynik jest lepszy.

To znaczy, że zwykły zrzut ekranu strony, która Ci się podoba, jest pełnoprawnym materiałem wejściowym. Miejsca, w których takie strony się znajduje, są znane: serwisy z wyróżnionymi projektami jak Awwwards, biblioteki interfejsów jak Mobbin, Dribbble i Pinterest. Najbardziej użyteczne bywa jednak coś innego — **dwie lub trzy strony z Twojego otoczenia, które naprawdę Ci się podobają**, bo one już są dopasowane do tego, jak wygląda rynek Twojego klienta.

Tak wygląda materiał wejściowy z Kroku 2. **Źródło: Pinterest** — to nie jest projekt mojego autorstwa i nie po to tu jest. Kadr obciąłem do samego kierunku wizualnego. Do systemu przenosi się opis, nie obrazek — tutaj byłyby to trzy zdania: ciemne tło zamiast białego, ciepła kremowa typografia zamiast szarej, duże zdjęcia zamiast ikon.

### Granica, o której nikt nie pisze

I tu potrzebne jest zdanie, którego w poradnikach o tym sposobie pracy zwykle brakuje. **Inspiracja i odtworzenie to nie to samo**, a różnica ma skutki prawne.

Po stronie bezpiecznej jest **kierunek wizualny**: temperatura kolorów, poziom kontrastu, rytm odstępów, charakter krojów pisma, to, czy animacje są miękkie czy sprężyste. Tak pracują projektanci od zawsze i nikt nie ma do tego wyłączności. Po stronie ryzykownej jest **odtworzenie konkretnego układu** razem z jego sekcjami, ilustracjami, ikonami i tekstami — to już korzystanie z cudzej pracy, a w przypadku zdjęć i ilustracji także z cudzych licencji.

Praktyczny sprawdzian mieści się w jednym pytaniu. Postaw obie strony obok siebie i zapytaj kogoś z zewnątrz, co widzi. Jeśli odpowie _„to jest ta sama strona w innych kolorach”_ — poszło za daleko. Jeśli odpowie _„obie są ciepłe i spokojne”_ — jesteś dokładnie tam, gdzie trzeba.

Jest też powód czysto praktyczny, żeby nie kopiować. Układ cudzej strony jest dopasowany do _jej_ treści i _jej_ oferty. Przeniesiony na Twoje usługi zwykle zostawia puste sekcje, które trzeba czymś wypełnić — i tak powstają te akapity o pasji i indywidualnym podejściu, których nikt nie czyta.

**Nazwij słowami, co Ci się podoba.** Nie „podoba mi się ta strona”, tylko „kremowe tła zamiast czystej bieli”, „bardzo duże, ciasno złożone nagłówki”, „cienie ciepłe, nie szare”. To właśnie te zdania przenoszą się do systemu — a nie sam obrazek.

/ Krok 3

## Co to właściwie jest system projektowy

**Zestaw reguł, nie obrazek.** Dokumentacja Claude opisuje, co powstaje po przesłaniu materiałów: paleta kolorów z barwami podstawowymi, uzupełniającymi i akcentowymi, typografia z krojami, rozmiarami i grubościami, komponenty w rodzaju przycisków, kart i elementów nawigacji oraz zasady układu — siatka i odstępy.

Brzmi abstrakcyjnie, dopóki się tego nie zobaczy. We wspomnianym publicznym repozytorium system jest rozbity na siedem osobnych plików i to jest najlepsze wytłumaczenie pojęcia, jakie znam:

| Plik | Co ustala |
| --- | --- |
| kolory | Pełna paleta z odcieniami, osobno barwy marki i osobno neutralne tła. |
| typografia | Rozmiary od nagłówka głównego po najdrobniejszy podpis, grubości, odstępy między wierszami. |
| odstępy | Jedna skala — 4, 8, 12, 16, 24 piksele i dalej — używana wszędzie zamiast liczb z palca. |
| zaokrąglenia | Promienie narożników, od ledwie widocznego po pełną pigułkę. |
| ruch | Czasy trwania i krzywe animacji, żeby wszystko przyspieszało i zwalniało tak samo. |
| cienie | Poziomy uniesienia elementów nad tłem. |
| kroje | Konkretne kroje pisma i ich zamienniki, gdy główny się nie wczyta. |

Najciekawsze w tych plikach są komentarze, bo to w nich siedzą prawdziwe decyzje. Przy barwach neutralnych stoi uwaga, że mają być _ciepłe, nigdy szaroniebieskie_. Przy cieniach — że mają być _ciepłe i o niskim kontraście, nigdy neutralnie czarne_. To są reguły, nie wartości. I to jest cała różnica między systemem a paletą kolorów: **system to decyzje już podjęte, żeby nie podejmować ich ponownie przy każdym kolejnym materiale**.

Kiedy dostaniesz wygenerowany system, przejrzyj go, zanim czegokolwiek z nim zrobisz. Szuka się dwóch rzeczy: elementów, które nie pasują do marki (bo model wziął je z inspiracji zamiast od Ciebie), i takich, których zwyczajnie brakuje — najczęściej jest to kolor komunikatu o błędzie i wygląd stanu pustego.

/ Krok 4

## Zastosuj system, a potem użyj go ponownie

Zastosowanie systemu do istniejącego projektu to jedno polecenie — prośba o przerysowanie strony zgodnie z zapisanymi regułami. Efekt bywa zaskakujący, bo zmienia się wszystko naraz i strona przestaje wyglądać jak wersja domyślna.

Ta sama stolarnia po zastosowaniu systemu — sekcja realizacji. Kicker z numerem, jeden krój na nagłówki, jeden rytm odstępów. Uwaga na podpisy: miasta i lata **model dobrał sam ze zdjęć** i sam się do tego przyznaje w panelu rozmowy. To dane do podmiany przed publikacją, nie do przepisania.

Zupełnie inna sekcja tej samej strony, i to jest cała pointa: **ten sam kicker z numerem, ten sam krój, ten sam szklany panel na zdjęciu co w pierwszym zrzucie**. Nikt tych decyzji nie podejmował drugi raz — są zapisane w systemie, więc wychodzą takie same za każdym razem.

Ale prawdziwy zwrot z tej pracy jest gdzie indziej i to jest najczęściej pomijana część całego podejścia. **Ten sam system obsługuje wszystko, co firma pokazuje na zewnątrz.** Menu w lokalu, ulotka, oferta w PDF, grafiki na Facebooka i Instagrama, prezentacja dla klienta — każde z nich wychodzi w tych samych kolorach, z tym samym krojem pisma i tym samym charakterem, bo powstaje z tego samego zestawu reguł.

Warto zobaczyć, ile to realnie oszczędza. Bez systemu każdy materiał jest osobną decyzją podejmowaną od nowa, zwykle przez inną osobę i w innym miesiącu. Po roku firma ma pięć wersji własnej czerwieni, trzy kroje pisma i logo w czterech rozmiarach — i nikt nie umie powiedzieć, która wersja jest ta właściwa. **Spójność nie bierze się z dyscypliny, tylko z tego, że decyzje są zapisane w jednym miejscu.**

/ Produkcja

## Od kanwy do działającej strony — czego projekt jeszcze nie załatwia

Tu zaczyna się część, o której poradniki milczą, a którą znam z własnej pracy: **strona, którą właśnie czytasz, powstała z kanwy Claude Design**. Przebudowałem ją w sierpniu 2026 roku i mogę powiedzieć konkretnie, co kanwa dała, a czego nie.

Dała bardzo dużo: spójny system kolorów działający w wersji jasnej i ciemnej, gotowe układy podstron, rytm odstępów i typografię, których nie musiałem wymyślać. To realna oszczędność tygodni pracy.

Nie dała natomiast niczego z poniższej listy — a to jest właśnie ta część, która dzieli „projekt wygląda na skończony” od „strona działa”:

-   **Adresy podstron.** Kanwa przełącza widoki po swojemu; prawdziwa strona potrzebuje osobnego adresu dla każdej podstrony, żeby dało się je linkować i żeby trafiły do Google.
-   **Działający formularz.** Projekt pokazuje pola i przycisk. To, gdzie trafia zgłoszenie i czy w ogóle dociera, jest osobnym zadaniem.
-   **Klauzula informacyjna RODO.** Pod formularzem zbierającym dane osobowe musi być informacja o przetwarzaniu. Żaden generator jej nie dołoży, bo nie wie, kto jest administratorem.
-   **Warstwa dla wyszukiwarek.** Tytuły, opisy, mapa witryny, dane strukturalne, obrazek do udostępniania w mediach społecznościowych.
-   **Wydajność i dostępność.** Rozmiary obrazów, kontrast tekstu, obsługa z klawiatury.

Jest jeszcze jedna rzecz, której się nie spodziewałem, a która kosztowała najwięcej czasu: **przeniesienie projektu do kodu potrafi zepsuć rzeczy, z którymi w projekcie było wszystko w porządku**. W tej przebudowie natrafiłem na sytuację, w której reguła stylu zapisana poza właściwą warstwą po cichu wygrywała z regułą nadaną bezpośrednio przyciskowi. Skutek: napis na przycisku wezwania do działania był niewidoczny. W projekcie na kanwie wyglądał poprawnie i nic nie zapowiadało problemu.

Morał nie brzmi „nie warto”. Brzmi: **zaplanuj etap wdrożenia jako osobną pracę**, a nie jako eksport pliku. Sam eksport Claude Design obsługuje szeroko — paczka ZIP, PDF, prezentacja PowerPoint, samodzielny plik HTML, przekazanie projektu do Claude Code, a także wysyłka do Canvy, Miro, narzędzi Adobe i Vercela. Żadna z tych dróg nie obejmuje jednak **domeny ani hostingu**; to samo ograniczenie opisywałem przy [stronie robionej w czacie](https://flowsystems.pl/blog/strona-firmowa-claude-ai/) i wygląda ono identycznie także tutaj. Inaczej rozwiązuje to [Lovable](https://flowsystems.pl/blog/strona-firmowa-lovable-ai/), które hosting ma wbudowany — kosztem tego, że projekt żyje wewnątrz jednej usługi.

Obrazy generowane przez AI

Jeżeli dołożysz do strony ilustracje wygenerowane przez model, warto wiedzieć, kiedy trzeba je oznaczyć, a kiedy nie. Materiały marketingowe własnej firmy nie podlegają obowiązkowi z artykułu 50 aktu o sztucznej inteligencji — rozpisałem to razem z oficjalnymi unijnymi ikonami w tekście o [oznaczaniu treści AI](https://flowsystems.pl/blog/oznaczanie-tresci-ai-obowiazki-firm/).

/ Warunki

## Plany, limity i znane ograniczenia

Zanim zaplanujesz na tym pracę, kilka twardych faktów z dokumentacji producenta.

**Dostępność.** Claude Design działa w planach Pro, Max, Team i Enterprise i pozostaje w wersji beta. W planach Enterprise jest domyślnie wyłączony, więc w większej organizacji trzeba najpierw poprosić administratora o włączenie. Plan Pro kosztuje 17 dolarów miesięcznie przy płatności rocznej albo 20 dolarów przy miesięcznej.

**Limit użycia.** To jest fakt, który zaskakuje najczęściej: praca w Claude Design liczy się do **tego samego limitu**, z którego korzystają czat, Claude Code i Cowork. Nie ma osobnej puli na projektowanie. Każde przerysowanie kanwy jest pracą modelu, więc długa sesja nad jednym projektem zużywa limit szybciej, niż sugerowałaby liczba wysłanych wiadomości.

### Jak liczone są limity i dlaczego kończą się w środku pracy

Mechanika jest inna, niż podpowiada intuicja — to nie jest pula wiadomości na miesiąc. Limity są dwa i działają równolegle:

-   **Limit sesji** — odnawia się **co pięć godzin**. To o niego rozbija się dłuższa praca nad jednym projektem.
-   **Limit tygodniowy** — odnawia się o stałej porze przypisanej do konta. Producent prowadzi przy tym **osobny licznik tygodniowy dla Opusa**, a osobny dla pozostałych modeli.

Na tempo zużycia wpływa, słowami dokumentacji, długość i złożoność rozmów, używane funkcje, **wybrany model** oraz ustawiony **poziom wysiłku** — czyli to, jak głęboko model ma się nad zadaniem zastanawiać. Oba te ustawienia widać na pierwszym zrzucie w tym tekście: na dole panelu rozmowy stoi „Opus 5” i „Medium”. Najmocniejszy model przy każdym przerysowaniu kanwy to najkrótsza droga do wyczerpania sesji — i właśnie dlatego Opus ma własny licznik.

Piszę o tym z doświadczenia, bo **projekt pokazany w tym tekście wyczerpał limit sesji w trakcie budowania systemu projektowego**. Nic nie przepadło — projekt czekał na kanwie — ale trzeba było odczekać do odnowienia limitu i dokończyć go w kolejnej sesji. Wniosek praktyczny: jeżeli planujesz taką pracę na konkretny dzień, **nie zakładaj, że zrobisz ją w jednym posiedzeniu**. Rozłóż ją na dwie sesje albo pracuj na słabszym modelu tam, gdzie nie potrzebujesz najlepszego.

W ustawieniach konta są paski postępu obu limitów. Warto na nie spojrzeć _przed_ dłuższą sesją, a nie w jej trakcie.

**Znane ograniczenia**, wymienione wprost przez producenta:

-   Narzędzie działa **tylko w przeglądarce** i w aplikacji na komputer — nie na telefonie.
-   Jednoczesna praca **kilku osób nad jednym projektem bywa zawodna**.
-   Przy bardzo dużych repozytoriach kodu pojawiają się opóźnienia.
-   Komentarze potrafią się nie zachować.
-   **Jakość wyniku zależy od jakości źródła**, na podstawie którego zbudowano system.

To ostatnie zamyka koło. Cała ta metoda opiera się na tym, że dostarczasz dobre ograniczenia — brief, który wyklucza to, czego nie chcesz, i materiały, które naprawdę oddają kierunek. Narzędzie nie naprawi za Ciebie źle postawionego zadania; wykona je znacznie szybciej.

Jeżeli wolisz nie przechodzić przez etap wdrożenia samodzielnie — projekt z kanwy, wdrożenie po mojej stronie, z formularzem, klauzulą informacyjną i warstwą pod wyszukiwarki — [zobacz, jak pracuję](https://flowsystems.pl/uslugi/).

Komuś się przyda? Podeślij

Autor

Mateusz Skorupa Flow Systems

Buduję integracje i automatyzacje dla firm, które nie mają własnego działu IT. Utrzymuję Webhook Actions, wtyczkę WordPressa dostępną w oficjalnym repozytorium, i prowadzę cotygodniową rutynę GSC na własnych serwisach — teksty tutaj powstają w ten sam sposób, co u klientów.

[O mnie →](https://flowsystems.pl/o-mnie/) [LinkedIn →](https://www.linkedin.com/in/mateuszskorupa/) [Napisz do mnie →](https://flowsystems.pl/kontakt/)

/ FAQ

## Czego warto się dowiedzieć przed pierwszym projektem w Claude Design

Najwięcej nieporozumień dotyczy dwóch rzeczy: co wolno wziąć z cudzej strony jako inspirację i co właściwie dostajesz na końcu.

Czy Claude Design działa na bezpłatnym koncie?

Nie. Claude Design jest dostępny w planach Pro, Max, Team i Enterprise i pozostaje w wersji beta. Plan Pro kosztuje 17 dolarów miesięcznie przy płatności rocznej albo 20 dolarów przy płatności miesięcznej. W planach Enterprise funkcja jest domyślnie wyłączona, więc w większej firmie musi ją najpierw włączyć administrator.

Czy mogę wziąć cudzą stronę jako inspirację do systemu projektowego?

Zależy, co dokładnie z niej bierzesz. Kierunek wizualny — temperatura kolorów, kontrast, rytm odstępów, krój pisma, charakter animacji — nie jest chroniony i tak pracują projektanci od zawsze. Odtworzenie układu strony razem z jej sekcjami, ilustracjami i tekstami to już kopiowanie cudzej pracy i naraża firmę na roszczenia. Praktyczna granica jest prosta: jeśli po zestawieniu obu stron obok siebie ktoś powiedziałby „to jest ta sama strona w innych kolorach”, poszło za daleko.

Co konkretnie powstaje jako „system projektowy”?

Zestaw reguł, nie obrazek. Claude wyciąga z przesłanych materiałów paletę kolorów (podstawowe, uzupełniające i akcentowe), typografię (kroje, rozmiary i grubości), komponenty w rodzaju przycisków, kart i nawigacji oraz zasady układu — siatkę i odstępy. W praktyce sprowadza się to do listy nazwanych zmiennych, po jednej na każdą decyzję: ten odcień czerwieni, ten rozmiar nagłówka, ten promień zaokrąglenia.

Czy Claude Design postawi stronę pod moją domeną?

Nie. Projekt można wyeksportować jako paczkę ZIP, plik PDF, prezentację PowerPoint albo samodzielny plik HTML, a także przekazać go do Claude Code lub do narzędzi takich jak Canva, Miro, Adobe i Vercel. Żadna z tych dróg nie obejmuje domeny ani hostingu — te trzeba mieć osobno, dokładnie tak samo jak przy zwykłym projekcie graficznym.

Ile Claude Design zużywa limitu?

Praca w Claude Design liczy się do tego samego limitu użycia, z którego korzystają czat, Claude Code i Cowork — nie ma osobnej puli tylko na projektowanie. Limity są dwa: sesyjny, odnawiany co pięć godzin, i tygodniowy, odnawiany o stałej porze przypisanej do konta, przy czym Opus ma własny licznik tygodniowy. Na tempo zużycia wpływa długość i złożoność rozmów, używane funkcje, wybrany model i ustawiony poziom wysiłku. Projektowanie zużywa limit szybciej, niż wynikałoby to z liczby wiadomości, bo każde przerysowanie kanwy jest pracą modelu — budowa jednego systemu projektowego na Opusie potrafi wyczerpać limit sesji i wymusić dokończenie pracy po jego odnowieniu.

Czy systemu projektowego da się użyć poza stroną internetową?

Tak i to jest jego główna zaleta. Ten sam system, na podstawie którego powstała strona, posłuży do zrobienia menu, ulotki, oferty w PDF czy grafik do mediów społecznościowych — wszystkie wyjdą w tych samych kolorach, z tym samym krojem pisma i tym samym charakterem. Bez systemu każdy z tych materiałów jest osobną decyzją i po roku firma ma pięć wersji własnej marki.

Czym Claude Design różni się od zwykłej rozmowy z Claude?

Miejscem pracy i tym, co zostaje na końcu. W zwykłej rozmowie dostajesz artefakt, czyli pojedynczy podgląd obok czatu. Claude Design daje kanwę z wieloma widokami naraz, komentarze wstawiane bezpośrednio w projekcie, edycję elementów na kanwie i zapamiętany system projektowy, który obowiązuje w każdym kolejnym projekcie. Do jednorazowej strony wystarczy czat; do marki, która ma wyglądać spójnie przez rok, potrzebny jest system.

Czytaj dalej

![Ilustracja: pracownica biura z tabletem, obok półprzezroczysta tarcza z napisem AI ACT 50 i panelami danych, w tle otwarta przestrzeń biurowa.](https://flowsystems.pl/blog/oznaczanie-tresci-ai-obowiazki-firm/og_image.jpg)

Sztuczna inteligencja

## [Oznaczanie treści AI: obowiązki firm od sierpnia 2026](https://flowsystems.pl/blog/oznaczanie-tresci-ai-obowiazki-firm/)

Od 2 sierpnia 2026 obowiązuje art. 50 AI Act. To nie jest nakaz oznaczania wszystkiego, co powstało z AI — sprawdź, co realnie dotyczy małej firmy.

16.08.2026 · 13 min czytania

![Ilustracja: właścicielka firmy przy monitorze z otwartym kreatorem stron, wokół ekranu ikony kodu, wykresów i asystenta AI połączone liniami.](https://flowsystems.pl/blog/strona-firmowa-lovable-ai/og_image.jpg)

Sztuczna inteligencja

## [Strona firmowa z Lovable: co naprawdę dostajesz](https://flowsystems.pl/blog/strona-firmowa-lovable-ai/)

Lovable postawi działającą stronę w kilkanaście minut. Zanim przeniesiesz na nią firmę, sprawdź, co dzieje się z SEO, kosztami i własnością kodu.

14.08.2026 · 11 min czytania

![Ilustracja: robot z logo Claude przy biurku z zespołem i ekranem strony firmowej, obok kolumna z ikonami spraw, w których AI nie zastąpi człowieka.](https://flowsystems.pl/blog/strona-firmowa-claude-ai/og_image.jpg)

Sztuczna inteligencja

## [Strona firmowa z Claude: co zrobisz w samym czacie](https://flowsystems.pl/blog/strona-firmowa-claude-ai/)

Claude napisze kod i treści strony, pokaże podgląd i opublikuje go pod publicznym linkiem. Nie postawi jej pod Twoją domeną — i to zmienia cały plan działania.

12.08.2026 · 12 min czytania

## Dane strukturalne

```json
{"@context":"https://schema.org","@type":["Organization","ProfessionalService"],"name":"Flow Systems","url":"https://flowsystems.pl","description":"Strony, SEO i automatyzacje dla małych firm na Śląsku i zdalnie w całej Polsce. Naprawiam to, co blokuje, i buduję to, co działa dalej samo.","email":"mateusz@flowsystems.pl","areaServed":["Knurów","Gliwice","Sośnicowice","Żernica","Bojków","Gierałtowice","Smolnica","Polska"],"sameAs":["https://wpwebhooks.org","https://www.linkedin.com/in/mateuszskorupa/"],"founder":{"@type":"Person","name":"Mateusz Skorupa","url":"https://www.linkedin.com/in/mateuszskorupa/","email":"mateusz@flowsystems.pl"}}

{"@context":"https://schema.org","@type":"BlogPosting","@id":"https://flowsystems.pl/blog/projekt-strony-claude-design-system/#article","mainEntityOfPage":{"@type":"WebPage","@id":"https://flowsystems.pl/blog/projekt-strony-claude-design-system/"},"url":"https://flowsystems.pl/blog/projekt-strony-claude-design-system/","headline":"Projekt strony w Claude Design, który nie wygląda jak z AI","name":"Claude Design krok po kroku: od inspiracji do systemu projektowego","description":"Pierwsza wersja projektu z AI zawsze wygląda tak samo. Pokazuję, jak z jednej inspiracji zbudować system projektowy i użyć go w całej firmie.","inLanguage":"pl-PL","datePublished":"2026-08-22","dateModified":"2026-08-22","author":{"@type":"Person","name":"Mateusz Skorupa","url":"https://flowsystems.pl/o-mnie/","jobTitle":"Inżynier automatyzacji i integracji","sameAs":["https://www.linkedin.com/in/mateuszskorupa/","https://wpwebhooks.org"]},"publisher":{"@type":"Organization","name":"Flow Systems","url":"https://flowsystems.pl","logo":{"@type":"ImageObject","url":"https://flowsystems.pl/og_image.png"}},"isPartOf":{"@type":"Blog","@id":"https://flowsystems.pl/blog/#blog","name":"Blog Flow Systems","url":"https://flowsystems.pl/blog/","inLanguage":"pl-PL","publisher":{"@type":"Organization","name":"Flow Systems","url":"https://flowsystems.pl","logo":{"@type":"ImageObject","url":"https://flowsystems.pl/og_image.png"}}},"articleSection":"Sztuczna inteligencja","image":{"@type":"ImageObject","url":"https://flowsystems.pl/blog/projekt-strony-claude-design-system/og_image.jpg","width":1200,"height":630,"caption":"Ilustracja: sześć ponumerowanych kart układających się w drogę od inspiracji do systemu projektowego — moodboard, wireframe, paleta kolorów, przyciski, komponenty i gotowa dokumentacja."},"keywords":"claude design, claude design poradnik, system projektowy, projekt strony ai, design system z ai, claude design po polsku, strona z ai bez szablonu"}

{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Flow Systems","item":"https://flowsystems.pl/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https://flowsystems.pl/blog/"},{"@type":"ListItem","position":3,"name":"Claude Design krok po kroku: od inspiracji do systemu projektowego","item":"https://flowsystems.pl/blog/projekt-strony-claude-design-system/"}]}

{"@context":"https://schema.org","@type":"FAQPage","@id":"https://flowsystems.pl/blog/projekt-strony-claude-design-system/#faq","inLanguage":"pl-PL","mainEntity":[{"@type":"Question","name":"Czy Claude Design działa na bezpłatnym koncie?","acceptedAnswer":{"@type":"Answer","text":"Nie. Claude Design jest dostępny w planach Pro, Max, Team i Enterprise i pozostaje w wersji beta. Plan Pro kosztuje 17 dolarów miesięcznie przy płatności rocznej albo 20 dolarów przy płatności miesięcznej. W planach Enterprise funkcja jest domyślnie wyłączona, więc w większej firmie musi ją najpierw włączyć administrator."}},{"@type":"Question","name":"Czy mogę wziąć cudzą stronę jako inspirację do systemu projektowego?","acceptedAnswer":{"@type":"Answer","text":"Zależy, co dokładnie z niej bierzesz. Kierunek wizualny — temperatura kolorów, kontrast, rytm odstępów, krój pisma, charakter animacji — nie jest chroniony i tak pracują projektanci od zawsze. Odtworzenie układu strony razem z jej sekcjami, ilustracjami i tekstami to już kopiowanie cudzej pracy i naraża firmę na roszczenia. Praktyczna granica jest prosta: jeśli po zestawieniu obu stron obok siebie ktoś powiedziałby „to jest ta sama strona w innych kolorach”, poszło za daleko."}},{"@type":"Question","name":"Co konkretnie powstaje jako „system projektowy”?","acceptedAnswer":{"@type":"Answer","text":"Zestaw reguł, nie obrazek. Claude wyciąga z przesłanych materiałów paletę kolorów (podstawowe, uzupełniające i akcentowe), typografię (kroje, rozmiary i grubości), komponenty w rodzaju przycisków, kart i nawigacji oraz zasady układu — siatkę i odstępy. W praktyce sprowadza się to do listy nazwanych zmiennych, po jednej na każdą decyzję: ten odcień czerwieni, ten rozmiar nagłówka, ten promień zaokrąglenia."}},{"@type":"Question","name":"Czy Claude Design postawi stronę pod moją domeną?","acceptedAnswer":{"@type":"Answer","text":"Nie. Projekt można wyeksportować jako paczkę ZIP, plik PDF, prezentację PowerPoint albo samodzielny plik HTML, a także przekazać go do Claude Code lub do narzędzi takich jak Canva, Miro, Adobe i Vercel. Żadna z tych dróg nie obejmuje domeny ani hostingu — te trzeba mieć osobno, dokładnie tak samo jak przy zwykłym projekcie graficznym."}},{"@type":"Question","name":"Ile Claude Design zużywa limitu?","acceptedAnswer":{"@type":"Answer","text":"Praca w Claude Design liczy się do tego samego limitu użycia, z którego korzystają czat, Claude Code i Cowork — nie ma osobnej puli tylko na projektowanie. Limity są dwa: sesyjny, odnawiany co pięć godzin, i tygodniowy, odnawiany o stałej porze przypisanej do konta, przy czym Opus ma własny licznik tygodniowy. Na tempo zużycia wpływa długość i złożoność rozmów, używane funkcje, wybrany model i ustawiony poziom wysiłku. Projektowanie zużywa limit szybciej, niż wynikałoby to z liczby wiadomości, bo każde przerysowanie kanwy jest pracą modelu — budowa jednego systemu projektowego na Opusie potrafi wyczerpać limit sesji i wymusić dokończenie pracy po jego odnowieniu."}},{"@type":"Question","name":"Czy systemu projektowego da się użyć poza stroną internetową?","acceptedAnswer":{"@type":"Answer","text":"Tak i to jest jego główna zaleta. Ten sam system, na podstawie którego powstała strona, posłuży do zrobienia menu, ulotki, oferty w PDF czy grafik do mediów społecznościowych — wszystkie wyjdą w tych samych kolorach, z tym samym krojem pisma i tym samym charakterem. Bez systemu każdy z tych materiałów jest osobną decyzją i po roku firma ma pięć wersji własnej marki."}},{"@type":"Question","name":"Czym Claude Design różni się od zwykłej rozmowy z Claude?","acceptedAnswer":{"@type":"Answer","text":"Miejscem pracy i tym, co zostaje na końcu. W zwykłej rozmowie dostajesz artefakt, czyli pojedynczy podgląd obok czatu. Claude Design daje kanwę z wieloma widokami naraz, komentarze wstawiane bezpośrednio w projekcie, edycję elementów na kanwie i zapamiętany system projektowy, który obowiązuje w każdym kolejnym projekcie. Do jednorazowej strony wystarczy czat; do marki, która ma wyglądać spójnie przez rok, potrzebny jest system."}}]}

{"@context":"https://schema.org","@type":"HowTo","@id":"https://flowsystems.pl/blog/projekt-strony-claude-design-system/#howto","name":"Zbudowanie systemu projektowego w Claude Design na podstawie inspiracji","description":"Pierwsza wersja projektu z AI zawsze wygląda tak samo. Pokazuję, jak z jednej inspiracji zbudować system projektowy i użyć go w całej firmie.","inLanguage":"pl-PL","totalTime":"PT2H","step":[{"@type":"HowToStep","position":1,"name":"Zleć brief i popraw go","text":"Napisz jeden akapit o tym, co ma powstać i jakie ma robić wrażenie, a rozbudowanie go do briefu zleć modelowi. Popraw sekcje, których nie mógł znać: poza zakresem, cel i treści. Dopiero ten dokument wklej do Claude Design.","url":"https://flowsystems.pl/blog/projekt-strony-claude-design-system/#brief"},{"@type":"HowToStep","position":2,"name":"Zbierz inspiracje","text":"Wybierz dwa lub trzy projekty, których charakter Ci odpowiada, i zapisz zrzuty ekranu. Nazwij słowami, co konkretnie Ci się w nich podoba.","url":"https://flowsystems.pl/blog/projekt-strony-claude-design-system/#inspiracja"},{"@type":"HowToStep","position":3,"name":"Zbuduj system projektowy","text":"Prześlij zrzuty i poproś o wyodrębnienie systemu: palety, typografii, odstępów, zaokrągleń i cieni. Przejrzyj wynik i popraw to, co odstaje od marki.","url":"https://flowsystems.pl/blog/projekt-strony-claude-design-system/#system"},{"@type":"HowToStep","position":4,"name":"Zastosuj system do projektu","text":"Poproś o przerysowanie strony zgodnie z systemem, a potem użyj tego samego systemu do pozostałych materiałów firmy.","url":"https://flowsystems.pl/blog/projekt-strony-claude-design-system/#zastosowanie"}]}
```