Need
Fonte do design
Default options
Why it's needed
Uma seleção específica de frame ou componente mantém a implementação fiel ao design.
Codex use case
Transforme designs do Figma em código
Transforme seleções do Figma em interfaces refinadas, com contexto estruturado de design e verificações visuais.
Difficulty Intermediário
Time horizon 1 h
Use o Codex para extrair do Figma o contexto do design, os recursos e as variantes, convertê-los em código alinhado ao sistema de design do repositório e, depois, usar o Playwright para comparar a implementação com a referência do Figma e fazer ajustes até que o resultado fique correto.
Ideal para
- Implementar telas ou fluxos já criados no Figma em uma base de código existente
- Equipes que querem que o Codex trabalhe com base em um contexto estruturado de design
Contents
Transforme designs do Figma em código
Transforme seleções do Figma em interfaces refinadas, com contexto estruturado de design e verificações visuais.
Use o Codex para extrair do Figma o contexto do design, os recursos e as variantes, convertê-los em código alinhado ao sistema de design do repositório e, depois, usar o Playwright para comparar a implementação com a referência do Figma e fazer ajustes até que o resultado fique correto.
Intermediário
1 h
Use o Codex para extrair do Figma o contexto do design, os recursos e as variantes, convertê-los em código alinhado ao sistema de design do repositório e, depois, usar o Playwright para comparar a implementação com a referência do Figma e fazer ajustes até que o resultado fique correto.
Intermediário
1 h
Links relacionados
Ideal para
- Implementar telas ou fluxos já criados no Figma em uma base de código existente
- Equipes que querem que o Codex trabalhe com base em um contexto estruturado de design
Habilidades e Plug-ins
- Implemente designs em código, crie mapeamentos do Code Connect entre componentes publicados e arquivos de origem e gere regras de sistema de design específicas do projeto para fluxos repetíveis de conversão do Figma em código.
- Verifique o comportamento responsivo e valide a interface implementada em um navegador real.
| Skill | Why use it |
|---|---|
| Figma | Implemente designs em código, crie mapeamentos do Code Connect entre componentes publicados e arquivos de origem e gere regras de sistema de design específicas do projeto para fluxos repetíveis de conversão do Figma em código. |
| Playwright | Verifique o comportamento responsivo e valide a interface implementada em um navegador real. |
Prompt inicial
Implemente este design do Figma no projeto atual usando a habilidade do Figma.
Requisitos:
- Comece com `get_design_context` para o node ou frame exato.
- Se a resposta for truncada, use `get_metadata` para mapear o arquivo e depois busque novamente apenas os nodes necessários com `get_design_context`.
- Execute `get_screenshot` para a variante exata antes de começar a programar.
- Reutilize os componentes e tokens do sistema de design existente.
- Adapte a saída do Figma aos utilitários e padrões de componentes deste repositório, em vez de inventar um sistema paralelo.
- Reproduza fielmente o espaçamento, o layout, a hierarquia e o comportamento responsivo.
- Respeite os padrões de roteamento, estado e obtenção de dados do repositório.
- Garanta que a página seja responsiva em desktop e dispositivos móveis.
- Se Figma retornar origens de imagens ou SVG no localhost, use-as diretamente e não crie placeholders nem adicione novos pacotes de ícones.
Validação:
- Compare a interface final com a referência do Figma, tanto na aparência quanto no comportamento.
- Use o Playwright para verificar se a interface corresponde à referência e faça os ajustes necessários até que corresponda.
Implemente este design do Figma no projeto atual usando a habilidade do Figma.
Requisitos:
- Comece com `get_design_context` para o node ou frame exato.
- Se a resposta for truncada, use `get_metadata` para mapear o arquivo e depois busque novamente apenas os nodes necessários com `get_design_context`.
- Execute `get_screenshot` para a variante exata antes de começar a programar.
- Reutilize os componentes e tokens do sistema de design existente.
- Adapte a saída do Figma aos utilitários e padrões de componentes deste repositório, em vez de inventar um sistema paralelo.
- Reproduza fielmente o espaçamento, o layout, a hierarquia e o comportamento responsivo.
- Respeite os padrões de roteamento, estado e obtenção de dados do repositório.
- Garanta que a página seja responsiva em desktop e dispositivos móveis.
- Se Figma retornar origens de imagens ou SVG no localhost, use-as diretamente e não crie placeholders nem adicione novos pacotes de ícones.
Validação:
- Compare a interface final com a referência do Figma, tanto na aparência quanto no comportamento.
- Use o Playwright para verificar se a interface corresponde à referência e faça os ajustes necessários até que corresponda.
Introdução
Quando você tem uma seleção exata no Figma, o Codex pode transformá-la em uma interface refinada sem desconsiderar os padrões já estabelecidos no projeto.
Com a habilidade do Figma, o Codex pode usar o servidor MCP do Figma para extrair o contexto estruturado do design, as variáveis, os recursos 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 refinar o layout ou o comportamento até aproximar o resultado do objetivo.
Configure seu projeto do Figma
Quanto mais organizado estiver seu arquivo do Figma, melhor será a primeira implementação. Para melhorar a transição do design para o desenvolvimento:
- Use variáveis ou tokens de design sempre que possível, sobretudo para cores, tipografia e espaçamento
- Crie componentes para elementos reutilizáveis da interface, em vez de repetir camadas desvinculadas
- Use o layout automático sempre que possível, em vez do posicionamento manual
- Dê nomes claros aos frames e às camadas para facilitar a identificação da tela principal, do estado e das variantes
- Mantenha no arquivo os ícones e as imagens reais sempre que possível, para que o Codex não precise adivinhar
Isso fornece ao Codex uma estrutura mais adequada para gerar uma interface robusta e pronta para produção.
Seja específico
Quanto mais detalhes você fornecer sobre os padrões de interação esperados e o estilo desejado, melhor será o resultado.
Se um estado, breakpoint ou interação for importante, deixe isso claro. Se o arquivo contiver várias variantes parecidas, informe ao Codex qual delas deve ser considerada a referência principal.
Quanto mais claro você for sobre o que precisa corresponder exatamente e quando as convenções do repositório devem prevalecer, mais fácil será para o Codex equilibrar essas prioridades da forma certa.
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, em vez de recriá-los do zero.
Se considerar necessário, informe ao Codex quais primitivas devem ser reutilizadas, onde ficam seus tokens e quais são os padrões canônicos do repositório para botões, campos de entrada, cards, tipografia e ícones.
Considere a saída do MCP do Figma, que muitas vezes se parece com React usando Tailwind, uma referência estrutural, não o estilo final do código. Peça ao Codex que adapte essa saída aos utilitários, wrappers de componentes, sistema de cores, escala tipográfica, tokens de espaçamento, roteamento, gerenciamento de estado e padrões de obtenção de dados realmente usados no projeto.
Fluxo de trabalho
Comece com uma seleção do Figma
Copie o link do frame, componente ou variante exata do Figma que você quer implementar. O fluxo do MCP do Figma é baseado em links, por isso o link precisa apontar para o node exato, não para um frame pai próximo.
Instrua o Codex a usar o Figma
O Figma deve orientar a implementação inicial. Peça ao Codex que siga o fluxo do MCP do Figma antes de começar a implementar.
Inclua estes itens no prompt:
1. Primeiro, execute `get_design_context` para o node ou frame exato.
2. Se a resposta for muito grande ou estiver truncada, execute `get_metadata` para mapear o arquivo e depois execute novamente `get_design_context` apenas para os nodes necessários.
3. Execute `get_screenshot` para a variante exata que está sendo implementada.
4. Somente depois que o contexto do design e a variante exata estiverem disponíveis, baixe os recursos necessários e inicie a implementação.
5. Adapte o resultado às convenções do repositório: reutilize os componentes existentes, substitua classes utilitárias usadas diretamente pelo sistema do projeto sempre que possível e mantenha o espaçamento, a hierarquia e o comportamento responsivo alinhados ao design.
6. Se Figma retornar uma imagem ou um SVG com origem no localhost, use o recurso diretamente. Não crie placeholders nem adicione um novo pacote de ícones quando o recurso já estiver no payload.
Quando a implementação inicial estiver pronta, o Codex usará o Playwright para verificar a interface em um navegador real e corrigir eventuais divergências restantes na aparência ou na interação.
Tech stack
Need
Default options
Why it's needed
| Need | Default options | Why it's needed |
|---|---|---|
| Fonte do design | Figma | Uma seleção específica de frame ou componente mantém a implementação fiel ao design. |
Casos de uso relacionados
Crie designs de front-end responsivos
Use o Codex para transformar capturas de tela e briefings de design em código alinhado ao...
Front-end Design
Passe da ideia à prova de conceito
Use o Codex com o ImageGen para transformar uma ideia inicial em uma direção visual...
Front-end Engenharia
Crie um site para um projeto estudantil
Use o Sites para definir o escopo, criar e testar um site simples com base no conteúdo de um...
Front-end Código