Asystenci kodowania, tacy jak Cursor czy Claude Code, zrewolucjonizowały sposób, w jaki pracujemy. Generowanie kodu nigdy nie było prostsze. Wystarczy prompt, a nowy element pojawia się od razu w aplikacji. Chociaż to niesamowita wygoda, czy zastanawiałeś się kiedyś, czy to naprawdę optymalne rozwiązanie?

Zazwyczaj generujemy jedną wersję, a potem ją poprawiamy — co często bywa czasochłonne i mało efektywne. Brakuje nam możliwości porównania kilku pomysłów jednocześnie, by szybko wybrać najlepsze rozwiązanie.

Co to jest Superdesign?

Superdesign to odpowiedź na ten problem. To interface i zbiór instrukcji, które integrują się z asystentami kodowania i VS Code, pozwalając na generowanie i podgląd kilku obiektów naraz.

Wyobraź sobie, że prosisz o stworzenie sekcji "hero" w pięciu różnych wariantach. Zamiast czekać na jedną wersję i ją modyfikować, Superdesign wyświetli je wszystkie obok siebie. Dzięki temu możesz wygodnie porównać design, układ i styl każdej z nich, a następnie wybrać tę, która najlepiej pasuje do Twojego projektu.

Jak zacząć z Superdesign?

Pierwszym krokiem jest wejście na stronę https://www.superdesign.dev i pobranie odpowiedniego rozszerzenia do VS Code. Po instalacji użyj skrótu CTRL + Shift + P i znajdź nową komendę "Superdesign: initialize Superdesign". W Twoim projekcie, w folderze .cursor-rules, pojawi się nowy plik o nazwie design.md. Dla Claude Code i Windsurf też zostaną utworzone odpowiednie pliki.

Jak to działa w praktyce?

Superdesign możemy używać na dwa sposoby: przez asystenta wbudowanego w rozszerzenie lub integrując go z asystentem, z którego już korzystamy.

Aby używać wbudowanego asystenta, musimy podać klucz API do Anthropic lub OpenAI. Jeśli masz już wykupionego Cursora, to rozwiązanie może być dla Ciebie mniej korzystne, ponieważ używanie własnych kluczy API często wiąże się z niskimi limitami, zwłaszcza przy wydajniejszych modelach. Wbudowany asystent ma jednak kilka przydatnych funkcji, które zostaną opisane w dalszej części tekstu.

Drugim sposobem jest zintegrowanie Superdesigna z własnym asystentem, na przykład Cursorem. Podczas inicjacji Superdesign tworzy plik design.md z całym zestawem instrukcji, które określają, kiedy funkcja ma się aktywować i co przygotować aby wizualizacje działały. Na samej górze pliku możemy przeczytać kiedy reguła powinna się sama inicjalizować: “When asked to design UI & frontend interface”.

Uruchamianie funkcji zgodnie z tą regułą nie zawsze działa idealnie w Cursorze, szczególnie gdy język promptu różni się od języka reguły. Dlatego, aby upewnić się, że Superdesign się włączy, najlepiej jest wrzucić bezpośrednio w prompt @design.md.

@design.mdc pomóż mi przygotować nowy design hero sekcji bloga ale bardziej minimalistyczny. Używaj kolorów zapisanych w konfiguracji tailwind

W zapytaniach możemy dodawać dodatkowe instrukcje, dzięki czemu nowy projekt będzie zawierał wszystkie potrzebne nam elementy. Po wysłaniu zapytania, asystent, zanim przygotuje wizualizację, najpierw zwraca prosty plan strony napisany w ASCII.

Dzięki temu możemy szybko ocenić, czy projekt idzie w pożądanym przez nas kierunku i, w razie potrzeby, wprowadzić zmiany. Jeśli uznamy, że plan nam odpowiada, następnym poleceniem może być…

Super. Przygotuj 5 iteracji

W odpowiedzi na prompt w katalogu .superdesign/design_iterations zostaną utworzone pliki HTML, CSS i JS. Możemy też poprosić o umieszczenie ich w jednym pliku HTML. Po zainstalowaniu rozszerzenia, do naszej dyspozycji jest komenda Superdesign: open canvas view.

Dzięki temu widokowi mamy estetycznie zestawione, obok siebie, wszystkie przygotowane projekty.

Korzystając z toolbara, możemy sprawdzić, jak przygotowane propozycje prezentują się na różnych urządzeniach.

Po kliknięciu na jedną z wygenerowanych opcji pojawią się dodatkowe możliwości.

Funkcje te są zintegrowane z asystentem Superdesign, a po ich kliknięciu automatycznie wkleja się gotowy prompt.

• Create variations

  – załącza plik i dodaje „Create more variations based on this style”

• Iterate with feedback

  – załącza plik i dodaje „Please create a few variations with this feedback:”

Takie same efekty możemy osiągnąć w naszym własnym asystencie, jednak musimy ręcznie wkleić plik.

Stwórz 5 nowych wariantów bazująć na tym @hero_minimalist_1.html

Kiedy jeden z projektów nam odpowiada, możemy wprowadzić go do naszej aplikacji. Wystarczy skopiować gotowy prompt, klikając Copy prompt → Cursor. Wygląda on następująco:

<cały HTML elemenetu> Above is the design implementation, please use that as a reference to build a similar UI component. Make sure to follow modern React and TypeScript best practices.

Możemy do niego dodać własne instrukcje, na przykład „zmień wszystkie klasy i style CSS na klasy Tailwind”. Wszystko zależy od potrzeb i specyfiki danego projektu.

Podsumowanie

Superdesign to system, który pozwala na generowanie, podgląd i iterację wielu wariantów kodu jednocześnie, co znacznie przyspiesza pracę. Zamiast poprawiać jedną wersję, możesz od razu wybrać optymalne rozwiązanie, co zwiększa efektywność i poprawia jakość projektu. To narzędzie, które każdy programista powinien mieć na uwadze.