Jak jsem vytvořil UI kit ze screenshotů
Klient měl designový systém jen ve formě PNG screenshotů bez přístupu k Figma souborům nebo specifikacím. Potřeboval funkční, kódovaný UI kit, který by mohl použít na tvorbu webstránek.
Cílem bylo pixel-perfect znovuvytvoření 13+ komponent, čistý, znovupoužitelný kód (vanilla HTML/CSS/JS), showcase stránka zobrazující všechny komponenty a reálná aplikace na webstránku kurzu.
Problém, který jsem řešil
Klient disponoval design systémem výlučně ve formě PNG screenshotů – 18 obrazových bloků bez přístupu k Figma souborům, specifikacím či design tokenům. Potřeboval jsem vytvořit plně funkční, kódovaný UI kit použitelný na produkční webstránky.
Tradičně by tato práce trvala 3-5 dní pro zkušeného developera. Potřeboval jsem to udělat rychle a efektivně.
Jak jsem ho vyřešil
Systematicky jsem prošel všech 18 obrazových bloků, identifikoval komponenty, extrahoval barevné schémata a typografické styly vizuální analýzou. Navrhl jsem strukturu projektu a vytvořil komplexní plán před implementací.
Rozhodl jsem se pro vanilla přístup (HTML/CSS/JS) bez frameworků, což zjednodušilo výstup. Vytvořil jsem kompletní HTML strukturu (821 řádků) se všemi sekcemi, CSS s 80+ proměnnými a 1100+ řádky stylů, JavaScript pro interaktivní komponenty (accordion, carousel, clipboard).
Potom jsem aplikoval UI kit na reálný obsah (Cursor kurz). Výsledek: 13 kompletních komponent, 3 soubory (index.html, styles.css, main.js) a 1 reálná webstránka s obsahem z Markdown souboru.
Jak to funguje v praxi
UI kit obsahuje 13 kompletních komponent: Hero, Typography, Quotes, Lists, Buttons, Cards, Prompt Cards, Statistics, Badges, Accordion, Phone Mockup, CTA, Footer. Všechno je ve vanilla HTML/CSS/JS, takže žádné build procesy, žádné dependencies – jen otevřít v prohlížeči.
Vizuální extrakce design tokenů z PNG fungovala lépe než očekávané. AI dokázala extrahovat barevné schémata (#0B1221, #F43F5E, #22D3EE), typografické hodnoty a spacing pomocí vizuální analýzy s vysokou přesností.
Časová úspora: odhadovaných 8-16 hodin práce komprimovaných do jedné session.
Co jsem se naučil
Vizuální analýza je dostatečná. I bez přístupu k Figma souborům dokáže AI extrahovat design tokeny z PNG obrázků s vysokou přesností. Klíčem je systematický přístup – analyzovat každý blok samostatně.
Plán před kódem. Vytvoření strukturovaného plánu (13 todo položek) před psaním kódu zabezpečilo konzistentní implementaci. Žádná komponenta nebyla vynechána.
Vanilla výhoda. Rozhodnutí pro vanilla HTML/CSS/JS bez frameworků znamenalo okamžitou použitelnost. Žádné build procesy, žádné dependencies – jen otevřít v prohlížeči.
Designový systém není jen o komponentách, ale o konzistentních rozhodnutích. Definuj spacing scale, border-radius hodnoty a barvy jednou – zbytek se odvíjí automaticky.
Proč to stojí za to
Když máš design systém jen ve formě screenshotů, nemusíš to kódovat manuálně. Můžeš použít AI na vizuální extrakci design tokenů a automatickou generaci kódu.
UI kit je teď součástí mého workflow. Šetří mi čas, protože můžu rychle vytvořit funkční design systém ze screenshotů. A zároveň mám kontrolu nad tím, jak komponenty vypadají, protože všechno je v HTML/CSS/JS.
Pokud máš podobný problém – design systém jen ve formě screenshotů – zkus to. Možná zjistíš, že je to jednodušší, než sis myslel.
Časté otázky
Jak AI extrahuje design tokeny z PNG screenshotů?
Vizuální analýzou. AI dokáže z obrázků vytáhnout barevné schémata (#0B1221, #F43F5E, #22D3EE), typografické hodnoty i spacing s překvapivou přesností. Klíč je systematický přístup – analyzovat každý blok samostatně, ne všechno najednou.
Proč vanilla HTML/CSS/JS místo frameworku?
Okamžitá použitelnost. Žádné build procesy, žádné dependencies, žádné npm install. Otevřeš v prohlížeči a funguje to. Pro UI kit, který má být znovupoužitelný napříč projekty, je to obrovská výhoda.
Kolik času reálně ušetříš oproti manuálnímu kódování?
Tradičně 3-5 dní práce pro zkušeného developera. S AI jsem to udělal v jedné session – odhadovaných 8-16 hodin komprimovaných do zlomku času. A výstup? 821 řádků HTML, 1100+ řádků CSS, 80+ proměnných.
Co když nemám přístup k Figma souborům?
Přesně to byl můj případ – 18 PNG bloků bez specifikací, bez design tokenů. Vizuální analýza je dostatečná. AI dokáže extrahovat všechno potřebné přímo z obrázků. Nepotřebuješ Figma, nepotřebuješ specifikace.
Jak zajistit konzistenci napříč komponentami?
Plán před kódem. Vytvoř strukturovaný seznam (13 todo položek v mém případě) a definuj design tokeny jednou – spacing scale, border-radius hodnoty, barvy. Zbytek se odvíjí automaticky. Žádná komponenta nebude vynechána, žádné nekonzistence.
Tom