Użycie AI zmienia programowanie, ale czasmi robi nas w bambuko. W ostatnich miesiącach w społeczności programistów coraz częściej słyszy się o tzw. „vibe codingu”. To nowy trend polegający na wykorzystywaniu sztucznej inteligencji (głównie dużych modeli językowych, czyli LLM) do wspierania codziennego procesu tworzenia oprogramowania. Ale czy zawsze wychodzi nam to na dobre? Czy AI może nas ogłupić? Odpowiedź niestety brzmi: czasem tak. Sam od jakiegoś czasu używam modeli LLM zaczynają od GPT-3.5 poprzez API i widzę jaką zmiana zaszła w modelach LLM w zakresie generowania kodu.

Dziś opowiem, jak wyglądał mój praktyczny test różnych modeli AI w zadaniu wygenerowania kompletnej małej aplikacji frontendowej w typescript. Wnioski? W sumie dosyć ciekawe.

Czy korzystanie z AI w programowaniu może ogłupiać?

Tak. Niestety.
Kiedy zbyt często polegamy na gotowych odpowiedziach modeli, tracimy czujność i kreatywność. To trochę jak używanie kalkulatora do najprostszych działań matematycznych – szybko zapominasz, jak liczyć w głowie i wtedy b00000001+b00000010 stanowi problem.

Co ciekawe, różne modele generują kod na różne sposoby, te nowe przeprowadzają proces „myslenia” starsze od razu generują odpowiedź. To pokazuje, jak dana AI działa i co ma „pod maską” i jakie ma ograniczenia, ile kosztuje użycie. Dlatego w swoich testach stawiam na:

  • użycie modeli lokalnych (które uruchamiam na własnym komputerze),
  • modeli dostępnych przez API

Założenia testu: budujemy edytor gradientów CSS

Celem testu nie było posiadanie pięknej, w pełni działającej aplikacji po długim procesie developmentu wspieranego AI.
Chciałem sprawdzić coś znacznie bardziej fundamentalnego:

  • Jak modele LLM generują kod na samym początku.
  • Czy uwzględniają wszystkie założenia i wymagania opisane w promptach.
  • Czy efekt początkowy ma jakąkolwiek realną wartość programistyczną**, czy może jest to jedynie losowa sieczka, która wymagałaby napisania wszystkiego od nowa.

W skrócie: czy wygenerowany kod od razu jakoś wygląda i działa, czy raczej tylko dobrze wygląda.

Całość testu realizowałem na IntelliJ IDEA z wykorzystaniem pluginu Continue, w którym mam:

  • pokonfigurowane dostępy do modeli lokalnych przez OLAMA,
  • oraz podłączone modele zewnętrzne przez API różnych providerów.

W przypadku modeli wspierających tzw. agenta (czyli automatyzację działań w IDE), pozwalałem im na samodzielne działanie, iterowanie i poprawianie aplikacji.
Jeżeli agent nie był dostępny, pełniłem rolę „copy-paste” operatora – poprawiałem kod ręcznie lub wprowadzałem poprawki na podstawie błędów i odpowiedzi AI.

Pogadajmy!
Masz do mnie jakieś pytanie, ofertę współpracy albo ciekawy projekt? Skorzystaj, z poniższego formularza kontaktowego.

Modele poddane testom

Testowałem zarówno modele lokalne, jak i dostępne przez API:

Modele lokalne:

  • DeepSeek R1 – 14B, 32B
  • Gemma 3 – 12B, 27B

Modele API:

  • Anthropic Claude Sonnet 3.7
  • Gemini Flash 2.0
  • GPT-4.1, GPT-4.1 mini, GPT-4.1 nano
  • GPT-4.0, GPT-4.0 mini, GPT-3 mini

Wyniki testu – kto wygenerował najlepszą appkę?

Najlepsi w klasie:

  • Anthropic Claude Sonnet 3.7 – wygenerował najładniejszy, najbardziej kompletny edytor
  • GPT-4.1 – pozytywne zaskoczenie
  • Gemini Flash 2.0 – również dobrze działał

Dobrze sobie poradziły:

  • GPT-4.1 mini oraz nano (wersje „odchudzone”, ale nadal dają radę) – tutaj w sumie lekkie zaskoczenie że wersja mini dała spokojnie sobie radę, w sumie to jest spoko stosunek cena/jakość .
  • Modele lokalne – tutaj lepiej zachowała się Gemma 3 – 27b .

Poszczególne aplikacje wygenerowane przez modele LLM:

Anthropic

Claude Sonnet 3.7

css-gradient-maker-claude-3.7

OpenAI

GPT 4.1

css-gradient-maker-gpt-4.1

GPT 4.1 Mini

css-gradient-maker-gpt-4.1-mini

GPT 4.1 Nano

css-gradient-maker-gpt-4.1-nano

GPT o3 Mini

css-gradient-maker-gpt-o3-mini

GPT o1 Mini

css-gradient-maker-gpt-o1-mini

GPT 4o

css-gradient-maker-gpt-4o

Google

Gemini Flash 2.0

css-gradient-maker-geminiflash-2

Lokalne modele

Gemma3 27b

css-gradient-maker-gemma3-27b

Gemma3 12b

css-gradient-maker-gemma3-12b

DeepSeek R1 32b

css-gradient-maker-deepseek-r1-32b

DeepSeek R1 14b

css-gradient-maker-deepseek-r1-14b

Na zakończenie

Warto też dodać, że pojawia się coraz więcej nowych modeli, a przetestowanie ich wszystkich robi się powoli niemożliwe. Szczególnie w kontekście programowania zauważyć można, że nowe modele oferują coraz większe okna kontekstowe. Teoretycznie to super, bo pozwala na dostarczenie większej ilości kodu bazowego do analizy i pracy, ale… na pierwszy rzut oka tego nie widać, że płacimy coraz więcej za zużyte tokeny. I to jest główna wada podejścia „wrzućmy wszystko do LLM, niech się bawi”.

Zawsze na końcu powinien stać człowiek, który wybierze co, gdzie i jak przetworzyć. Owszem, narzędzia takie jak Cursor IDE, Continue, Wizard oraz inne IDE wspierane przez AI są świetnym wsparciem, ale trzeba dobrze rozumieć co się robi i dlaczego. AI może pomóc, ale to człowiek powinien podejmować decyzje. Użycie modeli LLM daje mnóstwo frajdy, ale trzeba podejść do niego z głową. Modele pomagają przyspieszyć pracę, jednak to my jesteśmy odpowiedzialni za jakość kodu od pierwszej linijki.

Prompt użyty do generowania aplikacji

Write a complete application in React, Ant Design, and TypeScript based on the specification below. All messages, variable names, and comments in the application must be in **English**.  
You are working in a **Windows 11** environment; set terminal commands to generate minimal output whenever possible.

## **1. Project Description (Case Study)**
**Name:** CSS Gradient Maker - gpt-4.1-mini  
**Type:** Frontend-only tool (React SPA)  
**Package:** css-gradient-maker-gpt-4.1-mini  
**Main application directory:** css-gradient-maker-gpt-4.1-mini  
**Application language:** English

**Goal:**  
Create an interactive, visual tool for generating CSS gradients. The project should demonstrate the developer’s skills in:

- UI/UX design
- Dynamic style manipulation
- Code generation
- Component reactivity
- Responsive layout
- Integration with external UI components (Ant Design)

## **2. Used Technologies**

| Technology        | Purpose                                        |
|--------------------|------------------------------------------------|
| TypeScript         | Frontend programming language                 |
| React              | Application engine (SPA)                      |
| Ant Design         | UI components (forms, buttons, colors)         |
| CSS Modules        | Local styling for components                  |
| LocalStorage       | Storing user settings                         |
| Clipboard API      | Copying CSS code to clipboard                  |

## **3. Application Layout**

### Desktop View (2 columns):
|-----------------------------|------------------------------|
| GradientEditor (form) + Random Button | GradientPreview (live) + History |
|-----------------------------|------------------------------|
|        CSSOutput + CopyButton (full-width row)              |
|-------------------------------------------------------------|

### Mobile View (1 column):
[ GradientPreview ]
[ GradientEditor ]
[ CSSOutput + CopyButton ]

## **5. GradientEditor – Logic and UI**

**1. Gradient Type:**
- Component: `Radio.Group` with 3 options:
    - `linear` (default)
    - `radial`
    - `conic`

**2. Colors:**
- `ColorPicker` (Ant Design)
- Minimum 2 colors, maximum 5
- Add color with a `+` button
- Remove color with an `x` icon
- UI: Colors displayed as `badges` or circles

**3. Direction / Angle:**
- For `linear`:
    - `Slider` 0°–360°
    - Dropdown with preset directions (`to right`, `to bottom`, etc.)
- For `radial`/`conic`:
    - `Select` with positions (`center`, `top left`, etc.)

**UX/Notes:**
- Directions dynamically adapt to the selected gradient type
- Tooltips explain each selected direction

## **6. GradientPreview – Appearance and Logic**

**Function:**
- Displays the live preview of the generated gradient

**Responsiveness:**
- Full width on mobile
- 50% width on desktop

## **7. CSSOutput – CSS Code**

**Example of generated code:**
background: linear-gradient(90deg, #ff0000, #0000ff);

**Style:**
- `pre` tag with `monospace font`
- Background: `#fff`, padding, rounded corners
- Allow text selection

## **8. CopyButton – Copying CSS**

**Description:**
- Ant Design button with `CopyOutlined` icon
- Action:

navigator.clipboard.writeText(cssString)

**Feedback:**
- Tooltip: “Copied!” (disappears after 2 seconds)

## **9. LocalStorage Handling**

**Goal:** Store the last settings:
- Gradient type
- Colors
- Direction
- Angle

**Mechanism:**
- In `useEffect`: whenever any setting changes
- On load: check for existing data → load into state

useEffect(() => {
  localStorage.setItem('gradientSettings', JSON.stringify(settings));
}, [settings]);

### **9b. Implement optionally:**
- **Gradient presets** – Quick selection of ready-made gradient schemes
- **Dark / Light mode** – Switch with memory of user setting
- **Export as image** – Ability to download as PNG
- **History of used gradients**
- **Random gradient** – Button to generate a random combination

## **10. Style and UI Design**
| Element            | Style / UX                                                    |
|--------------------|----------------------------------------------------------------|
| Application background | Light: `#f5f5f5`                                         |
| UI Colors          | Neutral: `#1890ff`, `#000`, `#fff` (Ant Design default)        |
| Font               | System UI sans-serif (`Roboto`, `Helvetica Neue`)              |
| Transitions        | `transition: all 0.3s ease`                                   |
| Icons              | Ant Design icons (`PlusOutlined`, `DeleteOutlined`)            |
| Contrast           | High – light background, dark UI                              |
| Responsiveness     | Mobile-first, fluid grid, collapse editor on mobile            |