stitch-ui-designer

Skill do projektowania interfejsów użytkownika z wykorzystaniem Google Stitch. Generujesz interfejs na podstawie opisu tekstowego, od razu widzisz podgląd, możesz iterować i ulepszać design, a następnie wyeksportować gotowy kod HTML i CSS. Idealne dla deweloperów, którzy chcą szybko prototypować UI bez ręcznego kodowania.

1. Zainstaluj wymagane narzędzia. Upewnij się, że masz zainstalowane npx i mcporter. Jeśli nie masz ich jeszcze, zainstaluj je w swoim środowisku.

2. Skonfiguruj serwer Stitch w mcporter (tylko za pierwszym razem). Uruchom polecenie mcporter config add stitch --command "npx" --args "-y stitch-mcp-auto". Narzędzie może poprosić Cię o uwierzytelnienie w Google Cloud — postępuj zgodnie z instrukcjami na ekranie.

3. Opisz interfejs, który chcesz stworzyć. Powiedz skillowi, jaki interfejs Ci potrzebny, na przykład "Ekran logowania dla aplikacji kryptowalutowej" lub "Panel administracyjny z tabelą użytkowników".

4. Obejrzyj podgląd wygenerowanego interfejsu. Skill wygeneruje interfejs na podstawie Twojego opisu i pokaże Ci podgląd graficzny. Sprawdź, czy wygląda tak, jak sobie wyobrażałeś.

5. Iteruj i ulepszaj design. Jeśli chcesz coś zmienić, powiedz o tym skillowi — może zmienić kolory, układ, tekst lub inne elementy. Każda zmiana będzie od razu widoczna w podglądzie.

6. Wyeksportuj kod HTML i CSS. Gdy design Ci się spodoba, skill wyeksportuje gotowy kod HTML i CSS, który możesz skopiować do swojego projektu lub zapisać do pliku.