Solução: sincronização em tempo real do design e do desenvolvimento com o Onlook
O Onlook resolve o problema de desconectar o design e o desenvolvimento com os seguintes recursos principais:
- Vinculação bidirecional em tempo realObservação: depois de instalar o plug-in Onlook, quando os designers arrastam e soltam componentes de ajuste no navegador, a ferramenta rastreia automaticamente as alterações nos nós do DOM e as mapeia para os nomes de classe props ou TailwindCSS dos componentes React.
- Lógica de geração de códigoO mecanismo de conversão de código do Onlook divide as alterações visuais em: 1) alterações na estrutura do componente, 2) atualizações de classe de estilo e 3) ajustes de propriedade de layout, e gera os trechos de código JSX/Tailwind correspondentes.
- Integração do controle de versãoQuando você clica em publicar, a ferramenta cria uma ramificação de recurso por meio da API do GitHub, enviando PRs que contêm alterações em arquivos de componentes e atualizações de estilo para manter a base de código organizada.
Pontos de atenção1) Certifique-se de que o projeto esteja usando o React versão 18+ 2) Para componentes personalizados, as regiões editáveis precisam ser declaradas por meio do atributo data-onlook-component 3) Recomenda-se que animações complexas ainda sejam implementadas por meio de código.
Essa resposta foi extraída do artigoOnlook: Cursor de código aberto para design de front-end, design e publicação de código em aplicativos ReactO
Não pode ser reproduzido sem permissão:Ferramentas de produtividade de IA " Como sincronizar perfeitamente as alterações de design com o código em um projeto React?
