OpenCode dla projektowania.

Czym właściwie jest OpenCode

OpenCode to open-source'owy agent kodujący AI zbudowany pod terminal, utrzymywany przez zespół stojący za SST (Anomaly Innovations). Czyta twoje repozytorium, uruchamia polecenia, edytuje pliki i rozmawia z dużym modelem językowym — ale w przeciwieństwie do agentów związanych z dostawcą nie dostarcza własnego modelu. Kierujesz go na dowolnego dostawcę i model, jaki chcesz, i przynosisz własny klucz.

Działa jako terminalowy interfejs (TUI), z aplikacją desktopową i rozszerzeniami IDE nadbudowanymi na tym samym silniku. Pod maską używa architektury klient/serwer, więc agent wykonujący pracę jest odsprzężony od powierzchni, z której nim sterujesz. Dwaj wbudowani agenci — build i plan — przełączają się klawiszem Tab.

• Niezależny od modelu: Modele i dostawcy pochodzą z models.dev, otwartego katalogu. Konfigurujesz je w opencode.json łańcuchem provider/model-id i możesz wyłączać dostawców, których nie chcesz ładować — więc ten sam proces projektowy działa na Anthropic, OpenAI, Google, OpenRouter, modelach lokalnych i innych.
• Plik instrukcji: OpenCode czyta plik AGENTS.md w twoim projekcie (standard międzynarzędziowy, zgodny także z CLAUDE.md) w poszukiwaniu reguł projektu — naturalne miejsce, by zakodować twoje konwencje projektowe. Uruchom /init, aby wygenerować jeden.
• Rozszerzalny: Obsługuje integrację LSP, serwery MCP, motywy, skróty klawiszowe i niestandardowe polecenia, a także udostępnialne linki do sesji dla współpracy.

• Opiekun: SST / Anomaly Innovations (projekt open-source)
• Poświadczenie: twój własny klucz/klucze API dostawcy modeli — BYOK, bez uwiązania do dostawcy
• Licencja: MIT, open source

Dlaczego otwarty, dowolnomodelowy agent pasuje do pracy projektowej

OpenCode nie ma jednego „modelu projektowego” tak jak agent związany z dostawcą — i o to właśnie chodzi. Ponieważ jest niezależny od modelu i otwarty, możesz uruchamiać ten sam proces projektowy na modelu, który aktualnie jest najlepszy we frontendzie, później go wymienić lub cofnąć się do modelu lokalnego, a wszystko to bez zmiany konfiguracji.

Ale sam wybór modelu nie kupuje wyczucia smaku. Jak każdy agent kodujący, OpenCode tworzy generyczne UI, dopóki nie podasz mu ograniczeń. Dobry wynik projektowy bierze się z trzech wkładów, które dostarczasz.

• System projektowy: Prawdziwe tokens, prymitywy i konwencje, które agent ponownie wykorzystuje, aby wynik pasował do marki, zamiast domyślać się generycznego wyglądu.
• Skill estetyczny: Wyselekcjonowany skill, który egzekwuje prawdziwe wyczucie smaku — powściągliwy ruch, hierarchia stawiająca markę na pierwszym miejscu, najwyżej dwa kroje pisma i jeden kolor akcentu — i sprawia, że agent zobowiązuje się do kierunku przed budowaniem.
• Konkretne referencje: Faktyczne obrazy referencyjne i wiele stanów (desktop i mobile, hover, pusty, ładowanie), a nie pojedynczy kadr bohaterski.

Wniosek: OpenCode daje ci swobodę modelu, ale wyczucie smaku wciąż bierze się z wyselekcjonowanego kontekstu projektowego. Open Design pakuje dokładnie te wkłady, dlatego te dwie rzeczy do siebie pasują — oba są open-source i local-first (więcej poniżej).

Skonfiguruj OpenCode do pracy projektowej, od zera

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

# 1. Install OpenCode
curl -fsSL https://opencode.ai/install | bash
# or: npm i -g opencode-ai@latest
# or: brew install sst/tap/opencode

# 2. Start the TUI in your project, then authenticate your provider
opencode          # then run /login and pick your provider + paste your key

# 3. Generate project context
opencode          # inside your project, run /init to create AGENTS.md

# 4. Pick your model (any provider, via models.dev)
#    set "provider/model-id" in opencode.json or switch in the TUI

# 5. Add an MCP server (optional, e.g. for design handoff)
#    configure it under the "mcp" key in opencode.json

• Zakoduj swoje reguły projektowe: Umieść swoje tokens, prymitywy i konwencje w AGENTS.md (lub DESIGN.md przywoływanym z niego), aby wynik pasował do marki, zamiast domyślać się generycznego wyglądu. Opcja instructions w opencode.json może wskazywać na dodatkowe pliki reguł przez globy.
• Wybierz zdolny model: Ponieważ OpenCode jest niezależny od modelu, wybierz dostawcę/model aktualnie najsilniejszy we frontendzie na przejście projektowe — i zostaw resztę swojego procesu bez zmian.

Proces zrzut-ekranu-do-UI

Najbardziej dźwigniową pętlą projektową z dowolnym agentem jest zamiana obrazu referencyjnego w działające, responsywne UI i iterowanie, aż się zgodzi. Ten sam pięciokrokowy kształt obowiązuje w OpenCode.

1. Zacznij od najczytelniejszych referencji wizualnych, jakie masz — i uwzględnij wiele stanów (desktop i mobile, hover, pusty, ładowanie), nie tylko jeden kadr bohaterski.
2. Bądź konkretny w poleceniu; mgliste polecenia dają generyczne UI.
3. Przygotuj system projektowy i powiedz OpenCode, gdzie znajdują się tokens i kanoniczne prymitywy (w AGENTS.md).
4. Uruchom serwer deweloperski i każ agentowi renderować w prawdziwej przeglądarce, zmieniając rozmiar do breakpointów, aby sprawdzić wynik.
5. Iteruj, każąc OpenCode porównywać swoją implementację z powrotem ze zrzutami ekranu — a nie tylko potwierdzać, że się buduje.

Odwołuj się do plików za pomocą @ w TUI, aby uzyskać rozmyte wyszukiwanie w twoim katalogu roboczym, uruchamiaj polecenia powłoki inline z wiodącym !, a akcjami steruj poleceniami /. Następnie daj polecenie z konkretnymi ograniczeniami:

opencode
# in the TUI:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from AGENTS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, open it in a browser, and iterate until the
  UI matches the references across breakpoints.

Trzymaj polecenia krótkie i skupione, commituj dobre iteracje i cofaj złe (mówiąc OpenCode, kiedy cofasz), aby każde przejście budowało na czystej bazie.

AGENTS.md, MCP i udostępnialne sesje

Trzy punkty rozszerzeń czynią OpenCode praktycznym do długotrwałej pracy projektowej, a wszystkie trzy czysto odwzorowują się na otwarty proces projektowy.

• Reguły AGENTS.md: Reguły projektu żyją w AGENTS.md w korzeniu repozytorium (lub reguły globalne w ~/.config/opencode/AGENTS.md). To trwały dom dla twoich konwencji projektowych, czytany przy każdym uruchomieniu, i jest zgodny z plikami CLAUDE.md, których używają inne agenty.
• Serwery MCP: OpenCode obsługuje zarówno lokalne (command), jak i zdalne (URL) serwery MCP, konfigurowane pod kluczem mcp — przenośny sposób wnoszenia kontekstu projektowego i zewnętrznych narzędzi, które działają w wielu agentach, nie tylko w OpenCode.
• Udostępnialne sesje: Polecenie /share tworzy publiczny link do rozmowy dla współpracy lub przeglądu, a /unshare go odwołuje — przydatne do uzyskania informacji zwrotnej na temat przejścia projektowego.

To są przenośne, wieloagentowe możliwości — dokładnie to, do orkiestracji czego zbudowany jest Open Design, zamiast odtwarzać je dla każdego projektu z osobna.

OpenCode kontra Codex kontra Claude Code kontra Cursor w projektowaniu

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

Powracający werdykt społeczności jest taki, że wyczucie smaku pochodzi od ludzi: wszystkie z nich domyślnie zbiegają ku generycznej estetyce bez skills, referencji i ograniczeń. To jest prawdziwy problem do rozwiązania — i ma on kształt narzędzia projektowego, a nie modelu, co jest dokładnie powodem, dla którego otwarty agent jak OpenCode tak dobrze łączy się z otwartą warstwą projektową.

Pułapki i jak unikać wyglądu „AI slop”

Najczęstszą skargą na projekty generowane przez AI jest to, że wyglądają generycznie — miękkie gradienty, unoszące się panele, przeskalowane zaokrąglone rogi, dramatyczne cienie, klimat Inter-i-fiolet, który „krzyczy, że zrobiło to AI”. Inne zgłaszane problemy to popsute układy mobilne i przeciekanie instrukcji do treści UI. Żaden z nich nie jest charakterystyczny wyłącznie dla OpenCode; to się dzieje, gdy dowolny agent działa bez wyselekcjonowanego kontekstu projektowego.

• Dodaj skill estetyczny: Wyselekcjonowany skill projektowy zmusza agenta do zobowiązania się do prawdziwego kierunku zamiast domyślnego wyglądu.
• Weryfikuj w prawdziwej przeglądarce: Renderuj i sam się sprawdzaj na różnych breakpointach, tak by układy nie psuły się po cichu na mobile.
• Dostarcz tokens i referencje: Prawdziwe design tokens i zrzuty ekranu referencji to pojedyncza największa dźwignia jakości wyniku.
• Zakoduj reguły w AGENTS.md: Umieść reguły w stylu „bez kart bohaterskich, najwyżej dwa kroje pisma, hierarchia stawiająca markę na pierwszym miejscu” tam, gdzie agent czyta je przy każdym uruchomieniu.

Zauważ, że każde z tych zabezpieczeń polega na daniu agentowi wyselekcjonowanego kontekstu projektowego — niezależnie od tego, który model uruchamiasz. Ręczne utrzymywanie tego kontekstu, projekt po projekcie, to mozół, który usuwa Open Design.

Projektowanie z OpenCode wewnątrz Open Design

Open Design to open-source'owa warstwa projektowa, o którą powyższy proces wciąż się dopomina. Traktuje OpenCode jako adapter pierwszej kategorii i otacza go wyselekcjonowaną biblioteką skills i systemów projektowych, ustrukturyzowanym potokiem renderowania oraz lokalnym desktopowym UI — więc kontekst projektowy, który czyni dowolnego agenta 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 dopasowaniem.

1. Zainstaluj Open Design i wybierz OpenCode jako swojego agenta.
2. Uwierzytelnij się własnym kluczem API dostawcy modeli (BYOK) — poświadczenia pozostają na twojej maszynie i nigdy nie są przekierowywane przez nas.
3. Wybierz dowolnego dostawcę i model, a także system projektowy i skill, a następnie generuj prezentacje, prototypy i strony docelowe ze spójnym wyczuciem smaku.
4. Każdy artefakt i plik DESIGN.md żyje w twoim własnym repozytorium, a nie w hostowanej chmurze.

Ten sam agent OpenCode, ta sama swoboda modelu — plus prawdziwy, przenośny, open-source'owy proces projektowy wokół niego. Jest local-first i na licencji Apache-2.0, więc nic z twojej pracy ani twoich poświadczeń nie opuszcza twojej maszyny.

Najczęściej zadawane pytania

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

   Tak — mając w kontekście skill estetyczny, system projektowy i prawdziwe obrazy referencyjne, OpenCode tworzy responsywne UI o jakości produkcyjnej i potrafi je zweryfikować w przeglądarce. Ponieważ jest niezależny od modelu, uruchamiasz model aktualnie najlepszy we frontendzie. Bez tego wyselekcjonowanego kontekstu skłania się ku generycznemu wyglądowi, i to jest luka, którą wypełnia Open Design.

2. 02 Którego modelu powinienem użyć z OpenCode do projektowania? +

   Dowolnego, jaki lubisz — OpenCode jest niezależny od dostawcy przez models.dev, więc możesz uruchamiać Anthropic, OpenAI, Google, OpenRouter lub modele lokalne za tym samym procesem i przełączać się w dowolnym momencie. Jakość wyniku projektowego zależy znacznie bardziej od twojego skilla, systemu projektowego i referencji niż od samego modelu.

3. 03 Czy Open Design jest tworzony przez zespół OpenCode (SST)? +

   Nie. Open Design to niezależny projekt open-source, który integruje OpenCode jako agenta. Uzupełnia OpenCode o local-first, otwartą bibliotekę skills i systemów projektowych.

4. 04 Czy potrzebuję specjalnej subskrypcji, aby projektować z OpenCode? +

   Nie — OpenCode jest BYOK. Przynosisz własny klucz API dostawcy modeli, a Open Design nigdy nie przekierowuje twoich poświadczeń. Nie ma uwiązania do dostawcy.

5. 05 OpenCode, Codex czy Claude Code do projektowania frontendu? +

   Wszystkie są mocne, a wiele zespołów zestawia je ze sobą. Przewagą OpenCode jest bycie w pełni open-source i niezależnym od modelu; Codex wyróżnia się w delegowanych buildach w sandboksie; Claude Code jest znany z konkretnych, świadomych bazy kodu decyzji projektowych. Open Design pozwala przełączać agentów bez zmiany twojego procesu projektowego.

6. 06 Jak rozszerzyć OpenCode o kontekst projektowy? +

   Zakoduj reguły w AGENTS.md, dodaj serwery MCP pod kluczem mcp dla przenośnych narzędzi i kontekstu projektowego oraz używaj udostępnialnych sesji do przeglądu. Open Design dostarcza wyselekcjonowaną bibliotekę skills i systemów projektowych, więc omijasz konfigurację dla każdego projektu z osobna.

7. 07 Czy Open Design jest powiązany z OpenCode lub SST? +

   Nie. OpenCode to projekt open-source utrzymywany przez SST (Anomaly Innovations); Open Design to niezależny projekt open-source, który wspiera go jako adapter pierwszej kategorii.

8. 08 Czy moje pliki i poświadczenia są bezpieczne? +

   Tak — Open Design jest local-first. Twoje pliki, artefakty i DESIGN.md pozostają w twoim własnym repozytorium, a twoje poświadczenia dostawcy modeli są używane bezpośrednio przez twojego agenta, nigdy nie są przekierowywane przez serwery Open Design.