Obraz wart jest tysiąca tokenów

Częścią mojej pracy w Repaint jest sprawienie, żeby AI generowało strony internetowe, które naprawdę dobrze wyglądają. To zaskakująco trudne. Modele AI wpadają w te same wizualne schematy raz za razem. Jest to tak powtarzalne, że "strona AI" staje się rozpoznawalną estetyką.

Przetestowaliśmy dziesiątki sposobów na przełamanie tego wzorca. Po drodze uzyskaliśmy dużo głębsze zrozumienie modeli, którym chcieliśmy się podzielić.

To dość standardowa strona AI prosto z pudełka: generyczny styl, minimalna treść i nadużywane układy. I oczywiście, okazjonalny nieczytelny przycisk.

Dałem jej tylko minimalną ilość wskazówek. Może to wydawać się niesprawiedliwe, ale uważam, że to dobry test. Oczywiście, gdybyś ciągle dawał kolejne polecenia, mógłbyś stopniowo zamienić to w świetną stronę. Ale wtedy to ty robisz cały projekt. Model tylko koduje. Większość ludzi nie umie tego robić. Prawdziwy przełom nastąpi, gdy AI będzie w stanie projektować bez konieczności podawania każdego detalu przez człowieka.

Domyślny styl AI to w zasadzie uniwersalny problem. Tutaj widać go na stronie terapeuty. Można by pomyśleć, że strona terapeuty wyglądałaby diametralnie inaczej. Ale nie, po prostu tworzy mniej więcej tę samą stronę z zielonymi przyciskami.

Jak można poprawić strony AI?

Systemy projektowe

Oczywisty pierwszy krok: przygotuj wcześniej kolory, czcionki, zaokrąglenia i cienie. Trudno podjąć te decyzje dobrze, gdy patrzysz tylko na kod. Rozpoczęcie AI z dobrym zestawem oznacza mniej okazji do popełnienia błędów.

Pomaga trochę. Mniej jest rażących błędów kolorystycznych. I tutaj użył tła z obrazem. Ale ogólnie układy, gęstość treści i ogólna struktura są w zasadzie takie same. System projektowy daje modelowi paletę, ale nie uczy go jak komponować.

Coaching

Inne podejście: daj modelowi duży zestaw instrukcji, jak projektować. Podpowiedz mu, żeby robił rzeczy, których normalnie by nie robił. Główny chatbot Claude AI ma umiejętność, która robi dokładnie to:

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:

Purpose: What problem does this interface solve? Who uses it?
Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
Constraints: Technical requirements (framework, performance, accessibility).
Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

Production-grade and functional
Visually striking and memorable
Cohesive with a clear aesthetic point-of-view
Meticulously refined in every detail

Frontend Aesthetics Guidelines
Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

To prawdziwa poprawa. Ogólny układ jest podobny do poprzedniego. Ale w końcu wygląda jak prawdziwa strona terapeuty, z delikatniejszymi czcionkami i unikalnym stylem przycisków. Gdybyś wstawił swoje zdjęcie, spokojnie mógłbyś to opublikować.

W naszych testach odkryliśmy, że niestandardowe instrukcje nie naprawiają powtarzalności. Model nadal sięga po te same wzorce, więc wciąż wygląda jak standardowa strona AI. Tylko dużo ładniejsza wersja.

Poza tym trudniej jest unikać nadużywanych wzorców, niż sugerowałby prompt Claude'a. Mówią:

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts)

Więc zamiast tego model nadużywa innych czcionek, takich jak Jost i Cormorant Garamond. A teraz nie radzi sobie w sytuacjach, gdy Inter jest właściwym wyborem. W zasadzie możesz wymusić porzucenie złych nawyków, ale tak czy inaczej, model będzie robił te same rzeczy w kółko.

Obrazy referencyjne

A co gdyby pominąć słowa zupełnie i po prostu pokazać modelowi, czego chcesz? Podać mu zrzut ekranu projektu, który ci się podoba, i poprosić o zbudowanie czegoś podobnego.

To była pierwsza taktyka, przy której model stworzył nowe układy poza tymi samymi 2-3, które zawsze robi. Sam z siebie nigdy nie robi obrazu na pół ekranu.

Obrazy to super wydajny sposób na przekazanie dużej ilości informacji. Model wyłapuje układ, odstępy, relacje kolorystyczne i gęstość jednocześnie: rzeczy, których nigdy nie pomyślałbyś opisać w prompcie. Ale to jest kruche. Nie potrafi odtworzyć złożonych układów ani animacji. A jeśli model musi uzupełnić więcej treści poza referencją, wraca do domyślnego stylu.

Szablony kodu i stylu

To chyba najbardziej brutalna metoda. Po prostu daj mu kod. Tak właśnie robi teraz ChatGPT. Używa biblioteki szablonów, gdy tworzy strony.

Kiedy to robisz, jakość oczywiście znacząco rośnie. Po prostu dajesz AI gotowe odpowiedzi. Ale większość ludzi nie ma gotowego kodu na to, czego chce. Więc to jest głównie taktyka dla twórców platform, którzy budują narzędzia dla innych ludzi.

Chociaż jest pewien haczyk:

"Make a therapist website"

"Make a lawyer website"

"Make a plumber website"

"Make a bakery website"

Jeśli dasz AI przykłady, tworzy strony, które wyglądają zadziwiająco podobnie, i robi minimalne korekty potrzebne do dopasowania kontekstu. Więc kiedy ChatGPT teraz tworzy strony, niezależnie od promptu, wygląda to jak ten sam startup technologiczny.

Niestety, nawet ze wszystkimi tymi taktykami, nie jestem pewien, czy stworzyliśmy coś lepszego niż generyczny szablon z Wix.

Auto-iteracja

Dlaczego nie pozwolić modelowi spojrzeć na własny wynik i go poprawić? Projektant na Wix może przecież robić wiele iteracji.

Teoretycznie to rozwiązuje wszystko. W praktyce pracuje przez 20 minut, wydaje $10 na tokeny i szybko się zatrzymuje. Na przykład kazałem mu iterować na stronie lighthouse z wcześniejszego przykładu. Nawet nie zauważył nieczytelnego przycisku.

Auto-iteracja to prawdopodobnie przyszłość. Ale dzisiejsze modele nie są jeszcze na to gotowe.

Po zbadaniu wszystkich tych podejść mieliśmy realne opcje na poprawę stylu. Ale poza tym poczuliśmy, że rozumiemy działanie modeli AI na dużo głębszym poziomie.

Czego się nauczyliśmy o modelach AI

Modele naprawdę preferują domyślny styl

W modele wbudowana jest domyślna estetyka. To jak przeciętna strona internetowa z danych treningowych. Za każdym razem, gdy podejmuje decyzję, używa domyślnego stylu, chyba że ma wyraźny powód, żeby tego nie robić. Dlatego strony AI są tak rozpoznawalne i dlatego auto-iteracja tak naprawdę nikdzie nie prowadzi. Model nie zbliża się do unikalnego projektu. Zbliża się do domyślnego. Jeśli chcesz, żeby AI przełamało wzorzec, musisz dać mu coś, co wyrwie go z domyślności, jak obrazy referencyjne albo próbki kodu.

Obrazy mają większą przepustowość niż słowa

Trudno jest kierować modelem za pomocą słów. Możesz napisać akapit o tym, że chcesz coś "czystego, nowoczesnego, z dużą ilością białej przestrzeni", ale to prawie bezcelowe. Zawsze kończysz z domyślnym stylem. Obrazy mogą sprawić, że model stworzy unikalne projekty, ponieważ niosą więcej informacji. Zrzut ekranu koduje setki mikrodecyzji o odstępach, kolorach i układach, których nie da się zdefiniować słowami. Więc jeśli nie masz próbek kodu, obrazy referencyjne to najlepszy sposób na sterowanie AI.

Wstępne budowanie to kompromis

Każda taktyka, którą wypróbowaliśmy, była formą podejmowania decyzji za AI z wyprzedzeniem. Kiedy dajesz mu więcej, możesz podnieść pułap jakości, ale traci elastyczność. Przygotowanie się na każdy potencjalny przypadek użycia ma znaczenie tylko dla ogólnej platformy jak Repaint. Jeśli robisz to dla siebie, możesz (i powinieneś) dać AI konkretne referencje, żeby zmaksymalizować jakość wizualną.

Jak tworzyć lepsze projekty z AI

Najprostszym sposobem na uniknięcie generyczności jest danie AI unikalnych referencji wizualnych, takich jak obrazy stron, które ci się podobają, próbki kodu, albo jedno i drugie. Gdy masz już styl, AI powinno być w stanie generować kolejne sekcje, które do niego pasują. To dużo skuteczniejsze niż ciągłe dawanie kolejnych promptów, co robi większość ludzi.

Albo jeśli szukanie referencji i budowanie stylu cię onieśmiela, możesz wypróbować Repaint. Zbudowaliśmy dużą bibliotekę stylów z próbkami kodu i zmiennymi projektowymi. AI nie jest zmuszane do jednego stylu, bo mamy wiele opcji.

Szerzej, w każdym wizualnym narzędziu AI, czy to projektowanie aplikacji, generowanie obrazów, czy generowanie wideo, zamiast mówić "zrób to bardziej premium", spróbuj dać więcej zrzutów ekranu i przykładów. To dramatycznie skuteczniejsze.