21st.dev Magic

Design

Neotask verbindet sich über OpenClaw mit 21st.dev Magic — sofortiger Zugang zu produktionsfertigen UI-Komponenten und KI-gestützter Komponentengenerierung per Konversation.

Was Sie tun können

Neotask verbindet sich über OpenClaw mit 21st.dev Magic und gibt Ihnen sofortigen Zugang zu einer riesigen Bibliothek produktionsfertiger UI-Komponenten und KI-gestützter Komponentengenerierung — alles per Konversation.

Komponentengenerierung

  • Aus Beschreibungen generieren — Beschreiben Sie die benötigte UI in einfacher Sprache und erhalten Sie komplette, gestylte React-Komponenten mit Tailwind CSS, shadcn/ui oder Ihrer bevorzugten Bibliothek
  • Mit Feedback iterieren — Sagen Sie "mach es kompakter" oder "füge einen Ladezustand hinzu" und Neotask wendet Ihr Feedback sofort mit neuem Code-Output an
  • Multi-Varianten-Generierung — Fordern Sie mehrere Design-Variationen gleichzeitig an, um die beste Passung für Ihr Projekt zu wählen
  • Barrierefreiheit eingebaut — Generierte Komponenten folgen ARIA-Best-Practices und Tastaturnavigationsmustern von Anfang an

    • Komponentenbibliothek-Suche

  • Nach Muster suchen — Komponenten finden, die zu Ihrem Anwendungsfall passen: "eine Preistabelle mit Umschalter für monatlich/jährlich" oder "eine Benachrichtigungsschublade mit Ungelesen-Zähler"
  • Nach Kategorie durchsuchen — Komponenten nach Typ erkunden: Navbars, Modals, Formulare, Cards, Datentabellen, Dashboards und mehr
  • Nach Stack filtern — Komponenten spezifisch für Ihren Tech-Stack suchen (React, Vue, Tailwind, shadcn, Radix UI)
  • Kopierfertige Snippets — Jede Komponente aus der Bibliothek ist für sofortige Verwendung in Ihrem Codebase formatiert

    • Design-System-Integration

  • Ihren vorhandenen Stil matchen — Stellen Sie Ihre Farb-Tokens oder Tailwind-Config bereit und Neotask generiert Komponenten, die zu Ihrem Design-System passen
  • Komponentenkomposition — Fordern Sie ein vollständiges Seitenlayout an, indem Sie mehrere Komponenten-Snippets zusammensetzen
  • Dark-Mode-Varianten — Fordern Sie Dark-Mode-Versionen jeder Komponente mit konsistenter Token-Nutzung an

    • Fragen Sie zum Beispiel

  • "Generiere eine Preiskarten-Komponente mit Popular-Badge, Feature-Liste und CTA-Button mit Tailwind"
  • "Ich brauche eine responsive Navigationsleiste mit Logo links, Nav-Links in der Mitte und einem Anmelden-Button rechts"
  • "Suche bei 21st.dev nach einer Datentabellen-Komponente mit Sortierung, Filterung und Paginierung"
  • "Erstelle eine Hero-Section mit großer Überschrift, Untertitel, zwei CTA-Buttons und einem Mockup-Bild rechts"
  • "Mach die Komponente kompakter und füge einen Skeleton-Ladezustand hinzu"
  • "Finde eine Modal-Dialog-Komponente, die als Drawer von rechts einschiebt"
  • "Generiere einen Onboarding-Stepper mit 4 Schritten und Fortschrittsanzeige"
  • "Ich brauche ein Toast-Benachrichtigungssystem, das Benachrichtigungen unten rechts stapelt"

    • Profi-Tipps

  • Seien Sie spezifisch über Ihre Design-Absicht — "Enterprise-SaaS-Stil mit subtilen Rändern" oder "Consumer-App mit abgerundeten Ecken und weichen Schatten" produziert dramatisch unterschiedliche Ergebnisse
  • Bitten Sie Neotask, eine gefundene 21st.dev-Komponente an Ihre bestehende Farbpalette anzupassen, indem Sie Ihre Primär-/Sekundärfarben angeben
  • Nutzen Sie Komponentengenerierung früh im Design-Prozess, um schnell Layouts zu prototypen, bevor Sie sich auf ein vollständiges Design-System festlegen
  • Kombinieren Sie mit Ihrem Code-Editor-Workflow über OpenClaw — eine Komponente generieren, konversationell verfeinern und die finale Datei direkt in Ihr Projekt ausgeben

    • Works Well With