Pi dla designu.

Czym właściwie jest Pi

Pi to agent kodujący AI o otwartym kodzie źródłowym (MIT) działający w terminalu, część zestawu narzędzi earendil-works pi. Odczytuje repozytorium, edytuje pliki i wykonuje polecenia powłoki — planując i weryfikując pracę na podstawie zadań sformułowanych w języku naturalnym, zamiast jedynie uzupełniać linie kodu. Jego rdzeń jest celowo niewielki: cztery domyślne narzędzia — read, write, edit i bash — oraz wbudowane grep, find i ls.

W pracy projektowej wyróżniającą się właściwością jest to, że Pi jest niezależny od dostawcy. Normalizuje dostęp do Anthropic, OpenAI, Google i wielu innych dostawców za jednym zunifikowanym API, więc przynosisz własne klucze i wybierasz model do każdego zadania — na przykład mocny model multimodalny do odczytu referencyjnych screenshotów — i przełączasz przez /model lub Ctrl+L w trakcie sesji bez zmiany swojego przepływu pracy.

• Dowolny model, twoje klucze: Pi kieruje zapytania do ponad 20 dostawców, w tym Anthropic i OpenAI. Uwierzytelniasz się własnymi kluczami API (BYOK) lub logujesz przez /login do subskrypcji Claude Pro/Max, ChatGPT Plus/Pro lub GitHub Copilot.
• Skills + rozszerzenia: Pi ładuje Skills (pakiety zdolności w Markdown zgodne ze standardem Agent Skills) oraz rozszerzenia TypeScript — naturalne miejsce do kodowania konwencji projektowych i dodawania własnych narzędzi.
• Rozgałęzione sesje: Sesje są zapisywane jako drzewa JSONL, więc możesz rozgałęziać eksplorację i nawigować po historii w pojedynczym pliku bez utraty wcześniejszych przebiegów.

• Vendor: earendil-works (projekt społeczności open-source)
• Dane uwierzytelniające: własny klucz API dostawcy (BYOK — Anthropic, OpenAI, Google itp.) lub logowanie przez subskrypcję za pomocą /login; przechowywane lokalnie w ~/.pi/agent/auth.json (0600)
• Licencja: MIT, open source

Dlaczego agent wielodostępowy BYOK pasuje do projektowania

Przewaga Pi w zakresie designu to elastyczność, nie pojedynczy wbudowany model — ale, jak w przypadku każdego agenta, gust wciąż musi być dostarczony.

• Wybierz odpowiedni model do zadania: Ponieważ Pi kieruje do dowolnego dostawcy, możesz sięgnąć po mocny model multimodalny do odczytu referencyjnych zrzutów ekranu, a potem przełączyć na inny do refaktoryzacji — bez opuszczania agenta.
• Twoje klucze, brak przywiązania: BYOK oznacza, że nie jesteś przywiązany do cennika ani limitów kontekstu jednego dostawcy; wybierz model, którego mocne strony pasują do bieżącego zadania projektowego.
• Konwencje w Skills: Skill (wraz ze źródłem MCP, takim jak serwer Figma) wskazuje agentowi twoje tokeny, komponenty i rzeczywiste specyfikacje, dzięki czemu pracuje zgodnie z marką zamiast domyślnego wyglądu.

Lekcja jest taka sama, jakiej uczy każdy agent: Pi nie ma smaku z definicji, a żaden wybór modelu go nie zapewni. Tworzy dobry design, gdy nadasz mu ograniczenia — system projektowy, estetyczny skill i konkretne odniesienia. Open Design pakuje dokładnie te dane wejściowe, dlatego oba rozwiązania pasują do siebie (więcej poniżej).

Skonfiguruj Pi do pracy projektowej, od zera

Oto pełna ścieżka od czystej maszyny do Pi, które potrafi budować i weryfikować UI.

# 1. Install the Pi coding agent CLI (Node)
npm install -g --ignore-scripts @earendil-works/pi-coding-agent

# 2. Authenticate with your own provider key (BYOK)
export ANTHROPIC_API_KEY=sk-ant-...   # or OPENAI_API_KEY=sk-...
#    (or run /login inside Pi for a Claude / ChatGPT / Copilot subscription)

# 3. Start it in your project
cd your-project
pi

# 4. Switch models any time with /model or Ctrl+L

• Zakoduj swoje zasady projektowe: Umieść swoje tokens, prymitywy i konwencje w Skill i skieruj Pi na nie, aby output pasował do marki zamiast domyślnie wyglądać ogólnie.
• Dodaj weryfikację przeglądarki: Podłącz Playwright lub MCP przeglądarki, aby Pi renderował w prawdziwej przeglądarce i sprawdzał wynik na różnych breakpointach zamiast tylko potwierdzać, że build przechodzi.

Proces tworzenia interfejsu ze zrzutu ekranu

Najbardziej efektywna pętla projektowania z Pi polega na przekształceniu obrazu referencyjnego w działający, responsywny interfejs użytkownika i iterowaniu, aż będzie pasował — opierając się na multimodalnym modelu do porównywania wyniku z referencją. Ponieważ Pi jest niezależny od dostawcy, wskaż ten model, który najlepiej odczytuje obrazy w danym przypadku.

1. Zacznij od najjaśniejszych referencji wizualnych, jakie masz — i uwzględnij wiele stanów (desktop i mobile, hover, empty, loading), nie tylko jeden hero shot.
2. Wybierz mocny model multimodalny do przebiegu za pomocą /model, ponieważ rozumienie obrazu decyduje o jakości przekształcania zrzutów ekranu w interfejs.
3. Bądź precyzyjny w prompcie; niejasne prompty generują ogólnikowy UI nawet z mocnym modelem.
4. Przechowuj swój system projektowy i konwencje w Skill i wskaż Pi, gdzie znajdują się tokens i kanoniczne prymitywy.
5. Uruchom serwer deweloperski i pozwól Pi renderować w prawdziwej przeglądarce, zmieniając rozmiar do breakpointów, a następnie iteruj, porównując jego implementację ze zrzutami ekranu — nie tylko potwierdzaj, że się buduje.

Przekaż agentowi referencje i konkretne ograniczenia z góry:

pi
# in the prompt:
> Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens (see the Skill).
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

Utrzymuj komunikaty małe i zwięzłe, commituj dobre iteracje i revertuj złe (informując Pi o revercie), by każde podejście budowało na czystej bazie. Rozgałęzione sesje JSONL w Pi pozwalają też eksplorować alternatywę bez utraty oryginalnego wątku.

Skills, rozszerzenia i motywy

Pi rozszerza się samodzielnie w czasie wykonania przez kilka warstw, które klarownie przekładają się na workflow open design.

• Skills: Pakiety możliwości w formacie Markdown zgodne ze standardem Agent Skills — trwały, przenośny dom dla Twoich konwencji projektowych, tokenów i list kontrolnych przeglądu. Ten sam Skill działa na kompatybilnych agentach, nie tylko Pi.
• Rozszerzenia i szablony promptów: TypeScript Extensions dodają niestandardowe narzędzia, komendy i UI; szablony promptów wielokrotnego użytku uruchamia się przez /name. Obie pozwalają skryptować pętlę weryfikacji bez wychodzenia z terminala.
• MCP i motywy: Pi łączy się z serwerami MCP, aby wprowadzić zewnętrzny kontekst designu (najbardziej istotny to serwer Figma MCP), a motywy ładują się na gorąco, więc interfejs terminala pozostaje czytelny podczas pracy.

To przenośne możliwości — zwłaszcza Skills i MCP — dokładnie ten rodzaj rzeczy, które Open Design zostało stworzone, aby orkiestrować, zamiast odtwarzać je w każdym projekcie.

Pi vs Codex vs Claude Code vs Cursor vs Gemini CLI dla projektowania

Nie ma jednego zwycięzcy w pracy projektowej — każdy agent ma inną mocną stronę, a doświadczone zespoły je łączą. Uczciwe podsumowanie:

Podejście Pi jest ortogonalne do pozostałych: to agent, który pozwala używać dowolnego z tych bazowych modeli na własnych kluczach. Powtarzający się werdykt społeczności wciąż obowiązuje — gust pochodzi od ludzi: wszystkie one domyślnie generują generyczną estetykę bez skills, odniesień i ograniczeń. To jest prawdziwy problem do rozwiązania i ma on kształt narzędzia projektowego, a nie modelu.

Pułapki i jak uniknąć wrażenia „AI slop"

Najczęstszą skargą na design generowany przez AI jest to, że wygląda generycznie — miękkie gradienty, unoszące się panele, przesadnie zaokrąglone rogi, dramatyczne cienie, klimat Inter-i-fioletu, który „krzyczy, że zrobiło to AI". Inne zgłaszane problemy obejmują zepsute layouty mobilne i instrukcje przenikające do tekstów UI. Żadne z tych problemów nie są unikalne dla Pi ani dla żadnego konkretnego modelu; dzieje się tak, gdy jakikolwiek agent działa bez starannie przygotowanego kontekstu designu.

• Dodaj skill estetyczny: Wyselekcjonowany skill projektowy zmusza agenta do przyjęcia konkretnego kierunku zamiast domyślnego wyglądu — a ponieważ jest to przenośny Skill, podróżuje z tobą przez różne modele.
• Zweryfikuj w prawdziwej przeglądarce: Wybierz model multimodalny, a Pi wyrenderuje i sprawdzi układy w różnych punktach przełamania, aby nie psuły się po cichu na urządzeniach mobilnych.
• Dostarczaj tokeny i odniesienia: Prawdziwe design tokens i referencyjne screenshoty to najważniejsza dźwignia jakości wyników.
• Zakoduj zasady tam, gdzie Pi je odczytuje: Umieść reguły stylu takie jak „bez kart bohaterów, maksymalnie dwa kroje pisma, hierarchia brand-first" w Skill, który agent wczytuje przy każdym uruchomieniu.

Zauważ, że każde rozwiązanie polega na dostarczeniu agentowi wyselekcjonowanego kontekstu projektowego — niezależnie od tego, do którego dostawcy kierujesz zapytania. Ręczne utrzymywanie tego kontekstu dla każdego projektu to właśnie trud, którego Open Design Cię zwalnia.

Projektowanie z Pi wewnątrz Open Design

Open Design to warstwa projektowa open-source, o którą prosi powyższy workflow. Traktuje Pi jako adapter first-party i otacza go wyselekcjonowaną biblioteką skill i systemów projektowych, ustrukturyzowanym potokiem renderowania oraz lokalnym interfejsem desktopowym — dzięki czemu kontekst projektowy, który czyni Pi dobrym, jest dostępny od pierwszego uruchomienia, a nie składany ręcznie za każdym razem. Oba projekty są open-source i local-first, co czyni to połączenie naturalnym wyborem.

1. Zainstaluj Open Design i wybierz Pi jako swojego agenta.
2. Uwierzytelnij się własnym kluczem API dostawcy (BYOK) lub loginem subskrypcji — dane uwierzytelniające pozostają na Twoim komputerze w ~/.pi/agent/auth.json i nigdy nie są przekazywane przez nas.
3. Wybierz system projektowy i skill, a następnie generuj prezentacje, prototypy i strony docelowe ze spójnym gustem.
4. Każdy artefakt i plik DESIGN.md znajduje się w Twoim własnym repozytorium, a nie w hostowanej chmurze.

Ten sam agent Pi, te same klucze, ta sama swoboda przełączania modeli — plus prawdziwy, przenośny, open-source'owy workflow projektowy wokół niego. Jest local-first i na licencji MIT, więc nic dotyczącego Twojej pracy ani danych uwierzytelniających nie opuszcza Twojej maszyny.

Często zadawane pytania

1. 01 Czy Pi naprawdę potrafi wykonywać pracę projektową? +

   Tak — z umiejętnością estetyczną (aesthetic skill), systemem projektowym i rzeczywistymi obrazami referencyjnymi w kontekście, Pi produkuje responsywny UI o jakości produkcyjnej, a możesz go skierować do mocnego modelu multimodalnego, aby zweryfikować wynik względem referencji. Bez tego kontekstu ma tendencję do domyślnego generycznego wyglądu, co jest luką, którą wypełnia Open Design.

2. 02 Czy muszę płacić za projektowanie z Pi? +

   Sam Pi jest darmowy i open source (MIT). Płacisz tylko za model bazowy — używaj własnego klucza API dostawcy (BYOK) lub loguj się przez /login do subskrypcji Claude Pro/Max, ChatGPT Plus/Pro lub GitHub Copilot. Open Design nigdy nie pośredniczy w Twoich poświadczeniach.

3. 03 Co sprawia, że Pi jest dobry specyficznie do projektowania? +

   Jest niezależny od providera: przynosisz własne klucze i kierujesz do dowolnego z 20+ providerów, wybierając model, którego mocne strony pasują do zadania i zmieniając w trakcie sesji. Ale gust nadal pochodzi z systemu projektowego, skill i referencji, które dostarczasz, nie z modelu.

4. 04 Którego modelu powinienem używać z Pi do projektowania frontend? +

   Pi kieruje zapytania do wielu dostawców, więc wybieraj zależnie od zadania — mocny model multimodalny dobrze odczytuje referencyjne zrzuty ekranu, podczas gdy inne mogą się sprawdzić przy refaktoryzacji. Przewaga Pi polega na tym, że możesz zmieniać model bez zmiany workflow. Open Design pozwala zachować ten sam kontekst projektowy niezależnie od wybranego modelu.

5. 05 Jak podłączyć Pi do Figma? +

   Pi obsługuje serwery MCP, więc możesz dodać serwer Figma MCP i pobrać prawdziwy kontekst projektowy — komponenty, zmienne, dane układu — dzięki czemu wygenerowany kod odpowiada źródłu zamiast go przybliżać.

6. 06 Czy Open Design jest powiązany z Pi? +

   Nie. Pi to niezależny projekt open-source autorstwa earendil-works; Open Design to oddzielny niezależny projekt open-source, który obsługuje Pi jako adapter first-party.

7. 07 Czy moje pliki i poświadczenia są bezpieczne? +

   Tak — Open Design jest lokalny i open source. Twoje pliki, artefakty i DESIGN.md pozostają w Twoim własnym repo, a klucze dostawców są używane bezpośrednio przez Pi (przechowywane lokalnie w ~/.pi/agent/auth.json), nigdy nie są kierowane przez serwery Open Design.