21st.dev Magic

Diseño

Genera componentes de interfaz pulidos al instante a través de Neotask en OpenClaw

Lo que puedes hacer

Neotask se conecta a 21st.dev Magic a través de OpenClaw, brindándote acceso instantáneo a una enorme biblioteca de componentes de interfaz listos para producción y generación de componentes impulsada por IA — todo a través de conversación.

Generación de componentes

  • Genera a partir de descripciones — Describe la interfaz que necesitas en lenguaje natural y obtén componentes React completos y estilizados con Tailwind CSS, shadcn/ui o tu biblioteca preferida
  • Itera con retroalimentación — Di "hazlo más compacto" o "agrega un estado de carga" y Neotask aplica tu retroalimentación inmediatamente con una nueva salida de código
  • Generación de múltiples variantes — Solicita múltiples variaciones de diseño a la vez para que puedas elegir la que mejor se adapte a tu proyecto
  • Accesibilidad incorporada — Los componentes generados siguen las mejores prácticas de ARIA y patrones de navegación por teclado desde el inicio

    • Búsqueda en la biblioteca de componentes

  • Busca por patrón — Encuentra componentes que coincidan con tu caso de uso: "una tabla de precios con alternancia para facturación mensual/anual" o "un cajón de notificaciones con contador de no leídos"
  • Explora por categoría — Explora componentes por tipo: barras de navegación, modales, formularios, tarjetas, tablas de datos, paneles de control y más
  • Filtra por stack tecnológico — Busca componentes específicos para tu stack tecnológico (React, Vue, Tailwind, shadcn, Radix UI)
  • Fragmentos listos para copiar — Cada componente de la biblioteca está formateado para uso inmediato en tu base de código

    • Integración con sistemas de diseño

  • Coincide con tu estilo existente — Proporciona tus tokens de color o configuración de Tailwind y Neotask genera componentes que coinciden con tu sistema de diseño
  • Composición de componentes — Solicita un diseño de página completo componiendo múltiples fragmentos de componentes juntos
  • Variantes de modo oscuro — Solicita versiones en modo oscuro de cualquier componente con uso consistente de tokens

    • Prueba preguntando

  • "Genera un componente de tarjeta de precios con una insignia de popular, lista de características y un botón de llamada a la acción usando Tailwind"
  • "Necesito una barra de navegación responsive con un logo a la izquierda, enlaces de navegación en el centro y un botón de Iniciar sesión a la derecha"
  • "Busca en 21st.dev un componente de tabla de datos con ordenamiento, filtrado y paginación"
  • "Crea una sección hero con un titular grande, subtítulo, dos botones de llamada a la acción y una imagen de maqueta a la derecha"
  • "Haz el componente más compacto y agrega un estado de carga con esqueleto"
  • "Encuentra un componente de diálogo modal que se deslice desde la derecha como un cajón"
  • "Genera un stepper de incorporación con 4 pasos e indicador de progreso"
  • "Necesito un sistema de notificaciones toast que apile las notificaciones en la esquina inferior derecha"

    • Consejos profesionales

  • Sé específico sobre tu intención de diseño — "estilo SaaS empresarial con bordes sutiles" o "aplicación de consumo con esquinas redondeadas y sombras suaves" produce resultados drásticamente diferentes
  • Pide a Neotask que adapte un componente encontrado en 21st.dev a tu paleta de colores existente proporcionando tus valores de color primario/secundario
  • Usa la generación de componentes temprano en tu proceso de diseño para prototipar diseños rápidamente antes de comprometerte con un sistema de diseño completo
  • Combina con tu flujo de trabajo de editor de código a través de OpenClaw — genera un componente, refínalo conversacionalmente y envía el archivo final directamente a tu proyecto

    • Works Well With