AI Inspirace: Vytvořte si vlastní webový projekt s pomocí Claude Code

Zajímá vás, jak nejlíp používat právě teď generativní AI? Přijďte na některý z našich workshopů. Na našem webu najdete jak prázdninové, tak i podzimní termíny. Rezervujte si místo hned teď. 

O co jde: Claude Code je moderní nástroj umělé inteligence pro programátory, který funguje přímo v příkazové řádce (terminálu). Vytvořila ho společnost Anthropic, známá svým jazykovým modelem Claude. Cílem Claude Code je stát se „AI parťákem“ ve vývoji software: rozumí vašemu kódu, dokáže navrhovat úpravy a s vaším svolením je i provádět. A nejen to: dokáže doslova na “zelené louce” postavit úplně nový projekt.

Jde o chytrého, do určité míry autonomně pracujícího asistenta. Výhodou Claude Code je, že má přístup k souborům v počítači, může je měnit i je přemísťovat. Po autorizaci má přístup i řadě služeb, které může používat. A zároveň Claude Code zvládá vše, na co jste zvyklí ze stejnojmenného AI chatbota.

To znamená, že stačí, když mu v běžném jazyce (v češtině) vysvětlíte, co potřebujete, a on se do toho pustí. Nebo si tuhle přípravnou fázi můžete udělat v chatbotu na webu (kde je to komfortnější), a do Claude Code přijít s podrobným zadáním, anebo třeba i částí kódu. Claude Code mu dobře porozumí, a bude pokračovat tam, kde předešlý nástroj “skončil”. A nemusíte “ctít” značku: začátek projektu můžete udělat třeba v ChatGPT nebo i jinde.

Jak to udělat: Nejprve si připravte prostředí. Potřebujete nainstalovaný Node.js (verze 18 nebo vyšší) a přístup k internetu. Obojí zjistíte v terminálu (příkazovém řádku). Pokud jste úplní začátečníci a máte pocet, že předešlá věta byla v nějakém cizím jazyce, stejně to nevzdávejte. Jak “najít” ve svém počítači terminál a jak stáhnout požadované programy vám poradí AI chatbot, třeba ChatGPT nebo opět Claude. A nyní samotný postup. Tohle je nejtěžší část, jakmile Claude Code nainstalujete, je už všechno intuitivní.

1. Instalace: Otevřete terminál a zadejte

   npm install -g @anthropic-ai/claude-code. 

   (Nepoužívejte sudo – při potížích s oprávněními raději upravte nastavení NPM.)

2. Příprava projektu: Přejděte do složky s vaším projektem:

   cd /cesta/k/projektu.

3. Spuštění CLI: Zadejte příkaz

   claude. 

4. Při prvním spuštění proběhne ověření uživatele – nástroj otevře prohlížeč k přihlášení k účtu Anthropic (je vyžadován aktivní účet s plánem nebo kreditem).

5. Použití: Po přihlášení se v terminálu objeví interaktivní prostředí Claude Code. Můžete psát dotazy a příkazy v češtině, jako byste komunikovali s kolegou. Například zkuste zadat:

   Shrň mi tento projekt. 

   Claude Code projde kód ve vašem adresáři (použití terminálu se vždy váže ke složce, kde je příkazová řádka otevřena, a do jiné složky “přeskáčete” s pomocí příkazu cd, viz výše) a vypíše srozumitelné shrnutí.

   Anebo začněte úplně od nuly a napište něco ve smyslu:

   Ahoj, Claude. Jsem tady poprvé a rád bych si vyzkoušel, jak se s tebou pracuje. Pojďme spolu zkusit udělat nějaký velmi jednoduchý projekt, třeba mou osobní stránku. Říkej mi krok po kroku vše, co mám udělat.

   Uvidíte, že to půjde jako po másle.

6. Další kroky: Pokračujte postupně, podle toho, jak budete jednotlivé kroky zvládat. Přijdou fáze, kdy bde třeba zpozornět, například kvůli bezpečnosti. Ale to až v moemntě, až budete svůj projekt přesouvat online. Ve fázi lokálního ladění experimentujte a hrajte si.

.

Proč je to užitečné: Claude Code dokáže výrazně zefektivnit práci na softwarových projektech. Oproti tradičním nástrojům nabízí hned několik výhod:

• Úspora času a námahy: Rutinní úkoly jako opravy chyb, formátování kódu nebo doplňování dokumentace zvládne AI vyřešit za vás. Vývojáři hlásí, že díky tomu ušetří hodiny až dny práce, které by jinak strávili nad monotónními úkoly.

• Práce v kontextu celého projektu: Nástroj chápe celou codebase – může prohledat všechny soubory, využít testy a historii git. Díky tomu navrhuje řešení, která zapadají do vašeho projektu, místo izolovaných útržků kódu.

• Méně přepínání nástrojů: Vše probíhá v terminálu a ve vašem editoru. Už nemusíte neustále přepínat mezi nástrojem (jako je třeba Cursor), příkazovou řádkou a prohlížečem – Claude Code zvládne vyhledat dokumentaci online, spustit testy i provést git operace jako součást jednoho dialogu.

• Kvalitnější kód a méně chyb: AI model od Anthropic je podle mých zkušeností velmi v porozumění kódu. Navržené úpravy bývají promyšlené a konzistentní se stylem vašeho projektu. Automatizované refaktoringy a opravy mohou snížit počet chyb a zlepšit čitelnost kódu bez toho, aby se změnila funkčnost.

.

Příklad: Pro ukázku se rozhodl realizovat jednoduchý projekt: online hru zvanou Osmička. Možná spíš znáte tzv. Patnáctku (někdy též Loydovu patnáctku). V obou případech jde o hlavolam, kde ve čtverci 3x3 (případně (4x4) je osm (patnáct) dlaždiček s čísly (od 1 do 8, respektive od 1 do 15) a jedna mezera. Cílem je srovnat čísla tak, aby šla správně za sebou.

Existují i online verze, já se rozhodl udělat si s pomocí Claude Code svou vlastní. Včetně informací o tom, jaká se za hlavolam “skrývá” matematika, a s možností nechat si hlavolam vyřešit počítačem.

1. Zadání úkolu: Založil jsem složku v počítači s názvem projektu, v tomhle připadě “osmicka”. V této složce jsem spustil Claude Code příkazem:

   claude 

   a napsal zadání:

   Ahoj Claude! Existuje hlavolam zvaný "patnáctka", nebo též Loydova patnáctka. Zjednodušená verze je "osmička". Prosím, vytvoř jednoduchou online verzi osmičky. Potřebuju, aby bylo hraní snadné a intuitivní. Zároveň stránku doplň dalšími informacemi. Zajímá mě atematický background (zda hru lze vždy vyřešit, kolik existuje variací atd.), pokus se najít další kontext. 

2. Analýza a návrh řešení: Claude Code navrhnul řešení, chvíli jsme si “pinkali” různé možnosti, ale netrvalo to déle než třicet minut. Nepotřeboval jsem žádné zvláštní znalosti ani dovednosti. Za poslední dva roky jsem se celkem naučil Python, ale to je při používání nástroje jako Claude Code výhoda (víte plus mínus, co se “děje”), ale ne nutnost. Opět radím jednoduchý trik: vyzkoušejte to a učte se tím, že sami budete dělat jednoduché projekty.

3. Spuštění finální verze a odladění: Za třicet minut jsem měl lokálně verzi hry, s kterou jsem byl spokojený. Design jsem neupravoval, zajímalo mě hlavně to, aby hra byla “hratelná”. Což se povedlo, zabralo to dalších cca patnáct minut.

4. Spuštění aplikace online: Tady to vezmu rychle, bez podrobného postupu. Pokud budete chtít hru spustit na webu jako já, budete potřebovat účet na Githubu a na nějaké službě, která umožní hostování, já si vybral Netlify. Ale opět platí to, co jsem napsal výše už několikrát: i když to budete dělat poprvé, se vším (včetně založení bezplatných účtů) vám opět může pomoct Claude Code. Spousty práce za vás zároveň udělá: například nahraje projekt na Github atd.

5. Jak to dopadlo? Zahrajte si osmičku na osmicka.netlify.app.

.

Na co si dát pozor:

• Není zdarma: Claude Code vyžaduje přístup k rozhraní Anthropic, které je placené. Musíte mít placený účet – buď předplatné (Claude Pro či Max), nebo kredit v Anthropic Console. Bez aktivního účtu se do nástroje nepřihlásíte.

• Podpora platforem: Nástroj oficiálně funguje na macOS a Linuxu. Ve Windows ho lze spustit pouze nepřímo přes WSL (Linuxový subsystém pro Windows). Nezapomeňte také na závislost Node.js 18+ a doporučenou minimální paměť 4 GB RAM.

• Soukromí kódu: Při použití Claude Code posíláte svůj kód a instrukce na servery Anthropic. Firma uvádí, že data nevyužije k trénování modelů a uchovává je nanejvýš 30 dní (pro ladění služeb), přesto zvažte citlivost sdílených informací. Ve firemním prostředí si ověřte, zda použití takové AI neporušuje interní pravidla.

• Kontrola výsledků: Claude Code, byť výkonný, nemusí vždy navrhnout ideální či bezchybné řešení. Jeho výstupy berte jako návrhy a kontrolujte je. AI může něco nepochopit nebo udělat chybu, takže finální odpovědnost za kód máte vy – nepouštějte změny do produkce bez revize.

• Experimentální povaha nástroje: Jde o produkt z roku 2025, který se pořád vyvíjí. Můžete narazit na drobné chyby nebo zpomalení, zvlášť u opravdu rozsáhlých projektů. Tyto mouchy se snad časem opraví s novými verzemi, ale zatím je dobré počítat s jistou nedokonalostí.

.

Závěr: Claude Code přináší do programování nový rozměr – funguje jako AI kolega, který ušetří spoustu manuální práce. Nejvíce se osvědčí zkušeným vývojářům a týmům, které si chtějí ušetřit práci. Ale užitečný a zábavný může být i pro naprosté začátečníky.

Claude Code stojí za vyzkoušení. Můžete postupně objevovat, co všechno dokáže. Nezapomeňte průběžně sledovat oficiální informace od Anthropicu, případně si najdete nějakou online diskusi, kde se o Claude Code debatuje na úrovni, které porozumíte.

Určitě velmi rychle najdete i spousty webů, kde najdete tipy a triky. Úplným začátečníkům může s instalací a prvním použitím hodně pomoct video Marka Prokopa na Facebooku, který ukazuje, jak vytvořil jednoduchou osobní stránku. Nástroj se neustále vyvíjí a přibývají nové funkce. Trend směřuje k tomu, že AI bude hrát stále větší roli v každodenní práci programátorů. A je zároveň nádhernou hračkou pro ty, co sice programátory ani kodéry nejsou, ale baví je realizovat své nápady. Třeba i šílené. Ale o to jde, nebo ne?

.

AI Inspirace je pravidelná rubrika pro ty, kteří chtějí z generativní AI vytěžit víc než jen pár vtipů na firemní poradu.Jsem rád, že je sledujete. A srdečně zvu na naše workshopy, kde vám ukážeme, jak gen AI používat zajímavě, zábavně a efektivně. Děkuju a těším se na vás!