Mistral Vibe CLI do projektowania.

Czym właściwie jest Mistral Vibe CLI

Mistral Vibe CLI to open-source'owy (Apache-2.0) agent kodujący, który Mistral AI dostarcza dla terminala. Zapewnia interaktywny interfejs czatu z narzędziami do manipulacji plikami, przeszukiwania kodu, kontroli wersji i wykonywania poleceń, oraz automatycznie skanuje strukturę plików projektu i status Git, aby dostarczyć agentowi odpowiedni kontekst. Jest zasilany przez modele kodujące Mistral Devstral — planujące i weryfikujące pracę na podstawie zadań w języku naturalnym, zamiast tylko uzupełniać linie.

W pracy projektowej wyróżniają się dwie właściwości. Działa na rodzinie Devstral Mistral z otwartymi wagami (Devstral 2 i mniejszy Devstral Small 2), więc możesz uruchomić agenta przeciwko Mistral API w chmurze lub przeciwko modelom lokalnym — przydatne do wrażliwej na prywatność lub offline pracy projektowej. I mówi w Agent Client Protocol, więc ten sam agent może sterować edytorami i narzędziami, nie tylko jedną sesją terminalową.

• Pliki konfiguracyjne: Vibe CLI jest konfigurowany poprzez plik config.toml (na poziomie projektu ./.vibe/config.toml, z opcją zapasową w ~/.vibe/config.toml). To praktyczne miejsce do zakodowania dostawców, wyboru modelu i ustawień projektu.
• Wbudowane narzędzia + MCP: Dostarcza narzędzia do plików, wyszukiwania, kontroli wersji i wykonywania poleceń oraz wspiera serwery MCP (konfigurowane w sekcji [[mcp_servers]]) do dodawania zewnętrznego kontekstu, takiego jak plik Figma na żywo.
• BYOK lub lokalnie: Uwierzytelnij się kluczem API Mistral z konsoli Mistral lub wskaż go na lokalne/kompatybilne modele, aby działał całkowicie offline.

• Dostawca: Mistral AI
• Dane uwierzytelniające: klucz API Mistral (BYOK) z konsoli Mistral lub modele lokalne/kompatybilne
• Licencja: Apache-2.0, open source

Dlaczego agent kodujący z otwartymi wagami pasuje do projektowania

Przewaga projektowa Vibe CLI wynika z jego rodziny modeli open-weights i zasięgu protokołów — ale, jak w przypadku każdego agenta, gust nadal musi być dostarczony.

• Modele kodujące Devstral: Vibe działa na rodzinie Devstral od Mistral, modelach dostrojonych do kodowania, zbudowanych do pracy agentowej, wieloplikowej — dzięki czemu agent edytuje w prawdziwej bazie kodu frontend zamiast emitować izolowane fragmenty.
• Otwarte wagi i przyjazne dla lokalnego uruchamiania: Devstral Small 2 jest wystarczająco mały, by działać na sprzęcie konsumenckim, więc praca projektowa może pozostać w pełni lokalna i offline — referencje i kod nigdy nie muszą opuszczać Twojej maszyny.
• Konwencje w config.toml + kontekst: Konfiguracja projektu i Twoje własne instrukcje kierują agenta na 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: Vibe CLI nie ma smaku z definicji. 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 Vibe CLI do pracy projektowej, od zera

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

# 1. Install Mistral Vibe CLI
uv tool install mistral-vibe
# or: pip install mistral-vibe

# 2. Run the setup wizard to register your API key
vibe --setup     # saves config to ~/.vibe/config.toml and ~/.vibe/.env
#    or set it directly:  export MISTRAL_API_KEY=...

# 3. Start Vibe in your project
cd your-project
vibe

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add an [[mcp_servers]] entry in your config.toml

• Zakoduj swoje zasady projektowe: Przechowuj swoje tokens, prymitywy i konwencje tam, gdzie agent je odczytuje, i skieruj na nie Vibe, aby wynik odpowiadał brandowi, zamiast domyślnie przyjmować generyczny wygląd.
• Dodaj weryfikację przeglądarki: Podłącz Playwright lub przeglądarkowy MCP, aby Vibe renderował się w prawdziwej przeglądarce i sprawdzał swoje wyjście w różnych breakpointach, zamiast jedynie potwierdzać, że build przechodzi.

Przepływ pracy oparty na odwołaniach do UI

Najbardziej efektywna pętla projektowania z Vibe CLI polega na przekształceniu jasnej referencji w działający, responsywny interfejs użytkownika i iterowaniu, aż będzie pasował — opierając się na narzędziach agenta do renderowania, inspekcji i korygowania własnego wyniku.

1. Zacznij od najjaśniejszych referencji, jakie masz — i opisz wiele stanów (desktop i mobile, hover, empty, loading), nie tylko jeden hero shot.
2. Bądź precyzyjny w prompcie; niejasne prompty generują ogólnikowy UI nawet z mocnym modelem.
3. Przechowuj swój system projektowy i konwencje tam, gdzie Vibe je odczytuje, i wskaż mu, gdzie znajdują się tokens i kanoniczne prymitywy.
4. Uruchom serwer deweloperski i pozwól Vibe renderować w prawdziwej przeglądarce, zmieniając rozmiar do breakpointów, aby sprawdzić wynik.
5. Iteruj, zlecając Vibe porównanie swojej implementacji z odniesieniami — a nie tylko potwierdzenie, że buduje się.

Odwołuj się do plików za pomocą @ (Vibe autouzupełnia ścieżki plików) i steruj poleceniami slash za pomocą /, a następnie podaj konkretne ograniczenia:

vibe
# in the prompt:
> @design-spec.md @tokens.css
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, 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 Vibe o revercie), by każde podejście budowało na czystej bazie.

config.toml, MCP i ACP

Trzy punkty rozszerzenia sprawiają, że Vibe CLI jest praktyczny do długotrwałej pracy projektowej, a wszystkie trzy mapują się czysto na otwarty workflow projektowy.

• config.toml: Reguły projektu oraz ustawienia dostawcy/modelu znajdują się w pliku config.toml (na poziomie projektu, z rezerwowym ~/.vibe). To trwała siedziba konfiguracji połączenia agenta z projektem, odczytywana przy każdym uruchomieniu.
• Serwery MCP: Skonfiguruj serwery MCP w swoim config.toml ([[mcp_servers]], z transportami HTTP, streamable-HTTP i stdio) — przenośny sposób na wprowadzenie kontekstu projektowego i narzędzi zewnętrznych, w szczególności serwera Figma MCP, które działają ze wszystkimi agentami, nie tylko z Vibe.
• Agent Client Protocol: Vibe mówi ACP, więc ten sam agent może być sterowany z edytorów i innych klientów ACP. Dokładnie tak integruje go Open Design — przez ACP za pomocą binariów vibe-acp.

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

Vibe CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI do 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:

Powtarzający się werdykt społeczności jest taki, że gust pochodzi od ludzi: wszyscy bez wyjątku domyślnie stosują generyczną estetykę bez skills, referencji i ograniczeń. To jest prawdziwy problem do rozwiązania — i ma 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 wyciekające do treści UI. Żadne z tych problemów nie są unikalne dla Vibe CLI; to jest to, co się dzieje, gdy jakikolwiek agent działa bez starannie dobranego kontekstu designowego.

• Dodaj skill estetyczny: Wyselekcjonowany skill projektowy zmusza agenta do przyjęcia konkretnego kierunku zamiast domyślnego wyglądu.
• Zweryfikuj w prawdziwej przeglądarce: Niech Vibe renderuje i sprawdza się na punktach przerwania, by układy nie psuły się po cichu na mobile.
• Dostarczaj tokeny i odniesienia: Prawdziwe design tokens i referencyjne screenshoty to najważniejsza dźwignia jakości wyników.
• Zakoduj zasady w config i kontekście: Umieść zasady stylu typu „żadnych kart bohaterów, maksymalnie dwa kroje pisma, hierarchia najpierw brand" tam, gdzie agent odczytuje je przy każdym uruchomieniu.

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

Projektowanie z Vibe CLI wewnątrz Open Design

Open Design to warstwa projektowa open-source, o którą prosi powyższy workflow. Traktuje Mistral Vibe CLI jako adapter first-party — sterując nim przez ACP za pomocą binarki vibe-acp — i otacza go wyselekcjonowaną biblioteką skill i systemów projektowych, ustrukturyzowanym potokiem renderowania oraz lokalnym interfejsem desktopowym. Dzięki temu kontekst projektowy, który czyni Vibe 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 Mistral Vibe CLI jako swojego agenta.
2. Uwierzytelnij się swoim kluczem API Mistral (BYOK) lub wskaż Vibe na lokalne modele — poświadczenia zostają na twojej maszynie i nigdy nie są proxowane 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 CLI Vibe, ten sam klucz — plus prawdziwy, przenośny, open-source'owy workflow projektowy wokół niego. Jest local-first i na licencji Apache-2.0, więc nic dotyczącego Twojej pracy ani danych uwierzytelniających nie opuszcza Twojej maszyny.

Często zadawane pytania

1. 01 Czy Mistral Vibe CLI naprawdę potrafi wykonywać pracę projektową? +

   Tak — z umiejętnością estetyczną (aesthetic skill), systemem projektowym i rzeczywistymi referencjami w kontekście, Vibe CLI produkuje responsywny UI o jakości produkcyjnej, a jego modele Devstral edytują w obrębie rzeczywistej bazy kodu frontendu. Bez tego kontekstu ma tendencję do domyślnego generycznego wyglądu, co jest luką, którą wypełnia Open Design.

2. 02 Jak uwierzytelnić Vibe CLI? +

   Uruchom kreatora konfiguracji poleceniem vibe --setup, aby zarejestrować klucz API Mistral (z konsoli Mistral), lub ustaw MISTRAL_API_KEY w swoim środowisku. Można też uruchomić go z lokalnymi lub kompatybilnymi modelami, całkowicie offline. Open Design w żaden sposób nie pośredniczy w przekazywaniu Twoich danych uwierzytelniających.

3. 03 Co sprawia, że Vibe CLI jest dobry specjalnie do projektowania? +

   Jest to agent Apache-2.0, natywny dla ACP, napędzany przez open-weights modele kodujące Devstral firmy Mistral — możesz więc uruchomić go lokalnie dla pracy wymagającej prywatności i edytować w prawdziwym codebase. Ale gust nadal pochodzi z systemu projektowego, skill i referencji, które dostarczasz.

4. 04 Vibe CLI czy Claude Code do projektowania front-endu? +

   Oba są mocne. Claude Code jest znany ze specyficznych, świadomych kontekstu kodu decyzji projektowych; przewagą Vibe CLI jest stos open-weights Devstral, który możesz uruchomić lokalnie oraz licencja Apache-2.0. Wiele zespołów używa obu — Open Design pozwala przełączać agentów bez zmiany przepływu pracy projektowej.

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

   Dodaj serwer MCP Figma jako wpis [[mcp_servers]] w swoim config.toml. Vibe może wtedy pobrać rzeczywisty kontekst projektowy — komponenty, zmienne, dane layoutu — dzięki czemu wygenerowany kod pasuje do źródła zamiast go przybliżać.

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

   Nie. Mistral Vibe CLI jest produktem Mistral AI; Open Design to niezależny projekt open-source, który obsługuje go jako adapter first-party, sterując nim przez ACP. Mistral jest znakiem towarowym Mistral AI.

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

   Tak — Open Design jest local-first i Apache-2.0. Twoje pliki, artefakty i DESIGN.md pozostają we własnym repozytorium, a Twoje dane uwierzytelniające Mistral są używane bezpośrednio przez Twojego agenta, nigdy nie są kierowane przez serwery Open Design.