Claude Code potřebuje Pro nebo Max plán. Odkaz obsahuje referral — pokud si přes něj založíš účet, podpoříš tím tvorbu tohoto obsahu. Na cenu to nemá žádný vliv.
Jak začít vibecodovat
s Claude Code
Od nuly k prvnímu nasazenému projektu za pár hodin. Krok za krokem, bez bullshitu.
André Kohout
Founder Meet&Deal
Nejsem programátor. Ale od začátku roku jsem v terminálu strávil stovky hodin a postavil věci, které by mě dřív stály měsíce a statisíce.
Jmenuju se André Kohout a stojím za Meet&Deal — největší networking eventy v Česku a na Slovensku. Vibecoding jsem objevil v Thajsku na začátku roku, když jsem potřeboval vyřešit blbost — odebírání pozadí z fotek účastníků. Grafici si za to účtovali nesmysly. Tak jsem si řekl, že to zkusím sám. A otevřel se mi úplně nový svět.
Od té doby jsem od nuly postavil:
- DEAL NEWS — AI bot, který automaticky scrapuje M&A transakce z webu a pushuje relevantní dealy na Slack
- networkingakce.cz — kompletní redesign webu, který původně stál 40 tisíc. Nová verze má dashboardy, automatický sběr akcí ze 120+ zdrojů denně a platební systém
- komunita.mitdyl.cz — membership program pro KOMUNITU Meet&Deal se Stripe platbami
Dřív jsem byl na 100 % závislý na programátorech. Dneska je to maximálně 5–10 % případů. Programovat neumím — ale když něco nevím, Claude Code to ví.
Tahle stránka je přesně to, co bych chtěl mít, když jsem začínal. Žádné teorie — jen konkrétní kroky, jak rozjet první projekt na lokálu a dostat ho na web.
Co je vibecoding?
Vibecoding = programování pomocí AI. Nepíšeš kód ručně. Popíšeš, co chceš vytvořit, a AI to napíše za tebe. Ty kontroluješ, schvaluješ a posouváš směr.
Hlavní nástroj je Claude Code — běží přímo v terminálu, vidí celý tvůj projekt, vytváří soubory, instaluje závislosti a spouští příkazy. Ty jen říkáš co, Claude řeší jak.
Nepotřebuješ vědět, jak funguje JavaScript, databáze nebo deployment. Potřebuješ vědět, co chceš postavit — a umět to popsat. Když jednou začneš, začneš přemýšlet úplně jinak o tom, co všechno je možné vytvořit.
1
Založení účtů
2
Instalace nástrojů
Krok 1 — Otevři Terminál
Stiskni Cmd + Mezerník, napiš „Terminal" a otevři.
Krok 2 — Nainstaluj Node.js
# Nainstaluj Homebrew (pokud ho ještě nemáš)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# Nainstaluj Node.js
brew install node
Krok 3 — Nainstaluj Claude Code
npm install -g @anthropic-ai/claude-code
Krok 4 — Nainstaluj Git + GitHub CLI
brew install git gh
Krok 5 — Přihlaš se
# Přihlaš se do GitHubu
gh auth login
# Spusť Claude Code (přihlásíš se přes prohlížeč)
claude
Krok 1 — Nainstaluj Windows Terminal
Otevři Microsoft Store a stáhni Windows Terminal.
Krok 2 — Nainstaluj Node.js
Stáhni a nainstaluj z nodejs.org (verze LTS). Po instalaci restartuj Terminal.
Krok 3 — Nainstaluj Claude Code
npm install -g @anthropic-ai/claude-code
Krok 4 — Nainstaluj Git + GitHub CLI
Git: stáhni z git-scm.com
GitHub CLI: stáhni z cli.github.com
Krok 5 — Přihlaš se
# Přihlaš se do GitHubu
gh auth login
# Spusť Claude Code (přihlásíš se přes prohlížeč)
claude
3
Editor — volitelné
Claude Code běží v terminálu a sám vytváří a edituje soubory. Editor nepotřebuješ — já sám používám jen terminál. Ale pokud chceš kód prohlížet vizuálně, tady jsou možnosti:
- VS Code — klasika, zdarma, obrovský ekosystém rozšíření
- Cursor — VS Code fork s AI nativně zabudovaným ($20/měs, free tier k dispozici)
- Google AntiGravity — nové AI-first IDE od Google, zdarma, podporuje Claude i Gemini
4
S čím začít?
Pro první projekt zvol něco jednoduchého. Cíl je pochopit, jak to celé funguje — ne postavit hned další Instagram.
Dobré první projekty:
-
Osobní web / portfolio
-
Landing page pro tvůj projekt nebo firmu
-
Jednoduchá webová appka (todo list, kalkulačka, formulář)
-
Blog nebo jednoduchý CMS
Tímhle nezačínej:
- ❌ Appka na úpravu fotek / videa
- ❌ Mobilní app pro App Store / Google Play
- ❌ Složitý e-shop s platbami a sklady
- ❌ AI model nebo machine learning
Nejdřív se nauč chodit, pak teprve běhej. Jednoduchý projekt dokončíš za odpoledne a budeš mít reálný výsledek na vlastní doméně.
5
Tvůj první projekt
# Vytvoř složku a přejdi do ní
mkdir muj-prvni-projekt
cd muj-prvni-projekt
# Spusť Claude Code
claude
Teď prostě napiš, co chceš vytvořit. Například:
„Vytvoř mi jednoduchý web v Next.js s přihlašováním přes Supabase. Chci landing page, login stránku a dashboard po přihlášení."
Claude Code vytvoří všechny soubory, nainstaluje závislosti a vysvětlí, co dělá a proč.
6
Propojení s GitHubem
Až budeš s výsledkem spokojený/á:
# Inicializuj Git repozitář
git init
git add .
git commit -m "první verze"
# Vytvoř repozitář na GitHubu a pushni
gh repo create muj-prvni-projekt --public --push --source=.
7
Nasazení na Vercel
- Jdi na vercel.com/new
- Klikni Import Git Repository
- Vyber svůj repozitář z GitHubu
- Klikni Deploy
- Za 30 sekund máš živý web na
muj-projekt.vercel.app
8
Připojení Supabase
- Jdi na supabase.com/dashboard
- Klikni New Project
- Zkopíruj si Project URL a anon key ze Settings → API
- V projektu vytvoř soubor
.env.local:
NEXT_PUBLIC_SUPABASE_URL=tvoje-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=tvuj-klic
NEXT_PUBLIC_SUPABASE_ANON_KEY=tvuj-klic
Pak řekni Claude Code:
„Připoj Supabase do projektu a nastav přihlašování."
9
Nastav si pravidla (CLAUDE.md)
V kořenu projektu si vytvoř soubor CLAUDE.md — je to tvůj „manuál" pro Claude. Pokaždé, když spustíš Claude Code, přečte si ho a bude se jím řídit.
Co tam napsat? Například:
# Pravidla pro tento projekt
## Technologie
- Framework: Next.js + TypeScript
- Styling: Tailwind CSS
- Databáze: Supabase
- Komunikuj se mnou česky
## Jak psát kód
- Piš jednoduchý, čitelný kód
- Nenabaluj funkce — jedna funkce = jeden účel
- Refaktoruj, když se kód opakuje
- Žádné hardcoded hodnoty — používej konstanty
- Žádné zbytečné závislosti
## Bezpečnost
- Hesla a API klíče vždy do .env
- Validuj vstupy od uživatelů
- Žádné SQL injection, XSS, CSRF
## Git
- Commit zprávy česky
- Commituj jen když ti řeknu
Tento soubor si uprav podle sebe — čím konkrétnější pravidla, tím lepší výsledky.
!
Ukládej si práci!
Když zavřeš terminál, konverzace s Claude zmizí.
Claude Code si nepamatuje, co jste spolu dělali. Proto:
- 1. Po každém funkčním kroku ulož do Gitu:
git add . git commit -m "popis co funguje" git push
- 2. Pushuješ na GitHub = máš zálohu. Kdykoli můžeš pokračovat tam, kde jsi skončil/a.
- 3. Soubor
CLAUDE.mdzůstává v projektu — nová konverzace si ho přečte a navážeš bez ztráty kontextu.
Tipy pro efektivní vibecodování
Jak mluvit s Claude Code
- Buď konkrétní: „Přidej kontaktní formulář s poli jméno, email a zpráva"
- Neboj se ptát: „Vysvětli mi, co dělá tento kód"
- Iteruj: „Změň barvu na modrou a přidej animaci"
Užitečné příkazy
/help— nápověda/clear— vyčistí kontextEsc— zruší aktuální akci. Neboj se ho mačkat — vždycky se vrátíš tam, kde potřebuješ být
Zlatá pravidla
- Začni jednoduše — neřeš všechno najednou
- Commituj často — kdykoli něco funguje, ulož to
- Čti, co Claude generuje — učíš se za pochodu
- Hesla a klíče patří do
.env, nikdy do kódu
