21st.dev Magic

Design

Générez instantanément des composants d'interface soignés via Neotask sur OpenClaw

Ce que vous pouvez faire

Neotask se connecte à 21st.dev Magic via OpenClaw, vous donnant un accès instantané à une vaste bibliothèque de composants d'interface prêts pour la production et à la génération de composants alimentée par l'IA — le tout par conversation.

Génération de composants

  • Générer à partir de descriptions — Décrivez l'interface dont vous avez besoin en langage courant et obtenez des composants React complets et stylisés avec Tailwind CSS, shadcn/ui ou votre bibliothèque préférée
  • Itérer avec des retours — Dites « rends-le plus compact » ou « ajoute un état de chargement » et Neotask applique immédiatement vos retours avec une nouvelle sortie de code
  • Génération multi-variantes — Demandez plusieurs variations de design en une fois pour choisir celle qui convient le mieux à votre projet
  • Accessibilité intégrée — Les composants générés suivent les bonnes pratiques ARIA et les modèles de navigation au clavier dès le départ

    • Recherche dans la bibliothèque de composants

  • Rechercher par modèle — Trouvez des composants correspondant à votre cas d'utilisation : « un tableau de tarification avec bascule mensuel/annuel » ou « un tiroir de notifications avec compteur de non-lus »
  • Parcourir par catégorie — Explorez les composants par type : barres de navigation, modales, formulaires, cartes, tableaux de données, tableaux de bord, et plus encore
  • Filtrer par stack technique — Recherchez des composants spécifiques à votre stack technique (React, Vue, Tailwind, shadcn, Radix UI)
  • Snippets prêts à copier — Chaque composant de la bibliothèque est formaté pour une utilisation immédiate dans votre base de code

    • Intégration du système de design

  • Correspondre à votre style existant — Fournissez vos jetons de couleur ou votre configuration Tailwind et Neotask génère des composants qui correspondent à votre système de design
  • Composition de composants — Demandez une mise en page complète en assemblant plusieurs snippets de composants
  • Variantes mode sombre — Demandez des versions en mode sombre de n'importe quel composant avec une utilisation cohérente des jetons

    • Essayez de demander

  • « Génère un composant de carte tarifaire avec un badge populaire, une liste de fonctionnalités et un bouton d'appel à l'action en utilisant Tailwind »
  • « J'ai besoin d'une barre de navigation responsive avec un logo à gauche, des liens de navigation au centre et un bouton Connexion à droite »
  • « Recherche sur 21st.dev un composant de tableau de données avec tri, filtrage et pagination »
  • « Crée une section hero avec un grand titre, un sous-titre, deux boutons d'appel à l'action et une image de maquette à droite »
  • « Rends le composant plus compact et ajoute un état de chargement squelette »
  • « Trouve un composant de boîte de dialogue modale qui glisse depuis la droite comme un tiroir »
  • « Génère un stepper d'intégration avec 4 étapes et un indicateur de progression »
  • « J'ai besoin d'un système de notifications toast qui empile les notifications dans le coin inférieur droit »

    • Conseils de pro

  • Soyez précis sur votre intention de design — « style SaaS entreprise avec des bordures subtiles » ou « application grand public avec des coins arrondis et des ombres douces » produit des résultats radicalement différents
  • Demandez à Neotask d'adapter un composant 21st.dev trouvé à votre palette de couleurs existante en fournissant vos valeurs de couleurs primaires/secondaires
  • Utilisez la génération de composants tôt dans votre processus de design pour prototyper rapidement des mises en page avant de vous engager dans un système de design complet
  • Combinez avec votre flux de travail d'éditeur de code via OpenClaw — générez un composant, affinez-le par conversation et exportez le fichier final directement dans votre projet

    • Works Well With