Przenoszenie projektu z Figmy do kodu: proces krok po kroku z AI
Do automatyzacji przenoszenia projektu z Figmy do kodu użyj trybu Dev z MCP. Wymagania: dostęp do trybu Dev w Figmie, asystent AI taki jak Cursor oparty na GPT-4o lub podobnym modelu, zrozumienie podstawowych zasad tworzenia stron internetowych oraz umiejętność precyzyjnego formułowania promptów. Proces opiera się na systematycznej strukturze nazewnictwa ramek dla powtarzalności.
Struktura nazewnictwa ramek:
%pageName %type [%widthScreen · %theme]Przykład: Home default [1920 · Light]. Punkty graniczne: 1920px, 1280px, 768px, 375px. Motywy: light/dark.
Zasady przygotowania projektu
Przestrzegaj pięciu kluczowych zasad, aby zminimalizować błędy AI.
Zasada 1: Treść i style. Wstaw ostateczne teksty, grafikę w kontenerach rzeczywistego rozmiaru. Utwórz style: Light/Primary, Dark/Primary.
Zasada 2: Struktura blokowa. Twórz oddzielne ramki dla bloków (Hero, Menu, Footer), a nie tylko pełnych stron. Umożliwia to lokalizację poprawek.
Zasada 3: Logika zmiany rozmiaru. Utwórz ramkę layoutu z wizualnymi wskaźnikami: strzałki dla rozciągania, stałe rozmiary, min/max-width, przenoszenie.
Zasada 4: Stany UI. Oddzielne ramki dla hover, active, disabled. Pokaż cały kontekst, np. Menu Hover [1920 · Light].
Zasada 5: Motywy. Duplikuj ramki dla light/dark z kolorami ze stylów.
Włącz MCP: Dev Mode → Inspect → MCP (Server status: Enabled, Image source: Download). Oczekuj niskiej jakości SVG/rastrów — zastępuj ręcznie lub przez prompty.
Etapy przenoszenia do kodu
Pracuj etapami, unikając globalnych zapytań. AI powinien analizować warstwy Figma MCP, a nie zrzuty ekranu.
Krok 1: Fundament projektu
Stwórz początkowy prompt:
Rozwijamy stronę na temat [opis]. Figma MCP: [link]. Punkty graniczne w nazwach ramek: [lista]. Zasoby z Figmy. Etapy: doprecyzuj pytania.
AI przeanalizuje, podzieli na kroki. Dodaj nawigację.
Krok 2: Agent z zasadami
Wygeneruj AGENTS_BASE.md dla ustalenia stylu:
- Ponowne użycie komponentów.
- Responsywność według punktów granicznych.
- Obsługa Retina (@2x).
- Brak nadpisywania kodu bez potwierdzenia.
Pisz po polsku lub angielsku — jakość się nie zmienia.
Krok 3: Iteracyjne budowanie
Dopracowuj bloki według ramek:
W Feature [768 · Light] galeria z poziomym przewijaniem: [link]. +20px padding-bottom dla paska przewijania.
Przechodź do następnego bloku po ustaleniu.
Krok 4: Zastępowanie zasobów
- Ręcznie: zmieniaj nazwy plików.
- Przez AI:
> W Hero zastąp [id] na [email protected].
> W Feature List: ic_unlimList_BENEFIT_24 (32x32px) zamiast placeholderów.
Krok 5: Funkcjonalność
Dodawaj izolowanie:
Lokalizacja: dropdown PL/EN przy przycisku [name]. Doprecyzuj pytania.
Obsługa: responsywność, retina, motywy, animacje.
Co jest ważne
- Systematyczne nazewnictwo ramek zapewnia powtarzalność.
- Wizualne instrukcje layoutu kompensują słabości AI w auto layout.
- Podejście etapowe z agentem minimalizuje regresje kodu.
- Ręczne zastępowanie zasobów jest obowiązkowe dla jakości.
- Skupienie na szczegółach: nie bierz wszystkich ról naraz, aby uniknąć wypalenia.
— Editorial Team
Brak komentarzy.