Starter Kit / šablona lekcí

Ukázková struktura lekcí Starter Kitu.

Tohle není další landing page. Tohle je vzor, podle kterého jsou postavené samotné lekce: levý sidebar, úvod lekce, obsah, checklist a resources. První dvě kapitoly jsou celé zdarma.

Začít první lekcí Otevřít lekce ↗

Ukázka zdarma

První dvě lekce jsou celé otevřené.

Každá lekce používá stejný systém. Tahle stránka je vzor, který můžeš použít i pro zbytek Starter Kitu.

01 Výběr AI nástrojů 02 Základy terminálu

Kapitola 0124 minFree

Výběr AI nástrojů

Vyber nástroj podle produktu, ne podle hype.

Rozhodovací systém pro výběr AI nástroje a stacku podle toho, co chceš skutečně postavit. Ne podle loga, ne podle hype, ale podle práce, kterou právě řešíš.

Kapitola 0124 minFree

Výběr AI nástrojů

Vyber nástroj podle produktu, ne podle hype.

Rozhodovací systém pro výběr AI nástroje a stacku podle toho, co chceš skutečně postavit. Ne podle loga, ne podle hype, ale podle práce, kterou právě řešíš.

Proč to potřebuješ

text

Rozhodovací systém pro výběr AI nástroje a stacku podle toho, co chceš skutečně postavit. Ne podle loga, ne podle hype, ale podle práce, kterou právě řešíš.

Kompletní postup

list

→Jak rozlišit přemýšlení, vývoj, prototyp, databázi a deploy
→Kdy použít ChatGPT, Claude nebo Codex
→Kdy dává smysl Lovable nebo Bolt
→Kdy potřebuješ Supabase a kdy ne
→Kdy řešit Vercel a vlastní doménu
→Jak sestavit jednoduchý postup sestavení
→Jaké chyby rozbijí první projekt

Problém není prompt

warning

Většina projektů se nerozbije na kvalitě promptu. Rozbije se na tom, že si člověk nejdřív neujasní, co staví, pro koho to staví a jaký výstup má být hotový jako první.

Základní mapa nástrojů

code

text

Oblast                  | Nástroj        | Na co slouží
----------------------- | -------------- | -------------------------------------------------
Premýšlení a strategie  | ChatGPT        | Produkt, texty, struktura, zadání
AI coding agent         | Claude / Codex | Práce v projektu, změny v kódu, refactor
Rychlý prototyp         | Lovable / Bolt | První vizuální verze nebo demo
Databáze a Auth         | Supabase       | Ukládání dat, login, backend základ
Hosting a deploy        | Vercel         | Dostat projekt online
Verzionování            | GitHub         | Repo, historie, připojení k deployi

Kdy použít ChatGPT

list

→Když potřebuješ zúžit nápad na MVP.
→Když píšeš produktový brief nebo landing copy.
→Když chceš vysvětlit technický pojem jednoduše.
→Když potřebuješ připravit zadání pro Claude nebo Codex.

Kdy použít Claude

list

→Když řešíš delší kontext a architekturu.
→Když potřebuješ rozumně rozdělit velkou úlohu na menší.
→Když chceš číst, vysvětlovat nebo refaktorovat existující kód.
→Když připravuješ dokumentaci a pravidla projektu.

Claude vs Codex

code

text

Situace                                   | Použij spíš
----------------------------------------- | --------------------
Potřebuju přemýšlet o architektuře        | Claude nebo ChatGPT
Potřebuju upravit konkrétní komponentu     | Codex
Potřebuju pracovat nad více soubory        | Claude Code nebo Codex
Potřebuju refactor                          | Claude Code nebo Codex
Potřebuju připravit prompt                 | ChatGPT
Potřebuju rychle ověřit chybu               | Claude nebo ChatGPT

Kdy použít Codex

list

→Když chceš pracovat přímo s kódem v repozitáři.
→Když potřebuješ vytvořit komponentu, API route nebo validaci.
→Když chceš opravit bug nebo doplnit typy.
→Když zadání rozdělíš na menší kontrolovatelné úkoly.

Kdy použít Lovable nebo Bolt

warning

Lovable a Bolt jsou dobré na rychlý prototyp. Nejsou ideální na dlouhodobý produkt bez kontroly kódu, bezpečné access logiky nebo vlastních pravidel.

Kdy použít Supabase

list

→Když ukládáš waitlist, projekty nebo user data.
→Když potřebuješ login nebo členskou sekci.
→Když chceš databázi, row level security a backend základ.
→Když projekt není jen statická landing page.

Kdy použít Vercel

list

→Když chceš Next.js projekt dostat online.
→Když potřebuješ preview deploye a production deploy.
→Když nastavuješ environment variables a vlastní doménu.
→Když chceš mít jednoduchý postup z GitHubu na nasazení.

Odporúčaný stack podle typu projektu

list

→Statický web: Next.js + Tailwind + GitHub + Vercel.
→Web s formulářem: Next.js + Supabase + GitHub + Vercel.
→Členská sekce: Next.js + Supabase Auth + Supabase DB + Vercel.
→Placený produkt: stejné jako výše, Stripe až ve chvíli, kdy má produkt jasný scope.

Rozhodovací strom

code

text

1. Co stavím?
2. Pro koho to stavím?
3. Jaký má být první výstup?
4. Potřebuju data?
5. Potřebuju login?
6. Potřebuju deploy?
7. Který nástroj je na kterou část?

Nejčastější chyby

list

→Začít nástrojem místo problému.
→Pustit AI do projektu bez pravidel.
→Použít Supabase bez pochopení keys a RLS.
→Deploynout bez kontroly buildů, env a mobilu.
→Stavět příliš mnoho funkcí najednou.

Od nápadu ke spuštění

list

→Definuj problém.
→Napiš brief.
→Vyber nejmenší možný stack.
→Vytvoř projekt a pravidla.
→Postav MVP.
→Propoj data a deploy.
→Zkontroluj spuštění.

Prompt: Vyber mi stack

code

text

Pomoz mi vybrat správný technický stack pro můj projekt.

Projekt:
[opíš projekt]

Cílová skupina:
[kdo to bude používat]

První verze má obsahovat:
[vymenuj 3 hlavní funkce]

Potřebuju ukládat data:
[ano/ne + jaká data]

Potřebuju login:
[ano/ne/později]

Potřebuju platby:
[ano/ne/později]

Chci projekt dostat online:
[ano/ne]

Navrhni mi:
1. nejjednodušší možný stack,
2. co použít na frontend,
3. co použít na databázi,
4. co použít na deploy,
5. jestli potřebuju Supabase,
6. co zatím nedělat,
7. jaký má být první build krok.

Prompt: Zúž mi projekt na MVP

code

text

Mám tento nápad:

[opíš nápad]

Pomoz mi z toho udělat MVP.

Chci, abys:
1. pojmenoval hlavní problém,
2. určil cílovou skupinu,
3. navrhl nejmenší funkční verzi,
4. rozdělil funkce na must-have a later,
5. doporučil vhodné nástroje,
6. navrhl první release plán,
7. upozornil mě, co je zbytečné dělat hned.

Prompt: Připrav zadání pro Codex

code

text

Připrav mi technické zadání pro Codex.

Projekt:
[opíš projekt]

Stack:
[např. Next.js, TypeScript, Tailwind, Supabase, Vercel]

Úloha:
[co má Codex vytvořit]

Omezení:
- neměň architekturu bez vysvětlení,
- nepoužívej zbytečné externí balíčky,
- validuj vstupy,
- nepoužívej dangerouslySetInnerHTML,
- neukládej secrets do frontendu,
- po dokončení vypiš změněné soubory.

Výstup má obsahovat:
1. návrh souborů,
2. implementaci,
3. vysvětlení změn,
4. způsob testování.

Prompt: Zkontroluj můj stack před spuštěním

code

text

Zkontroluj můj stack před prvním spuštěním.

Používám:
Frontend:
Backend/databáze:
Auth:
Hosting:
Doména:
AI nástroje:
Platby:

Projekt má obsahovat:
[vymenuj funkce]

Skontroluj:
1. jestli stack dává smysl,
2. jestli není zbytečně komplikovaný,
3. co může být bezpečnostní riziko,
4. co mám nastavit před deployem,
5. co můžu odložit na další verzi.

Checklist kapitoly

9 kroků

✓Vím, co stavím
✓Znám cílovou skupinu
✓Mám definovaný nejmenší výstup
✓Vím, který nástroj použít na myšlení
✓Vím, který nástroj použít na kód
✓Vím, zda potřebuji Supabase
✓Vím, zda potřebuji Vercel
✓Mám první prompt pro agenta
✓Mám jednoduchý stack a ne chaos

Resources

Materiály ke kapitole

reference

Placené

Výběr AI nástrojů — pracovní poznámky

Strukturovaný podklad k této kapitole.

download

Zdarma

Matice výběru AI nástrojů

Rychlá mapa nástrojů podle úlohy, výstupu a rizika.

checklist

Zdarma

Pracovní list pro výběr stacku

Pracovní list pro výběr stacku podle typu projektu.

template

Zdarma

Sada promptů pro výběr nástrojů

Sada promptů pro ChatGPT, Claude a Codex před prvním sestavením.

reference

Zdarma

Mapa build stacku

AI nástroj → GitHub → Supabase → Vercel → doména.

Kapitola 0232 minFree

Základy terminálu

Terminál bez developerské arogance.

Základní příkazy, spouštění projektu, Git workflow a troubleshooting pro úplného začátečníka. Cíl není naučit tě být vývojář. Cíl je dostat tě přes první build bez paniky.

Kapitola 0232 minFree

Základy terminálu

Terminál bez developerské arogance.

Základní příkazy, spouštění projektu, Git workflow a troubleshooting pro úplného začátečníka. Cíl není naučit tě být vývojář. Cíl je dostat tě přes první build bez paniky.

Proč to potřebuješ

text

Základní příkazy, spouštění projektu, Git workflow a troubleshooting pro úplného začátečníka. Cíl není naučit tě být vývojář. Cíl je dostat tě přes první build bez paniky.

Kompletní postup

list

→Co je terminál a proč ho vůbec potřebuješ
→Jak otevřít projekt ve složce
→cd, ls, pwd a práce s cestami
→npm install, npm run dev a npm run build
→git status, git add, git commit a git push
→Jak číst chyby bez slepého googlení
→Co dělat, když projekt nejde spustit
→Jak si udržet kontrolu nad změnami

Co je terminál

text

Terminál je textová vrstva nad operačním systémem. Místo klikání píšeš příkazy. Pro první build je důležitý proto, že spouštíš projekt, instaluješ dependencies, kontroluješ Git a čteš chyby z buildů.

Jak otevřít projekt

list

→Otevři terminál v rootu projektu.
→Zkontroluj, kde se nacházíš pomocí `pwd`.
→Přesuň se do správné složky přes `cd`.
→Ověř obsah složky přes `ls`.

Nejdůležitější příkazy

code

bash

pwd
ls
cd moji-slozka
npm install
npm run dev
npm run build
git status
git add .
git commit -m "update"
git push

Co ty příkazy dělají

list

→`pwd` ukáže, kde právě jsi.
→`ls` vypíše soubory a složky.
→`cd` přesuneš do jiné složky.
→`npm install` stáhne dependencies.
→`npm run dev` spustí lokální vývojový server.
→`npm run build` ověří production build.
→`git status` ukáže změny v repu.
→`git add` připraví změny na commit.
→`git commit` uloží snapshot změn.
→`git push` pošle změny na GitHub.

Jednoduchý Git workflow

code

text

1. Udělám změnu
2. Spustím git status
3. Přidám změny přes git add
4. Udělám commit
5. Pošlu změny na GitHub
6. Zkontroluju, že build pořád funguje

Jak číst chyby

warning

Nechoď hned opravovat random soubor. Nejdřív si všimni, kde chyba vznikla, jaký soubor ji vyvolal a jestli jde o chybějící balíček, špatný import, neplatnou proměnnou nebo rozbitý build.

Když projekt nejde spustit

list

→Zkontroluj, jestli jsi ve správné složce.
→Zkontroluj, jestli běží `npm install` bez chyby.
→Zkontroluj, jestli máš správnou verzi Node.
→Podívej se na první error v terminálu, ne jen na poslední řádek.
→Zkus restartovat dev server.
→Ověř, že nejsou rozbité environment variables.

První lokální build

code

bash

npm install
npm run dev
npm run build

Prompt pro první kontrolu projektu

code

text

Zkontroluj můj projekt z pohledu úplného začátečníka.

Řekni mi:
1. jestli jsem ve správné složce,
2. jaké tři příkazy mám zkusit jako první,
3. jak mám číst chybu v terminálu,
4. co je safe krok a co už je zbytečný zásah.

Bezpečné návyky

list

→Nevkládám secrets do terminálu bez rozmyslu.
→Nehádám názvy souborů, když je můžu vypsat.
→Po každé změně kontroluji výstup.
→Po větší úpravě spouštím build.
→Když si nejsem jistý, dělám menší krok.

Checklist kapitoly

9 kroků

✓Vím, co je terminál
✓Umím otevřít projekt ve správné složce
✓Umím ověřit, kde se právě nacházím
✓Umím nainstalovat dependencies
✓Umím spustit lokální server
✓Umím zkontrolovat stav Git
✓Umím udělat commit
✓Umím přečíst základní error
✓Umím ověřit production build

Resources

Materiály ke kapitole

reference

Placené

Základy terminálu — pracovní poznámky

Strukturovaný podklad k této kapitole.

download

Zdarma

Terminal cheat sheet

Krátký přehled příkazů, které potřebuješ v prvním projektu.

reference

Zdarma

Git flow pro začátečníka

Jednoduchý postup: změna → status → add → commit → push.

checklist

Zdarma

Troubleshooting list

Co zkontrolovat, když `npm run dev` nebo `npm run build` padá.

Uzamčeno / Starter Kit

Celý postup pokračuje v placené verzi.

Ukázka zdarma ti dá základní kontext. Kompletní kroky, checklisty, šablony a konkrétní postup jsou součástí Vibenly Starter Kitu.

Otevřít lekce →

Kapitola 03

Claude / Codex Setup

Claude a Codex umí pracovat nad projektem, ale potřebují jasný rozsah, kontext a kontrolu změn. Nástroj vybírej podle úlohy, ne podle loga.

Otevřít ukázku →

Kapitola 04

Projektové MD soubory

PROJECT.md, SECURITY.md a RELEASE.md snižují chaos. Když k nim přidáš CLAUDE.md a CODEX.md, agent ví nejen co stavíš, ale i co nesmí rozbít.

Otevřít ukázku →

Kapitola 05

Základy GitHubu

Git ukládá historii změn. GitHub drží repozitář online. Vercel z něj umí vytvořit nasazení. Soubor .env.local do tohoto toku nepatří.

Otevřít ukázku →

Zobrazit všechny kapitoly Otevřít lekce