21st.dev Magic

Design

Genera componenti UI rifiniti all'istante attraverso Neotask su OpenClaw

Cosa Puoi Fare

Neotask si connette a 21st.dev Magic tramite OpenClaw, dandoti accesso immediato a un'enorme libreria di componenti UI pronti per la produzione e alla generazione di componenti basata sull'IA — tutto attraverso la conversazione.

Generazione di Componenti

  • Genera da descrizioni — Descrivi l'interfaccia di cui hai bisogno in linguaggio naturale e ottieni componenti React completi e stilizzati con Tailwind CSS, shadcn/ui o la tua libreria preferita
  • Itera con il feedback — Di' "rendilo più compatto" o "aggiungi uno stato di caricamento" e Neotask applica immediatamente il tuo feedback con un nuovo output di codice
  • Generazione multi-variante — Richiedi più varianti di design contemporaneamente così puoi scegliere quella più adatta al tuo progetto
  • Accessibilità integrata — I componenti generati seguono le best practice ARIA e i pattern di navigazione da tastiera fin dall'inizio

    • Ricerca nella Libreria di Componenti

  • Cerca per pattern — Trova componenti corrispondenti al tuo caso d'uso: "una tabella prezzi con toggle per fatturazione mensile/annuale" o "un cassetto notifiche con conteggio non letti"
  • Sfoglia per categoria — Esplora i componenti per tipo: barre di navigazione, modali, form, card, tabelle dati, dashboard e altro
  • Filtra per stack tecnologico — Cerca componenti specifici per il tuo stack tecnologico (React, Vue, Tailwind, shadcn, Radix UI)
  • Snippet pronti all'uso — Ogni componente della libreria è formattato per l'uso immediato nel tuo codebase

    • Integrazione con il Design System

  • Abbina il tuo stile esistente — Fornisci i tuoi token colore o la configurazione Tailwind e Neotask genera componenti che corrispondono al tuo design system
  • Composizione di componenti — Chiedi un layout di pagina completo componendo insieme più snippet di componenti
  • Varianti modalità scura — Richiedi versioni in modalità scura di qualsiasi componente con un utilizzo coerente dei token

    • Prova a Chiedere

  • "Genera un componente card prezzi con un badge popolare, elenco funzionalità e un pulsante CTA usando Tailwind"
  • "Ho bisogno di una barra di navigazione responsive con un logo a sinistra, link di navigazione al centro e un pulsante Accedi a destra"
  • "Cerca su 21st.dev un componente tabella dati con ordinamento, filtraggio e paginazione"
  • "Crea una sezione hero con un titolo grande, sottotitolo, due pulsanti CTA e un'immagine mockup a destra"
  • "Rendi il componente più compatto e aggiungi uno stato di caricamento skeleton"
  • "Trova un componente modale dialog che scorre dentro da destra come un drawer"
  • "Genera uno stepper di onboarding con 4 passaggi e indicatore di progresso"
  • "Ho bisogno di un sistema di notifiche toast che impili le notifiche nell'angolo in basso a destra"

    • Suggerimenti Utili

  • Sii specifico riguardo al tuo intento di design — "stile SaaS enterprise con bordi sottili" o "app consumer con angoli arrotondati e ombre morbide" produce risultati drasticamente diversi
  • Chiedi a Neotask di adattare un componente trovato su 21st.dev alla tua palette colori esistente fornendo i tuoi valori di colore primario/secondario
  • Usa la generazione di componenti nelle fasi iniziali del tuo processo di design per prototipare rapidamente i layout prima di impegnarti in un design system completo
  • Combina con il tuo flusso di lavoro dell'editor di codice tramite OpenClaw — genera un componente, perfezionalo conversando e invia il file finale direttamente al tuo progetto

    • Works Well With