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.
- Image inputs: przeciągnij mockup
- Constraints: framework i komponenty
- Iteracyjny workflow
- Figma MCP: pełna integracja
- 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.
Wskazówka: Im wyższa jakość obrazka, tym lepszy wynik. Screenshoty w 2x resolution działają lepiej niż skompresowane JPEG-i.
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
| Constraint | Przykład |
| Framework | React, Vue, Svelte, Next.js |
| Styling | Tailwind, CSS Modules, styled-components |
| Komponenty | shadcn/ui, MUI, własna biblioteka |
| Routing | React Router, Next.js App Router |
| State | useState, Zustand, Redux |
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ł.
Iteracyjny workflow
Design-to-code rzadko działa za pierwszym razem. Workflow wygląda tak:
- Mockup → kod — pierwsza wersja
- Preview — uruchom
npm run dev, sprawdź wynik - Feedback — "zmień padding na większy", "przycisk powinien być po prawej"
- Tweak — Codex poprawia
- 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.
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
Figma MCP daje:
- Dostęp do wszystkich frame-ów i komponentów
- Dokładne kolory, typography, spacing z design tokens
- Auto-sync gdy designer zmieni design
- Eksport assetów (ikony, obrazki)
To znacznie dokładniejsze niż screenshot — Codex ma dostęp do surowych danych designu, nie tylko pikseli.
Co Codex zrobi dobrze, a co nie
| ✅ Działa dobrze | ⚠️ Wymaga poprawek |
| Statyczne layouty | Złożone animacje |
| Standardowe komponenty | Niestandardowe interakcje |
| Responsywność (z guidance) | Pixel-perfect na 100% |
| Integracja z istniejącym kodem | Odtworzenie brand identity |
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.