Prompt de design de agenda complementar do evento

Crie um protótipo editável de aplicativo com abordagem mobile-first usando a stack existente do projeto para [PROJECT] e [AUDIENCE]. A tarefa é: Programação do aplicativo do evento.

Conteúdo e estrutura obrigatórios

Explore as sessões por horário e trilha, crie uma agenda pessoal e mostre conflitos, alterações de sala e avisos do evento.

Telas e navegação

Crie três visualizações conectadas: Programação; Detalhes da sessão; Meu dia. Mantenha o registro selecionado visível no título ou no resumo da tela. Ofereça uma ação explícita de voltar e preserve as informações em andamento ao navegar entre as visualizações. Mantenha a ação principal próxima ao conteúdo relevante e considere as áreas seguras em dispositivos móveis, um teclado virtual visível e rótulos traduzidos longos. Em larguras de desktop, adapte a composição sem remover etapas nem alterar a tarefa.

Dados do projeto

Use [APPROVED_CONTENT] para nomes, registros, rótulos, quantidades e destinos. Solicite os dados ausentes em vez de inventar alegações operacionais. Os registros de demonstração podem usar a marca fictícia Gather; identifique-os como dados de exemplo. Explique quais ações são interações locais do protótipo e quais exigiriam autenticação, persistência, permissões ou um backend. Não conecte serviços externos nem afirme que uma transação foi concluída, a menos que essa integração tenha sido explicitamente implementada e testada.

Direção de design

Siga [BRAND_RULES]. Quando nenhuma marca for fornecida, use preto, branco, amarelo ácido e tipografia marcante de conferência. Torne o fluxo reconhecível por seu próprio conteúdo e controles, em vez de repetir cartões genéricos de dashboard. Use uma escala de espaçamento consistente e uma hierarquia de texto clara. Inclua foco de teclado visível, nomes acessíveis, contraste suficiente e rótulos de status que não dependam apenas de cor. Respeite a preferência por movimento reduzido e mantenha as transições animadas opcionais.

Verificação de aceitação específica da tarefa

• Mostre explicitamente sessões salvas sobrepostas e alterações de fuso horário, em vez de remover seleções silenciosamente.

Estados de interação

Implemente o fluxo principal de três telas com dados de exemplo locais. Inclua um estado vazio útil, validação antes de concluir uma ação, um estado de carregamento ou pendente e um estado de falha recuperável. Alterações destrutivas exigem uma etapa de revisão ou a opção de desfazer. Mantenha o estado de um registro consistente nas três telas. Não descarte silenciosamente dados parcialmente preenchidos nem altere a escolha do usuário após uma nova tentativa.

Entrega e revisão

Entregue as telas editáveis do aplicativo e explique o modelo de dados, qualquer comportamento de armazenamento local e as integrações não implementadas. Teste em 320px e em uma viewport mais ampla, com navegação por teclado e conteúdo longo. Use a verificação de aceitação específica da tarefa apresentada acima para revisar o resultado antes de adicionar recursos. Mantenha o comportamento de demonstração claramente distinto de um serviço de produção em operação.

Anexo de referência e objetivo da reconstrução

Anexe o arquivo reference.webp do pacote de download deste prompt ao lado deste prompt no OpenDesign. Crie um resultado editável com composição e hierarquia semelhantes; não incorpore toda a imagem de referência como interface final. Preserve o conteúdo aprovado do projeto e as regras da marca caso entrem em conflito com rótulos fictícios de exemplo. Se a imagem estiver ausente ou ilegível, solicite-a em vez de alegar fidelidade visual.

Composição de referência — três telas conectadas do aplicativo

A imagem anexada mostra o Gather, um aplicativo fictício de conferência, em três telas móveis de mesma largura sobre um fundo de apresentação amarelo-ácido claro. Crie Programação, Detalhes da sessão e Meu dia como visualizações conectadas do aplicativo. Não renderize a montagem de três telas como uma única página nem use a referência inteira como plano de fundo. Em largura móvel, mostre uma visualização por vez. Uma prévia mais ampla pode mostrar as visualizações lado a lado para comparação, mas o aplicativo funcional deve preservar sua navegação e seu estado.

Tela de programação

Use uma tela quase branca com uma borda externa fina e escura. O cabeçalho combina o logotipo tipográfico Gather em preto e negrito à esquerda com datas compactas do evento e informações do local à direita, além de um ícone de busca. Abaixo, exiba um título Programação grande e em negrito e uma introdução menor de uma linha. Adicione um seletor de datas com três colunas para Ter 14 de out., Qua 15 de out. e Qui 16 de out.; a data selecionada é amarelo ácido, e as demais são brancas com separadores claros. Abaixo, inclua os filtros Todas as trilhas e Todos os tipos e um controle compacto de visualização em lista. A lista principal usa uma coluna estreita para o horário, uma barra vertical na cor da trilha e, em seguida, um rótulo de trilha em letras maiúsculas, o título da sessão em negrito e um rótulo menor para a sala. Cada linha tem uma ação circular de adição alinhada à direita e um divisor horizontal fino. As trilhas ilustradas usam azul, amarelo, rosa, verde e roxo; mostre também seus nomes para que a cor não seja o único indicador. A navegação inferior é preta, com Programação, Meu dia, Avisos e Mais; o ícone e o rótulo ativos são amarelos.

Tela de detalhes da sessão

Contraste a visualização clara em lista com uma superfície de detalhes quase preta. Distribua os controles de voltar, favoritar e compartilhar na parte superior. Use uma fotografia sutil de conferência ao fundo da seção superior, com uma sobreposição escura que preserve o contraste do texto. Exiba um pequeno rótulo amarelo PRODUTO, um título grande em amarelo e duas linhas, Sistemas de design em escala, e uma linha de apoio branca. Abaixo, coloque os metadados de calendário/horário e local/sala em duas colunas, com ícones de contorno. Em seguida, use tags de tópicos com contorno fino, uma descrição curta e uma linha do palestrante com retrato circular, nome, cargo, organização e seta indicativa. Use um botão largo amarelo ácido Salvar no meu dia e, depois, um botão escuro contornado Adicionar ao calendário. Um divisor introduz Sessões relacionadas, com uma pequena ação Ver tudo e linhas compactas de sessões. Mantenha claro o caminho de navegação para voltar; ao substituir os dados de demonstração, não invente palestrantes reais nem endossos.

Tela Meu dia

Volte à superfície quase branca e repita o cabeçalho Gather, a data, o local e o ícone de configurações. Use um título grande Meu dia e um subtítulo curto. Um banner de notificação amarelo-claro contém um sino, o título em negrito Alteração de fuso horário, um texto de apoio e um controle para dispensar. Abaixo, exiba Minha agenda, Conflitos (1) e Avisos (2) como três segmentos; o segmento selecionado é preto, com texto branco. As sessões salvas reutilizam a estrutura das linhas da agenda. Uma sessão sobreposta usa um painel rosa-claro, horário e destaque de trilha em vermelho, um rótulo explícito Conflito com sessão salva e um controle Manter ambas. Uma mudança de local aparece como uma linha vermelha Alteração de sala: B1 → B2. Repita a navegação inferior preta com Meu dia ativo e um selo amarelo de contagem em Avisos.

Hierarquia visual e tokens

Use uma fonte grotesca neutra e pesada no logotipo tipográfico e nos títulos grandes, uma fonte sem serifa legível no corpo do texto e nos controles, superfícies principais pretas e quase brancas e amarelo ácido nas ações principais e nos estados selecionados. Comece com uma escala de espaçamento de 8px, preenchimento horizontal de página de 16–24px, alvos de toque mínimos de 44px e forte contraste entre título, corpo e metadados. Considere esses valores como pontos de partida para a implementação, não como especificações de pixels medidos. Preserve a grade de horários compacta da captura de tela, o título de detalhes em negrito e o contraste claro/escuro bem definido. Use fotografias originais ou licenciadas de conferências e um retrato fictício de palestrante; mantenha os rótulos como texto editável. Os controles arredondados deste exemplo fazem parte da referência visual do Gather e são independentes dos botões do site da biblioteca de prompts.

Contrato de interação e dados — implemente e verifique

Use registros locais de demonstração com IDs de sessão estáveis, título, trilha, tipo, início/fim em UTC, fuso horário do evento, sala, previousRoom, palestrante e estado salvo. Mantenha selectedDate, searchQuery, filtros de trilha/tipo, savedSessionIds e dismissedNoticeIds explícitos. A imagem é conceitual: as datas e a redação sobre fuso horário não constituem uma programação oficial do evento. Corrija datas de demonstração inconsistentes preservando a hierarquia apresentada. Selecionar um dia atualiza o destaque da data e a lista. A busca corresponde a nomes de sessões e palestrantes; os filtros são combinados e oferecem um estado vazio útil e uma ação para limpar. Abrir uma linha mostra os detalhes dessa mesma sessão; Voltar restaura a lista anterior, os filtros e a posição de rolagem. Os controles de adição e Salvar no meu dia salvam exatamente uma vez a mesma sessão e mudam para um estado salvo evidente. Removê-la atualiza Meu dia e os avisos de forma consistente. Detecte sobreposição com startA < endB e startB < endA para sessões salvas na mesma data. Exiba um alerta e ambos os registros; Manter ambas reconhece o conflito sem excluir silenciosamente nenhuma seleção. Conflitos mostra os pares afetados e inclui links para seus detalhes. Uma mudança de fuso horário converte os mesmos instantes em UTC para o fuso horário nomeado escolhido, atualiza as datas e os horários exibidos e recalcula o agrupamento; ela não deve alterar a duração real dos eventos. Mantenha visível um rótulo de fuso horário e uma explicação que possa ser dispensada. Um aviso de mudança de sala mostra a sala anterior e a nova; dispensar o aviso não reverte a nova sala. Para Adicionar ao calendário, forneça um arquivo de calendário local válido ou identifique claramente que se trata de uma ação de demonstração; nenhuma conexão com um calendário externo está implícita. Compartilhar pode usar a folha de compartilhamento da plataforma, com a opção de copiar o link como alternativa. Favoritar, dispensar notificações e navegar precisam de foco de teclado visível e nomes acessíveis. Mantenha as ações principais acessíveis acima da área segura do dispositivo móvel. Inclua estados de nenhuma sessão salva, nenhum resultado correspondente e falha de armazenamento recuperável. Não implemente pagamentos, criação de conta nem atualizações do evento em tempo real, a menos que sejam solicitados separadamente.

Comparação visual e entrega

1. Compare o resultado com a imagem anexada nas mesmas proporções. Revise o posicionamento das principais regiões, os tamanhos relativos das imagens, as quebras de linha, o espaçamento, a hierarquia tipográfica, o contraste, os estados ativos e a densidade do conteúdo antes de aperfeiçoar os detalhes decorativos.
2. Em seguida, teste o layout estreito sem comprimir o texto da versão para desktop em rótulos minúsculos.
3. Mantenha logotipos, fotos e ícones como arquivos separados e todos os rótulos relevantes editáveis. Liste fontes/arquivos indisponíveis e qualquer diferença intencional. Entregue os arquivos funcionais com uma descrição concisa do comportamento implementado e das integrações pendentes; não prometa um resultado idêntico pixel a pixel apenas com base no prompt.