Swiftui Design skill

Telas de app iOS e macOS com estilo próprio: cores e fontes definidas antes do código, três direções pra escolher e revisão antes de entregar.

por nexu-io

instalações: 2.900
estrelas no GitHub: 104 mil
No skills.sh desde: maio de 2026
Licença: Apache-2.0

Atualizada no GitHub em 26 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

nexu-io
swiftui-design
Telas de app iOS e macOS com estilo próprio: cores e fontes definidas antes do código, três direções pra escolher e revisão antes de entregar.Auditada2.900 instalações, grátis

O que ela faz

É uma entrada do catálogo Open Design que aponta pra skill original de @wholiver. Ela proíbe os vícios de tela feita por IA: degradê roxo e azul, emoji no lugar de ícone, grade de três colunas igual, visual neon em fundo escuro. No lugar, pede uma cor de destaque quente, ícones SF Symbols e fonte com serifa nos títulos.

Quando o pedido é vago, o Claude pergunta o que é o app e pra quem, e mostra três direções de estilo diferentes, cada uma com paleta, par de fontes e densidade. Depois que você escolhe, ele trava tudo num arquivo de tokens em Swift, com espaçamento em grade de 8 pontos.

Pra marca que já existe, ele pede ou busca o manual, baixa logo e fontes, confere as cores oficiais e escreve um brand-spec.md. Antes de entregar, passa a tela por uma revisão em cinco dimensões, com nota mínima 7, e confere modo escuro e área de toque de 44 pontos.

Nas palavras de quem fez

SwiftUI 前端设计 skill — anti AI-slop rules, design direction advisor, brand asset protocol, and five-dimension review. Works with Claude Code, Cursor, Codex, and…

nexu-io, no SKILL.md

Quando usar

Desenhar a primeira tela de um app de iPhone
Dar cara própria a um app que ficou com visual genérico
Escolher o estilo visual quando ainda não existe marca
Aplicar a identidade de um cliente num app iOS ou macOS

Depois de instalar, é só pedir assim

Me mostra três direções de visual em SwiftUI pro app de agendamento da minha clínica
Essa tela de perfil ficou com cara de IA, refaz seguindo as regras da skill
Monta os tokens de cor e fonte do app a partir da marca da minha loja

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Swiftui Design no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Swiftui Design, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que a swiftui-design precisa pra funcionar?

Do Xcode 16 ou mais novo, com SDK do iOS 18 ou do macOS 15, porque ela escreve SwiftUI. Não pede chave de API. A entrada do Open Design é um atalho: pro fluxo completo, com as referências e o modelo de brand-spec, a orientação é instalar a skill original de @wholiver.

Roda no Codex e no Antigravity?

A descrição cita Claude Code, Cursor, Codex e OpenCode. O Antigravity não aparece na lista.

Ela corrige erro de compilação?

Não. Ela cuida do visual. Erro de compilação, desempenho de tela e acessibilidade sozinha a skill original manda pra outra, a swiftui-expert-skill. Backend e API também ficam de fora.

Levar essa skill

1x swiftui-designR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/nexu-io/open-design

Aprenda a usar

Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.