DESIGN.md przed i po: ta sama strona od AI z plikiem i bez

Krótka odpowiedź

Z DESIGN.md agent trzymał się naszego stylu w każdym z trzech scenariuszy: zero kolorów spoza palety, zero złych fontów, zero zaokrągleń. Bez pliku na tych samych trzech stronach zmierzyliśmy 290 elementów z kolorem spoza palety, 98 zaokrąglonych elementów i 234 z 234 elementów tekstowych w innym foncie.

To wygląda jak nokaut, ale to jedna próba na wariant, nieznany model i pomiar tylko tego, co da się policzyć. Niżej opisujemy dokładnie, jak to zrobiliśmy i gdzie są dziury.

Jak to zrobiliśmy

Wzorowaliśmy się na teście Vercela: ta sama prośba raz z plikiem, raz bez, pierwsza próba, bez losowania od nowa. 16.10.2026 około 12:50 nasz Web Developer uruchomił sześć osobnych, świeżych sesji agenta AI do kodowania z niejawnym wbudowanym modelem. Każdy dostał jeden prompt: wygeneruj samodzielny plik HTML po polsku dla QKI Analytics, cały CSS w środku, nie wymyślaj klientów, liczb ani cen, tylko oznaczone placeholdery.

Wersja „z” miała na końcu promptu dopisany pełny DESIGN.md z poprzedniego tekstu (jego pierwotną wersję, przed naszą późniejszą poprawką o jednym okrągłym wyjątku). Wersja „bez” dostała sam prompt i według zapisu przebiegów miała zakaz czytania plików i korzystania z sieci.

Co dokładnie liczy skrypt

Skrypt otwiera każdą stronę w Chromium (Playwright, okno 1440 px, sieć zablokowana), przechodzi po wszystkich widocznych elementach i czyta style wyliczone przez przeglądarkę. Liczy elementy, które mają kolor tekstu, tła lub ramki spoza dziewięciu kolorów DESIGN.md (albo z przezroczystością), elementy tekstowe, których pierwszy font nie jest Signal Grotesk ani Signal Serif, elementy z zaokrąglonym narożnikiem oraz gradienty i cienie.

Strony robiliśmy też z emulacją trybu jasnego i ciemnego. Żadna z sześciu stron na to nie reaguje, zrzuty wychodzą identyczne, więc pokazujemy po jednym.

Wyniki

Wszystkie liczby z jednego uruchomienia skryptu 16.10.2026.

Scenariusz 1: landing

Bez pliku: ciemne tło jak u nas, ale przycisk z gradientem turkus–fiolet, żółte etykiety placeholderów i zaokrąglone karty. Z plikiem: tylko kolory z DESIGN.md i proste narożniki.

Scenariusz 2: cennik

Najbardziej widoczna różnica. Bez pliku agent zrobił jasną stronę z niebieskimi przyciskami i zaokrąglonymi kartami, czyli klasyczny cennik z internetu. Z plikiem: ciemne karty, przyciski z prostymi narożnikami, cytat kursywą.

Scenariusz 3: case study z formularzem

Bez pliku: jasna strona z niebieskim gradientem w nagłówku, zaokrąglone karty i pola formularza (8 px), a w CSS osobny zielony i czerwony na komunikaty formularza. Z plikiem: formularz w palecie i bez zaokrągleń.

Czego ten test nie dowodzi

Uczciwie, bo te ograniczenia są poważne:

Co z tego wynika dla ciebie

W naszym małym teście jedna rzecz zadziałała bardzo wyraźnie: twarde wartości (kolory, fonty, narożniki) agent przeniósł z DESIGN.md jeden do jednego. Bez nich zrobił to, co robi większość AI, czyli generyczną stronę z niebieskimi przyciskami i zaokrągleniami.

Zrób własny test, zanim komuś obiecasz efekt: ta sama prośba z plikiem i bez, zrzuty, prosta lista kontrolna. Skrypt pomiaru i surowe wyniki są do pobrania (linki w źródłach na dole).