Jak převést ručně kreslená rozvržení webových stránek do HTML kódu pomocí Sketch2Code od společnosti Microsoft

Přemýšleli jste někdy nad tím, jak skvělé by bylo nakreslit něco na papír a nechat to ožít v reálném světě? No, to je právě něco, čeho Microsoft dosáhl s webovou aplikací Skletch2Code poháněnou umělou inteligencí, která dokáže převést ručně psané kresby z tabule na webové stránky HTML jediným kliknutím.

Sketch2Code dokáže převést jakékoli ručně nakreslené rozvržení webové stránky do HTML během pouhých sekund. Tento nástroj využívá službu Computer Vision AI společnosti Microsoft k detekci objektů HTML ve výkresu a poté pomocí rozpoznávání textu extrahuje ručně psaný text ve výkresu a kombinuje a vytváří úryvky HTML všech prvků návrhu v obrázku.

Díky tomu je pro webdesignéry a vývojáře šíleně rychlé vytvářet HTML prototypy webových stránek v mnoha různých stylech během několika sekund. Pokud vás zajímá, jak to funguje v backendu, přečtěte si technické podrobnosti o Sketch2Code na webu společnosti Microsoft.

Níže je stručný návod, který vám ukáže, jak jednoduché je použít Sketch2Code k převodu nákresů rozložení webových stránek na skutečné stránky HTML.

Nejprve nakreslete rozvržení svého webu na tabuli nebo bílý list. Poté jej vyfoťte a uložte do počítače. Poté kliknutím na tlačítko níže otevřete webovou aplikaci Sketch2Code ve svém prohlížeči.

Spusťte webovou aplikaci Sketch2Code

Jakmile budete mít web otevřený, klikněte na Nahrát design a vyberte obrázek rozvržení webu, který jste nakreslili na bílou tabuli nebo bílý list.

Po nahrání ručně nakresleného návrhu webu se pohodlně usaďte a sledujte, jak Sketch2Code používá AI automaticky generující stránku HTML na základě rozložení v obrázku, který jste nahráli.

Po dokončení procesu se vám zobrazí náhled čerstvě vygenerované stránky HTML spolu s možností stáhnout si celý kód. Klikněte na Stáhněte si svůj HTML kód získáte soubor .html s ručně nakresleným rozložením webových stránek, abyste jej mohli otestovat a prohlédnout si jej lokálně ve webovém prohlížeči.

A je to. Doufáme, že vám Sketch2Code ušetří čas při vytváření prototypu rozvržení webové stránky.

Kategorie: Web