design-lab

Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.

1. Zainstaluj umiejętność w swoim projekcie, upewniając się, że znajdujesz się w katalogu głównym aplikacji zawierającym plik package.json i konfiguracyjne pliki frameworka (next.config.js, vite.config.ts itp.).

2. Uruchom Design Lab i odpowiedz na pytania z sesji projektowej — opisz komponent, który chcesz zaprojektować, jego cel oraz ograniczenia. Narzędzie automatycznie wykryje twój framework (Next.js z App Router lub Pages Router, Vite, Remix, Nuxt, Astro) i system stylów (Tailwind CSS, Material UI, Chakra UI, Ant Design, styled-components, Emotion lub CSS).

3. Czekaj, aż umiejętność wygeneruje pięć odrębnych wariantów interfejsu w tymczasowym katalogu roboczym. Każdy wariant będzie dostosowany do wykrytego stosu technologicznego i gotowy do podglądu.

4. Przejrzyj każdy wariant i zbierz opinie — możesz testować komponenty bezpośrednio w tymczasowej przestrzeni projektowej lub udostępnić je zespołowi do oceny.

5. Wybierz preferowany wariant i poproś o refinement — umiejętność zrefiniuje wybrany projekt na podstawie twoich uwag.

6. Potwierdź ostateczny projekt — po zatwierdzeniu Design Lab automatycznie usunie wszystkie pliki tymczasowe i wygeneruje plan wdrożenia z krokami do integracji komponentu w twojej aplikacji. Jeśli chcesz anulować proces w dowolnym momencie, wystarczy powiedzieć "anuluj" lub "stop", a wszystkie artefakty zostaną usunięte.