stitch-ui-designer
Design, preview, and generate UI code using Google Stitch (via MCP). Helps developers choose the best UI by generating previews first, allowing iteration, and then exporting code.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Design, preview, and generate UI code using Google Stitch (via MCP). Helps developers choose the best UI by generating previews first, allowing iteration, and then exporting code.
How to use
Zainstaluj wymagane narzędzia. Upewnij się, że masz zainstalowane npx i mcporter. Jeśli nie masz ich jeszcze, zainstaluj je w swoim środowisku.
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.
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".
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ś.
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.
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.