Codex: Od screenshota do kodu – AI implementuje UI

Masz mockup w Figmie albo screenshot z Dribbble. Codex może zamienić go w działający kod – w twoim frameworku, z twoimi komponentami, gotowy do integracji.

1. Image inputs: przeciągnij mockup
2. Constraints: framework i komponenty
3. Iteracyjny workflow
4. Figma MCP: pełna integracja
5. Rozwiązywanie problemów
6. Co Codex zrobi dobrze, a co nie

Image inputs: przeciągnij mockup

W sesji CLI możesz przeciągnąć obrazek bezpośrednio do terminala. Codex zobaczy:

• Screenshoty aplikacji
• Mockupy z Figmy/Sketch
• Zdjęcia UI z telefonu
• Diagramy i wireframe-y

> [przeciągasz screenshot dashboardu]
> zaimplementuj ten dashboard w React z Tailwind

Codex analizuje layout, kolory, typography i generuje kod pasujący do obrazka.

Obsługiwane formaty:

• PNG (zalecany dla UI – bezstratna kompresja)
• JPEG (dla zdjęć, ale unikaj niskiej jakości)
• WebP
• GIF (tylko pierwszy frame)

Maksymalne wymiary: Codex radzi sobie najlepiej z obrazkami do 4096×4096 pikseli. Większe są skalowane, co może obniżyć jakość detali.

Constraints: framework i komponenty

Sam obrazek to za mało. Podaj kontekst:

> zaimplementuj ten ekran używając:
> - React + TypeScript
> - shadcn/ui dla komponentów
> - Tailwind CSS
> - istniejący hook useAuth() dla danych użytkownika

Codex przeczyta twoje istniejące pliki i dopasuje styl do projektu. Jeśli używasz już Button z shadcn/ui, nowy kod też będzie go używał.

Pro tip: Jeśli masz design system, daj Codexowi przykład istniejącego komponentu jako referencję:

> zaimplementuj ten formularz w stylu naszego istniejącego
> komponentu LoginForm.tsx – użyj tych samych patternów

Iteracyjny workflow

Design-to-code rzadko działa za pierwszym razem. Workflow wygląda tak:

1. Mockup → kod – pierwsza wersja
2. Preview – uruchom npm run dev, sprawdź wynik
3. Feedback – „zmień padding na większy", „przycisk powinien być po prawej"
4. Tweak – Codex poprawia
5. Repeat – aż będzie dobrze

> [screenshot poprawionego UI]
> teraz wygląda tak – zmień margines między kartami

Możesz pokazywać Codexowi screenshoty tego co wygenerował i iterować wizualnie. To potężna technika: zamiast opisywać problem słowami, pokazujesz różnicę między oczekiwanym a aktualnym wyglądem.

Przykładowy workflow dla karty produktu:

Iteracja 1: "zaimplementuj tę kartę produktu"
→ Codex generuje strukturę
Iteracja 2: "cień jest za mocny, zdjęcie powinno być większe"
→ Codex poprawia style
Iteracja 3: [screenshot] "wyrównaj cenę do tego co pokazuję"
→ Codex dopasowuje layout
Iteracja 4: "dodaj hover state jak w naszym design systemie"
→ Gotowe

Figma MCP: pełna integracja

Zamiast screenshotów możesz podłączyć Figmę przez MCP:

> pobierz design z Figma frame "Dashboard v2"
> zaimplementuj w Next.js

To znacznie dokładniejsze niż screenshot – Codex ma dostęp do surowych danych designu, nie tylko pikseli.

Konfiguracja Figma MCP:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-server-figma"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "twój-token"
      }
    }
  }
}

Rozwiązywanie problemów

Problem: Codex generuje layout zupełnie inny niż na mockupie

Rozwiązanie: Dodaj więcej kontekstu. Opisz strukturę słownie:

> to jest dashboard z:
> - sidebar po lewej (250px szerokości)
> - header na górze (64px wysokości)
> - główna treść z 3 kartami w gridzie

Problem: Kolory nie pasują

Rozwiązanie: Podaj konkretne wartości lub zmienne z design systemu:

> użyj tych kolorów:
> - primary: #3B82F6
> - background: #F8FAFC
> - text: #1E293B

Problem: Codex ignoruje istniejące komponenty

Rozwiązanie: Wskaż konkretne pliki:

> użyj komponentów z src/components/ui/
> szczególnie Button, Card i Input

Problem: Wygenerowany kod nie jest responsywny

Rozwiązanie: Dodaj breakpoints jako constraint:

> mobile-first, breakpoints:
> - sm: 640px
> - md: 768px
> - lg: 1024px
> kafelki: 1 kolumna na mobile, 2 na md, 3 na lg

Co Codex zrobi dobrze, a co nie

Codex to narzędzie do przyspieszenia, nie zastąpienia. Wygenerowany kod to 70-80% drogi – resztę dopieszczasz ręcznie lub kolejnymi iteracjami z AI.

Najlepsze wyniki gdy:

• Masz jasno zdefiniowany design system
• Używasz popularnych frameworków
• Podajesz dużo kontekstu w promptach
• Iterujesz zamiast oczekiwać perfekcji za pierwszym razem

Więcej o workflow z obrazkami w artykule o praktycznych workflow.