Vibe coding
Pilíř B · Workshop 03
7 min čtení

Claude aplikace - pokračování

Proč to děláme#

Claude Code je často rychlejší a přesnější na konkrétní úpravy kódu než pokyny v Lovable. V minulém workshopu jsme se naučili propojit ho s GitHub repozitářem a dnes půjdeme dál. Aplikace Claude dostala za poslední dobu spoustu vylepšení a hlavně: rozdíl mezi tím, kdo s Claude Code "nějak pracuje" a kdo s ním pracuje efektivně, je obrovský. Dnes si projdeme tipy, triky a zásady, díky kterým z něj dostaneš maximum.

Co budeme potřebovat#

  • Aktivní Claude účet s předplatným, které zahrnuje Claude Code.
  • Projekt napojený na GitHub (z Workshopu 2).
  • Ideálně desktop aplikaci Claude (záložka Code v levém panelu). Vše ale funguje i v prohlížeči na claude.ai/code.

1. Pracuj v cloudu, ne v lokální složce#

Když v aplikaci zakládáš novou session, můžeš si vybrat, jestli Claude pracuje v lokální složce na tvém počítači, nebo v cloudu. Doporučuji jako výchozí volbu cloud:

  • Claude si stáhne čerstvou kopii projektu přímo z GitHubu. Nepotřebuješ GitHub Desktop ani nic klonovat.
  • Práce běží v izolovaném prostředí na serverech Anthropicu. Nemůže ti tedy nic rozbít v počítači a klidně můžeš experimentovat.
  • Session běží dál, i když zavřeš notebook. Můžeš ji sledovat a řídit i z mobilní aplikace Claude.
  • Můžeš mít rozjetých víc sessions najednou, každou nad jinou úpravou, a navzájem si nepřekáží.
  • Hotové změny Claude sám nahraje do nové větve na GitHubu (viz bod 6). Žádné ruční nahrávání.

Lokální složka dává smysl hlavně tehdy, když chceš, aby Claude pracoval s něčím, co máš jen u sebe v počítači.

2. Environments - vlastní prostředí pro tvůj projekt#

Cloudové sessions běží v takzvaném environment (prostředí). V nastavení Claude Code si můžeš vytvořit vlastní prostředí a v něm určit třeba:

  • Environment variables - například API klíče, které tvůj projekt potřebuje ke spuštění. Nemusíš je pak vkládat do konverzace, což je bezpečnější.
  • Přístup k internetu - jestli smí session volat externí služby, nebo má být uzavřená.

Dobrá zpráva: tohle vůbec nemusíš řešit. Výchozí prostředí je pro webové projekty (jako ty z Lovable) přednastavené a funguje rovnou. Pokud nevíš, nic nenastavuj a jeď v defaultu. K vlastním environments se vrátíš, až někdy narazíš na to, že projekt potřebuje API klíč.

3. Modely: Opus na plán, Sonnet na exekuci#

Vpravo dole u pole pro psaní si můžeš vybrat model a effort (kolik úsilí model úloze věnuje). Zjednodušené pravidlo:

  • Opus - nejchytřejší, ale pomalejší a dražší. Skvělý na přemýšlení: plánování větších funkcí, rozbor problému, který se nedaří vyřešit.
  • Sonnet - rychlý a spolehlivý parťák na každodenní práci. Když je jasné, co se má udělat, Sonnet to udělá.
  • Haiku - nejrychlejší a nejlevnější, na drobnosti (změna textu, barvy, jednoduchá oprava).

Důležité: modely můžeš přepínat přímo v probíhající konverzaci, nemusíš kvůli tomu začínat novou. Konverzace i vše, co už Claude ví, zůstává. Osvědčený postup u větších úprav tedy je: přepni na Opus a nech ho vytvořit plán, plán si přečti a odsouhlas, pak přepni na Sonnet a nech ho plán zrealizovat. Ušetříš limity a výsledek bývá stejně dobrý. Zároveň to s přepínáním nepřeháněj, na běžnou práci je Sonnet s výchozím effortem úplně v pohodě.

Tip

Plan mode: u nejasných nebo větších zadání požádej Claude, ať nejdřív jen naplánuje, co udělá, a nic nemění. Plán si přečteš, upravíš a teprve pak ho pustíš do práce. U drobností (změna, kterou popíšeš jednou větou) plán přeskoč.

4. CLAUDE.md - tvoje stálé instrukce pro Claude#

CLAUDE.md je soubor v projektu, který si Claude přečte na začátku každé konverzace. Technické věci o projektu si Claude zjistí sám, na to ho nepotřebuje. Smysl souboru je jinde: napíšeš do něj svoje pravidla spolupráce, která platí pořád, a nemusíš je pak opakovat v každé konverzaci. Například:

  • "Drž řešení co nejjednodušší. Nepřidávej žádné funkce, o které jsem nepožádal."
  • "Kde to jde, používej na průzkum subagenty." (viz bod 8)
  • "Větší úpravy nejdřív naplánuj a plán mi předlož ke schválení."
  • "Vysvětluj mi věci jednoduše, nejsem programátor."

Nemusíš ho zakládat ručně. Napiš v konverzaci /init a Claude soubor vytvoří sám, pak do něj jen doplníš svoje pravidla. A drž ho krátký: když je moc dlouhý, Claude instrukce v záplavě textu přehlíží.

Tip

Do repozitáře si můžeš přidat i další dokumenty, třeba popis strategie produktu nebo designové principy, a v CLAUDE.md na ně jen odkázat ("designové principy jsou v souboru principy.md, řiď se jimi"). Claude si je pak načte, když je potřebuje.

5. Kdy začít novou konverzaci (to kolečko vpravo dole)#

Vpravo dole vedle výběru modelu je kolečko, které ukazuje zaplnění kontextu, tedy kolik toho Claude v této konverzaci "drží v hlavě". Čím plnější kontext, tím horší výsledky: Claude začne zapomínat, co jste řešili na začátku, a plete se.

Zásady:

  • Jedna konverzace = jeden úkol. Neřeš v jedné session opravu přihlašování, novou stránku a změnu barev. Na každý úkol novou session.
  • Když se kolečko blíží zaplnění, dokonči rozdělanou věc a začni novou konverzaci. Případně si nech od Claude vypsat shrnutí, co je hotovo a co zbývá, a vlož ho do nové session jako startovní zadání.
  • Pravidlo dvou pokusů: když Claude dvakrát opravuješ v té samé věci a pořád to není ono, nepokračuj. Konverzace je "zanesená" nepovedenými pokusy. Začni novou session a napiš zadání líp, rovnou s tím, co ses z nepovedených pokusů dozvěděl.

6. Větve - jak Claude Code pracuje s tvým projektem#

Každá session v cloudu si vytvoří vlastní větev (branch) tvého projektu, tedy kopii, ve které dělá změny, aniž by sahala na hlavní větev main. To je obrovská výhoda:

  • main zůstává vždy funkční verze, která běží na produkci.
  • Když se úprava nepovede, větev prostě zahodíš a nic se nestalo.
  • Když se povede, větev sloučíš (merge) do main. Buď přes GitHub Desktop, jak jsme si ukázali ve Workshopu 2, nebo požádáš Claude, ať vytvoří pull request, a sloučíš ho jedním kliknutím přímo na GitHubu.

Po sloučení do main se změny propíšou všude: na hosting (produkci) i do Lovable, pokud ho pořád používáš.

Pozor

Do main slučuj jen úpravy, které sis vyzkoušel. Proklikej si výsledek v náhledu (viz další bod) a teprve když funguje, slučuj. Main je vždy poslední funkční verze tvé aplikace.

7. Vestavěný prohlížeč - náhled úprav bez kopírování kódu#

Desktop aplikace Claude má vlastní vestavěný prohlížeč. Claude v session spustí tvůj projekt (typicky přes npm run dev) a ty si výsledek rovnou zobrazíš v náhledu. Můžeš si web proklikat a zkontrolovat úpravy, ještě než cokoliv sloučíš do main.

A funguje to i obráceně: Claude se do běžící aplikace umí sám podívat, udělat si screenshot a zkontrolovat po sobě, že úprava opravdu vypadá, jak má. Klidně mu napiš: "Spusť aplikaci, podívej se na výsledek a ověř, že je to správně." Nemusíš tak už kvůli každé kontrole spouštět VS Code. Na finální otestování před nasazením se ale lokální spuštění pořád hodí.

8. Subagenti - pošli si na průzkum pomocníky#

Claude umí na dílčí úkoly vypustit subagenty, samostatné pomocníky, kteří pracují ve vlastní konverzaci a vrátí jen výsledek. Hlavní využití je research: prozkoumání kódu nebo hledání informací spolyká spoustu kontextu, a když ho odvede subagent, tvoje hlavní konverzace zůstane čistá (vzpomeň si na kolečko z bodu 5).

Nemusíš nic nastavovat, stačí kouzelná formulka v zadání:

  • "Pošli subagenta, ať prozkoumá, jak v projektu funguje přihlašování, a shrň mi to."
  • "Pošli paralelně subagenty na research: jeden porovná služby pro posílání e-mailů, druhý zjistí, jak je na tom náš projekt s SEO."

Druhý skvělý trik: až Claude dokončí větší úpravu, nech čerstvého subagenta zkontrolovat hotovou práci. "Pošli subagenta, ať zreviduje provedené změny a najde chyby." Čerstvý pohled odhalí věci, které autor po sobě nevidí.

Zásady efektivní práce - shrnutí#

  1. Malá, konkrétní zadání. Ne "oprav přihlašování", ale "po odhlášení a novém přihlášení se uživateli nenačte profil - najdi příčinu a oprav ji". Jedna úprava = jedno zadání.
  2. Správné pořadí u nových věcí: základ → funkce → design. U nové aplikace nebo větší funkce nech Claude nejdřív navrhnout základ (jak bude věc uvnitř fungovat, s jakými daty pracuje), pak stav funkce jednu po druhé, a vzhled dolaďuj až nakonec. Kosmetika se mění snadno, předělávat základy je drahé.
  3. Drž to jednoduché. Claude se rád rozjede a přidává funkce, o které jsi nestál. Pak jen pálíš tokeny na jejich odstraňování. Piš do zadání "udělej jen tohle, nic navíc" a dej si to i natrvalo do CLAUDE.md (viz bod 4).
  4. Nejdřív plán, pak práce (u všeho, co není drobnost). Plán si přečti a klidně ho uprav.
  5. Chtěj důkaz, ne tvrzení. Ať Claude úpravu sám ověří: spustí aplikaci, podívá se na výsledek, ukáže screenshot. "Hotovo" bez ověření nestačí.
  6. Vyzkoušej, pak slučuj. Každou úpravu si proklikej v náhledu, a teprve když funguje, slučuj do main. Main je vždy poslední funkční verze.
  7. Jedna konverzace = jeden úkol a po dvou nepovedených opravách začni znovu s lepším zadáním.
Tip

Nic z toho nejsou zákony, ale výchozí návyky. Časem získáš cit pro to, kdy plán přeskočit, kdy zapojit Opus a kdy prostě začít načisto.