design-it
Ajuda seu agente a criar designs de interface para sites e aplicativos. Ele pode escolher entre 48 estilos visuais diferentes para a aparência.
O que ela faz
Essa ferramenta ajuda a criar o visual de sites e aplicativos. Ela escolhe entre 48 estilos de design diferentes, em vez de usar um visual genérico.
Quando usar
- ✓Quando você quer que um site ou app tenha um visual específico (ex: moderno, retrô).
- ✓Ao criar um novo site, tela de app ou componente de interface.
- ✓Se você não gosta dos visuais padrão e quer algo mais definido.
Exemplo do que pedir para a IA
“Crie um site com visual 'cyberpunk'.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A IA procura palavras-chave no seu pedido para adivinhar o estilo desejado (como 'minimalista' ou 'retrô'). Depois, ela lê as instruções desse estilo e escolhe uma paleta de cores (ou usa as que você pediu) para criar o visual.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add sickn33/agentic-awesome-skills --skill design-itOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/design-it/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Design-It: Roteador de Estilo de UI Sofisticado
Este é o ponto de entrada principal para o sistema de habilidades design-it. Em vez de recorrer a estéticas genéricas de "lixo de IA", você tem acesso a 48 estilos de design distintos e profundamente opinativos.
Quando Usar
Use esta habilidade quando um usuário solicitar a criação de qualquer interface frontend (site, tela de aplicativo, componente de UI) e você quiser aplicar uma estética de design específica e opinativa em vez dos padrões genéricos.
Como Usar Esta Habilidade
Quando um usuário pedir para você criar uma interface frontend (web ou app):
- Identifique o Estilo (Correspondência Difusa): Procure por palavras-chave no prompt dele (por exemplo, "minimalista", "vidro", "retrô"). Você não precisa de uma correspondência exata. Use seu entendimento semântico para mapear a solicitação dele para um dos 48 estilos. Por exemplo:
- "Estilo Apple" ou "VisionOS" ->
spatial-design,bento-uiouglassmorphism - "Windows 8" ou "Metro" ->
tile-design - "Terminal" ou "Hacker" ->
sci-fi-interfaceoubrutalist-typography - "Bauhaus" ou "Limpo" ->
swiss-design - "Cyber" ou "Matrix" ->
cyberpunk-uiSe ele não especificar um estilo, escolha um que melhor se adapte ao contexto do projeto.
- "Estilo Apple" ou "VisionOS" ->
- Leia a Referência do Estilo: Verifique o Índice de Estilos abaixo para encontrar o caminho correto para o estilo escolhido. Use a ferramenta
view_filepara ler suaSKILL.mdespecífica. - Escolha uma Paleta: Se o usuário definiu explicitamente um tema ou cores, use as cores solicitadas por ele. Se ele NÃO especificou cores, você DEVE escolher uma das 10 Paletas Universais abaixo.
- Execute: Escreva o código seguindo os princípios específicos do estilo escolhido. Não misture estilos, a menos que solicitado.
Paletas de Cores Universais
Se o usuário fornecer suas próprias cores, use-as. Caso contrário, você DEVE usar uma destas 10 paletas premiadas e altamente sofisticadas para evitar gradientes genéricos de neon/roxo. Ao escolher uma paleta, atenha-se a estes códigos hex exatos e estabeleça variáveis CSS para eles.
- Yacht Club (Náutico / Elegância Clássica)
- Fundos:
#F9F6F0 - Texto Principal / Acentos:
#1B2A49 - CTA / Destaques:
#C85A32 - Base Secundária:
#E2D8C9
- Fundos:
- Miragem do Deserto (Quente / Orgânico)
- Fundos:
#F4EFEA - Texto Principal / Acentos:
#2D2B2A - CTA / Destaques:
#A65E44 - Base Secundária:
#8C8781
- Fundos:
- Chique Industrial (Forte / Minimalista)
- Fundos:
#D1D1D1 - Texto Principal / Acentos:
#111111 - CTA / Destaques:
#9A3B3B - Base Secundária:
#757575
- Fundos:
- Marrom Monocromático (Conforto / Nostálgico)
- Fundos:
#D9CBBF - Texto Principal / Acentos:
#4A362D - CTA / Destaques:
#7A4C3A - Base Secundária:
#948275
- Fundos:
- Elegância Terrena (Calmo / Sustentável)
- Fundos:
#F7F5F0 - Texto Principal / Acentos:
#3A4B3A - CTA / Destaques:
#8A9A86 - Base Secundária:
#D3CEC4
- Fundos:
- Ardósia Minimalista (Profissional / Tecnologia)
- Fundos:
#F4F4F9 - Texto Principal / Acentos:
#2B303A - CTA / Destaques:
#5C6B73 - Base Secundária:
#C0C5C1
- Fundos:
- Luxo da Meia-Noite (Premium / Modo Escuro)
- Fundos:
#0A0A0A - Texto Principal / Acentos:
#F5F5F0 - CTA / Destaques:
#B59A5F - Base Secundária:
#1C1C1C
- Fundos:
- Neutro Sofisticado (Upscale / Estilo de Vida)
- Fundos:
#E6E2DD - Texto Principal / Acentos:
#1F1C1B - CTA / Destaques:
#524036 - Base Secundária:
#B8B0A8
- Fundos:
- Tecnologia Quente (Corporativo / Moderno)
- Fundos:
#EAEAEA - Texto Principal / Acentos:
#1C252E - CTA / Destaques:
#C28F79 - Base Secundária:
#2C3E50
- Fundos:
- Editorial Moderno (Revista / Alto Contraste)
- Fundos:
#F9F9F9 - Texto Principal / Acentos:
#121212 - CTA / Destaques:
#D44A3A - Base Secundária:
#8F8F8F
- Fundos:
Regra 60-30-10
- 60%: Fundos / Base Secundária
- 30%: Texto Principal / Acentos
- 10%: CTA / Destaques
Índice de Estilos (48 Estilos)
Para usar um estilo, você DEVE ler seu arquivo em <style-folder>/SKILL.md relativo ao diretório deste arquivo.
UI Moderna
minimalismflat-designflat-design-2material-designglassmorphismneumorphismskeuomorphismclaymorphismaurora-uibento-ui
Profundidade e 3D
3d-uiisometric-designlayered-designfloating-uispatial-design
Tipografia
swiss-designeditorial-designtypography-firstbrutalist-typography
Retrô e Histórico
brutalismneo-brutalismretro-designy2k-designcyber-y2kvaporwavesynthwavefrutiger-aeroretro-futurism
…
Perguntas frequentes
O que são os 48 estilos?
São 48 jeitos diferentes de desenhar interfaces, como 'minimalista', 'vidro', 'retrô', 'futurista', entre outros.
E se eu não disser qual estilo quero?
A IA vai tentar escolher o melhor estilo baseado no contexto do seu pedido.
A IA usa as cores que eu peço?
Sim, se você especificar cores, ela as usará. Senão, ela escolhe uma das 10 paletas de cores pré-definidas.
Detalhes
Descrição original do autor
Routes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting a specific aesthetic.
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #2763
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
00-andruia-consultant
Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.
sickn33/agentic-awesome-skills
007
Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.
sickn33/agentic-awesome-skills
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC