Defina o layout antes de começar a programar
Transforme os requisitos da sua página num wireframe SVG. Reveja a estrutura, os campos e a ação principal; depois refine o visual com o seu assistente de programação. Não precisa de comprar um pacote de cenários.
Download sem iniciar sessão. O resultado é SVG estático; o assistente e o uso dos modelos têm custos separados.
Do pedido a uma página que pode analisar
Resolva a distribuição dos elementos antes de escolher tipos de letra, cores e espaçamentos.
O exemplo de uma ferramenta para cartazes de produtos mostra o fluxo gratuito. Os dois SVG mantêm os campos, a escolha de tamanho e os resultados. Abra-os para comparar, sem pacote pago.
Use o skill ai-ui-designer. Crie uma ferramenta para cartazes de produtos com nome do produto, argumentos de venda, escolha de tamanho, botão para gerar e grelha de resultados.
Explique o objetivo da página e os controlos necessários.
Descarregue e extraia o ZIP. Coloque a pasta ai-ui-designer no diretório de skills do seu ambiente Codex ou Claude Code.
SKILL.md deve ficar diretamente dentro de ai-ui-designer. O download inclui instruções de design, referências e scripts auxiliares.
Confirme que a extração não criou uma pasta adicional.
Invoque o skill e descreva o público, os conteúdos e o objetivo da página.
Codex: $ai-ui-designer Claude Code: /ai-ui-designer Crie um wireframe SVG para a página inicial do meu produto com proposta de valor, funcionalidades e registo.
Use um navegador ou visualizador SVG. Peça mudanças concretas, como destacar títulos ou aumentar o espaço junto da ação principal.
Se o skill não aparecer, verifique o caminho e SKILL.md. O Codex deteta alterações automaticamente; reinicie se necessário. No Claude Code, consulte o menu /.
Precisa do seu próprio assistente e acesso aos modelos. Os scripts locais dos pacotes exigem Python 3.9 ou superior. O download dos pacotes opcionais do site exige uma subscrição paga ativa.
Distribua blocos de conteúdo, campos e ações num wireframe em tons de cinzento.
Refine tipografia, espaços, cores e imagens sobre o layout aprovado.
Guarde os SVG no projeto e peça revisões à medida que os requisitos ficam mais claros.
O skill inclui wireframes, design UI a cores, aplicação de temas e gestão local de pacotes.
Os pacotes de cenários são referências opcionais. Não são necessários para usar o fluxo gratuito.
O resultado são ficheiros SVG e orientações de design. Os botões desenhados não iniciam sessão, processam pagamentos nem geram imagens.
A aplicação requer desenvolvimento separado. A disponibilidade do assistente e os custos dos modelos seguem as condições de cada ferramenta.
Consulte as páginas, temas e recursos na página de detalhes.
Recurso opcional, com download mediante subscrição paga ativa. O skill continua gratuito.
Instale o skill de design UI gratuito no seu assistente e transforme requisitos num layout SVG que pode analisar e refinar antes do desenvolvimento.
