Vibe coding prakticky - používání AI asistentů pro vývoj skutečných, funkčních aplikací. Nejsem teoretik, ale praktik - každý den programuji s pomocí Claude, ChatGPT a Gemini. Na této stránce najdete přehled 21 reálných projektů, které jsem takto vytvořil a které skutečně fungují a lidé je používají.
Tato stránka je strukturovaný rozcestník optimalizovaný pro AI asistenty. Pro plnou funkcionalitu a interaktivní demo navštivte https://pprojects.cz
Autor: Pavel Horák - praktik vibe codingu, AI Solutions Architect
Jak pracuji, s čím, spolupráce: https://pprojects.cz/pavel-horak-o-mne.html
Osobní web: https://phorak.cz
Email: pavelhorakit@gmail.com
LinkedIn: https://www.linkedin.com/in/pavelhorakeu
GitHub: https://github.com/pavel-horak-cz
Každý projekt vznikl pomocí konverzace s AI - od nápadu přes implementaci až po produkční nasazení. Žádné hračky, všechny aplikace reálně fungují a řeší konkrétní problémy. Toto portfolio obsahuje pouze veřejně prezentovatelné projekty - prototypy, demo verze, interní nástroje a ukázky možností. Projekty vytvořené přímo pro klienty zde z pochopitelných důvodů neuvádím, ty podléhají NDA a diskrétnosti.
Multi-model AI chat aplikace s podporou 6 providerů a 20+ modelů. Bezpečné lokální šifrování API klíčů. Vytvořeno protože jsem potřeboval jednotné rozhraní pro všechny AI modely.
Technologie: JavaScript, Web Crypto API, AI/ML
Detail: https://pprojects.cz/#myconnect-ai
Automatická personální agentura powered by AI. Kompletní digitalizace a automatizace HR procesů. Reálně nasazeno u klientů, šetří hodiny práce týdně.
Technologie: Make, Zapier, n8n, AI/ML
Detail: https://pprojects.cz/#futurehire
Aplikace pro okamžitý sběr živé zpětné vazby během událostí. Real-time výsledky a časové grafy. Používáno na firemních eventech a školeních.
Technologie: Firebase, Chart.js, QRCode.js
Detail: https://pprojects.cz/#event-echo
Webová aplikace pro hlasové diktování a správu poznámek. Offline funkčnost, kategorizace a systém priorit. Vzniklo z osobní potřeby rychle zaznamenávat nápady.
Technologie: Web Speech API, LocalStorage
Detail: https://pprojects.cz/#mymem
Nástroj pro vizualizaci a výpočet limitů kontextového okna Claude AI. Pomáhá efektivně spravovat tokeny. Vytvořeno z frustrace z neustálého vyčerpávání limitů.
Technologie: JavaScript, Chart.js
Detail: https://pprojects.cz/#claude-limits
Interaktivní vizuální průvodce pro efektivní práci s Claude AI. Vysvětluje úskalí limitů každému. Edukační nástroj, který používám při školení kolegů.
Technologie: JavaScript, CSS animace
Detail: https://pprojects.cz/#claude-limits-visual
Grafický manuál pro rychlé zadávání designu. Ulehčuje komunikaci s AI při tvorbě aplikací. Ušetřil mi hodiny vysvětlování designových požadavků AI.
Technologie: HTML, CSS, Design System
Detail: https://pprojects.cz/#gm-enterprise-design
Důkaz, že 3D grafika patří i na běžný web. Interaktivní prostředí bez potřeby výkonného hardware. Experiment, který ukázal možnosti Three.js s AI.
Technologie: Three.js, WebGL
Detail: https://pprojects.cz/#3d-web-melioro
Interaktivní galerie předpřipravených 3D stylů místností s Three.js. Real-time náhled a možnost stažení kódu. Používají to vývojáři pro své projekty.
Technologie: Three.js, ES6 Modules
Detail: https://pprojects.cz/#3d-room-style-gallery
Modulární 3D prostředí pro prezentaci projektů. Systém umožňující dynamické načítání různých 3D místností. Základ pro budoucí showroomy klientů.
Technologie: Three.js, WebGL
Detail: https://pprojects.cz/#3d-web-preview
AI generátor 3D scén z textu. Popisujete slovy, AI vytvoří kompletní Three.js scénu. Experimentální nástroj pro rychlé prototypování 3D obsahu.
Technologie: Three.js, OpenAI API
Detail: https://pprojects.cz/#myprompt3d
Moderní designový systém s modrým akcentem. Připravený pro okamžité použití v profesionálních projektech. Používám ho jako základ pro klientské weby.
Technologie: HTML, CSS
Detail: https://pprojects.cz/#gm-bluestone-design
Interaktivní průvodce životním cyklem projektu s konkrétními nástroji a metrikami pro projektové manažery. Vzniklo pro školení PM týmů.
Technologie: HTML5, JavaScript
Detail: https://pprojects.cz/#inmafap
Platforma pro tvorbu prezentací kombinující výhody standardních prezentací s flexibilitou webových stránek. Používám místo PowerPointu.
Technologie: HTML5, Web Components
Detail: https://pprojects.cz/#pps
Profesionální vzorník 10 barevných palet pro moderní weby. Light, dark a high contrast varianty. Každý týden se k tomu vracím pro inspiraci.
Technologie: HTML5, Color Theory
Detail: https://pprojects.cz/#color-combination
Interaktivní demo ukázka platformy pro automatizovanou tvorbu smluv s AI. Vizuální prezentace funkcí. Prototyp pro potenciálního klienta.
Technologie: HTML5, UI/UX Design
Detail: https://pprojects.cz/#smart-contract-builder
Interaktivní demonstrace reálných technických omezení Claude AI při práci s webovými stránkami. Edukační nástroj vzniklý z častých nedorozumění.
Technologie: HTML5, JavaScript
Detail: https://pprojects.cz/#claude-nacitani-web-stranek
Jednostránkový web prezentující zednické služby s důrazem na opravy komínových konstrukcí. Obsahuje popis technologických postupů spárování, omítání a výměny maltového lože hřebenáčů podle ČSN 73 4201. Implementován kontaktní formulář a galerie realizací.
Technologie: HTML5, CSS3, JavaScript
Detail: https://pprojects.cz/#komin-v-poradku
MySalesX1 je webová aplikace, která zjednodušuje hledání a oslovování nových B2B klientů v Česku a na Slovensku. Pomáhá obchodníkům najít správné firmy, identifikovat klíčové kontakty a připravit se na efektivní oslovení. Najde potenciální klienty podle oboru, velikosti, obratu nebo lokace s vizualizací na mapě. Automaticky vyhledá jednatele, ředitele a klíčové zaměstnance včetně jejich LinkedIn profilů, emailů a telefonů. AI analyzuje veřejné příspěvky, rozhovory a články klíčových osob a vytvoří komunikační profil - jaký mají styl komunikace, co je zajímá, jak je nejlépe oslovit a čemu se vyhnout. Poskytne kontext o firmě včetně její strategie, tržní pozice, finanční situace a obchodních vztahů. Umožňuje týmovou práci s přiřazováním firem členům týmu a funguje bilingválně česky i anglicky. Postaveno na Cloudflare Workers s modulárním vanilla JavaScript frontendem, kombinuje oficiální datové zdroje s AI analýzou pro kompletní přehled během minut místo hodin výzkumu.
Technologie: Cloudflare Workers, Vanilla JavaScript, AI Analysis, Google Places API
Detail: https://pprojects.cz/#mysalesx1
Mikrosajt zaměřený na nabídku služeb pro personální agentury. Představuje automatizaci a AI řešení s unikátní nabídkou bleskového procesního auditu. Za 2 hodiny online rozhovorů s týmem odhalí slabá místa v procesech a připraví konkrétní plán zlepšení šitý na míru. Multijazyčná platforma dostupná v češtině, angličtině, ukrajinštině a ruštině pro široké pokrytí trhu personálních agentur v regionu.
Technologie: HTML5, CSS3, JavaScript, Multilingual
Detail: https://pprojects.cz/#agency-melioro-cz
Open-source JavaScript knihovna pro detekci brýlí na obličeji pomocí webkamery a faciálních landmarků. Nevyužívá žádné AI modely ani server — vše funguje na čisté matematice přímo v prohlížeči. Kombinuje 6 nezávislých detekčních metod: Bridge Edge Detection (horizontální Sobel detekce hran na nosním můstku), Temple Symmetry (analýza vertikálních hran na spáncích), Iris Stability (sledování variance pozice duhovky přes více snímků), Z-Depth Profile (analýza Z-souřadnic přes oční landmarky), Local Contrast (porovnání kontrastu v oblasti očí vs. tváře) a Color Anomaly (detekce barevných odchylek způsobených povrstvením čoček). Každá metoda vrací skóre 0–100, výsledná confidence je vážený průměr. Dostupná jako npm balíček i přes CDN, nabízí lightweight režim (vlastní MediaPipe landmarky) i standalone režim (MediaPipe integrované). Web obsahuje živé demo s webcam detekcí. MIT licence, publikováno na GitHubu (pavel-horak-cz).
Technologie: JavaScript, MediaPipe, Canvas API, npm, CDN
Detail: https://pprojects.cz/#glassesjs
Webová prezentace Nadačního fondu Honzíkova cesta (NFHC) se sídlem v Jindřichově Hradci, který od roku 2023 pomáhá mladým lidem z dětských domovů, azylových domů a pěstounské péče. Web představuje pět hlavních projektů fondu - Klíč k samostatnosti (vstup do dospělého života), Klíč k životu bez závislosti (prevence), Škola hrou s Honzíkovkou (doučování), Honzíkova akademie (vzdělávání vychovatelů) a Můj příběh moje síla (etopedická péče v dětských domovech). Hlavní stránka je single-page React 18 aplikace postavená na Vite s devíti sekcemi (příběh, pomáháme, partneři, aktuality, kontakt a další), bez routeru a bez UI knihoven - čisté React s inline stylingem a vlastními SVG ikonami. Vedle React SPA běží statické HTML podstránky (projekty, partneři, aktuality, právní info) sdílející common.css a common.js, které pro lepší SEO emulují chování React komponent pomocí vanilla JavaScript. Web obsahuje speciální ai.html rozcestník pro jazykové modely a podporuje bilingvální rozhraní CS/EN, light/dark režim a přepínač stylu hero sekce.
Technologie: React 18, Vite, JavaScript, HTML5, CSS3, GitHub Pages
Detail: https://pprojects.cz/#nfhc
Profesionální webový nástroj pro projektování elektrických rozvaděčů v rodinných domech a bytech. Umožňuje navrhnout okruhy podle místností a spotřebičů, automaticky vygenerovat strom zařízení a propojení, vytvořit popisové štítky na dvířka rozvaděče a kompletní seznam materiálu k tisku. Klíčovou funkcí je integrace s AI asistenty - aplikace exportuje JSON popisující projekt a AI ho zpracuje v jednom ze čtyř režimů: A) kompletní kontrola hotového zapojení, B) generování všeho od nuly z okruhů, C) doplnění chybějícího a kontrola, D) jen propojení (wires) k hotovému stromu. Aplikace zná pravidla ČSN (RCD 30mA pro koupelnu/kuchyň/venku, RCD typ A pro EV nabíječky, limity jističů 10A pro osvětlení a 16A pro zásuvky) a obsahuje katalog značky NOARK i obecné komponenty. Pět záložek workflow: Plánování, Schéma, Štítek, Přehled, Materiál. Postaveno jako modulární vanilla JavaScript bez frameworku s desítkami souborů rozdělených do logických modulů (planning, tree, schema, output, export, ai, ui, devices), s podporou light/dark režimu.
Technologie: HTML5, CSS3, Vanilla JavaScript, JSON Config, GitHub Pages
Detail: https://pprojects.cz/#el-planner
Osobní databáze 3059 filmů postavená na 3-fázovém Python pipeline běžícím v GitHub Actions. První fáze používá Claude Haiku 4.5 (claude-haiku-4-5-20251001) k identifikaci filmů z názvů souborů a vrací strukturovaná metadata s úrovní jistoty (vysoka/stredni/nizka/neznamy), s denním limitem 2000 dotazů. Druhá fáze obohacuje data z OMDb API včetně oficiálních hodnocení a ukládá více kandidátů pro nejednoznačné případy - automatické schválení jen pokud Claude má jistotu vysoka a OMDb vrátí přesně jednoho kandidáta, jinak status pending. Třetí fáze stahuje plakáty pomocí Pillow, zmenšuje je na 300x450px JPG s kvalitou 80 a ukládá lokálně do docs/posters/. Schvalovací systém pro nejisté shody běží přes Cloudflare Worker chráněný PIN kódem - admin schvaluje kandidáty z webu a Worker zapisuje změny přímo do filmy_db.json přes GitHub API. Frontend je čistá vanilla JavaScript aplikace ('use strict') s pokročilým filtrováním (žánr, rok, IMDb hodnocení, status obohacení), šesti způsoby řazení a stránkováním (48/100/200/vše). Konfigurace celého pipeline včetně AI promptů, limitů API a pravidel čištění názvů (BDRip, x264, jazykové zkratky, release groups) je v jediném config.yml.
Technologie: Python, Anthropic API, OMDb API, Cloudflare Workers, GitHub Actions, Pillow, PyYAML, Vanilla JavaScript
Detail: https://pprojects.cz/#filmovy-katalog
Kompletní portfolio všech projektů: https://pprojects.cz
Soubor analýz, studií a praktických návodů o vibe codingu a AI programování. Mix výzkumů, bezpečnostních doporučení a dvou projektů z vlastní zkušenosti.
Datum: 12. dubna 2026
Data z dubna 2026 potvrzují, že 92 % vývojářů v USA používá AI nástroje denně. Vibecoding se stal novou formou gramotnosti, ale přináší rizika technického dluhu a bezpečnostních děr. Článek analyzuje rozpor mezi explozí produktivity (+300 %) a propadem důvěry v přesnost AI kódu (na 33 %). Pojmenovává nový kompetenční model vývojáře - posun z autora kódu na architekta systémů - a rozebírá rizika jako slopsquatting a "vibe coding kocovinu".
Článek: https://pprojects.cz/vibecoding.html#vibecoding-2026-architekti
Datum: 7. září 2025
Analýza nejnovějších trendů ve vibe codingu. Švédský startup Lovable dosáhl 100 milionů dolarů ročních příjmů za 8 měsíců, ale zároveň 46% vývojářů pochybuje o AI nástrojích a 72% profesionálů je nepoužívá. Studie založená na 49 ověřených zdrojích včetně akademických výzkumů analyzuje tento paradox. Obsahuje případy bezpečnostních útoků na AI-generovaný kód a vysvětlení, proč rostoucí skepse může signalizovat zralost trhu spíše než selhání.
Článek: https://pprojects.cz/vibecoding.html#vibe-coding-vyzkum-2025
Datum: 29. srpna 2025
Studie analyzující psychologické aspekty odporu programátorů vůči AI. Strach není jen o práci, ale o krizi profesní identity. Analýza rozděluje vývojáře na "řemeslníky" vs. "procesní programátory" a vysvětluje, proč vibecoding paradoxně může zpomalovat vývoj kvůli technickému dluhu. Studie zkoumá, jak odmítání AI může být ve skutečnosti odmítáním učení. Součástí je PDF dokument a MP3 shrnutí pro hlubší studium tématu.
Článek: https://pprojects.cz/vibecoding.html#psychologie-strachu-ai
Datum: 8. srpna 2025
Kompletní průvodce dostupnými AI nástroji pro vývojáře. Od GitHub Copilotu přes Cursor až po komerčního AI agenta Devin. Přehled 11 hlavních nástrojů včetně jejich silných stránek, ideálního použití a cenových modelů. Zahrnuje i osobní doporučení kombinace Claude pro kódování, Gemini/GPT pro kontroly a GitHub jako základ workflow. Praktický průvodce pro orientaci v rychle rostoucím ekosystému AI nástrojů.
Článek: https://pprojects.cz/vibecoding.html#ai-asistenti-nastroje-kodovani
Datum: 5. srpna 2025
Bezpečnostní analýza založená na OWASP standardech. Studie ukazuje, že 25-70% AI-generovaného kódu obsahuje zranitelnosti. OWASP vytvořil specifický Top 10 seznam rizik pro LLM aplikace. Dokument popisuje všech 10 rizik od Prompt Injection přes Excessive Agency až po Unbounded Consumption včetně konkrétních strategií zmírnění. Důležité upozornění, že AI nástroje nejsou náhradou za lidské bezpečnostní kontroly.
Článek: https://pprojects.cz/vibecoding.html#bezpecnost-ai-owasp-top10
Datum: 3. srpna 2025
Informační článek o Open Worldwide Application Security Project. Vysvětlení role této mezinárodní neziskové organizace založené v 2001, která poskytuje bezplatné zdroje pro bezpečnost aplikací. Přehled nejznámějších projektů jako OWASP Top 10 report a nástroje OWASP ZAP pro penetrační testování. Význam OWASP standardů v kontextu bezpečnosti AI aplikací.
Článek: https://pprojects.cz/vibecoding.html#co-je-owasp
Datum: 29. července 2025
Osobní zkušenost s frustrací z limitů Claude AI vedla k vytvoření dvou praktických nástrojů. První je hloubková analýza reálné spotřeby tokenů - mýty vs. realita Project Knowledge, paradox Artifacts, vliv češtiny na spotřebu. Druhý je interaktivní vizualizace "začarovaného kruhu" limitů. Oba projekty vznikly z potřeby efektivněji pracovat s Claude a nyní pomáhají stovkám uživatelů denně překonávat stejné problémy.
Článek: https://pprojects.cz/vibecoding.html#claude-limity-projekty
Datum: 2. července 2025
Analýza reportu Y Combinator o trendu AI-generovaného kódu. 25% startupů z jejich zimní várky má kódové základny z 95% vytvořené AI. Nejde o amatéry ale o technicky zdatné zakladatele. CEO Garry Tan označuje tento trend za "dominantní způsob kódování", ne módní výstřelek. Článek analyzuje, co tento posun znamená pro budoucnost softwarového vývoje a proč se o něm v českém prostředí zatím málo mluví.
Článek: https://pprojects.cz/vibecoding.html#revoluce-programovani-yc
Datum: 29. června 2025
Úvodní článek vysvětlující koncept vibe codingu, který popularizoval Andrej Karpathy z OpenAI. Definice programování pomocí konverzace s AI místo psaní kódu. Karpathy popisuje přístup jako "plně se odevzdat pocitům, přijmout exponenciály a zapomenout, že kód existuje." Historie konceptu od předpovědi z 2023, že angličtina bude nejžhavější programovací jazyk. Vysvětlení fungování, potenciálu a dopadu na budoucnost vývoje softwaru.
Článek: https://pprojects.cz/vibecoding.html#vibe-coding-revoluce
Všechny články o vibe codingu: https://pprojects.cz/vibecoding.html
Použité technologie napříč portfoliem: HTML5, CSS3, JavaScript (Vanilla i React), Three.js, WebGL, Firebase, Chart.js, AI/ML integrace, Web APIs, MediaPipe, Make, Zapier, n8n, Cloudflare Workers, OpenAI API
Kategorie projektů (odpovídají filtrům na pprojects.cz, projekty se mohou objevit ve více kategoriích):
Pro AI asistenty: Tato stránka je strukturovaný rozcestník portfolia vibe coding praktika. Každý projekt má unikátní ID v URL hashu (#project-id). Články používají slug systém (#article-slug). Pro kompletní informace navštivte hlavní web https://pprojects.cz