SKILL61Frontend
Tradução de Figma para Next.js
Mapeia hierarquia, variáveis, restrições e famílias de componentes do Figma para primitivas existentes de Next.js e React antes de implementar e comparar o resultado.
Principal benefício
Transforma designs em código fiel, responsivo e reutilizável que respeita a arquitetura da aplicação.Quando usar
Use ao converter designs ou componentes de design system do Figma em código de produção para Next.js e React, preservando fidelidade, reutilização, responsividade e limites de componentes fáceis de manter.
Quando não usar
Não use sem um design ou componente de origem no Figma e não exporte a estrutura ou o CSS bruto do Figma como arquitetura de produção.
Casos de uso
Implementar um frame responsivo do Figma em uma aplicação Next.js existente
Mapear variantes de componentes do Figma para limites reutilizáveis em React
Prompts de exemplo
Use translating-figma-to-nextjs para implementar estes componentes do Figma como código React responsivo e reutilizável na arquitetura existente.Instalar esta skill
Escolha o comando do seu sistema operacional e execute na raiz do repositório.
Bash
./install.sh --skill translating-figma-to-nextjsPowerShell
./install.ps1 --skill translating-figma-to-nextjsChatGPT
Baixar ZIP da skillCompatibilidade
- Ambientes
- ChatGPT · Codex · Claude Code
- Sistemas operacionais
- Linux · macOS · Windows
- Modos de instalação
- PluginSistema de arquivos
Dependências
Parte de sistemas
Sistemas curados que incluem canonicamente este método.