Interfaces (UI/UX)
Para interfaces bonitas, marca e imagens. 290 skills
#1accessibility
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
#2design-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
#3liquid-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
#4make-interfaces-feel-better
Ajuda seu agente a refinar a aparência de interfaces. Faz com que os elementos visuais pareçam mais polidos e fáceis de usar.
affaan-m/ECC
#5motion-advanced
Faz seu agente criar animações complexas em interfaces. Ajuda com efeitos como arrastar e soltar, gestos e animações de texto ou SVG.
affaan-m/ECC
#6motion-foundations
Ajuda seu agente a configurar as bases para animações em interfaces. Define regras e padrões para animações funcionarem bem em diferentes dispositivos.
affaan-m/ECC
#7motion-patterns
Faz seu agente animar elementos comuns de interface. Ajuda a criar transições suaves para botões, janelas, notificações e páginas.
affaan-m/ECC
#8frontend-design-direction
Define a direção de design para interfaces de usuário (UI) de sites e aplicativos. É útil para garantir que a aparência do produto seja coesa e alinhada com os objetivos do projeto.
affaan-m/ECC
#9frontend-slides
Cria apresentações visuais com animações a partir de arquivos ou do zero. Ajuda a transformar ideias em slides atraentes, mesmo para quem não é designer.
affaan-m/ECC
#10ui-to-vue
Ajuda seu agente a converter capturas de tela de interface do usuário em componentes Vue 3. É útil quando você tem designs e precisa transformá-los em código.
affaan-m/ECC
#11frontend-design
Orienta seu agente na criação de interfaces visuais únicas e intencionais. Ajuda a definir a direção estética e a escolher tipografia.
anthropics/skills
#12paperclip-capsules
Ajuda seu agente a criar visuais para 'cápsulas'. Isso inclui arte para agentes, status e identificação visual.
paperclipai/paperclip
#13wireframe
Faz seu agente desenhar telas de forma simples. É útil para planejar o visual de aplicativos antes de criá-los.
paperclipai/paperclip
#14design-critique
Faz seu agente analisar e dar sugestões sobre o design de produtos. Ele foca em como melhorar a experiência do usuário.
paperclipai/paperclip
#15contact-widget
Ajuda seu agente a criar um widget de chat flutuante. Ele é fácil de usar, com uma tela de boas-vindas e opções para contato.
nexu-io/open-design
#16critique
Faz seu agente analisar o design de um site. Ele avalia a aparência e a funcionalidade, dando sugestões para melhorar.
nexu-io/open-design
#17dashboard
Ajuda seu agente a criar um painel de controle. Ele mostra informações importantes e gráficos em um formato fácil de entender.
nexu-io/open-design
#18dating-web
Faz seu agente criar um painel para sites de namoro. Ele exibe informações sobre conexões e tendências de forma visual.
nexu-io/open-design
#19flowai-live-dashboard-template
Cria um painel para gerenciar equipes com abas de membros e atividades. Mostra gráficos e estatísticas importantes.
nexu-io/open-design
#20gamified-app
Faz seu agente prototipar um aplicativo mobile gamificado. Apresenta missões diárias, níveis e experiência (XP).
nexu-io/open-design
#21github-dashboard
Gera um painel com análises de repositórios no GitHub. Mostra estrelas, forks, contribuidores e atividades recentes.
nexu-io/open-design
#22html-ppt-taste-brutalist
Faz seu agente criar apresentações com um estilo visual específico. Ele usa um tema escuro, fontes monoespaçadas e cores de destaque para um visual técnico e retrô.
nexu-io/open-design
#23html-ppt-taste-editorial
Ajuda seu agente a criar apresentações com um estilo editorial minimalista e elegante. É útil para quem precisa de slides com visual limpo e profissional.
nexu-io/open-design
#24html-ppt-zhangzara-editorial-tri-tone
Ajuda seu agente a definir sistemas de design para revistas. Estabelece grades, paletas de cores e kits de layout para uma nova identidade visual.
nexu-io/open-design
#25mobile-app
Faz seu agente renderizar uma tela de aplicativo móvel dentro de uma moldura de iPhone. É útil para visualizar como um aplicativo se parece em um telefone. Ajuda a criar interfaces de usuário para aplicativos de celular.
nexu-io/open-design
#26mobile-onboarding
Ajuda seu agente a criar um fluxo de integração para aplicativos móveis. Ele mostra várias telas em sequência, como splash, proposta de valor e login. É útil para projetar a primeira experiência do usuário em um app.
nexu-io/open-design
#27open-design-landing
Faz seu agente criar um site de página única com um visual editorial e de colagem. É útil para apresentar uma marca ou produto de forma única e atraente. Cria um site visualmente impactante.
nexu-io/open-design
#28pricing-page
Ajuda seu agente a montar uma página de preços clara e informativa. Ele organiza planos, compara recursos e inclui perguntas frequentes para ajudar os usuários a escolher.
nexu-io/open-design
#29saas-landing
Faz seu agente criar uma página de destino de SaaS atraente. Ela inclui seções essenciais como herói, recursos, prova social, preços e um chamado para ação, seguindo o estilo visual.
nexu-io/open-design
#30social-media-dashboard
Faz seu agente gerar um painel de análise de mídia social. Ele exibe métricas chave, gráficos de crescimento e posts populares, ajudando criadores a entender seu desempenho.
nexu-io/open-design
#31social-media-matrix-tracker-template
Ajuda seu agente a criar um painel de rastreamento de métricas sociais. Ele oferece dados de várias plataformas, gráficos interativos e comparações, com temas claro e escuro.
nexu-io/open-design
#32trading-analysis-dashboard-template
Faz seu agente criar um painel de análise financeira avançado. Permite visualizar dados de mercado e simular operações. Ideal para quem precisa de um terminal de alta tecnologia para finanças.
nexu-io/open-design
#33tweaks
Permite ajustar o design de forma interativa. Seu agente pode criar controles para mudar cores, fontes e outros elementos em tempo real. Útil para explorar variações de um layout.
nexu-io/open-design
#34waitlist-page
Faz seu agente criar uma página simples de pré-lançamento. Coleta emails para capturar interesse antes do lançamento. Perfeito para novos produtos ou programas beta.
nexu-io/open-design
#35web-prototype-taste-brutalist
Cria um protótipo de site com estilo brutalista industrial. Usa um visual de jornal impresso com fontes fortes e cores de alerta. Ideal para um visual de design ousado e único.
nexu-io/open-design
#36web-prototype-taste-editorial
Faz seu agente gerar um protótipo de site com design editorial minimalista. Usa cores suaves, fontes serifadas e muito espaço em branco. Bom para um visual limpo e elegante.
nexu-io/open-design
#37web-prototype-taste-soft
Ajuda seu agente a criar um protótipo de site com visual suave e moderno. Usa cores claras, cartões com bordas arredondadas e animações delicadas. Ideal para uma experiência de usuário premium.
nexu-io/open-design
#38web-prototype
Faz seu agente criar um protótipo de site para desktop. Gera um arquivo HTML único com layouts variados. É a opção padrão para páginas de marketing, documentação ou SaaS.
nexu-io/open-design
#39wireframe-annotated
Cria wireframes com anotações detalhadas para especificar o design. Ajuda a comunicar requisitos de engenharia e UX de forma clara.
nexu-io/open-design
#40wireframe-greybox
Gera wireframes em estilo blueprint, focando na estrutura e layout. É útil para planejar a arquitetura visual antes de aplicar o design.
nexu-io/open-design
#41wireframe-mobile-flow
Desenha fluxos de usuário para aplicativos móveis, mostrando a navegação entre telas. Ajuda a visualizar a jornada do usuário e a interconectividade.
nexu-io/open-design
#42wireframe-sketch
Cria wireframes em estilo rascunho, como em um quadro branco. É útil para explorar ideias rapidamente e obter feedback inicial sobre o design.
nexu-io/open-design
#43critique-theater
Realiza uma revisão de qualidade de design em cinco dimensões. Ajuda a identificar e corrigir falhas em artefatos de design antes da entrega.
nexu-io/open-design
#44design-extract
Ajuda seu agente a extrair informações de design como cores e fontes de códigos ou imagens. Isso é útil para garantir que o design do seu projeto seja consistente.
nexu-io/open-design
#45direction-picker
Ajuda seu agente a decidir a direção visual do design automaticamente. Ele usa as regras do projeto para fazer isso sem perguntar.
nexu-io/open-design
#46figma-extract
Ajuda seu agente a pegar o design e os arquivos de um arquivo Figma. Ele organiza tudo no seu projeto para facilitar o uso.
nexu-io/open-design
#47token-map
Faz seu agente conectar informações de design com o sistema de design do projeto. Isso cria um padrão que o agente pode usar para gerar o design.
nexu-io/open-design
#48card-twitter
Faz seu agente criar cartões para o Twitter. É bom para compartilhar citações ou dados de forma visualmente atraente em posts.
nexu-io/open-design