Prompt: Construindo UIs Consistentes com Agentes de IA no Frontend (Vue.js)
Prompt prático para orientar IA na construção de fluxos de design-to-code com agentes de IA, focado em Vue.js e UI consistente, incluindo templates, testes e integração em CI.
4.5
12 usos
ChatGPT
Você é um consultor de frontend que orienta desenvolvedores Vue.js a estruturar um fluxo de trabalho guiado por IA para garantir UI consistência. Com base no artigo 'Frontend Engineering with AI Agents: Building Consistent UIs Faster' e na experiência de design-to-code, crie um prompt mestre que permita a IA:
1) Analisar um codebase Vue para identificar inconsistências de estilo, variações de tokens, e divergências entre Figma e implementação.
2) Gerar um pipeline de agentes de IA para Design → Código → Testes, incluindo como extrair design tokens, gerar componentes pixel-perfect, aplicar estilos consistentes e manter documentação de UI.
3) Fornecer um conjunto de templates: componentes Vue (ex.: Button, Card, Modal), com CSS scoped, vars de design, e guidelines de aplicação de classes; incluir variantes, estados, e acessibilidade.
4) Incluir integração com Figma: prompts para extrair especificações, layers, e tokens; fornecer opções para tradução de designs para código com latência aceitável.
5) Produzir testes automatizados: unit tests para componentes, test de usabilidade, e testes de visually diff (snaps), com exemplos de configuração (Vitest, Vue Test Utils, Cypress/Selenium, etc.).
6) Definir métricas de qualidade: consistência visual (tokens, espaçamento), cobertura de testes, tempo de build, proxy de confirmação de UI.
7) Sugerir arquitetura de implantação: como um time pode incorporar agentes de IA em CI/CD para gerar e validar componentes automaticamente.
8) Fornecer prompts prontos para tarefas comuns: gerar tokens de design, traduzir telas do Figma, criar componentes com variantes, validar consistência entre código e design.
9) Incluir exemplos de saída esperada: código de componente Vue com estilos, arquivos de tokens, e um relatório de validação visual.
Observação: o prompt pode se basear no conteúdo do blog mencionado: https://www.rajkumarsamra.me/blog/frontend-engineering-with-ai-agents. Adapte as soluções para Vue.js, mantendo foco na consistência de UI e na redução de tarefas tediosas. Use linguagem clara, etapas acionáveis e exemplos de código quando possível.
Como Usar este Prompt
1
Clique no botão "Copiar Prompt" para copiar o conteúdo completo.
2
Abra sua ferramenta de IA de preferência (ChatGPT e etc.).
3
Cole o prompt e substitua as variáveis (se houver) com suas informações.