Jak jsem vytvořil design systém ze screenshotů

Problém, který jsem řešil

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 rekonstrukce 13+ komponent, vanilla HTML/CSS/JS bez závislostí, showcase stránka + reálná aplikace a opakovatelný workflow pro budoucí projekty.

Tradičně by tato práce trvala 8-16 hodin pro zkušeného developera. Potřeboval jsem to udělat rychle a efektivně.

Jak jsem ho vyřešil

Systematicky jsem analyzoval každý z 18 obrazových bloků, extrahoval barevné schémata (#0B1221, #F43F5E, #22D3EE), typografické hodnoty a spacing pomocí vizuální analýzy. Vytvořil jsem strukturovaný plán s 13 todo položkami před jakoukoli implementací.

Vytvořil jsem kompletní UI kit – 3 soubory (821 + 1100 + 250 řádků kódu) se 13 komponentami. Potom jsem aplikoval UI kit na reálný obsah (Cursor kurz Markdown) a vytvořil produkční stránku cursor-kurz.html (710 řádků, self-contained).

V polovině projektu jsem zadefinoval nové pravidlo: všechny budoucí webstránky musí mít inlinované CSS/JS obsahující jen použité styly. To pravidlo změnilo způsob, jakým AI přistupuje k výstupům – místo referencování externích souborů začal generovat self-contained HTML s tree-shaked CSS.

Nakonec jsem vytvořil znovupoužitelný prompt pro reprodukci workflow. Meta-prompt umožňuje konzistentní reprodukci bez znalosti systému.

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, typografické hodnoty a spacing pomocí vizuální analýzy s vysokou přesností.

Pravidlo o inliningu dramaticky zjednodušilo deployment. Produkční stránka je self-contained HTML soubor s inlined CSS (~200 řádků, tree-shaked) a JS (~10 řádků, smooth scroll only). Žádné externí soubory, jen Google Fonts CDN.

Časová úspora: odhadovaných 8-16 hodin práce komprimovaných do jedné session.

Co jsem se naučil

PNG je dostatečný zdroj pravdy. Bez Figma souborů dokáže AI extrahovat design tokeny s vysokou přesností. Klíčem je systematická analýza – každý blok samostatně, ne všechno najednou. Vizuální inteligence AI je podceněná schopnost.

Pravidla transformují workflow. Jedno jasné pravidlo ("inline all CSS/JS, only used styles") změnilo celý output. AI se adaptoval okamžitě. Pravidla jsou efektivnější než opakované instrukce.

Meta-prompty jsou multiplikátor hodnoty. Vytvoření promptu pro reprodukci workflow znamená, že hodnota projektu není jednorázová. Každý budoucí projekt může využít stejnou metodologii bez vysvětlování kontextu.

Designový systém není jen soubor komponent – je to soubor rozhodnutí. Dokumentujte rozhodnutí, ne jen výsledky.

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.

Design systém je teď součástí mého workflow. Šetří mi čas, protože můžu rychle vytvořit funkční UI kit 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.