implementing-figma-designs

Skill do implementacji projektów Figmy w stosunku 1:1 przy użyciu biblioteki komponentów OneKey. Skupiasz się na dokładności wizualnej — tekst, kolory, spacing — bez martwienia się o integrację danych czy tłumaczenia. Używasz mock data dopasowanych do projektu, aby szybko uzyskać interfejs zgodny z designem. Idealne dla developerów, którzy chcą szybko przejść od mockupu do kodu bez rozpraszania się szczegółami backendu.

1. Otwórz projekt Figmy, który chcesz zaimplementować, i przygotuj go w widoku — skill będzie analizować strukturę warstw, kolory i spacing bezpośrednio z designu.
2. Uruchom skill z poleceniem implementacji projektu — podaj ścieżkę do komponentu, w którym chcesz pracować, oraz nazwę ekranu lub sekcji z Figmy.
3. Skill przeskanuje strukturę komponentów OneKey dostępnych w packages/components/src/ — automatycznie dopasuje prymitywy (Button, Icon, Stack), formularze (Input, Select) lub composite components (Dialog, Tabs) do elementów z projektu.
4. Hardkoduj dane dokładnie tak, jak widać w Figmie — zamiast API czy hook'ów do pobierania danych, utwórz mock obiekty i tablice pasujące do designu.
5. Pomiń tłumaczenia i integrację — używaj zwykłych stringów z projektu, bez kluczy intl.formatMessage czy ETranslations.
6. Sprawdzaj demo komponentów w packages/kit/src/views/Developer/pages/Gallery/Components/stories/ — tam znajdziesz przykłady użycia każdego komponentu, aby upewnić się, że styling i struktura zgadzają się z Figmą.