Jeśli poprosisz AI o stworzenie grafiki produktowej, to będzie ona wyglądać tak:

Albo tak:

A jeśli poprosisz o stronę WWW, to będzie ona wyglądała tak jak ta lub ta. Obydwie strony są mojego autorstwa, a właściwie oczywiście autorstwa sztucznej inteligencji.

Albo popatrzcie na te strony: nie moja strona desingmd.me oraz moja strona NotifyButton.

Jeśli otworzycie te strony, zobaczycie jak bardzo są do siebie podobne jeśli chodzi o kolorystyke i fonty, a nawet układ. Pewnie też zauważycie, że są podobne do wielu innych, jakie widzieliście ostatnio w sieci. Podobnie z grafikami wyżej: ciemne tło i neonowe kolory. Stylów graficznych Ai używa oczywiście więcej, ale nie trzeba być wyjątkowo obytym z generatorami by szybko rozpoznawać czy coś jest zrobione przez człowieka, czy przez AI.

Modele językowe, jeśli im tego wyraźnie nie wskazać, zawsze będą generować podobnie.

Jak wyrwać się z szablonowego wyglądu? DESIGN.md przychodzi z pomocą.

DESIGN.md to plik, w którym gromadzimy opis w formacie markdown definiujący wszystko odnośnie wyglądu: kolory (z podziałem na główne i uzupełniające), użyte czcionki, rozkład elementów na stronie czy obrazku, ogólny styl i szczegóły tego stylu. Plik taki potrafi być naprawdę długi i im dłuższy, tym lepiej.

Następnie plik taki załączamy do prompta - czy to jako załącznik jeśli używamy czatów online, czy też umieszczamy w katalogu projektu, jeśli używamy narzędzi lokalnych takich jak Cloude Code czy Cursor. Teraz AI, generując stronę czy obrazek dla nas, będzie się trzymać (a przynajmniej powinna) wytycznych odnośnie wyglądu.

Jak stworzyć DESIGN.md?

Jeśli właśnie pomyśleliście o tym by już zacząć pisać ręcznie taki plik, to bez przesady. :) Nie po to mamy AI by z niej nie skorzystać.

Zawsze zacznij od znalezienia strony albo stron, którymi chcesz się inspirować. A potem:

Sposób pierwszy: poproś swojego czata/agenta

Zrób zruzt ekranu, wklej do AI i zwyczajnie poproś:

Na bazie załączonego zrzutu ekranu stwórz plik DESIGN.md.

I tyle.

Sposób drugi: użyj narzędzi online.

Ot, choćby wspomniany wyżej designmd.me, ale jest tego więcej. To pierwszy przykład z Google jaki znalazłem. Nie wiem czy naprawdę musisz z tego skorzystać: w tle taka strona robi dokładnie to samo, co ci sugerowałem w sposobie pierwszym.

Tip: poprawiaj i miksuj.

Minus takiego podejścia jak wyżej jest taki, że:

a) AI wciąż potrafi halucynować lub być niedokładne, więc plik DESIGN.md nie musi dokładnie opisywać tego, co było na rzucie ekranu

Przeczytaj więc taki plik i sam wprowadź poprawki, jeśli widzisz, że coś jest nie tak.

b) DESIGN.md inspirowany stroną sprawi, że twoja strona będzie kopią.

Jeśli poprosisz o DESIGN.md na bazie strony Allegro, na pewno będziesz miał taki sam układ i takie same pomarańcze jak ma Allegro.

Dlatego też najlepiej miksuj: wybierz nie jedną a kilka stron do inspiracji, wygeneruj dla nich pliki DESIGN.md, a potem wrzuć je wszystkie do kolejnego zapytania i poproś o kolejny DESIGN.md wskazując co chcesz z pierwszego designu, co z drugiego i tak dalej.