Frontend & UI
Agent-Native Plans
Transforma planos em texto em documentos revisáveis, com wireframes e protótipos.
O que é
Um modo de planejamento estruturado para agentes de código. Os planos viram documentos fáceis de escanear, com diagramas inline, código, modelos de dados, questões em aberto e um canvas superior opcional ou um protótipo ao vivo.
Generate rich visual plans as MDX with diagrams, API specs and zoomable wireframes, then recap what the agent did.
Por que isso importa para design
- Os planos de UI abrem com artboards de wireframe, um por estado visível ao usuário.
- Os revisores comentam em elementos ancorados em vez de discutir no chat.
- Fluxos de vários passos ganham um protótipo operável ao lado dos mockups estáticos.
O que cobre
- When to use
- Plan discipline
- Core workflow
- Visual surface choice
- Wireframe quality
- Self-review before handoff
Como instalar
Agent-Native Plans
-
Clone o repositório.
git clone https://github.com/BuilderIO/skills -
Aponte o Codex para o arquivo da skill.
skills/visual-plan/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Instale com a CLI Agent-Native e depois rode o comando /visual-plan.
-
Cole um plano existente em Codex ou Markdown para usar como fonte.
-
Leia o feedback, ajuste o plano e verifique o resultado persistido.
Todo plugin aqui é gratuito, open source e leva até a sua fonte original.
Mais na lista codex-design ↗Mais plugins de design para o Codex
Frontend & UI O que ele faz gpt-taste Cria landing pages estilo premiado com movimento de scroll em GSAP e grids bento sem falhas. 
Design Systems O que ele faz Stitch Design Taste Escreve um DESIGN.md que guia o Google Stitch para telas que fogem do genérico. 
Frontend & UI O que ele faz image-to-code Gera imagens de design primeiro, analisa cada uma e só depois constrói o código de frontend correspondente. 
Frontend & UI O que ele faz imagegen-frontend-mobile Gera fluxos de telas de app mobile em nível premium, como imagens, não como código. Próximo passo
Projete com o Open Design, sem a configuração
Instale este plugin por conta própria ou rode uma camada de design curada em volta do Codex com o Open Design. Use sua própria chave e seja dono do resultado.