Need
Fonte do design
Default options
Why it's needed
O quadro ou componente selecionado serve de referência para a implementação.
Codex use case
Transforme designs do Figma em código
Crie interfaces bem acabadas a partir de seleções no Figma, com contexto de design estruturado e verificações visuais.
Difficulty Intermediate
Time horizon 1h
Use o Codex para obter contexto de design, recursos e variantes do Figma e gerar código que siga o sistema de design do repositório. Depois, use o Playwright para comparar a implementação com a referência do Figma e fazer ajustes até que a interface tenha a aparência esperada.
Best for
- Implementar telas ou fluxos já desenhados no Figma em uma base de código existente
- Equipes que querem que o Codex use contexto de design estruturado como base para a implementação
Contents
Transforme designs do Figma em código
Crie interfaces bem acabadas a partir de seleções no Figma, com contexto de design estruturado e verificações visuais.
Use o Codex para obter contexto de design, recursos e variantes do Figma e gerar código que siga o sistema de design do repositório. Depois, use o Playwright para comparar a implementação com a referência do Figma e fazer ajustes até que a interface tenha a aparência esperada.
Intermediate
1h
Use o Codex para obter contexto de design, recursos e variantes do Figma e gerar código que siga o sistema de design do repositório. Depois, use o Playwright para comparar a implementação com a referência do Figma e fazer ajustes até que a interface tenha a aparência esperada.
Intermediate
1h
Related links
Best for
- Implementar telas ou fluxos já desenhados no Figma em uma base de código existente
- Equipes que querem que o Codex use contexto de design estruturado como base para a implementação
Skills & Plugins
- Implemente designs em código, use o Code Connect para associar componentes publicados aos arquivos-fonte correspondentes e gere regras para o sistema de design do projeto. Assim, você pode seguir o mesmo processo sempre que converter designs do Figma em código.
- Confira como a interface se adapta a diferentes tamanhos de tela e verifique a implementação em um navegador real.
| Skill | Why use it |
|---|---|
| Figma | Implemente designs em código, use o Code Connect para associar componentes publicados aos arquivos-fonte correspondentes e gere regras para o sistema de design do projeto. Assim, você pode seguir o mesmo processo sempre que converter designs do Figma em código. |
| Playwright | Confira como a interface se adapta a diferentes tamanhos de tela e verifique a implementação em um navegador real. |
Starter prompt
Use a habilidade do Figma para implementar este design no projeto atual.
Requisitos:
- Comece executando `get_design_context` para o node ou quadro exato que será implementado.
- Se a resposta vier truncada, use `get_metadata` para mapear o arquivo. Depois, consulte novamente apenas os nodes necessários com `get_design_context`.
- Execute `get_screenshot` para a variante exata antes de começar a escrever o código.
- Reutilize os componentes e tokens existentes do sistema de design.
- Adapte o resultado do Figma aos utilitários e padrões de componentes deste repositório, sem criar um sistema paralelo.
- Reproduza com fidelidade o espaçamento, o layout, a hierarquia e o comportamento responsivo.
- Siga os padrões do repositório para roteamento, gerenciamento de estado e busca de dados.
- Faça com que a página se adapte às telas de computadores e dispositivos móveis.
- Se o Figma retornar imagens ou SVGs com origem em localhost, use esses recursos diretamente. Nesse caso, não crie elementos provisórios nem adicione novos pacotes de ícones.
Validação:
- Compare a aparência e o comportamento da interface pronta com a referência do Figma.
- Use o Playwright para verificar se a interface corresponde à referência. Se houver diferenças, ajuste a implementação e repita a verificação até que o resultado corresponda ao design.
Use a habilidade do Figma para implementar este design no projeto atual.
Requisitos:
- Comece executando `get_design_context` para o node ou quadro exato que será implementado.
- Se a resposta vier truncada, use `get_metadata` para mapear o arquivo. Depois, consulte novamente apenas os nodes necessários com `get_design_context`.
- Execute `get_screenshot` para a variante exata antes de começar a escrever o código.
- Reutilize os componentes e tokens existentes do sistema de design.
- Adapte o resultado do Figma aos utilitários e padrões de componentes deste repositório, sem criar um sistema paralelo.
- Reproduza com fidelidade o espaçamento, o layout, a hierarquia e o comportamento responsivo.
- Siga os padrões do repositório para roteamento, gerenciamento de estado e busca de dados.
- Faça com que a página se adapte às telas de computadores e dispositivos móveis.
- Se o Figma retornar imagens ou SVGs com origem em localhost, use esses recursos diretamente. Nesse caso, não crie elementos provisórios nem adicione novos pacotes de ícones.
Validação:
- Compare a aparência e o comportamento da interface pronta com a referência do Figma.
- Use o Playwright para verificar se a interface corresponde à referência. Se houver diferenças, ajuste a implementação e repita a verificação até que o resultado corresponda ao design.
Introdução
Quando você seleciona no Figma exatamente o que quer implementar, o Codex pode transformar essa seleção em uma interface bem-acabada que segue os padrões do seu projeto.
Com a habilidade do Figma, o Codex pode usar o servidor MCP do Figma para obter o contexto estruturado do design, as variáveis, os recursos visuais e a variante exata que deve implementar.
Com a habilidade interativa do Playwright, o Codex pode abrir o aplicativo em um navegador real, comparar a implementação com a referência do Figma e ajustar o layout ou o comportamento até chegar mais perto do resultado esperado.
Organize seu projeto no Figma
Quanto mais organizado estiver o arquivo do Figma, melhor será a primeira implementação. Para facilitar a passagem do design para o desenvolvimento, siga estas orientações.
- Use variáveis ou tokens de design sempre que possível, especialmente para cores, tipografia e espaçamento
- Crie componentes para os elementos reutilizáveis da interface em vez de repetir camadas desvinculadas
- Use o layout automático sempre que possível em vez de posicionar os elementos manualmente
- Dê aos quadros e às camadas nomes que permitam identificar facilmente a tela principal, o estado e as variantes
- Sempre que possível, mantenha no arquivo os ícones e as imagens que serão usados para que o Codex não precise adivinhar quais são
Essa organização dá ao Codex uma estrutura melhor para criar uma interface robusta e pronta para produção.
Dê instruções específicas
Quanto mais detalhes você der sobre os padrões de interação esperados e o estilo desejado, melhor será o resultado.
Se um estado, um ponto de quebra ou uma interação for importante, mencione isso no prompt. Se houver várias variantes parecidas no arquivo, diga ao Codex qual delas deve servir de referência definitiva.
Indique o que precisa corresponder exatamente ao design e em quais casos as convenções do repositório devem prevalecer. Assim, fica mais fácil para o Codex decidir o que priorizar.
Prepare o sistema de design
O Codex funciona melhor quando o repositório de destino já tem uma camada de componentes bem definida. Ele pode usar automaticamente os componentes e o sistema de design existentes, sem precisar recriá-los do zero.
Se achar necessário, informe ao Codex quais componentes primitivos reutilizar, onde encontrar os tokens e quais padrões o repositório adota para botões, campos de entrada, cartões, tipografia e ícones.
Use a saída do servidor MCP do Figma como referência para a estrutura. Embora ela muitas vezes se pareça com código React com Tailwind, o estilo do código final deve seguir o projeto. Peça ao Codex que adapte essa saída aos utilitários, aos wrappers de componentes, ao sistema de cores, à escala tipográfica, aos tokens de espaçamento, ao roteamento, ao gerenciamento de estado e aos padrões de busca de dados usados no projeto.
Fluxo de trabalho
Comece com uma seleção no Figma
No Figma, copie o link que leva diretamente ao quadro, ao componente ou à variante que você quer implementar. Como o fluxo do servidor MCP do Figma usa links, confira se o link aponta para o node desejado. Um link para um quadro que o contém aponta para outro node.
Peça ao Codex que use o Figma
O Figma deve orientar a primeira versão. Peça ao Codex que siga o fluxo do servidor MCP do Figma antes de começar a implementação.
Inclua estas instruções no prompt.
1. Primeiro, execute `get_design_context` para o node ou quadro específico que será implementado.
2. Se a resposta for muito grande ou estiver truncada, execute `get_metadata` para mapear o arquivo. Em seguida, execute `get_design_context` novamente apenas para os nodes necessários.
3. Execute `get_screenshot` para a variante exata que será implementada.
4. Só depois que o contexto do design e a variante exata estiverem disponíveis, baixe os recursos necessários e comece a implementação.
5. Adapte o resultado às convenções do repositório. Reutilize os componentes existentes, substitua as classes utilitárias aplicadas diretamente pelo sistema do projeto sempre que possível e mantenha o espaçamento, a hierarquia e o comportamento responsivo de acordo com o design.
6. Se o Figma retornar uma imagem em localhost ou o código-fonte de um SVG, use esse recurso diretamente. Se o recurso já estiver nos dados retornados, não crie elementos provisórios nem adicione um novo pacote de ícones.
Assim que a primeira implementação estiver pronta, o Codex usará o Playwright para verificar a interface em um navegador real e ajustar os detalhes visuais ou de interação que ainda divergirem da referência.
Tech stack
Need
Default options
Why it's needed
| Need | Default options | Why it's needed |
|---|---|---|
| Fonte do design | Figma | O quadro ou componente selecionado serve de referência para a implementação. |
Related use cases
Crie interfaces de front-end responsivas
Use o Codex para transformar capturas de tela e orientações de design em código que siga o...
Front-end Design
Da ideia à prova de conceito
Use o Codex com o ImageGen para dar forma visual a uma ideia inicial, criar um protótipo com...
Front-end Engineering
Crie um guia interativo com IA
Use o Codex para adicionar um tour com WebMCP ao seu aplicativo web
Front-end Engineering