Ensiná-lo a usar ferramentas de programação de IA para gerar belas páginas de front-end

introdutório

Por qual motivo? Ferramentas de programação de IA O problema fundamental com a geração de páginas de front-end que parecem boas e as suas que não parecem é que essas ferramentas criaram um conjunto completo de dicas para gerar páginas de front-end que restringem todos os tipos de especificações de front-end. Essas palavras-chave são longas...

Não apenas as palavras do prompt são longas, mas a geração da página de front-end exige a saída de muitos, muitos tokens... É por isso que você encontrará muitos tokens na seção claude A geração oficial do código completo da página de front-end é frequentemente interrompida.

Há dois problemas a serem resolvidos para que a IA gere belas páginas de front-end: gerar as palavras de prompt necessárias para a página de front-end e gerar o código da página de front-end completamente.

colocar em prática

1. gere as palavras de alerta necessárias para a página de front-end

Apresentar o primeiro método, que não exige palavras-chave muito longas, mas sim aprender a conduzir perguntas e restrições

Primeira rodada de palavras-chave

Como designer de front-end, ajude os gerentes de produto a criar especificações de design da interface do usuário. Você precisa entender detalhadamente os requisitos do usuário descritos pelo gerente de produto e ajustar a solução de design aos requisitos do usuário.
Siga os seguintes requisitos: 1. design de front-end moderno e premium 2. siga a especificação do design, concentre-se nos detalhes da interface do usuário e na experiência do usuário 3. introduza o Tailwind CSS CDN em vez do estilo de escrita 4. use imagens aleatórias do Unsplash para imagens 5. evite barras de rolagem na interface

Segunda rodada de palavras-chave

O grupo principal é formado por donos de animais de estimação, e os usuários usam o produto com o objetivo de comprar brinquedos e vídeos para seus animais de estimação. Os usuários usarão o produto em todos os dispositivos. Os principais módulos funcionais do produto são: página inicial (mostrando diferentes categorias de animais de estimação e categorias de produtos), página de checkout de compras, página de lista de compras de animais de estimação, centro de usuários. Não são necessárias cores especiais para a marca. A interface é multilíngue. Os usuários normalmente visitam o site uma vez por semana. Não há requisitos especiais de acessibilidade para o produto.

Observação: No diálogo do site oficial do claude, o código de saída pode não estar completo. Você precisa simplificar os requisitos, primeiro obter um código de amostra de página típica e, em seguida, tentar melhorar o código completo da página da Web.

O segundo método, usando dicas textuais claras ou imagens como exemplos

Por exemplo, adicione a seguinte dica de estilo de interface do usuário à primeira palavra de dica:

Ou acesse um site de design de interface do usuário e escolha um estilo de página que você goste, por exemplo:

Esta parte não mostra o efeito da página de front-end gerada, colocada na próxima parte da demonstração.

2. geração completa do código da página de front-end

Não vá diretamente para o chatgpt ou Claude para tentar gerar o código de front-end completo, sua saída não é longa o suficiente e eles não são capazes de criar um código de projeto de várias camadas. É por isso que precisamos escolher umFerramentas de programação de IAA mancha e o Cursor Todas as opções são boas, mas desta vez tentaremos com o Trea, potencialmente menos eficaz, para avaliar o resultado final.

1. em primeiro lugar, deve haver um projeto completo, não é preciso se preocupar se ele é bonito ou não, apenas precisa ser totalmente funcional

Aqui, vou gerar uma página de amostra aleatória

2. permitir que as ferramentas de IA forneçam soluções de otimização de front-end

Como designer de front-end, ajude os gerentes de produto a criar especificações de design da interface do usuário. Você deve entender detalhadamente os requisitos do usuário descritos pelo gerente de produto e ajustar a solução de design aos requisitos do usuário.
Siga os seguintes requisitos: 1. design de front-end moderno e premium 2. siga a especificação do design, concentre-se nos detalhes da interface do usuário e na experiência do usuário 3. introduza o Tailwind CSS CDN em vez do estilo de escrita 4. use imagens aleatórias do Unsplash para imagens 5. evite barras de rolagem na interface

Requisito do gerente de produto:
Preferência: Glassmorphism
Otimizar o estilo da página: index.html

Não gere código ainda, apenas me dê sugestões de otimização de estilo de front-end

Essa rodada de diálogo se refere principalmente às sugestões da ferramenta de programação de IA e não exige alterações no código, portanto, ela muda para o diálogo no modo de bate-papo

As recomendações são as seguintes:

Com base nos requisitos do gerente de produtos e em um site existente de aluguel de carros usados, estou aqui para oferecer algumas sugestões de otimização de design:

1. **Aplicação do estilo de imitação de vidro**
- Altere a barra de pesquisa e os cartões de veículos para o efeito de imitação de vidro, adicione desfoque de fundo e transparência
- Adicione efeitos de luz sutis e gradientes para aprimorar a sensação de qualidade superior.
- Considere a possibilidade de adicionar uma mudança de brilho vítreo ao passar o mouse.

2. **Otimização do esquema de cores**
- O azul escuro atual (#1e3a8a) é um pouco pesado. Sugira o uso de uma cor gradiente mais moderna.
- Considere o uso de um gradiente azul-violeta, por exemplo, "de índigo-500 a roxo-500".
- Um gradiente suave e efeitos dinâmicos podem ser adicionados ao plano de fundo.

3. **Otimização do layout
- Corrigir a barra de pesquisa na parte superior para obter um efeito de vidro de cabelo
- Adote o layout de grade para os cartões de veículos, mas adicione um espaçamento irregular para aumentar o interesse visual.
- Considere o uso do layout Masonry para tornar a altura do cartão adaptável.

4. ** Aprimoramento da experiência interativa
- Adicione uma animação suave ao passar o mouse sobre o cartão
- Adicione um efeito de ondulação ao clicar
- Adicionar microanimação ao botão de pesquisa

5. **Otimização dos detalhes visuais
- Use imagens de carros de alta qualidade do Unsplash, considere estilos fixos
- Adicione padrões de fundo sutis ou formas geométricas.
- Adicione níveis de sombra apropriados
- Fontes Considere fontes sans-serif mais modernas

6. **Sugestões de design responsivo
- Use as classes responsivas do Tailwind
- Mantenha o efeito de imitação de vidro no celular, mas reduza o desfoque
- Otimize o tamanho da área de toque

7. **Recomendações de otimização de desempenho**
- Usar o modo JIT do Tailwind
- Use o lazy loading para imagens
- Considere o uso de imagens no formato webp

8. **Considerações de acessibilidade
- Garanta o contraste de cores adequado
- Adicione as tags ARIA apropriadas
- Suporte à navegação por teclado

3. realizar a otimização do estilo do front-end

Faço a seguinte pergunta
Como designer de front-end, ajude o gerente de produtos a criar especificações de design da interface do usuário. Você precisa entender detalhadamente os requisitos do usuário descritos pelo gerente de produto e ajustar a solução de design aos requisitos do usuário.
Siga os seguintes requisitos: 1. design de front-end moderno e premium 2. siga a especificação do design e preste atenção aos detalhes da interface do usuário e à experiência do usuário 3. introduza o Tailwind CSS CDN em vez de escrever estilos de estilo 4. use imagens aleatórias do Unsplash para imagens 5. evite barras de rolagem na interface

Requisito do gerente de produto:
Preferência: Glassmorphism
Otimizar o estilo da página: index.html

Os designers de front-end dão o seguinte conselho:
{citando o conselho dado pela ferramenta de programação de IA}

Agora comece a otimizar a página de front-end

Efeito:

Está faltando alguma coisa...

1. o estilo não está separado (é melhor concluir a primeira etapa da separação de estilo do tutorial e reduzir a duplicação de texto e código e, em seguida, otimizar o estilo de front-end; caso contrário, a quantidade de código da página da Web será muito grande e levará à geração de uma página incompleta; a otimização de front-end da qualidade também será reduzida)

2) A instrução do prompt "use a imagem aleatória do Unsplash", essa frase não é eficaz, resultando na falta de espaço reservado para a imagem na página. (As regras da imagem de chamada oficial do Unsplash foram alteradas, o modelo grande ainda não entendeu).

4. ajuste geral com base nos problemas acima

Primeiro, resolva o problema da quantidade de código de página, para diferentes características da análise específica do problema específico do projeto

Corrija o problema do espaço reservado da imagem; desta vez, em vez de chamar o Unsplash, usaremos apenas o espaço reservado do plano de fundo.

A tela de efeitos (parece ainda estar feia...)

Talvez esse tipo de site com estilo minimalista em preto e branco seja melhor, carregue a imagem de referência e gere novamente o efeito

5. gerar um arquivo de descrição de estilo, outro design de página devido ao design do documento

Compartilhamento de experiências

1. use a ferramenta de programação de IA baseada no Claude-3.7-Sonnet.

2. no código de back-end, após a geração do código de front-end

3. reter o documento de nota de estilo

4. não otimize mais a interface do usuário diretamente em projetos complexos, tente gerar a solução da interface do usuário separadamente:

Você é um engenheiro de pilha completa com proficiência em planejamento de produto e design de interface do usuário.
Quero desenvolver um aplicativo iOS de "Meditação" e preciso gerar um conjunto completo de diagramas de protótipos de aplicativos:
- Simular os cenários e as necessidades reais de usuários reais que usam o aplicativo de meditação;
- Combine as necessidades do usuário com a perspectiva do gerente de produto para planejar as funções, as páginas e as interações do aplicativo;
- Combinado com os requisitos do usuário, adote a perspectiva do gerente de produto para planejar as funções, as páginas e as interações do APP; Combinado com o planejamento do produto, adote a perspectiva do designer para produzir a UI/UX completa;
- Todas as páginas acima são exibidas no mesmo arquivo html.

5. use mais gráficos de referência da interface do usuário e forneça alguns exemplos para evitar a geração de páginas muito feias