Opus 5.5 rysuje SVG: infografika, lama i animacja za 2 zł

👁 115 przeczytań

Infografiki i ilustracje SVG z Opus 5.5 to grafika pisana kodem: model nie rysuje pikseli, tylko zwraca tekst z kształtami, liczbami i napisami. Zamówiłem u niego trzy rzeczy: infografikę z rankingu 8 modeli, płaską ilustrację lamy przy laptopie i animowany wykres, a potem jedną poprawkę infografiki po uwagach. Wszystko wyrenderowałem w przeglądarce i sprawdziłem liczby co do piksela.

Jak to zrobiłem

Każdą grafikę zamówiłem osobnym zapytaniem przez OpenRouter, poziom wysiłku medium, limit 16 000 tokenów. Dane to wyniki naszego Laboratorium z testu, który opisałem w rankingu najlepszego AI do pisania po polsku. Kod SVG otworzyłem w Chromium przez Playwright, zrobiłem zrzuty i przerobiłem na WebP. Animację nagrałem klatka po klatce, zatrzymując ją w kolejnych momentach, żeby czas był dokładny.

Jedna wpadka powtórzyła się cztery razy na cztery: mimo polecenia „zwróć wyłącznie kod SVG” model owijał odpowiedź w blok Markdown. Przeglądarka takiego pliku nie otworzy, więc trzeba to odciąć, u mnie jednym wyrażeniem regularnym.

Infografika z rankingu: liczby bez jednego błędu

Pełne polecenie:

Narysuj infografikę w czystym SVG (bez zewnętrznych czcionek, obrazków i skryptów), viewBox 0 0 1200 675, do artykułu na polskim blogu o AI.

Temat: „Który model AI pisze najlepiej po polsku?” - ranking 8 najlepszych modeli z testu Laboratorium Promptowego (wrzesień 2026, 16 modeli, 9 zadań pisania, oceny sędziów + reguły).

Dane (model; wynik 0-100; koszt 9 zadań w USD):
1. Claude Opus 5.5; 90,1; 0,248
2. GPT-6 Sol; 86,4; 0,036
3. GPT-6 Astra; 85,3; 0,200
4. Claude Fable 5.1; 83,9; 0,358
5. GPT-6 Luna; 82,8; 0,002
6. Gemini 3.8 Flash; 79,4; 0,023
7. Kimi K3; 78,5; 0,077
8. Gemini 3.1 Pro; 77,8; 0,257

Wymagania:
- poziome słupki proporcjonalne do wyniku (oś od 0 albo wyraźnie zaznaczone, od jakiej wartości startuje), wartość wyniku przy każdym słupku, koszt w osobnej kolumnie,
- wyróżnij najlepszy wynik i najtańszy model z czołówki,
- polskie znaki muszą się wyświetlać poprawnie, liczby z przecinkiem dziesiętnym jak w danych,
- styl: ciemne tło, ostre krawędzie (bez zaokrągleń, bez cieni, bez gradientów „AI”), jeden kolor akcentu, dużo powietrza, czytelne na telefonie,
- w stopce źródło: „Źródło: Laboratorium Promptowego, promptowy.com, 26.09.2026”.

Zwróć wyłącznie kod SVG, bez komentarza przed i po.

Sprawdziłem kod, nie tylko obraz. Słupek Opusa ma 539,6 px, czyli 90,1 razy 6 px minus 1 px na linię osi, i ta sama reguła trzyma się dla wszystkich ośmiu modeli. Osiem wyników i osiem kosztów zgadza się z danymi, przecinki dziesiętne są na miejscu, a model sam dodał opis dostępności w znacznikach title i desc. Słabe punkty wyszły dopiero przy przeskalowaniu do telefonu: najmniejszy tekst miał 13 jednostek, czyli na ekranie 375 px około 4 pikseli. Do tego 12 półpauz i pauz, których w naszych tekstach nie używamy.

Jedna poprawka: co zmienił po uwagach

Drugie zapytanie szło w tej samej rozmowie, z pierwszą wersją w historii:

Dobra robota, ale mam cztery uwagi po sprawdzeniu na telefonie:
1. Na ekranie 375 px szerokości podtytuł, nagłówki kolumn, podziałka osi i stopka są nieczytelne (efektywnie 5-6 px). Żaden tekst nie może mieć mniej niż 22 jednostek w viewBox 1200 szerokości. Możesz usunąć podziałkę osi, jeśli przeszkadza.
2. Koszt jest tylko liczbą, a to najciekawsza część danych. Pokaż go graficznie (np. mały pasek albo kropka na wspólnej skali), żeby było widać, że Luna kosztuje ułamek tego, co Opus.
3. Zamień wszystkie półpauzy i pauzy ([tu w poleceniu oba znaki]) na zwykły dywiz „-”, także w <title> i <desc>.
4. Dodaj trzecie wyróżnienie: GPT-6 Sol jako „najlepsza jakość za cenę” (86,4 pkt za 0,036 USD).
Zachowaj styl, dane i format. Zwróć wyłącznie poprawiony kod SVG.

Wszystkie cztery uwagi zostały spełnione, a liczby nadal się zgadzają (słupki wyniku mają teraz 4 px na punkt). Dopisek o 124-krotnej różnicy model policzył sam i jest poprawny: 0,248 dzielone przez 0,002. Pojawiły się dwie nowe drobne wady: etykieta „Najtaniej” trafiła na pasek wyniku zamiast na pasek kosztu, a liczby dotykają końca szarych torów. Poprawka kosztowała 0,154 USD, czyli więcej niż pierwsza wersja, bo w zapytaniu szła cała poprzednia odpowiedź (4127 tokenów wejścia).

Ilustracja: lama przy laptopie

Narysuj w czystym SVG (bez zewnętrznych obrazków, czcionek i skryptów) ilustrację do artykułu na blogu: lama siedząca przy biurku i pisząca na laptopie. Na ekranie laptopa prosty wykres słupkowy. Obok biurka roślina w doniczce i kubek z parującą kawą.

Styl: płaska ilustracja (flat), ograniczona paleta 5-6 kolorów, ciepłe beże i terakota na ciemnym granatowym tle, bez tekstu na obrazku, bez gradientów i cieni. Lama ma być od razu rozpoznawalna jako lama (długa szyja, uszy jak banany, wełniste futro), sympatyczna, w pozie 3/4.

viewBox 0 0 1200 675. Zwróć wyłącznie kod SVG.

Lama jest rozpoznawalna od razu, paleta ma dokładnie 6 kolorów, a w komentarzu w kodzie obrazek na ścianie nazywa się „Andy”, co jest żartem o Andach. Kompozycja ma jednak błędy, których nie popełniłby ilustrator: ekran laptopa jest zwrócony do widza, więc lama pisze na komputerze, którego nie widzi, kubek chowa się za liśćmi rośliny, a ciało lamy to kolumna z futra bez nóg. Na to zadanie model myślał najdłużej (5916 tokenów) i było najdroższe z czterech.

Animowany wykres bez JavaScriptu

Napisz animowany SVG (czysty SVG z animacją CSS albo SMIL, bez JavaScriptu i zewnętrznych zasobów), viewBox 0 0 1200 675: pionowy wykres słupkowy, którego słupki „wyrastają” od osi po kolei w ciągu ok. 2,5 sekundy, a po dojściu do wysokości nad każdym pojawia się wartość. Po animacji wykres zostaje w stanie końcowym (bez pętli).

Dane - wynik w teście pisania po polsku (0-100):
Opus 5.5 - 90,1; GPT-6 Sol - 86,4; GPT-6 Astra - 85,3; Fable 5.1 - 83,9; GPT-6 Luna - 82,8

Tytuł nad wykresem: „Wynik w teście pisania po polsku”. Ciemne tło, ostre krawędzie, jeden kolor akcentu dla pierwszego słupka. Polskie znaki muszą działać. Oś Y od 0, z podziałką co 20. Zwróć wyłącznie kod SVG.

Najtańsze i najszybsze zadanie (0,06 USD, 29,6 s) wyszło najczyściej. Model wybrał animację CSS, 10 osobnych animacji z opóźnieniami co 0,4 s. Wysokości słupków to dokładnie 4,45 px na punkt, więc słupek Opusa ma 400,9 px. Jedyna różnica wobec polecenia: ostatnia wartość pojawia się po 2,85 s, a nie po 2,5 s. Plik SVG ma 27 razy mniej bajtów niż nagranie tej samej animacji.

SVG z modelu czy generator obrazów

Gdzie SVG z Opusa 5.5 wygrywa, na podstawie tego testu:

• Liczby i proporcje. 16 z 16 wartości poprawnych, geometria zgodna co do dziesiątej części piksela w obu wersjach.
• Tekst. Napisy są prawdziwym tekstem, więc polskie znaki nie mają prawa się rozsypać, a wyszukiwarka i czytnik ekranu je odczytają.
• Poprawki. Zmiana jednej liczby to edycja jednej linii, a poprawka po uwagach zachowała wszystkie dane.
• Rozmiar. 4,5-7,4 KB na grafikę, animacja bez pliku wideo.

Gdzie przegrywa:

• Ilustracja. Płaskie kształty, zero faktury i światła, błędy w logice sceny.
• Czcionki. Model podaje listę krojów systemowych, więc na urządzeniu bez nich napisy mogą wyglądać inaczej i zmienić szerokość.
• Publikacja. WordPress domyślnie nie przyjmuje plików SVG w bibliotece mediów, dlatego tutaj pokazuję zrzuty w WebP.

To opinia redakcji: infografiki z danymi i proste animacje wykresów zlecałbym modelowi językowemu, a ilustracje do artykułów generatorowi obrazów. Generatory nadal mylą litery w napisach, a z drugiej strony lama za 0,20 USD i 2 minuty to drogi sposób na płaski obrazek. Więcej o samym modelu w przewodniku po Claude Opus 5.5, a o cenie za token w tekście ile kosztuje Opus 5.5.

Najczęstsze pytania

Czy Claude Opus 5.5 umie rysować w SVG?

Tak. W moim teście zrobił infografikę, ilustrację i animowany wykres, a wszystkie trzy pliki otworzyły się w przeglądarce bez błędów po odcięciu obudowy Markdown.

Czy liczby na infografice z Opusa 5.5 są poprawne?

Na dwóch wersjach infografiki wszystkie 16 wartości zgadzało się z danymi, a długości słupków były proporcjonalne co do dziesiątej części piksela.

Ile kosztuje grafika SVG z Opusa 5.5?

Od 0,06 USD za animowany wykres do 0,20 USD za ilustrację. Cztery grafiki z jedną poprawką kosztowały razem 0,513 USD, czyli 1,98 zł.

Czy polskie znaki działają w SVG z modelu?

Tak, bo napisy są tekstem, a nie obrazem. Wygląd zależy jednak od czcionek zainstalowanych u odbiorcy.