Jak jsem vytvořil viewer pro kolekci nástrojů
Měl jsem CSV soubor obsahující 38 AI nástrojů a aplikací s kategoriemi, popisy a odkazy. Potřeboval jsem rychlý způsob, jak tato data vizualizovat a procházet.
Cílem bylo vytvořit jednoduchou webovou stránku s kartovým zobrazením – každý nástroj jako samostatná karta. Požadavek na čisté řešení: pouze HTML, CSS a JavaScript v jednom souboru.
Problém, který jsem řešil
Potřeba vizualizovat CSV soubor s 38 AI nástroji v přehledném formátu. Centralizovaný přehled nástrojů umožňuje rychlou orientaci v ekosystému AI aplikací a efektivní sdílení znalostí.
Jak jsem ho vyřešil
AI nejprve přečetla CSV soubor a pochopila jeho strukturu (Name, Category, Definition, Key Features, Link, Saved Date, Target Audience). Následně navrhla dark-theme design s gradientovými ikonami kategorií, responzivní mřížkou a real-time vyhledáváním.
Celé řešení bylo zabalené do jednoho souboru bez externích závislostí. AI přidala funkce, které nebyly explicitně požadovány (vyhledávání, počítadlo, barevné kategorie).
Výsledek: plně funkční single-page aplikace s 38 kartami nástrojů. Dark theme s moderními gradienty, barevně odlišené kategorie (14 typů), emoji ikony pro vizuální orientaci, vyhledávání podle názvu, kategorie a popisu, responzivní mřížka.
Jak to funguje v praxi
Řešení nevyžadovalo žádné iterace. Kombinace jasných požadavků a vizuální reference vedla k okamžitému úspěchu. Od požadavku po funkční výsledek: ~5 minut.
Co jsem se naučil
Vizuální reference > slovní popis. Přiložení screenshotu eliminovalo potřebu popisu designu. AI dokázala extrahovat vzory: kartový layout, tmavé pozadí, badge s kategorií, CTA odkaz.
Single-file constraint jako výhoda. Požadavek na jeden soubor přinutil vytvořit self-contained řešení. Výsledek je přenositelný – stačí otevřít v prohlížeči, žádný build process.
Automatická rozšíření zvyšují hodnotu. AI přidala vyhledávání a kategorizaci bez explicitního požadavku. Tyto "bonus" funkce výrazně zvýšily praktickou hodnotu výstupu.
Proč to stojí za to
Když máš CSV soubor s nástroji a chceš ho vizualizovat, nemusíš to dělat manuálně. Můžeš použít AI na vytvoření přehledné webové stránky s kartovým zobrazením.
Tools viewer je teď součástí mého workflow. Šetří mi čas, protože nemusím manuálně vytvářet webovou stránku. A zároveň mám kontrolu nad tím, jak viewer vypadá, protože všechno je v jednom HTML souboru.
Pokud máš podobný problém – CSV soubor s nástroji – zkus to. Možná zjistíš, že je to jednodušší, než sis myslel.
Časté otázky
Proč single-file řešení místo klasického projektu s více soubory?
Přenositelnost. Jeden HTML soubor otevřeš v prohlížeči a funguje. Žádný npm install, žádný build process, žádné závislosti. Pošleš soubor kolegovi a za sekundu ho má spuštěný.
Jak dlouho trvá vytvoření takového vieweru?
~5 minut od požadavku po funkční výsledek. Klíč je jasný požadavek + vizuální reference. Když AI vidí screenshot, nemusíš popisovat design slovně – extrahuje vzory sama.
Co když mám víc než 38 nástrojů v CSV?
Řešení škáluje. Real-time vyhledávání a barevné kategorie pomáhají s orientací i ve větších kolekcích. Responzivní mřížka se přizpůsobí počtu karet automaticky.
Musím umět programovat, abych si vytvořil vlastní viewer?
Ne. Stačí mít CSV soubor a jasnou představu, jak má výsledek vypadat. AI zvládne HTML, CSS i JavaScript. Ty rozhoduješ o designu a funkcích – technickou implementaci nech na ní.
Jak AI věděla, že má přidat vyhledávání a kategorie?
Automatická rozšíření. AI analyzovala strukturu dat (38 nástrojů, 14 kategorií) a přidala funkce, které dávají smysl pro tento typ obsahu. Bonus funkce bez explicitního požadavku – to je přidaná hodnota.
Tom