Diplomová práce v programu, specializaci Ostatní / Nespecifikováno.
MN reformulované zadání (aktuální):
Zásady vypracování práce:
1. Analyzujte dostupné přístupy, nástroje a frameworky pro automatické generování zdrojového kódu webového rozhraní Blazor aplikací na základě grafických návrhů UI ve Figma. Zhodnoťte jejich možnosti, omezení a přínosy.
2. Proveďte analýzu současných přístupů používaných při návrhu a vývoji uživatelského rozhraní v technologii Blazor, včetně existujících komponentových knihoven a Razor Class Libraries (RCL; např. Leuze GUI-LIB, HavitBlazor, MudBlazor, Syncfusion, DevExpress). Zmapujte také dostupnost nástrojů či API umožňujících extrakci dat z Figma.
3. Navrhněte architekturu řešení umožňující zpracování návrhu z nástroje Figma a jeho převod na strukturovaný zdrojový kód komponent uživatelského rozhraní pro technologii Blazor. Současně se pokuste definovat způsob mapování Figma komponent, vlastností a stylů na konkrétní Blazor komponenty.
4. Implementujte funkční prototyp generátoru umožňujícího částečné nebo úplné generování uživatelského rozhraní v technologii Blazor z návrhů vytvořených ve Figma.
5. Výsledné řešení otestujte, ověřte jeho kvalitu na vybraných ukázkových návrzích z nástroje Figma a kriticky zhodnoťte dosažené výsledky.
*********************************************************************
MD zadání (old):
1. Analyzujte dostupné frameworky a nástroje určené pro převod UI návrhů do webového rozhraní.
2. Navrhněte architekturu řešení, které umožní zpracovat návrh z nástroje Figma a převést jej na strukturovaný Blazor kód grafického rozhraní.
3. Implementujte funkční prototyp generátoru umožňujícího částečnou nebo úplnou generaci aplikace v technologii Blazor.
4. Otestujte navržené řešení na vybraných ukázkových návrzích z nástroje Figma a integrujte jej do zvoleného projektu v technologii Blazor.
5. Výsledné řešení kriticky zhodnoťte.
****
Informace od firmy:
Úvod
Cílem diplomové práce je návrh a realizace systému pro automatizované generování Razor kódu na základě
uživatelských rozhraní vytvořených v nástroji Figma. Výsledné řešení (App Builder) by mělo umožnit převzít
grafický návrh z Figma a automaticky vytvořit Blazor aplikaci, zahrnující Razor komponenty, C# logiku a CSS
stylování, a to s využitím předem definované Razor Class Library (RCL).
Součástí práce bude také analýza existujících postupů a nástrojů (např. App Builder, generátory kódu, AI
based konverze) a návrh vlastního mechanismu mapování Figma komponent do odpovídajících Blazor prvků.
Výsledkem bude funkční prototyp generátoru, který dokáže převést část designu do reálné Blazor aplikace.
Zadání
1. Analyzujte dostupné frameworky a nástroje určené pro převod UI návrhů na webové rozhraní, se
zaměřením na technologie umožňující konverzi designu z Figma do kódu (např. App Builder, různé
Figma pluginy, existující UI kity). Zhodnoťte jejich možnosti, omezení a přínosy při generování
Blazor aplikací.
2. Proveďte analýzu současných přístupů používaných při návrhu a vývoji Blazor UI, včetně
existujících komponentových knihoven a RCL (např. Leuze GUI-LIB, HavitBlazor, MudBlazor,
Syncfusion, DevExpress). Zmapujte také dostupnost nástrojů či API umožňujících extrakci dat z
Figma.
3. Navrhněte architekturu řešení, které umožní zpracovat Figma design (např. JSON export, plugin
data, Figma API) a převést jej na strukturovaný Blazor GUI kód. Definujte způsob mapování Figma
komponent, vlastností a stylů na konkrétní prvky Blazor RCL.
4. Naimplementujte funkční prototyp generátoru umožňujícího částečnou nebo úplnou generaci
Blazor aplikace. Prototyp by měl zahrnovat:
- načtení designu z Figma
- interní reprezentaci GUI
- mapování na konkrétní Blazor komponenty
- generování Razor šablon, C# kódu a stylů
- využití připojené Razor Class Library
5. Otestujte navržené řešení na vybraných ukázkových Figma návrzích a integrujte jej do zvoleného
Blazor projektu. Zhodnoťte kvalitu generovaného kódu, flexibilitu systému a přínos navrženého
přístupu při vývoji webových aplikací.
6. Zpracujte dokumentaci výsledného řešení, včetně návrhu architektury, popisu implementace,
případových studií a možných budoucích rozšíření (např. AI mapování komponent, plná podpora
layoutů, generování interakcí).
Doporučená literatura
Dokumentace Figma API
Dokumentace Blazor a ASP.NET Core (ASP.NET Core Blazor | Microsoft Learn)
Dokumentace vybrané RCL (např. Leuze GUI-LIB, HAVIT Blazor | Free Bootstrap 5 components for
Blazor, MudBlazor - Blazor Component Library,)
Akademický rok 2026-2027
Zadání diplomové práce FAV ZČU
2 z 1 Leuze Engineering Czech s.r.o.
App Builder (Infragistics UI Controls and Tools For Developers and UX Pros / Prototyping and
Usability Testing with Indigo Design | Design to Code | UI & UX Designs Infragistics) –
dokumentace a příklady
Publikace a články týkající se generování UI z designu, reverse engineering UI, DSL pro UI kód
Materiály k návrhovým vzorům pro UI generátory a codegeneration pipelines
Požadavky
Přehled v oblasti webových technologií (HTML, CSS, JavaScript)
Znalost frameworku Blazor a práce s Razor komponentami výhodou
Schopnost práce s API třetích stran (např. REST API Figma)
Zkušenost s C# a generováním kódu výhodou
Kontakt a zodpovědná osoba za Leuze
Jméno a příjmení vedoucího diplomové práce
Email vedoucího diplomové miroslav.siska@leuze.com
Téma vypsal: Ing. Michal Nykl, Ph.D. (UN 326)
Externí téma:Vypsáno pro akademický rok 2026/2027 dne: 2026-03-23
Zadáno komu: Lukáš Runt (Zadané)