design-system-developer

Skill dla deweloperów pracujących nad interfejsami iOS w Anytype. Automatycznie kieruje Cię do odpowiednich komponentów systemu designu: ikon w czterech rozmiarach (18, 24, 32, 40pt), typografii mapowanej z Figmy, kolorów i reguł spacing. Szczególnie przydatny przy tłumaczeniu projektów z Figmy na kod — eliminuje hardkodowanie wartości i zapewnia spójność wizualną.

1. Skill aktywuje się automatycznie, gdy pracujesz z ikonami, typografią, kolorami lub plikami w folderze DesignSystem/ lub Assets.xcassets. Możesz też ręcznie go uruchomić, gdy dyskutujesz o komponentach UI.

2. Aby dodać nową ikonę, wyeksportuj SVG z Figmy (np. "32/qr code" → QRCode.svg), umieść plik w odpowiednim folderze Assets.xcassets/DesignSystem/x32/QRCode.imageset/, a następnie uruchom polecenie make generate.

3. W kodzie Swift używaj ikon poprzez stałe systemu designu, nigdy nie hardkoduj nazw. Dla ikony 32pt (najczęstszy przypadek): Image(asset: .X32.qrCode). Dla ikon mniejszych (18pt toolbar, 24pt listy) lub większych (40pt funkcje) dostosuj rozmiar.

4. Typografia mapuje się bezpośrednio ze stylów Figmy na enumy Swift. Dla tytułów ekranu użyj AnytypeText("Settings", style: .uxTitle1Semibold), dla sekcji .uxTitle2Semibold, dla tekstu głównego .bodyRegular, a dla małych etykiet .caption1Medium (bez prefiksu "ux").

5. Spacing obliczaj według wzoru: pozycja Y następnego elementu minus (pozycja Y bieżącego elementu plus jego wysokość). Zawsze korzystaj ze stałych systemu designu zamiast wartości na sztywno.

6. Po każdej zmianie w zasobach (dodanie ikony, zmiana koloru) uruchom make generate, aby kod został zaktualizowany i spójny z systemem designu.