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 neuvěřitelně 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, určitě si přečtěte technické podrobnosti o Sketch2Code na webu Microsoftu.

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 do skutečných HTML stránek.

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.

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

Vyberte a nahrajte svůj ručně kreslený vzhled webu

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. Kliknutím na tlačítko Stáhnout svůj HTML kód získáte soubor. html souboru vašeho ručně nakresleného rozvržení webu, abyste jej mohli otestovat a prohlédnout si jej lokálně ve webovém prohlížeči.

Klikněte na tlačítko „Stáhnout svůj HTML kód“.

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