I
implementing-figma-designs
Implements Figma designs 1:1 using OneKey component library (还原设计稿).
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Implements Figma designs 1:1 using OneKey component library (还原设计稿).
How to use
- 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.
- Uruchom skill z poleceniem implementacji projektu — podaj ścieżkę do komponentu, w którym chcesz pracować, oraz nazwę ekranu lub sekcji z Figmy.
- 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. - 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.
- Pomiń tłumaczenia i integrację — używaj zwykłych stringów z projektu, bez kluczy
intl.formatMessageczyETranslations. - 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ą.