Przejdź do treści
Google Antigravity: IDE, które generuje grafiki bez wychodzenia z kodu
· 4 min czytania

Google Antigravity: IDE, które generuje grafiki bez wychodzenia z kodu

AI IDE Antigravity Frontend UI Assets Nano Banana Pro

A wiesz, że Google Antigravity poza kodowaniem może wygenerować ci grafiki?

Jeśli kojarzysz asystentów do kodu jako „autocomplete na sterydach”, to Antigravity wchodzi w inną ligę. To IDE w stylu „agent-first”: zamiast tylko podpowiadać linijki, agent potrafi sam zaplanować robotę, wykonać ją w repo, odpalić komendy w terminalu, a potem jeszcze wejść w przeglądarce i zweryfikować efekt. I co najważniejsze - zostawia po sobie Artifacts, czyli paczkę dowodów: plan, checklisty, diffy, screenshoty albo walkthrough, żebyś mógł to szybko ocenić.

No i teraz najlepsze: w tym samym workflow agent może ogarnąć też grafiki do frontu.

Antigravity = mniej przełączania kontekstu

Klasyczny dzień frontendowca wygląda tak:

dłubiesz komponent,

potem poprawiasz CSS,

potem Figma / generator obrazków / stocki,

potem znowu kod,

potem build, przeglądarka, poprawki…

Antigravity próbuje to skleić w jedno: agent siedzi w IDE, ale ma też „ręce” do terminala i przeglądarki. W praktyce możesz mu zlecić zadanie typu: „przerób hero sekcję + dorzuć ilustrację + sprawdź RWD” i on ogarnia pełen loop, raportując wynik artefaktami.

Skąd te grafiki? Nano Banana Pro w tle

Antigravity potrafi dobrać model obrazowy Nano Banana Pro (Gemini 3 Pro Image), czyli generator/edytor obrazów od Google DeepMind. To nie jest „osobna apka”, tylko element workflow - agent może wygenerować asset i od razu wrzucić go do projektu.

W blogowych materiałach Antigravity pojawia się wprost use case „collateral generation” / assety do UI, gdzie ten model ma dowozić relewantne grafiki do projektu.

Konkretne zastosowania dla frontendu

  1. Assety pod UI bez wychodzenia z repo

ilustracje do onboardingów

obrazki do kart, sekcji landing page

placeholdery „production-like”, a nie losowe szumy

grafiki do empty states / error states

  1. Social / SEO

OG image do artykułu lub landing page

miniatury, banery, grafiki do wpisów

  1. „Design glue”

szybkie makiety ekranów (nawet jeśli finalnie i tak poprawiasz ręcznie)

spójny styl zestawu ilustracji (ważne przy większym projekcie)

Przykładowe prompty, które mają sens (i są „frontendowe”)

Prompt 1: ilustracja hero

Wygeneruj ilustrację do hero sekcji SaaS (temat: automatyzacja raportów). Styl: płaski, nowoczesny, bez postaci, spójny z paletą #0A84FF i #111111. Rozmiar 1600×900. Zapisz jako src/assets/hero.png i podmień w komponencie Hero.tsx.

Prompt 2: zestaw ikon/mini-assetów

Potrzebuję 6 prostych ikon (SVG) w jednym stylu: dashboard, alert, cloud, lock, chart, integration. Grubość linii 2px, zaokrąglone końcówki. Dodaj do src/assets/icons/ i zrób export barrel.

Prompt 3: OG image pod wpis

Zrób OG image 1200×630 do artykułu „Antigravity generuje grafiki w IDE”. Tło ciemne, czytelny tytuł, małe logo w rogu, styl tech. Zapisz do public/og.png i dodaj meta tagi w index.html.

Bezpieczeństwo i „nie rób sobie krzywdy”

Antigravity ma polityki uruchamiania komend i wykonywania akcji w przeglądarce (m.in. tryb, w którym agent prosi o review vs jedzie automatem). To jest fajne, ale ma też konsekwencje: im więcej autonomii, tym większe ryzyko głupiego command-fuckupu. W docach/codelabach jest wprost o politykach terminala i JS w przeglądarce oraz o allowliście domen dla browser agenta.

Moja praktyka:

Request review dla terminala, dopóki nie zaufasz workflow,

allowlista domen na dokumentacje, które odwiedza agent,

a assety generowane traktuj jak „materiał” - dalej warto je sprawdzić pod licencje/brand/zgodność wizualną.

Kiedy to faktycznie robi różnicę?

Największy zysk jest wtedy, gdy grafika jest elementem taska developerskiego:

„dodaj sekcję + obrazek + RWD + sprawdź w przeglądarce”

„zrób onboarding carousel + 5 spójnych ilustracji”

„wygeneruj OG image + podepnij meta”

Bo wtedy nie przeskakujesz między 5 narzędziami i nie gubisz kontekstu. To jest dokładnie ten „task-oriented level”, o którym Google pisze w kontekście Antigravity.

Podsumowanie

Antigravity nie jest tylko od „szybszego klepania kodu”. W praktyce chodzi o to, że agent robi pełne taski i zostawia artefakty do weryfikacji - a przy frontendzie dorzuca jeszcze brakujący element układanki: asset generation z Nano Banana Pro bez wychodzenia z IDE.

Jeśli budujesz UI i regularnie stoisz na tym, że „kod gotowy, ale brakuje grafik / OG / ikon / ilustracji” - to jest realna oszczędność czasu i przełączania kontekstu.

Udostępnij X / Twitter LinkedIn
🤖

Chcesz opanować GitHub Copilot od podstaw?

Kurs GitHub Copilot - 5 poziomów, 15 modułów, od instalacji do własnych agentów. Pisany przez człowieka, weryfikowany z oficjalną dokumentacją VS Code.

Sprawdź kurs