FrissGemini: november 17-től a Gemekből készségek lesznekÖsszes hír

Képernyő megtervezése szavakkal

Nem tudod lerajzolni, mit szeretnél? A prompt kikérdez, majd olyan pontos képernyőleírást ír, amelyből a kódoló AI elsőre azt építi meg, amire gondoltál.

Vibe codingKezdőAjánlott eszközök: ChatGPT, Claude, GeminiFrissítve:

Töltsd ki a saját adataiddal

A sárgával jelölt részeket cseréld a saját adataidra.

Segíts leírni egy képernyőt úgy, hogy a kódoló AI pontosan azt építse meg, amit szeretnék. Melyik képernyőről van szó, és mire való: [KÉPERNYŐ] Ki használja, és milyen eszközön: [FELHASZNÁLÓ ÉS ESZKÖZ] Mit kell tudnia itt megcsinálni, fontossági sorrendben: [TEENDŐK] Ami már megvan az alkalmazásban (színek, stílus, más képernyők): [MEGLÉVŐ STÍLUS] Egy oldal vagy alkalmazás, aminek a kinézete tetszik, és miért: [MINTA] Így dolgozz: 1. Tegyél fel legfeljebb négy kérdést arról, ami a kinézethez és a működéshez hiányzik. 2. Írd le a képernyőt felülről lefelé: milyen részekből áll, mi van bennük, mi a legfontosabb elem, amire a szemnek először kell esnie. 3. Írd le, mi történik minden gombnál és mezőnél, a hibás kitöltést is. 4. Külön írd le a három állapotot: amikor még nincs adat, amikor tölt, és amikor hiba történt. 5. Mondd meg, mi változzon telefonon. 6. A végén foglald össze egy bemásolható kérésben a kódoló AI-nak. Ne találj ki új funkciót. A leírás legyen konkrét: „nagy, zöld gomb jobbra lent”, ne „modern, letisztult felület”. A mintaként megadott oldalt ne másold, csak azt vedd át, amit megneveztem belőle.
Megnyitás: ChatGPTMegnyitás: ClaudeMegnyitás: Gemini

EllenőrzésCtrl + Enter: másolás

Példa: kitöltve, mintaválasszal

Képernyő
Az edzésnaplóm kezdőképernyője
Felhasználó és eszköz
Én magam, telefonon, az edzőteremben, egy kézzel
Teendők
1. Új edzés indítása; 2. a legutóbbi edzés megnézése; 3. a heti összesítő
Meglévő stílus
Sötét háttér, narancs kiemelés
Minta
A telefonom óra alkalmazása, mert kevés dolog van rajta és nagy a gomb
Mintaválasz (Claude)

Négy kérdés: 1. Az új edzés előre mentett sablonból indul, vagy üresen? 2. A heti összesítőben mi a fontos: alkalmak száma, idő vagy megemelt súly? 3. Kell-e belépés? 4. Jobb- vagy balkezes vagy?

(válaszok: sablonból; alkalmak száma; nem kell; jobbkezes)

A képernyő felülről lefelé

  1. Fejléc: balra a mai dátum kis betűvel, más semmi.
  2. Heti összesítő: hét kis kör egy sorban (H-V); amelyik napon volt edzés, az narancs. Alatta egy sor: „3 edzés ezen a héten”.
  3. Legutóbbi edzés: egy kártya a sablon nevével, a dátummal és az időtartammal. Koppintásra megnyílik a részletes nézet.
  4. Fő gomb: a képernyő alján, teljes szélességben, legalább 64 képpont magas narancs gomb: „Edzés indítása”. Ez a legfontosabb elem, a hüvelykujj itt éri el.

Működés: a fő gombra felugrik a sablonok listája; egy sablonra koppintva azonnal indul az edzés.

Állapotok

  • Nincs adat: a kártya helyén: „Még nincs edzésed. Indítsd el az elsőt!”
  • Tölt: a kártya helyén szürke sáv, a gomb már használható.
  • Hiba: „Nem sikerült betölteni. Húzd le a frissítéshez.”

Kérés a kódoló AI-nak: „Építsd meg a kezdőképernyőt a fenti leírás szerint. Csak ezt a képernyőt módosítsd; a sablonlista egyszerű felugró lista legyen. Sötét háttér, narancs kiemelés, a meglévő betűtípus.”

Szemléltető minta, Claude segítségével készült: azt mutatja, milyen jellegű és felépítésű válaszra számíthatsz. A többi ajánlott eszközzel a prompt várhatóan ugyanígy használható, de nem mindegyikben próbáltuk ki. A te eredményed más lesz. Hogyan készülnek a példák?

Miért működik?

A „legyen szép és modern” kérésre az AI az átlagos sablonfelületet adja. A részletes, felülről lefelé haladó leírás viszont egyértelmű, és kiderül belőle, mi a legfontosabb elem a képernyőn.

Az üres, a töltő és a hibaállapot a leggyakrabban kifelejtett rész: ha nem kéred, az alkalmazás üres fehér képernyőt mutat, amikor valami nem sikerül.

Mire figyelj?

  • Egyszerre egy képernyőt terveztess. Ha az egész alkalmazást kéred egyben, a részletek elvesznek.
  • Más alkalmazás kinézetét egy az egyben lemásoltatni jogi és ízlésbeli gond is; csak az elvet vedd át.

Tippek eszközönként

ChatGPT, Claude, Gemini
Kézzel rajzolt vázlatot is lefotózhatsz és feltölthetsz; kérd, hogy előbb írja le szavakkal, mit lát rajta.

Folytasd ezekkel

Ugyanabban a beszélgetésben küldd el, a válasz után.

  • Írd le ugyanígy a sablonlistát és az edzés közbeni képernyőt.
  • Mit egyszerűsítenél, hogy még kevesebb koppintással induljon az edzés?

Kapcsolódó promptok

Összes vibe coding prompt

Biztonsági audit fenyegetésmodellel

Végigveszi, ki és hogyan élhetne vissza az alkalmazásoddal, majd a kódot a tipikus hibákra nézi át: jogosultság, bemenet, titkok, függőségek. Súlyosság szerint rangsorol, és jelzi, amit a beillesztett részből nem lát.

Vibe coding

Tesztterv a kritikus felhasználói utakra

Kockázat szerint rangsorolja, mit kell tesztelni az alkalmazásodban, majd megírja a legfontosabb teszteket. Kézzel elvégezhető ellenőrzőlistát is ad azoknak, akik nem írnak automata tesztet.

Vibe coding

Hibakeresés módszeresen, feltevésekkel

Megállítja a találgatós javítgatást: a tünetekből rangsorolt feltevéseket állít fel, mindegyikhez egy ellenőrző lépést ad, és csak a bizonyított ok után javít. A javítás a lehető legkisebb marad.

Vibe coding

Projektterv mérföldkövekkel és elfogadási feltételekkel

Az ötletedből olyan tervet ír, amelyet a kódoló AI lépésenként végre tud hajtani: hatókör, adatmodell, mérföldkövek, és mindegyiknél az, hogy miből látod, hogy kész. Külön listázza, ami szándékosan kimarad.

Vibe coding