Bloco Telas

Sintaxe básica

O bloco Telas descreve as interfaces do sistema. Cada tela é declarada com a keyword screen seguida de um nome descritivo. O arquiteto não precisa saber design — ele descreve o que a tela deve conter e o agente decide como implementar visualmente:

Telas {
  screen ListaDePedidos {
    rota: /pedidos
    autenticacao: obrigatoria

    Layout {
      cabecalho: BarraPrincipal
      corpo: TabelaPedidos
      rodape: Paginacao
    }

    TabelaPedidos {
      tipo: tabela
      colunas: numero, cliente, data, valor, status
      filtros: status, data
      busca: sim
      acao-por-linha: VerDetalhes, Cancelar
      estado-vazio: Nenhum pedido encontrado
    }
  }
}

Campos básicos de uma tela

Campo	Descrição
`rota`	Caminho de URL desta tela no frontend
`autenticacao`	`obrigatoria` ou `nao-requerida`
`titulo`	Título que aparece na aba do navegador

Sub-bloco Layout

O sub-bloco Layout descreve a estrutura macro da tela — quais regiões existem e quais componentes as preenchem. Os nomes das regiões são livre — use qualquer nome que faça sentido para o projeto:

screen Dashboard {
  rota: /dashboard
  autenticacao: obrigatoria

  Layout {
    cabecalho: BarraPrincipal
    lateral: MenuNavegacao
    corpo: CardsResumo, GraficoVendas, TabelaUltimosPedidos
  }
}

Sub-bloco Wireframes

O sub-bloco Wireframes permite declarar instruções específicas para diferentes tamanhos de tela. Use mobile, desktop e adaptar para controlar o comportamento responsivo:

screen DetalheProduto {
  rota: /produtos/:id
  autenticacao: nao-requerida

  Wireframes {
    desktop: foto à esquerda, detalhes à direita, botão de compra fixo
    mobile: foto em cima, detalhes embaixo, botão de compra fixo no rodapé
    adaptar: galeria de fotos em carrossel no mobile
  }
}

Componentes nomeados

Além do Layout e dos Wireframes, você pode definir sub-blocos com o nome de cada componente da tela. Isso permite especificar o comportamento de tabelas, formulários, gráficos e outros elementos com precisão:

Tela completa com componentes

screen GerenciarUsuarios {
  rota: /admin/usuarios
  autenticacao: obrigatoria

  Layout {
    cabecalho: BarraAdmin
    corpo: FiltrosBusca, TabelaUsuarios
  }

  FiltrosBusca {
    tipo: formulario-inline
    campos: busca-por-nome, busca-por-email, filtro-status
    acao: atualizar tabela em tempo real
  }

  TabelaUsuarios {
    tipo: tabela
    colunas: nome, email, perfil, status, criado_em
    ordenacao: nome, criado_em
    acao-por-linha: Editar, Bloquear, Excluir
    confirmacao: Excluir requer confirmação com texto do email
    estado-vazio: Nenhum usuário encontrado para os filtros informados
  }
}

Especificando formulários

Formulários podem ser especificados com os campos, validações visíveis e comportamento de submissão:

screen CadastrarProduto {
  rota: /admin/produtos/novo
  autenticacao: obrigatoria

  FormularioProduto {
    tipo: formulario
    campos: nome, descricao, preco, categoria, estoque, fotos
    validacao-inline: sim
    apos-salvar: redirecionar para lista de produtos
    cancelar: voltar para lista sem confirmação
    /// Campo "fotos" suporta múltiplos uploads com preview — máximo 10 imagens
  }
}

Delegando layout à IA

Para telas onde a estrutura é simples e o arquiteto quer delegar a decisão de layout completamente à IA, basta descrever o propósito da tela com instruções livres:

screen Perfil {
  rota: /perfil
  autenticacao: obrigatoria
  - Exibir informações do usuário logado
  - Permitir editar nome e foto de perfil
  - Exibir histórico de ações recentes
  - Botão para alterar senha (abre modal de confirmação)
  /// Design deve seguir o padrão definido no bloco Tema
}