21st.dev Magic

Ontwerp

Genereer gepolijste UI-componenten direct via Neotask op OpenClaw

Wat je kunt doen

Neotask maakt verbinding met 21st.dev Magic via OpenClaw en geeft je direct toegang tot een enorme bibliotheek van productieklare UI-componenten en AI-gestuurde componentgeneratie — allemaal via conversatie.

Componentgeneratie

  • Genereer vanuit beschrijvingen — Beschrijf de UI die je nodig hebt in gewoon Nederlands en ontvang complete, gestylede React-componenten met Tailwind CSS, shadcn/ui of je favoriete bibliotheek
  • Itereer met feedback — Zeg "maak het compacter" of "voeg een laadstatus toe" en Neotask past je feedback onmiddellijk toe met een nieuwe code-uitvoer
  • Meervoudige variantgeneratie — Vraag meerdere ontwerpvariaties tegelijk aan zodat je de beste keuze voor je project kunt maken
  • Toegankelijkheid ingebouwd — Gegenereerde componenten volgen vanaf het begin ARIA-best practices en toetsenbordnavigatiepatronen

    • Componentbibliotheek doorzoeken

  • Zoek op patroon — Vind componenten die bij je gebruikssituatie passen: "een prijstabel met schakelaar voor maandelijkse/jaarlijkse facturering" of "een meldingslade met ongelezen aantal"
  • Blader op categorie — Verken componenten op type: navigatiebalken, modals, formulieren, kaarten, datatabellen, dashboards en meer
  • Filter op stack — Zoek naar componenten specifiek voor je technologiestack (React, Vue, Tailwind, shadcn, Radix UI)
  • Kopieerklare fragmenten — Elk component uit de bibliotheek is opgemaakt voor direct gebruik in je codebase

    • Ontwerpsysteemintegratie

  • Pas bij je bestaande stijl — Geef je kleurtokens of Tailwind-configuratie op en Neotask genereert componenten die bij je ontwerpsysteem passen
  • Componentcompositie — Vraag om een volledige paginalay-out door meerdere componentfragmenten samen te stellen
  • Donkere modusvarianten — Vraag donkere modusversies aan van elk component met consistent tokengebruik

    • Probeer te vragen

  • "Genereer een prijskaartcomponent met een populaire badge, functieslijst en een CTA-knop met Tailwind"
  • "Ik heb een responsieve navigatiebalk nodig met een logo links, navigatielinks in het midden en een Inloggen-knop rechts"
  • "Zoek op 21st.dev naar een datatabelcomponent met sortering, filtering en paginering"
  • "Maak een hero-sectie met een grote kop, ondertitel, twee CTA-knoppen en een mockup-afbeelding rechts"
  • "Maak het component compacter en voeg een skeleton-laadstatus toe"
  • "Vind een modaal dialoogcomponent dat als een lade van rechts inschuift"
  • "Genereer een onboarding-stepper met 4 stappen en voortgangsindicator"
  • "Ik heb een toast-meldingssysteem nodig dat meldingen stapelt in de rechteronderhoek"

    • Professionele tips

  • Wees specifiek over je ontwerpintentie — "zakelijke SaaS-stijl met subtiele randen" of "consumentenapp met afgeronde hoeken en zachte schaduwen" levert dramatisch verschillende resultaten op
  • Vraag Neotask om een gevonden 21st.dev-component aan te passen aan je bestaande kleurenpalet door je primaire/secundaire kleurwaarden te verstrekken
  • Gebruik componentgeneratie vroeg in je ontwerpproces om snel lay-outs te prototypen voordat je je vastlegt op een volledig ontwerpsysteem
  • Combineer met je code-editorworkflow via OpenClaw — genereer een component, verfijn het conversationeel en voer het uiteindelijke bestand direct uit naar je project

    • Works Well With