Frontend & UI
imagegen-frontend-mobile
Gera fluxos de telas de app mobile em nível premium, como imagens, não como código.
O que é
Uma skill só de imagem para conceitos e fluxos de telas mobile em produtos iOS, Android e multiplataforma. Ela apresenta as telas dentro de mockups de celular limpos e nunca escreve código.
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, s
Por que isso importa para design
- As telas respeitam as áreas seguras e regiões de sistema, em vez de parecerem sites dentro de um celular.
- Uma bíblia de design fixa mantém paleta, tipografia e ícones consistentes em todas as telas.
- Conjuntos com várias telas formam um fluxo crível, não mockups avulsos sem relação entre si.
O que cobre
- Platform mode rule
- Generate enough screens rule
- App design bible rule
- Safe area and system region rule
- Device mockup frame rule
- Text size and readability rule
Como instalar
imagegen-frontend-mobile
-
Clone o repositório.
git clone https://github.com/Leonxlnx/taste-skill -
Aponte o Codex para o arquivo da skill.
skills/imagegen-frontend-mobile/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Informe a categoria do app e o número de telas; cada tela vira sua própria imagem.
-
A skill escolhe primeiro um modo de plataforma: iOS, Android ou neutro multiplataforma.
-
Peça para regenerar qualquer tela em que o texto fique pequeno ou o enquadramento irregular.
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-web Gera uma imagem de referência horizontal para cada seção da landing page. 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.