Kuva kertoo enemmän kuin tuhat tokenia

Osa työtäni Repaintissa on saada tekoäly tuottamaan verkkosivustoja, jotka näyttävät oikeasti hyviltä. Se on yllättävän vaikeaa. Tekoälymallit ajautuvat samoihin visuaalisiin kliseisiin yhä uudelleen. Se on niin johdonmukaista, että "tekoälyverkkosivusto" on muodostumassa tunnistettavaksi estetiikaksi.

Testasimme kymmeniä tapoja murtaa tämä kaava. Matkan varrella saimme paljon syvemmän ymmärryksen malleista, jonka halusimme jakaa.

Tämä on melko tyypillinen tekoälyverkkosivusto suoraan paketista: geneerinen tyyli, minimaalinen sisältö ja ylikäytetyt asettelut. Ja tietenkin ajoittainen lukukelvoton painike.

Annoin sille vain vähän ohjausta. Se saattaa tuntua epäreilulta, mutta mielestäni se on hyvä testi. Tietenkin jos jatkat promptaamista, voisit vähitellen muuttaa tämän hienoksi verkkosivustoksi. Mutta silloin sinä teet kaiken suunnittelun. Malli vain koodaa. Useimmat ihmiset eivät osaa tehdä sitä. Suuri läpimurto on, kun tekoäly pystyy suunnittelemaan ilman että ihminen määrittää jokaisen yksityiskohdan.

Tekoälyn oletustyyli on käytännössä universaali ongelma. Tässä se näkyy terapeutin sivustolla. Luulisi, että terapeutin sivusto näyttäisi dramaattisesti erilaiselta. Mutta ei, se tekee suunnilleen saman sivuston vihreillä painikkeilla.

Miten tekoälyverkkosivustoja voi parantaa?

Suunnittelujärjestelmät

Ilmeinen ensimmäinen askel: esirakenna värit, fontit, pyöristykset ja varjot. Näitä päätöksiä on vaikea saada oikein pelkästään koodia katsomalla. Tekoälyn aloittaminen hyvällä kokoelmalla tarkoittaa vähemmän tapoja epäonnistua.

Se auttaa hieman. Räikeitä värivirheitä tulee vähemmän. Ja tässä se käytti kuvataustaa. Mutta kaiken kaikkiaan asettelut, sisällön tiheys ja yleinen rakenne ovat käytännössä samoja. Suunnittelujärjestelmä antaa mallille paletin, mutta ei opeta sitä sommittelemaan.

Valmennus

Toinen lähestymistapa: anna mallille suuri joukko ohjeita suunnittelusta. Kehota sitä tekemään asioita, joita se ei normaalisti tekisi. Claude AI:n päächatbotissa on taito, joka tekee juuri tämän:

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.

Se on todellinen parannus. Yleinen asettelu on samankaltainen kuin aiemmin. Mutta se näyttää vihdoin oikealta terapeutin sivustolta, pehmeämmillä fonteilla ja ainutlaatuisella painiketyylillä. Jos vaihtaisit oman kuvasi, voisit julkaista tämän sellaisenaan.

Testeissämme havaitsimme, että mukautetut ohjeet eivät korjaa toistoa. Malli turvautuu silti samoihin kaavoihin, joten se näyttää edelleen käytännössä tavalliselta tekoälysivustolta. Vain paljon kauniimmalta versiolta siitä.

Lisäksi ylikäytettyjen kaavojen välttäminen on vaikeampaa kuin Clauden prompti antaisi ymmärtää. He sanovat:

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

Joten sen sijaan malli ylikäyttää muita fontteja kuten Jost ja Cormorant Garamond. Eikä se enää pysty käsittelemään tilanteita, joissa Inter on oikea valinta. Käytännössä voit pakottaa pois sen huonot tavat, mutta tavalla tai toisella se tekee samoja asioita toistuvasti.

Referenssikuvat

Entä jos ohitat sanat kokonaan ja näytät mallille mitä haluat? Syötä sille kuvakaappaus suunnittelusta, josta pidät, ja pyydä sitä rakentamaan jotain vastaavaa.

Tämä oli ensimmäinen taktiikka, jossa malli loi uusia asetteluja niiden samojen 2-3:n ulkopuolelta, joita se aina tekee. Se ei koskaan tee puolinäytön kuvaa itsestään.

Kuvat ovat erittäin tehokas tapa jakaa paljon tietoa. Malli poimii asettelun, välistyksen, värisuhteet ja tiheyden kerralla: asioita, joita et koskaan keksisi kuvailla promptissa. Mutta se on hauras. Se ei pysty toistamaan monimutkaisia asetteluja tai animaatioita. Ja jos mallin täytyy täyttää enemmän sisältöä referenssin ulkopuolelta, se palaa oletustyyliin.

Koodi- ja tyylimallit

Tämä on ehkä raaimman voiman idea. Anna sille vain koodia. Tätä ChatGPT tekee juuri nyt. Se käyttää mallikirjastoa tehdessään sivustoja.

Kun teet tämän, laatu nousee tietenkin paljon. Annat vain tekoälylle vastaukset. Mutta useimmilla ihmisillä ei ole valmiiksi koodia haluamalleen. Joten tämä on lähinnä taktiikka alustarakentajille, jotka tekevät työkalua muille ihmisille.

Tosin siinä on yksi ongelma:

"Make a therapist website"

"Make a lawyer website"

"Make a plumber website"

"Make a bakery website"

Jos annat tekoälylle esimerkkejä, se tekee verkkosivustoja, jotka näyttävät huomattavan samankaltaisilta, ja tekee vain minimaaliset muutokset kontekstin mukaisesti. Joten kun ChatGPT tekee sivustoja juuri nyt, promptista riippumatta, se näyttää samalta teknologia-startupilta.

Valitettavasti edes kaikilla näillä taktiikoilla en ole varma, olemmeko tehneet mitään parempaa kuin geneerinen Wix-malli.

Itsetoisto

Miksi et antaisi mallin katsoa omaa tuotostaan ja parantaa sitä? Wix-suunnittelija saa tehdä monta iteraatiota kuitenkin.

Teoriassa tämä ratkaisee kaiken. Käytännössä se jauha 20 minuuttia, kuluttaa 10 dollaria tokeneihin ja pysähtyy nopeasti. Esimerkiksi annoin sen iteroida aiempaa lighthouse-sivustoa. Se ei edes huomannut lukukelvotonta painiketta.

Itsetoisto on todennäköisesti tulevaisuutta. Mutta nykypäivän mallit eivät ole aivan valmiita.

Kaikkien näiden lähestymistapojen tutkimisen jälkeen meillä oli todellisia vaihtoehtoja tyylin parantamiseen. Mutta sen lisäksi tuntui, että ymmärsimme tekoälymallien toimintaa paljon syvemmällä tasolla.

Mitä opimme tekoälymalleista

Mallit todella pitävät oletustyylistä

Malleihin on sisäänrakennettu oletustyylitajuinen estetiikka. Se on kuin keskimääräinen verkkosivusto harjoitusdatassa. Joka kerta kun se tekee päätöksen, se käyttää oletustyyliä, ellei sillä ole nimenomaista syytä olla käyttämättä. Siksi tekoälysivustot ovat niin tunnistettavia, ja siksi itsetoisto ei oikeasti vie mihinkään. Malli ei lähesty kohti ainutlaatuista suunnittelua. Se lähestyy kohti oletusta. Jos haluat tekoälyn murtavan kaavan, sinun täytyy antaa sille jotain, joka vie sen pois oletuksesta, kuten referenssikuvia tai koodinäytteitä.

Kuvilla on suurempi kaistanleveys kuin sanoilla

Mallin ohjaaminen sanoilla on vaikeaa. Voit kirjoittaa kappaleen siitä, miten haluat "selkeän, modernin, runsaasti tyhjää tilaa", mutta se on lähes hyödytöntä. Päädyt aina oletustyyliin. Kuvat voivat saada mallin tekemään ainutlaatuisia suunnitelmia, koska ne sisältävät enemmän informaatiota. Kuvakaappaus koodaa satoja mikropäätöksiä välistyksestä, väreistä ja asetteluista, joita et voi määritellä sanoilla. Joten ellei sinulla ole koodinäytteitä, referenssikuvat ovat paras tapa ohjata tekoälyä.

Esirakentaminen on kompromissikäyrä

Jokainen kokeilemamme taktiikka oli tapa tehdä päätöksiä tekoälyn puolesta etukäteen. Kun annat sille enemmän, voit nostaa laatukattoa, mutta se menettää joustavuutta. Jokaiseen mahdolliseen käyttötapaukseen valmistautuminen on tärkeää vain yleiskäyttöiselle alustalle kuten Repaint. Jos se on vain sinulle itsellesi, voit (ja sinun pitäisi) antaa tekoälylle tarkkoja referenssejä visuaalisen laadun maksimoimiseksi.

Miten tehdä parempia suunnitelmia tekoälyllä

Yksinkertaisin tapa välttää geneerisyyttä on antaa tekoälylle ainutlaatuisia visuaalisia referenssejä, kuten kuvia sivustoista joista pidät, koodinäytteitä tai molempia. Kun sinulla on tyyli, tekoälyn pitäisi pystyä tuottamaan lisää siihen sopivia osioita. Tämä on paljon tehokkaampaa kuin jatkuva promptaaminen, mitä useimmat ihmiset tekevät.

Tai jos referenssien etsiminen ja tyylin rakentaminen tuntuu pelottavalta, voisit kokeilla Repaintia. Rakensimme suuren kirjaston tyylejä koodinäytteillä ja suunnittelumuuttujilla. Tekoälyä ei pakoteta yhteen tyyliin, koska meillä on paljon vaihtoehtoja.

Laajemmin, missä tahansa visuaalisessa tekoälytyökalussa, olipa kyseessä sovellussuunnittelu, kuvanluonti tai videonluonti, sen sijaan että sanoisit "tee siitä premium-näköisempi", kokeile antaa sille enemmän kuvakaappauksia ja esimerkkejä. Se on dramaattisesti tehokkaampaa.