Deset fajlova, jedan razgovor: ceo identitet brenda iz jednog dizajn sistema

Deset dizajn fajlova, dizajn sistem, početna stranica, četiri YouTube thumbnail-a, LinkedIn baner, CV spreman za štampu i tehnički vodič od četrdeset strana. Sve iz jednog razgovora.

Situacija je poznata svakom programeru koji uz posao vodi i kanal: treba ti portfolio sajt. Treba ti thumbnail za svaki video, baner za kanal, LinkedIn baner i CV koji ne izgleda kao da ga je napravio uređivač teksta. Svaka od tih stvari je drugi alat, drugi fajl, drugi skup odluka.

Zato se pouzdano završi ovako: thumbnail koristi jedan font, sajt drugi, CV ono što je ponudio uređivač teksta, a LinkedIn baner je star dve godine. Pojedinačno nijedno nije pogrešno. Zajedno se ne čitaju kao jedna osoba.

Dizajner to rešava tako što jednom napravi sistem i primeni ga svuda. To košta između 2.000 i 8.000 evra i nedelje usaglašavanja. Ovaj video pokazuje isti put u jednom razgovoru.

Alat

Radim u Claude Design-u na Max planu, sa Opus 5. Claude Design ti umesto prozora za ćaskanje daje površinu: opišeš šta hoćeš, to se napravi, a ti ispravljaš vizuelno.

Dosta toga radi i na Pro planu. Max je ovde bitan jer je ova jedna sesija napravila deset fajlova kroz vrlo mnogo iteracija.

I jedna poštena napomena: sve promptove sam kucao na nemačkom. Na ekranu se vide na nemačkom, a izgovorena verzija je engleska.

Faza 1 · Dizajn sistem

To je jedina faza koja zaista nešto znači. Sve posle nje je varijacija na nju.

Moj prvi prompt bio je jedna rečenica:

Napravi moj koncept za dizajn sistem i početnu stranicu kao HTML fajl,
sa hover ponašanjem i animacijama u UI i UX.

Da je pogodio, videlo se iz prvog odgovora: „Sve specifikacije su tu. Smernice plus brand kit — gradim odmah." Bez potpitanja. Bez „reci mi više o svom brendu".

Odnos je ceo trik: jedna rečenica prompta, hiljadu redova priloga. Posao je u dokumentima, ne u formulaciji.

Dokumenti

Pitanje uvek stigne, pa evo: osnova je bilo osam viralnih promptova sa Threads-a, koji su svi obećavali isto — sajt vredan 10.000 dolara, Three.js, sisteme čestica, staklasti izgled, filmske 3D svetove.

Zadržao sam njihovu strukturu: vizuelni identitet, arhitektura, pokret, način pripovedanja, stek, performanse, tok rada, analiza. Ta lista je zaista dobra. Izvedbu sam potpuno zamenio, iz tri razloga, a sva tri sam upisao u sopstvene smernice:

1. Protivreči pozicioniranju. Ja prodajem softver spreman za produkciju. Izgled za nagradnu smotru signalizira kreativnu uslugu.
2. Košta tačno ono što mi treba. Moja arhiva stručnih tekstova nalazi se preko pretrage. Three.js scene koštaju vreme učitavanja i mogućnost indeksiranja.
3. Sam 3D izgled je postao šablon. Više ne razlikuje; signalizira da je neko pratio trend.

Rezultat

Prvo rampa boja, osam stepenika: paper, mist, hairline, ash, slate, steel, graphite, ink. To je cela paleta. Nijedne akcentne boje u rampi.

Ispod nje semantički sloj: background, border, text, text muted, text faint. Komponente dodiruju samo taj sloj, nikada sirove vrednosti. Razlog je neposredno praktičan: prelazak sa svetlog na tamno je time jedna izmena.

Jedno pravilo iz toga vredi ukrasti:

Ash u svetlom režimu nije boja teksta. U tamnom režimu je podrazumevana boja teksta. Isti token, suprotan posao.

Ko za sopstveni sistem zapiše rečenice te vrste, prestaje da pravi greške u kontrastu.

A pitanje gde se boja uopšte pojavljuje ima tačno jedan odgovor: kod isticanja sintakse, na traci relevantnosti u pretrazi i na tačkama statusa u dijagramu. To je cela lista. Boja se pojavljuje samo tamo gde stoje stvarni podaci.

Tipografija: Archivo i JetBrains Mono. Archivo je promenljiv grotesk sa osom širine — naslovi idu na širokom rezu, tekst na normalnom. Jedna porodica, dve širine. Vizuelno je to tačno ono što prodajem: jedna osoba koja pokriva punu širinu.

Onda je Claude isporučio nešto što nisam tražio: četiri otvorene odluke iz mojih sopstvenih dokumenata, povezane kao živi prekidači. Svetlo ili tamno. Ahromatski ili sa akcentnom bojom. Archivo široko ili u normalnoj širini. Mreža od dvanaest kolona uključena ili isključena. Našao je mesta na kojima su moji sopstveni dokumenti protivrečili sami sebi i od njih napravio prekidače.

Faza 2 · Početna

Isti fajl, drugi prikaz. Hero, jedan red ispod, red sa stekom u mono slogu, dva dugmeta.

Moja prva ispravka bila je jedna rečenica:

Volim simetričan dizajn. Hero bi bio bolji simetričan, sa mojim portretom
u sredini.

Posle toga je hero bio simetričan, portret gore po sredini, a ispod njega kiker, naslov, uvod i oba poziva na akciju na jednoj osi. Sve ostalo nepromenjeno — i baš mi je to bitno.

Druga ispravka je napravila stranicu:

Sada poboljšaj UX. Odeljci ispod hero sekcije su iz UX ugla dosadni. Stil i
pismo su kvalitetni, UX nije.

Četiri odeljka su time prešla iz čitljivih u upotrebljive:

• Dijagram arhitekture dobio je četiri čvora, upotrebljiva tastaturom, i brojač slojeva.
• Odeljak o celom lancu postao je prekidač: tri pružaoca usluga ili jedna osoba. Klikneš i lanac se vidno raspadne. Prodajni argument se pokaže umesto da se tvrdi.
• Četiri kartice usluga se otvaraju, a brojevi kao dokaz se pri skrolovanju penju — 900 milisekundi, ili odmah na konačnoj vrednosti ako je uključeno smanjeno kretanje.
• Pretraga je dobila primere upita kao čipove, sa brojem pogodaka i vremenom odgovora iznad rezultata.

Kretanje je zaključano na celoj stranici: 120 milisekundi za promenu stanja, 180 za promenu koja nosi značenje, 260 pri ulasku u vidno polje, jednom po elementu. Ctrl + K otvara pretragu.

Izvoz je jedan fajl od 558 kilobajta. Radi van mreže, sa ugrađenim fontovima, izvršnim delom i svakom interakcijom.

Faza 3 · Thumbnail-i

Tu postaje zanimljivo. Isti razgovor mi je i dalje bio otvoren, pa sam zatražio nešto sasvim drugo:

Za sledeći video mi treba thumbnail u ovom stilu.

[ceo scenario videa o self-hostingu]

Nisam objašnjavao stil niti ponovo prilagao brand kit. Vratile su se tri table: 1280 × 720, pozadina ink, Archivo u debljini 700 i širini 120 verzalom, podnaslovi u mono slogu, tanke linije, bez senki. Signalno žuta se pojavljuje na tačno dve stvari — na oznaci cene i na strelici.

Uz to tri predloga naslova i preporuka koji uzeti. I protivargument na jedan moj refleks: Nirnberg ne spada u naslov ni u thumbnail. Lokacija je detalj za opis, a ne razlog za klik.

Sada pošten deo: to je trajalo oko petnaest krugova. Ne zato što je Claude grešio, nego zato što sam ja menjao mišljenje. Moje stvarne primedbe zvučale su ovako:

Prevelik sam. Manje, ali u boji. Strelica treba da pokazuje na NetCup logo. Pomeri NetCup logo da Vercel i GitHub imaju strelicu odmah pored. Prelaz mora biti širi. Mora da počne nekoliko piksela desnije. Još malo levo — i sada imamo savršenu grafiku.

To je tok rada. Nije jedan prompt, nego razgovor u kojem si ti umetnički direktor.

Ostala tri thumbnail-a išla su po istom obrascu i svaki je koštao samo jedno lepljenje, jer je sistem već bio u kontekstu.

Faza 4 · Baneri i CV

Isti razgovor, još četiri zadatka.

Baner kanala, 2560 × 1440 — i rešio je ono na čemu svi padnu: sve čitljivo stoji unutar sigurne zone za telefon od 1546 × 423. Portret i pozadina namerno izlaze van nje, da bi se pojavili samo na televizoru i velikim ekranima. U tablu je ugrađen prekidač koji prikazuje sve tri sigurne zone.

LinkedIn baner, 1584 × 396. Mojih pet kompetencija preneto sa starog banera, bez seta ikonica. Sve počinje na x = 396, da profilna slika i ime nikada ništa ne prekriju.

CV, u svetlom dizajnu, četiri strane spremne za štampu: beli papir, ista mreža tankih linija, Archivo verzalom za imena i pozicije, JetBrains Mono za datume i oznake odeljaka. Žuta samo kao marker na tekućem redu.

A onda nešto što nisam planirao: nalepio sam kompletan prateći materijal za video o self-hostingu — sedam faza, sve komande, celo rešavanje problema — i zatražio dokument za štampu u istom stilu. Tamna naslovna strana kao thumbnail, zatim svetli tekst, blokovi koda na mist pozadini, tekuće zaglavlje i podnožje na svakoj strani, svaka faza počinje na novoj strani, blokovi koda i tabele se ne prelamaju. To je dokument za čiji bih prelom inače nekoga platio.

Šta nije išlo

1. Jedan thumbnail je pao dvaput. Moja primedba na prvu verziju bila je oštra: strelica visi u licu, a logotipi nisu ni centrirani ni uredno postavljeni. Druga verzija je logotipe stavila na belu traku — takođe pogrešno. Tri pokušaja, i i dalje je najslabiji od četiri.
2. Prelaz na thumbnail-u za server je sam tražio desetak krugova. To nije spora veštačka inteligencija. Tako izgleda umetnička režija kada si precizan.
3. Jedna provera je usred sesije pala tiho i morala je da se ponovo pokrene.
4. Stavka koja je bitna ako ovo probaš sam: na kraju sam zamolio Claude da izveze ceo razgovor. Odgovor je bio da istorija razgovora nije čitljiva — ono što se može izvesti jeste projekat: svi dizajn fajlovi, izvozi, otpremljeni materijali i resursi kao zip. Dakle posao, ne razgovor. Ako hoćeš da ti promptovi budu dokumentovani, čuvaj ih sam usput.

Tri pravila

1. Premesti unos napred. Moj prompt je bio jedna rečenica, prilozi hiljadu redova. Taj odnos je ceo trik.
2. Ostani u istom razgovoru. Svaki thumbnail posle prvog koštao me je jedno lepljenje, jer je sistem već stajao u kontekstu. Onog trenutka kada otvoriš novi razgovor, brend objašnjavaš ispočetka.
3. Zapiši šta je zabranjeno — ne samo šta hoćeš. Bez senki. Radijusi samo 2 i 4 piksela. Boja samo tamo gde stoje stvarni podaci. Ograničenja su ono što izlaz čini određenim umesto uopštenim.

Zaključak

Rečenica na koju se sve svodi: veštačka inteligencija ti ne daje doslednost. Dizajn sistem ti daje doslednost. Veštačka inteligencija ga samo primenjuje brže nego što bi ti mogao.

Pa je pravi savet ovaj: napiši dokumente o svom brendu pre nego što napišeš ijedan prompt. Brand kit, smernice za dizajn, opis projekta. To je možda dva sata posla, a menja svaki izlaz koji posle toga dobiješ.