Codex use case
Transforme histórias de usuário em mockups de UI
Converta feedback sobre o produto, discussões de issues e contexto de design em mockups que sua equipe possa avaliar e implementar.
Use o Codex para coletar feedback sobre o produto no Slack, no Linear e no Google Drive, padronizá-lo na forma de histórias de usuário e restrições e, depois, gerar mockups de UI com o ImageGen. Após escolher a proposta, transforme o mockup em um protótipo funcional.
Ideal para
- Equipes de produto que transformam feedback disperso em uma proposta visual para uma funcionalidade.
- Equipes de design e engenharia que querem mockups embasados no material de referência antes de iniciar o desenvolvimento.
- Equipes que querem iterar rapidamente com base no feedback dos usuários.
Contents
Transforme histórias de usuário em mockups de UI
Converta feedback sobre o produto, discussões de issues e contexto de design em mockups que sua equipe possa avaliar e implementar.
Use o Codex para coletar feedback sobre o produto no Slack, no Linear e no Google Drive, padronizá-lo na forma de histórias de usuário e restrições e, depois, gerar mockups de UI com o ImageGen. Após escolher a proposta, transforme o mockup em um protótipo funcional.
Use o Codex para coletar feedback sobre o produto no Slack, no Linear e no Google Drive, padronizá-lo na forma de histórias de usuário e restrições e, depois, gerar mockups de UI com o ImageGen. Após escolher a proposta, transforme o mockup em um protótipo funcional.
Links relacionados
Ideal para
- Equipes de produto que transformam feedback disperso em uma proposta visual para uma funcionalidade.
- Equipes de design e engenharia que querem mockups embasados no material de referência antes de iniciar o desenvolvimento.
- Equipes que querem iterar rapidamente com base no feedback dos usuários.
Habilidades e Plug-ins
- Pesquise nos canais e nas conversas de feedback aprovados por histórias de usuário, pontos de atrito, citações e perguntas em aberto.
- Reúna no briefing do mockup solicitações de funcionalidades, relatos de bugs, rótulos, prioridades e contexto do projeto.
- Leia notas de pesquisa, resumos de chamadas, documentos, planilhas e apresentações que contenham feedback sobre o produto ou requisitos de design.
- Busque contexto de design, capturas de tela e referências do sistema de design para manter os mockups alinhados à linguagem visual do produto.
- ImageGenGere mockups de UI, variações e uma referência visual fiel com base nas histórias de usuário consolidadas e nas restrições de design.
- Transforme o mockup selecionado em um protótipo web funcional e verifique se a implementação corresponde ao mockup.
| Skill | Why use it |
|---|---|
| Slack | Pesquise nos canais e nas conversas de feedback aprovados por histórias de usuário, pontos de atrito, citações e perguntas em aberto. |
| Linear | Reúna no briefing do mockup solicitações de funcionalidades, relatos de bugs, rótulos, prioridades e contexto do projeto. |
| Google Drive | Leia notas de pesquisa, resumos de chamadas, documentos, planilhas e apresentações que contenham feedback sobre o produto ou requisitos de design. |
| Figma | Busque contexto de design, capturas de tela e referências do sistema de design para manter os mockups alinhados à linguagem visual do produto. |
| ImageGen | Gere mockups de UI, variações e uma referência visual fiel com base nas histórias de usuário consolidadas e nas restrições de design. |
| Build Web Apps | Transforme o mockup selecionado em um protótipo web funcional e verifique se a implementação corresponde ao mockup. |
Prompt inicial
Introdução
As equipes de produto costumam coletar feedback de várias fontes, como conversas no Slack, issues no Linear, documentos ou planilhas do Google Drive e notas de chamadas com clientes. Em alguns casos, elas têm histórias de usuário claras que ilustram o problema que querem resolver; em outros, o contexto está nessas fontes.
O ChatGPT pode reunir esse contexto e transformá-lo em um mockup de UI para uma funcionalidade que resolva o problema. Depois de validar a proposta, o Codex poderá implementá-la no produto.
Gere uma referência visual fiel
Se você já tiver uma história de usuário clara, pode começar por ela. Caso contrário, primeiro converse com o ChatGPT para reunir contexto de diferentes fontes e sintetizá-lo em uma história de usuário.
Em seguida, você pode pedir ao ChatGPT que use a geração de imagens para criar algumas propostas de mockup. Os mockups devem respeitar a arquitetura da informação do produto e as restrições do sistema de design.
Se for útil, você pode fornecer capturas de tela da UI atual ou um arquivo do Figma como referência.
Repita esse processo até ficar satisfeito com o mockup. Quanto mais delimitado for o escopo das alterações, maior será a probabilidade de o Codex gerar um mockup que possa ser implementado diretamente.
Passe do mockup ao protótipo
Use a imagem do mockup final que você quer que o Codex implemente. Selecione o Codex, inicie uma nova conversa e anexe a imagem novamente, em vez de continuar diretamente na conversa do ChatGPT. Em seguida, peça ao Codex para implementar o mockup — com a opção de usar o plug-in Build Web Apps caso esteja criando um aplicativo web — e transformá-lo em um protótipo funcional:
Casos de uso relacionados
Coordene a integração de novos funcionários
Use o ChatGPT para reunir o contexto aprovado dos novos funcionários, preparar atualizações...
Elabore PRDs com base no contexto interno
Use o ChatGPT com a habilidade $documents e plug-ins conectados, como Linear, Slack, Notion...
Crie resumos preparatórios para reuniões
Use o ChatGPT com o Calendar, o Drive, o Slack e o Gmail para reunir fontes aprovadas antes...