Usar o prompt
Adicione seu briefing
Adicione seu contexto abaixo. Ele será incluído no prompt quando você copiar ou baixar.
Crie um site HTML responsivo usando a stack existente do projeto para [PROJECT] e [AUDIENCE]. A tarefa é: Vitrine do Sistema de Design.
Conteúdo e estrutura obrigatórios
Demonstre tokens, escala tipográfica, componentes e exemplos de layout de um sistema de design existente.
Use [APPROVED_CONTENT] como fonte de nomes, datas, números, alegações e destinos. Liste as informações ausentes antes de substituir qualquer conteúdo. Se for necessária uma demonstração, identifique o conteúdo como fictício. Não invente depoimentos de clientes, classificações, logotipos de parceiros ou recursos do produto.
Direção de design
Use [BRAND_RULES] e o sistema de design já selecionado no projeto. Se nenhum sistema for fornecido, comece com esta direção: tipografia preta marcante, painéis em amarelo quente e composições geométricas bem definidas; contraste controlado. Mantenha consistentes as funções da tipografia, do espaçamento e das cores. Priorize a tarefa em vez de elementos decorativos e evite uma coleção genérica de cartões sem relação entre si.
Preparação do conteúdo
Forneça os nomes dos tokens, as funções das cores, a escala tipográfica, as regras de espaçamento e os exemplos de componentes do sistema selecionado. Inclua a versão ou a fonte para que a vitrine represente um sistema específico.
Layout e comportamento
Avance dos fundamentos para os componentes e, depois, para uma tela composta. Demonstre como o mesmo token afeta vários componentes, em vez de mostrar amostras de cores desconectadas.
Verificação de aceitação específica da tarefa
- Preserve os nomes dos tokens fornecidos e diferencie exemplos de componentes exportados.
- Compare nomes e valores com a fonte fornecida.
- Teste rótulos longos, estados de foco e controles desativados; um exemplo visual não deve ser descrito como uma biblioteca de componentes exportada.
Implementação e revisão
Mantenha o texto editável. Use estrutura semântica, controles descritivos, foco de teclado visível e estados vazios/de erro adequados. Verifique layouts estreitos e amplos. Respeite as preferências de movimento reduzido. Preserve o framework e as dependências existentes do projeto; não substitua a stack silenciosamente. Entregue os arquivos editáveis e explique qualquer comportamento incompleto ou informação de entrada não compatível. Revise esta tarefa específica antes de propor recursos adicionais.
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 e conteúdo da referência
Use o reference.webp anexado como referência visual para a Vitrine do Sistema de Design. Antes de criar, identifique as principais regiões de cima para baixo, suas larguras e alturas relativas, alinhamento, espaçamento, hierarquia tipográfica, cores de superfície, bordas, imagens e componentes repetidos. Preserve essas relações, em vez de substituí-las por um modelo genérico. Conteúdo obrigatório da tarefa: demonstre tokens, escala tipográfica, componentes e exemplos de layout de um sistema de design existente. Use as seguintes orientações de layout específicas da tarefa ao converter a imagem em elementos editáveis: avance dos fundamentos para os componentes e, depois, para uma tela composta. Demonstre como o mesmo token afeta vários componentes, em vez de mostrar amostras de cores desconectadas.
Direção visual do briefing de exemplo
Tipografia preta marcante, painéis em amarelo quente e composições geométricas bem definidas; contraste controlado.
Especificação de interação
A referência é um conceito estático: o comportamento abaixo é um requisito a ser implementado, não uma prova de que a imagem já funciona. Copie o prompt personalizado para seu projeto de trabalho. Comece pela tarefa principal: demonstre tokens, escala tipográfica, componentes e exemplos de layout de um sistema de design existente. Preserve os nomes dos tokens fornecidos e diferencie exemplos de componentes exportados. Para cada controle visível, especifique seu acionador, o estado afetado e o feedback; implemente alterações locais com um estado consistente entre as visualizações relacionadas. Faça com que a pesquisa e os filtros retornem resultados reais, dê aos controles de seleção um estado ativo explícito e forneça às ações de salvar feedback visível de processamento/sucesso/falha, quando relevante. Não adicione fluxos de trabalho não relacionados. Use links adequados para navegação, botões para ações e nomes acessíveis para controles de ícones. Não sugira que uma operação de backend foi concluída quando apenas uma demonstração local foi alterada.
Comparação visual e entrega
- 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.
- Em seguida, teste o layout estreito sem comprimir o texto da versão para desktop em rótulos minúsculos.
- 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.
Baixar prompt + imagem
Inclui o prompt completo e a imagem de referência em tamanho real. Anexe ambos no OpenDesign para orientar o layout.
Como Escrever um Prompt de Design de Demonstração de Sistema de Design
Use este prompt de design de demonstração de sistema de design para apresentar tokens, escala tipográfica, componentes e exemplos de layout de um sistema de design existente.
A referência é um conceito gerado por IA. As instruções abaixo descrevem o que criar e testar; a imagem não demonstra um comportamento funcional.
Conecte Tokens a Exemplos de Componentes
Uma demonstração de sistema de design deve mostrar como uma regra se transforma em uma interface utilizável.
Exibir botões atraentes sem nomes de tokens ou cobertura de estados dificulta a reprodução do sistema. Avance dos fundamentos para os componentes e, depois, para uma tela completa. Demonstre como o mesmo token afeta vários componentes, em vez de exibir amostras de cores desconectadas.
Do prompt
Avance dos fundamentos para os componentes e, depois, para uma tela completa.
Personalize
Use [EXISTING_TOKENS] sem alterações. Associe funções tipográficas e de cor a exemplos de componentes, incluindo estados de foco e desabilitado, e identifique quais exemplos têm implementações realmente exportáveis.
Prepare o Conteúdo da Demonstração do Sistema de Design
A área de tokens apresenta amostras de cores e tokens básicos de tipografia, espaçamento, raio e sombra. Especifique valores reais e funções semânticas; a captura de tela, por si só, não é uma fonte completa de tokens.
Forneça os nomes dos tokens, as funções das cores, a escala tipográfica, as regras de espaçamento e os exemplos de componentes do sistema selecionado. Inclua a versão ou a fonte para que a vitrine represente um sistema específico.
Do prompt
Demonstre tokens, escala tipográfica, componentes e exemplos de layout de um sistema de design existente.
Personalize
Para [PROJECT], use [APPROVED_CONTENT] como fonte desta demonstração de sistema de design. Forneça os nomes dos tokens, as funções de cor, a escala tipográfica, as regras de espaçamento e os exemplos de componentes do sistema selecionado. Inclua a versão ou a fonte para que a demonstração reflita um sistema específico. Identifique as informações ausentes antes de substituí-las por conteúdo de demonstração.
Verifique um Exemplo em Relação ao Seu Token
As colunas adjacentes conectam a hierarquia tipográfica a exemplos de componentes. Verifique a legibilidade e os estados interativos em componentes reais, em vez de tratar essas amostras estáticas como prova de implementação.
Rastreie o espaçamento, a cor e a tipografia de um componente até o sistema fornecido. Um token substituto visualmente semelhante ainda representa uma alteração no contrato. Compare nomes e valores com a fonte fornecida. Teste rótulos longos, estados de foco e controles desabilitados; um exemplo visual não deve ser descrito como uma biblioteca de componentes exportados.
Do prompt
Preserve os nomes dos tokens fornecidos e diferencie exemplos de componentes exportados.
Personalize
Revise a demonstração do sistema de design de acordo com este requisito: preserve os nomes dos tokens fornecidos e diferencie exemplos de componentes exportados. Compare nomes e valores com a fonte fornecida. Teste rótulos longos, estados de foco e controles desabilitados; um exemplo visual não deve ser descrito como uma biblioteca de componentes exportados. Preserve o conteúdo aprovado e revise apenas as partes que não atenderem a esta verificação.
Revise o Resultado da Sua Demonstração do Sistema de Design
O texto, as rotas e a estrutura visual gerados precisam ser revisados. Não conecte formulários reais, pagamentos ou serviços externos sem implementar e testar esses fluxos.
- Compare nomes e valores com a fonte fornecida. Teste rótulos longos, estados de foco e controles desabilitados; um exemplo visual não deve ser descrito como uma biblioteca de componentes exportados.
Prompt de acompanhamento
Use isto após o primeiro resultado. Assim, a revisão se concentra na parte mais importante desta tarefa.
Refine a vitrine atual do sistema de design. Compare nomes e valores com a fonte fornecida. Teste rótulos longos, estados de foco e controles desativados; um exemplo visual não deve ser descrito como uma biblioteca de componentes exportada. Preserve o conteúdo aprovado e a direção visual; altere apenas as partes necessárias para resolver esses problemas.
