Průvodce: Figma do kódu s AI a MCP

Převod designu z Figmy do kódu: Postupný proces s umělou inteligencí

Pro automatizaci převodu designu z Figmy do HTML/CSS použijte Dev Mode s MCP. Požadavky: přístup k Figma Dev Mode, AI asistent jako Cursor založený na GPT-4o nebo podobném modelu, znalost základů HTML/CSS a schopnost přesně formulovat prompty. Proces je založen na systematické struktuře rámců pro opakovatelnost.

Struktura pojmenování rámců:

%pageName %type [%widthScreen · %theme]

Příklad: Home default [1920 · Light]. Breakpointy: 1920px, 1280px, 768px, 375px. Témata: light/dark.

Pravidla přípravy návrhu

Dodržujte pět klíčových pravidel pro minimalizaci chyb AI.

Pravidlo 1: Obsah a styly. Vložte finální texty, grafiku do kontejnerů skutečné velikosti. Vytvořte styly: Light/Primary, Dark/Primary.

Pravidlo 2: Bloková struktura. Vytvářejte samostatné rámce pro bloky (Hero, Menu, Footer), nejen celé stránky. To umožňuje lokalizovat úpravy.

Pravidlo 3: Logika změny velikosti. Vytvořte layout-rámec s vizuálními indikátory: šipky pro roztažení, pevné rozměry, min/max-width, zalamování.

Pravidlo 4: Stavy UI. Samostatné rámce pro hover, active, disabled. Zobrazujte celý kontext, například Menu Hover [1920 · Light].

Pravidlo 5: Témata. Duplikujte rámce pro light/dark s barvami ze stylů.

Zapněte MCP: Dev Mode → Inspect → MCP (Server status: Enabled, Image source: Download). Očekávejte nízkou kvalitu SVG/rasteru — nahraďte ručně nebo přes prompty.

Fáze převodu do kódu

Pracujte postupně, vyhněte se globálním požadavkům. AI by měla analyzovat vrstvy Figma MCP, ne screenshoty.

Krok 1: Základ projektu

Vytvořte počáteční prompt:

Rozvíjíme web na téma [popis]. Figma MCP: [odkaz]. Breakpointy v názvech rámců: [seznam]. Zdroje z Figmy. Fáze: upřesni otázky.

AI analyzuje, rozdělí na kroky. Přidejte navigaci.

Krok 2: Agent s pravidly

Generujte AGENTS_BASE.md pro fixaci stylu:

• Znovupoužití komponent.
• Responzivita podle breakpointů.
• Podpora Retina (@2x).
• Žádné přepsání kódu bez potvrzení.

Pište česky nebo anglicky — kvalita se nemění.

Krok 3: Iterativní sestavení

Dolaďte bloky podle rámců:

V Feature [768 · Light] galerie s horizontálním posuvem: [odkaz]. +20px padding-bottom pro scrollbar.

Přejděte k dalšímu bloku po fixaci.

Krok 4: Nahrazení assetů

• Ruční: přejmenujte soubory.
• Přes AI:

> V Hero nahraď [id] na [email protected].

> V Feature List: ic_unlimList_BENEFIT_24 (32x32px) místo zástupných obrázků.

Krok 5: Funkcionalita

Přidávejte izolovaně:

Lokalizace: dropdown CZ/EN podle tlačítka [name]. Upřesni otázky.

Podpora: responzivita, retina, témata, animace.

Co je důležité

• Systematické pojmenování rámců zajišťuje opakovatelnost.
• Vizuální layout-instrukce kompenzují slabiny AI v auto layout.
• Postupný přístup s agentem minimalizuje regrese kódu.
• Ruční nahrazení assetů je nutné pro kvalitu.
• Zaměření na detaily: neberte všechny role najednou, abyste se vyhnuli vyhoření.

— Editorial Team