Kako kodirati uz ChatGPT ili Gemini: vodič za početnike kroz vibe coding

Vibe coding znači da riječima opišeš što želiš, a ChatGPT ili Gemini napiše kod. Kao početnik traži cijele datoteke, jedan mali korak odjednom i spremaj svaku radnu verziju. Besplatno proširenje AI Code Harvester popiše sve datoteke iz razgovora i preuzme ih jednim klikom, pa ne skrolaš tražeći kod. Radi u pregledniku i ne treba račun.

Što je vibe coding i gdje se početnici zaglave

U vibe codingu kod ne pišeš sam. Kažeš AI-ju što da napravi (stranicu za moju pekarnicu), on napiše datoteke, ti ih isprobaš i kažeš što promijeniti. To je stvaran način da počneš jer rezultat vidiš za nekoliko minuta. Problem dolazi nakon sat vremena. Razgovor je postao jako dugačak, kod je razbacan po mnogo odgovora, a ti skrolaš gore-dolje tražeći zadnju verziju svake datoteke. Kopiraš, lijepiš, gubiš nit i pokvariš nešto što je radilo. Navike u nastavku rješavaju većinu toga.

Sedam navika koje olakšavaju kodiranje uz AI

1. Počni jednom jasnom rečenicom. Reci što gradiš, za koga i kako treba izgledati. Jednostranična stranica za šetača pasa, s fotografijom, cijenama i kontakt-formom. Jasan cilj vrijedi više od dugog prompta.
2. Svaki put traži cijelu datoteku. Napiši: Uvijek prikaži cijelu datoteku, ne samo promijenjene retke. Djelomični isječci glavni su razlog zašto početnici zalijepe kod na krivo mjesto.
3. Neka AI imenuje svaku datoteku. Zamoli ga da iznad svakog bloka koda napiše ime i nastavak, npr. index.html ili style.css. Spremi to kao trajno pravilo: u ChatGPT-u idi na Settings → Personalization → Custom Instructions.
4. Mijenjaj jednu stvar odjednom. Jedan zahtjev, pa test. Ako tražiš deset promjena odjednom i nešto pukne, nećeš znati koja je kriva.
5. Vrati poruku o grešci u razgovor. Kad je stranica prazna ili gumb ništa ne radi, zalijepi točan tekst greške i napiši popravi ovo. Ne moraš je još razumjeti.
6. Spremi radnu verziju prije svake veće promjene. Preuzmi datoteke, stavi ih u mapu i čuvaj tu kopiju. Ako sljedeći odgovor sve pokvari, vraćaš se za minutu.
7. Pitaj zašto, jednostavnim riječima. Reci objasni što radi ovaj dio kao da sam nov. Uz razgovor pomaže i kratak tečaj osnova, jer tako primijetiš kad AI griješi.

Pomoćnik koji ukida skrolanje: AI Code Harvester

• Popis datoteka umjesto dugog razgovora. Panel prikazuje svaki blok koda iz zadnjeg odgovora kao red s imenom datoteke i obojenom točkom za vrstu.
• Kopiraj ili skoči. Svaki red ima gumb Copy i gumb sa strelicom koji te odvede do tog bloka u razgovoru.
• Odaberi što spremaš. Za svaku datoteku štikliraj ili odštikliraj Include in download.
• Jedan klik za sve. Download all as ZIP sprema cijeli odgovor kao jedan ZIP. Želiš zasebne datoteke? Prebaci na 1-by-1.
• Korisni dodaci. Gumb Jump to Bottom, klizač prozirnosti da panel ne zaklanja razgovor i gumb koji objašnjava postavljanje.
• Ostaje gdje ga staviš. Povuci ga, promijeni mu veličinu ili ga minimiziraj, a može pamtiti položaj.

Možeš mijenjati i izgled. U postavkama biraš jednu od četiri boje naglaska: ljubičastu, plavu, zelenu ili jantarnu, te biraš kamo idu datoteke: u mapu AI_Code_Harvester unutar Preuzimanja, izravno u Preuzimanja ili pitaj svaki put. Postavljanje traje minutu: dodaj ga iz Chrome web-trgovine i otvori ChatGPT ili Gemini.

Zašto ga instalirati od prvog dana

Dok si nov, praviš mnogo malih pokušaja, a svaki daje datoteke. Bez pomoćnika svaki je ručni posao: skrolaj, označi, kopiraj, zalijepi u datoteku, imenuj. S Harvesterom je to jedan klik, a datoteke već imaju prava imena, pa ti mapa projekta ostaje uredna od prvog dana. Tako je navika šest (spremi radnu verziju) gotovo besplatna, i zato je proširenje najkorisnije na početku. Besplatno je, radi samo na chatgpt.com i gemini.google.com, a razgovori ostaju na tvom računalu. Više na stranici AI Code Harvester.

Iskreno o ograničenjima

• Skuplja samo blokove koda. Ako AI da samo PDF, sliku ili link na datoteku, na ekranu nema ničega za spremiti.
• Ne stvara mape. ZIP je ravan, pa datoteke u mape slažeš sam.
• Ne piše i ne popravlja kod. To je i dalje posao AI-ja, a testiranje je tvoje.
• Canvas prikaz (bočni prozor koji neki razgovori otvore) možda neće biti pronađen. Zamoli AI da zalijepi kod u razgovor.

Već znaš dio sa spremanjem u ZIP? Postupak korak po korak je u našem vodiču za preuzimanje AI koda kao ZIP.

Dobro je znati prije nego počneš

FAQ