Vibe coding
Pilíř A · Koncept 00Draft
3 min čtení

Tipy do promptu

Kvalita promptu = kvalita výstupu. Vibe coding je v 80 % o tom, jak jasně dokážeš zadat, co chceš. Špatný prompt → AI hádá → frustrace → spálené kredity. Tady jsou techniky, které dramaticky zvyšují úspěšnost.

Anatomie dobrého promptu#

Dobrý prompt obsahuje čtyři vrstvy:

  1. Cíl — co chci dosáhnout
  2. Kontext — komu / kdy / proč
  3. Mantinely — co použít / nepoužít
  4. Příklad — referenční vzor
flowchart LR
  G[Cíl] --> K[Kontext] --> M[Mantinely] --> P[Příklad]
  P -->|→| AI[AI generuje]

Špatný vs dobrý prompt — konkrétně#

❌ Špatně#

Udělej formulář.

AI hádá: jaký? Co tam má být? Kam se data ukládají? Jak má vypadat? → Generický výsledek, který stejně budeš dvakrát předělávat.

✅ Dobře#

Přidej kontaktní formulář na stránku /kontakt. Pole: jméno (povinné), e-mail (povinné, validovaný), zpráva (textarea, max 500 znaků). Po odeslání: ulož do Supabase tabulky contacts a zobraz potvrzovací zprávu. Vizuálně ve stejném stylu jako zbytek webu — minimální, dva sloupce na desktopu, jeden na mobilu. Inspiraci ber ze stránky stripe.com/contact.

AI ví všechno, co potřebuje. Výsledek je trefa na první pokus.

Pět technik, které opravdu fungují#

1. Konkrétní příklad > obecný popis#

Místo „hezké tlačítko" → „tlačítko stylem jako primární CTA na linear.app — zaoblené 8px, výrazná barva, hover s mírným zesvětlením".

Reference na konkrétní web nebo screenshot zlepšuje shodu s tvou představou o 80 %.

2. Persona + role#

Začni prompt rolí: „Jsi senior front-end engineer s 10 lety zkušeností v React. Když odpovídáš, dáváš přednost čitelnosti před chytrostí."

AI se sladí na tvůj styl. Užitečné zejména pro Claude Code / Cursor.

3. Few-shot příklady#

Když potřebuješ konzistenci napříč daty:

Vygeneruj 20 ukázkových uživatelů ve formátu JSON. Vzor:

JSON
{"name": "Jan Novák", "email": "jan@example.cz", "role": "manager"}
{"name": "Petra Svobodová", "email": "petra@example.cz", "role": "analyst"}

Zachovej tento formát, jména střídej Mužská/Ženská, role z: manager, analyst, designer.

AI dostane vzor a kopíruje strukturu spolehlivě.

4. Iterativní upřesňování přes „proč to udělalo X"#

Když výsledek není dobrý, neopravuj ho hned. Nejprve se zeptej:

Proč jsi zvolil/a tenhle přístup místo jiného?

AI vysvětlí logiku — a v jejím vysvětlení obvykle zjistíš, kde to popsalo špatně. Pak prompt upřesni.

5. Rozseč velký úkol na menší#

Místo „udělej celý e-shop" → „udělej landing page → produktovou stránku → košík → checkout" v sérii promptů.

Velké promptz mají velkou plochu, kde se může něco pokazit. Malé promptz vidíš okamžitě, zda fungují.

Co nezapomenout zmínit#

  • Cíl — k čemu má funkce sloužit
  • Cílový uživatel — pro koho je projekt
  • Tone of voice — formální / přátelský / profesionální
  • Technické mantinely — knihovny preferované / zakázané
  • Mobile-first? — pokud ano, řekni explicitně
  • Datový tok — kam se data ukládají, odkud se čtou
  • Edge cases — co se má stát při chybě / prázdném stavu

Jak strukturovat prompt — šablona#

Ulož si tuhle šablonu a doplňuj při každém větším promptu:

# Cíl
[Co konkrétně chci, aby vzniklo / co se má změnit]

# Kontext
[Pro koho je to určené, na jakou stránku, v jaké části aplikace]

# Specifikace
- Pole / komponenty / funkce
- Validace, omezení
- Vizuální styl (reference + popis)

# Technické požadavky
- Použít: [knihovna, framework]
- Nepoužívat: [...]
- Datový tok: [odkud → kam]

# Příklad / reference
[Odkaz na web, screenshot, mockup, nebo popis]
Tip

Tuhle šablonu si nech v textovém souboru nebo Notesu a kopíruj. Po pár použitích ji budeš znát zpaměti — a tvoje promptz vyskočí kvalitativně.

Anti-patterny — co nedělat#

  • ❌ „Udělej to lépe" bez specifikace, co je „lépe". AI hádá → spálené kredity.
  • ❌ Negative-only prompty („nedělej to takhle"). Místo toho řekni, co chceš.
  • ❌ Dlouhý jeden monolitický prompt přes 1000 slov. Rozsečej.
  • ❌ Předpokládat, že AI pamatuje předchozí session. V Lovable má kontext jen aktuální projekt; v Claude Code aktuální konverzace.
  • ❌ Přejít z jednoho nástroje na druhý a říct „udělej to samé". Každý nástroj má jiné UI / možnosti.

Pro Claude Code specifika#

V terminálu nebo IDE prostředí prompty fungují jinak — AI vidí celý kód, takže:

  • Místo „přidej formulář na kontakt" → „přidej formulář do src/routes/kontakt.tsx".
  • Reference konkrétními soubory šetří tokeny a zlepšuje přesnost.
  • Můžeš si vyžádat plán před implementací: „nejprve mi popiš, co bys udělal/a, ať schválím, a pak proveď".

Otestuj se#

Kvíz

Kterým z těchto promptů maximalizuješ úspěšnost při generování nové stránky?