Para programar com o Gemini 4 Argon na aplicação web do Gemini, selecione 4 Argon, ative o Canvas e descreva a aplicação que pretende criar. O Canvas reúne o editor de código e a pré-visualização no mesmo espaço de trabalho. Pode assim analisar a interface e pedir alterações sem configurar primeiro um projeto local.
O nosso exemplo é um painel de recursos humanos em React chamado Daylight People. As instruções definem uma interface em tons de creme e amarelo, navegação compacta, uma agenda, gráficos de desempenho e uma tabela de funcionários. Também indicam o que deve acontecer ao alterar o intervalo de datas, pesquisar funcionários ou exportar um CSV. Estas funções permitem avaliar mais do que o aspeto do primeiro ecrã.
O que precisa antes de começar
Use um navegador de computador, inicie sessão em gemini.google.com e confirme que o seletor de modelos inclui o 4 Argon. O anúncio de lançamento da Google indica que o acesso na aplicação Gemini está disponível para subscritores do Google AI Pro e Ultra. Consulte os modelos disponíveis na sua conta: iniciar sessão não garante o acesso em todas as contas. Anúncio do Argon da Google
Este tutorial utiliza a aplicação Gemini. Não precisa de uma chave da API do Gemini, de um projeto npm ou de um terminal para seguir os passos no Canvas. A integração por API tem um processo próprio; o identificador do modelo na API é gemini-4-argon. Documentação do modelo da Google
Prepare as instruções de design. Defina o público, as secções da página, a hierarquia visual e as interações. Pode também anexar uma imagem de referência que tenha autorização para utilizar. Explique que características pretende aproveitar, como o espaçamento compacto ou a disposição assimétrica dos gráficos, em vez de pedir apenas um «dashboard moderno».
1. Selecione o 4 Argon
Inicie uma nova conversa e abra o seletor de modelos junto ao campo do prompt. Na interface analisada para este guia, o menu apresentava 4 Argon com a descrição Complex tasks. Selecione essa opção e confirme que a barra do prompt indica Argon.
A etiqueta do menu permite verificar qual é o modelo ativo. A marca Gemini na página inicial, por si só, não revela que modelo vai responder é mensagem seguinte.
2. Ative o Canvas antes de enviar o prompt
Na interface de computador que analisámos, o percurso era o seguinte:
Clique em + junto ao campo do prompt.
Abra More tools.
Selecione Canvas.
Confirme que aparece a etiqueta Canvas na caixa de escrita.
Introduza depois o prompt. Selecionar a ferramenta primeiro dá ao Gemini o espaço onde deve criar a aplicação React. Pedir código numa conversa normal pode resultar num bloco de código em vez de uma aplicação.
A posição dos controlos pode mudar. A ajuda da Google explica como iniciar uma conversa com o Canvas através do menu para adicionar ficheiros; a captura e o percurso acima correspondem é interface observada a 17 de outubro de 2026. Ajuda do Canvas
3. Cole o prompt do dashboard
As instruções pedem um cabeçalho com estatísticas compactas integradas, um indicador de satisfação em arco e painéis de tamanhos diferentes. A agenda ocupa a coluna esquerda. O gráfico de desempenho e as barras de situação contratual preenchem as outras duas colunas, com pequenos indicadores de ausências por baixo. A tabela de funcionários surge logo a seguir.
Estas indicações definem a composição antes de o Gemini escolher os componentes. Também estabelecem a densidade de informação: o primeiro ecrã no computador deve mostrar dados úteis e o início da tabela.
Experimente
Com o 4 Argon selecionado e o Canvas ativo, copie o prompt completo abaixo, cole-o no Gemini e envie-o. Pode alterar o nome do produto, as cores e as métricas de exemplo para os adaptar ao seu projeto. Está também disponível uma cópia em texto simples.
Create a polished, interactive React HR dashboard directly in the active Canvas, with a working Preview. Use React functional components and hooks. Use Tailwind CSS, lucide-react icons and Recharts if available in Canvas. Keep all data local and fictional. Do not call an API, connect a database, deploy anything, or return a standalone HTML page.
Product: Daylight People, a people operations workspace. The visual direction is a dense, carefully composed editorial dashboard: cream and pale butter yellow surfaces, charcoal text, a sunflower yellow accent, subtle gray borders, and compact typography. It should feel like a designed product, with varied panel sizes and useful information visible immediately. Avoid oversized KPI cards, giant headings, heavy shadows, purple gradients, and an evenly spaced wall of identical cards.
Desktop composition at approximately 1440 by 1000: make the application fill the entire preview viewport, edge to edge, with width: 100% and min-height: 100dvh. The application itself must have no outer frame, centered max-width container, gray surround, external padding, shell border or shell corner rounding. Make the left sidebar roughly 210px wide and full height, and let the main content fill the remaining width. Keep the cream-to-pale-yellow wash inside the application. Use 16-20px internal content gutters, 10-12px panel radii, 8-12px grid gaps, and a mostly 12-14px UI type scale with a 28-32px greeting. Use a clean system sans-serif stack with clear contrast. Distinguish the application's full-viewport layout from the smaller rounded panels inside it.
Scrolling architecture: constrain the app root to height: 100dvh with overflow: hidden. Use a roughly 210px sidebar and a flexible main region with min-width: 0 and min-height: 0. The main region must scroll vertically on its own with overflow-y: auto. The sidebar must not move when the main content scrolls. Make it a full-height flex column with the logo/header and bottom profile outside a separate flex: 1; min-height: 0; overflow-y: auto navigation area. Prevent html/body from becoming a shared dashboard scroller. On short screens, only the sidebar's navigation list should scroll, while its logo and bottom profile stay visible. On mobile, use a fixed overlay drawer with independent scrolling and lock the main scroll while it is open.
Sidebar: a small original Daylight People wordmark; a search field; a two-column grid of six navigation tiles with thin line icons (Dashboard, Employees, Time off, Finance, Payroll, Reviews). The selected tile should be charcoal with white text, the rest lightly outlined. Below that, show a compact favorites list, a short workspace menu, and a small profile control anchored at the bottom. Use initials avatars instead of remote photos.
Main area: breadcrumb and two small icon buttons at the top. Below it, a wide greeting band: Good morning, Alex; a date subtitle; four compact inline statistics (432 employees, 24 payrolls, 8% turnover, 24 applicants). At the right of this band, place a large, elegant open-ring gauge showing 80% employee satisfaction, with a sunflower yellow arc and small tick labels. Keep the metric strip integrated into the header rather than four separate cards.
Below the greeting, build an asymmetric three-column grid. Left: a schedule panel with Meetings / Tasks / Events tabs and two or three compact agenda cards; highlight the first meeting with a soft yellow gradient. Center: a team performance panel showing 70.32%, a restrained yellow line/area chart and a 7 days / 30 days / 90 days segmented control. Right: an employment status panel with three chunky rounded vertical bars for Permanent, Contract and Probation, using yellow, charcoal and gray. Below the center and right panels, put five narrow leave-balance tiles in one row: Annual, Monthly, Daily, Hourly, Sick. Use subtle borders to tie this row together.
Finish with a full-width employee table beneath these panels. Include eight fictional employees, initials avatars, employee ID, role, email at example.com, status, department and an actions button. Put search and a department filter in the table toolbar, plus Export CSV. On the desktop, the first few employee rows should be visible within the initial screen rather than below a huge empty chart.
Make the demo work: date ranges change the performance chart and its summary; schedule tabs show different content; search filters by name or email; the department filter combines with search; show a useful empty state with a reset button; Export CSV exports only visible employee rows; an employee action opens a small detail drawer that closes with Escape and returns focus. Navigation tiles should select and navigate to real in-page sections or show a clear compact placeholder, not silently do nothing. The satisfaction gauge must have a text equivalent.
Responsive behavior: at 390px use a working mobile navigation drawer, stack the panels, and keep page-level horizontal scrolling at zero. Let the table scroll inside its own container. Preserve readable text and touch targets. Include semantic headings, associated input labels, visible keyboard focus, aria-expanded on drawer buttons, a sensible focus order, and reduced-motion support.
Before coding, briefly state the layout decisions. Then build and render the complete React app in Canvas. After rendering, list only the checks you actually performed and identify anything that still needs manual testing. Do not claim production readiness or invent test results.
O prompt pede componentes funcionais e hooks de React. A utilização de Tailwind CSS, lucide-react e Recharts depende do que o Canvas suporta nessa sessão. Pede também dados fictícios locais, permitindo avaliar o desenho e o comportamento sem configurar uma base de dados.
A Google apresenta as pré-visualizações de React como uma funcionalidade do Canvas. Ainda assim, as dependências têm de carregar corretamente: indicar uma biblioteca não demonstra que as importações geradas funcionam. Apresentação do Canvas da Google
4. Analise a aplicação em Preview
Aguarde que a geração termine e analise a pré-visualização do Canvas. Use Code para consultar a implementação e Preview para regressar é interface. Se a pré-visualização falhar, consulte a consola e comunique o erro ao Gemini antes de pedir mais funcionalidades. A ajuda do Canvas descreve os controlos de código e da consola. Ferramentas de código e erros do Canvas
Comece pela composição geral. A saudação não deve dominar a página. As quatro estatísticas principais devem manter-se compactas, e os painéis de agenda, desempenho e situação contratual devem ter larguras diferentes. Verifique se o amarelo cria uma hierarquia visual sem reduzir o contraste do texto.
Depois da versão para computador, teste uma janela estreita. Uma captura apelativa num ecrã grande não demonstra que a navegação abre num telemóvel nem que a tabela fica dentro do seu contentor.
A pré-visualização de exemplo mostra o painel em creme e amarelo, a agenda, o gráfico de desempenho e o diretório de funcionários. A disposição gerada na sua sessão pode ser diferente.
5. Teste os controlos do dashboard
Faça um pequeno conjunto de verificações que possa repetir. Anote a entrada e o resultado esperado antes de clicar em cada controlo e registe depois o que acontece.
Controlo | O que testar | Resultado esperado |
|---|---|---|
Intervalo de datas | Alterne entre 7, 30 e 90 dias | O gráfico de desempenho e o respetivo resumo mudam de forma coerente |
Separadores da agenda | Abra Meetings, Tasks e Events | Cada separador mostra os seus elementos e o estado de seleção |
Pesquisa de funcionários | Introduza o nome de um funcionário da tabela e depois um endereço de correio eletrónico | Permanecem as linhas correspondentes |
Filtro por departamento | Combine um departamento com a pesquisa | As linhas cumprem ambas as condições |
Sem resultados | Introduza um nome inexistente | Surgem uma mensagem clara e um controlo para repor a pesquisa |
Exportação CSV | Exporte depois de filtrar | O CSV contém as linhas visíveis e os cabeçalhos previstos |
Detalhes do funcionário | Abra a ação de uma linha e prima Escape | O painel fecha e o foco do teclado regressa ao botão que o abriu |
Navegação móvel | Abra e feche o menu lateral com uma largura de 390px | A navegação funciona sem deslocamento horizontal na página |
Peça ao Gemini que distinga a análise estática do código das verificações feitas num navegador em execução. Uma lista de testes pode ser útil, mas não demonstra que algum tenha sido aprovado.
6. Reveja o código antes de o reutilizar
Quando o protótipo funcionar como pretendido, reveja o código e as dependências. Procure chamadas de rede inesperadas, fontes de dados externas e credenciais. Este exemplo pede dados fictícios locais; ligar um sistema real de recursos humanos exige planear separadamente a autenticação, as permissões e o tratamento dos dados.
Mantenha o Canvas privado durante a revisão. Exportar código e criar uma ligação pública são ações diferentes. A Google explica que uma ligação pública pode expor a aplicação e os dados associados a quem tiver essa ligação. Partilha e exportação no Canvas
O protótipo é um ponto de partida para analisar a implementação. Antes de o utilizar num produto, teste-o com o framework, as versões das dependências, os tamanhos de ecrã e a configuração de acessibilidade desse produto.
Resolver os primeiros problemas
Recebe um bloco de código em vez de uma pré-visualização
Verifique se selecionou o Canvas antes de enviar o prompt. Confirme a presença da etiqueta e crie a aplicação nesse espaço. Neste guia, o objetivo é construir e analisar a aplicação React dentro do Canvas.
A pré-visualização fica em branco ou apresenta um erro de importação
Abra a consola, copie o erro relevante e peça ao Gemini que o corrija preservando o desenho e os controlos que funcionam. Se uma dependência não estiver disponível, peça uma alternativa compatível. Verifique novamente a pré-visualização após a correção.
O resultado parece genérico
Defina as proporções dos painéis, o espaçamento, os tamanhos de letra e a densidade de informação. Uma referência pode mostrar a direção visual pretendida, mas explique o que quer transportar para a sua aplicação. Use um nome de produto, conteúdos e recursos próprios.
Um botão parece pronto, mas não faz nada
Descreva a mudança de estado esperada. Por exemplo, a ação de detalhes de um funcionário deve abrir um painel lateral e o botão de exportação deve produzir um ficheiro. Repita os testes após a alteração, incluindo o estado sem resultados e a interação por teclado quando aplicável.
O Argon não aparece no menu de modelos
Verifique a conta Google selecionada e o respetivo acesso aos modelos. A disponibilidade do Canvas e o acesso a um modelo específico devem ser confirmados separadamente. Consulte a informação atual da Google em vez de assumir que a sua lista coincide com a captura. Disponibilidade do Argon
