21st.dev Magic

Projektowanie

Generuj dopracowane komponenty UI natychmiast za pomocą Neotask na OpenClaw

Co możesz zrobić

Neotask łączy się z 21st.dev Magic poprzez OpenClaw, zapewniając natychmiastowy dostęp do ogromnej biblioteki gotowych do produkcji komponentów UI i generowania komponentów wspomaganego AI — wszystko poprzez rozmowę.

Generowanie komponentów

  • Generuj z opisów — Opisz potrzebny interfejs prostym językiem i otrzymaj kompletne, wystylizowane komponenty React z Tailwind CSS, shadcn/ui lub preferowaną biblioteką
  • Iteruj z informacją zwrotną — Powiedz "zrób to bardziej kompaktowe" lub "dodaj stan ładowania", a Neotask natychmiast zastosuje Twoje uwagi z nowym wyjściem kodu
  • Generowanie wielu wariantów — Zamów wiele wariantów projektu naraz, aby wybrać najlepsze dopasowanie do Twojego projektu
  • Wbudowana dostępność — Wygenerowane komponenty od początku stosują najlepsze praktyki ARIA i wzorce nawigacji klawiaturowej

    • Wyszukiwanie w bibliotece komponentów

  • Szukaj według wzorca — Znajdź komponenty pasujące do Twojego przypadku użycia: "tabela cennikowa z przełącznikiem na rozliczenie miesięczne/roczne" lub "szuflada powiadomień z licznikiem nieprzeczytanych"
  • Przeglądaj według kategorii — Eksploruj komponenty według typu: paski nawigacyjne, okna modalne, formularze, karty, tabele danych, panele i więcej
  • Filtruj według stosu technologicznego — Szukaj komponentów specyficznych dla Twojego stosu technologicznego (React, Vue, Tailwind, shadcn, Radix UI)
  • Fragmenty gotowe do skopiowania — Każdy komponent z biblioteki jest sformatowany do natychmiastowego użycia w Twojej bazie kodu

    • Integracja z systemem projektowym

  • Dopasuj do istniejącego stylu — Podaj swoje tokeny kolorów lub konfigurację Tailwind, a Neotask wygeneruje komponenty pasujące do Twojego systemu projektowego
  • Kompozycja komponentów — Poproś o pełny układ strony, łącząc ze sobą wiele fragmentów komponentów
  • Warianty trybu ciemnego — Zamów wersje trybu ciemnego dowolnego komponentu ze spójnym użyciem tokenów

    • Spróbuj zapytać

  • "Wygeneruj komponent karty cennikowej z plakietką popularności, listą funkcji i przyciskiem CTA używając Tailwind"
  • "Potrzebuję responsywnego paska nawigacyjnego z logo po lewej, linkami nawigacyjnymi na środku i przyciskiem Zaloguj się po prawej"
  • "Wyszukaj w 21st.dev komponent tabeli danych z sortowaniem, filtrowaniem i paginacją"
  • "Utwórz sekcję hero z dużym nagłówkiem, podtytułem, dwoma przyciskami CTA i obrazem makiety po prawej"
  • "Zrób komponent bardziej kompaktowy i dodaj szkieletowy stan ładowania"
  • "Znajdź komponent okna dialogowego modalnego, który wsuwa się z prawej strony jako szuflada"
  • "Wygeneruj stepper onboardingowy z 4 krokami i wskaźnikiem postępu"
  • "Potrzebuję systemu powiadomień toast, który układa powiadomienia w prawym dolnym rogu"

    • Wskazówki dla zaawansowanych

  • Bądź konkretny w swoich zamierzeniach projektowych — "styl enterprise SaaS z subtelnymi obramowaniami" lub "aplikacja konsumencka z zaokrąglonymi rogami i miękkimi cieniami" daje diametralnie różne wyniki
  • Poproś Neotask o dostosowanie znalezionego komponentu 21st.dev do Twojej istniejącej palety kolorów, podając wartości kolorów podstawowych/drugorzędnych
  • Używaj generowania komponentów na wczesnym etapie procesu projektowego, aby szybko prototypować układy przed zaangażowaniem w pełny system projektowy
  • Połącz z przepływem pracy w edytorze kodu przez OpenClaw — wygeneruj komponent, udoskonal go konwersacyjnie i wyślij końcowy plik bezpośrednio do swojego projektu

    • Works Well With