21st.dev Magic

Design

Gere componentes de UI polidos instantaneamente através do Neotask no OpenClaw

O Que Você Pode Fazer

O Neotask se conecta ao 21st.dev Magic através do OpenClaw, dando a você acesso instantâneo a uma enorme biblioteca de componentes de UI prontos para produção e geração de componentes com IA — tudo por meio de conversação.

Geração de Componentes

  • Gere a partir de descrições — Descreva a UI que você precisa em linguagem simples e obtenha componentes React completos e estilizados com Tailwind CSS, shadcn/ui ou sua biblioteca preferida
  • Itere com feedback — Diga "torne mais compacto" ou "adicione um estado de carregamento" e o Neotask aplica seu feedback imediatamente com uma nova saída de código
  • Geração de múltiplas variantes — Solicite várias variações de design de uma vez para escolher a que melhor se encaixa no seu projeto
  • Acessibilidade integrada — Componentes gerados seguem as melhores práticas ARIA e padrões de navegação por teclado desde o início

    • Pesquisa na Biblioteca de Componentes

  • Pesquise por padrão — Encontre componentes que correspondam ao seu caso de uso: "uma tabela de preços com alternância para cobrança mensal/anual" ou "uma gaveta de notificações com contagem de não lidos"
  • Navegue por categoria — Explore componentes por tipo: barras de navegação, modais, formulários, cards, tabelas de dados, painéis e mais
  • Filtre por stack tecnológica — Pesquise componentes específicos para sua stack (React, Vue, Tailwind, shadcn, Radix UI)
  • Snippets prontos para copiar — Cada componente da biblioteca está formatado para uso imediato no seu código

    • Integração com Design System

  • Combine com seu estilo existente — Forneça seus tokens de cores ou configuração do Tailwind e o Neotask gera componentes que combinam com seu design system
  • Composição de componentes — Peça um layout de página completo compondo múltiplos snippets de componentes juntos
  • Variantes para modo escuro — Solicite versões em modo escuro de qualquer componente com uso consistente de tokens

    • Experimente Perguntar

  • "Gere um componente de card de preços com um selo de popular, lista de recursos e um botão CTA usando Tailwind"
  • "Preciso de uma barra de navegação responsiva com um logo à esquerda, links de navegação no centro e um botão Entrar à direita"
  • "Pesquise no 21st.dev um componente de tabela de dados com ordenação, filtragem e paginação"
  • "Crie uma seção hero com um título grande, subtítulo, dois botões CTA e uma imagem de mockup à direita"
  • "Torne o componente mais compacto e adicione um estado de carregamento skeleton"
  • "Encontre um componente de diálogo modal que deslize da direita como uma gaveta"
  • "Gere um stepper de onboarding com 4 etapas e indicador de progresso"
  • "Preciso de um sistema de notificações toast que empilhe notificações no canto inferior direito"

    • Dicas Profissionais

  • Seja específico sobre sua intenção de design — "estilo SaaS empresarial com bordas sutis" ou "app para consumidor com cantos arredondados e sombras suaves" produz resultados dramaticamente diferentes
  • Peça ao Neotask para adaptar um componente encontrado no 21st.dev à sua paleta de cores existente, fornecendo seus valores de cores primárias/secundárias
  • Use a geração de componentes no início do seu processo de design para prototipar layouts rapidamente antes de se comprometer com um design system completo
  • Combine com seu fluxo de trabalho de editor de código através do OpenClaw — gere um componente, refine-o conversacionalmente e envie o arquivo final diretamente para seu projeto

    • Works Well With