Landing pages · Lojas · Dashboards · Portfólios
Skills de design frontend para Claude Code e Codex
Páginas completas e estilizadas que o seu agente preenche com o seu produto, as suas palavras e as suas cores, prontas para qualquer hospedagem estática.
Funciona emClaude CodeCodexCursorGemini CLIGitHub CopilotOpenCode
Destaque da semanaWeb
Criador de avatar 3D
Monte um personagem 3D fofo de pelúcia no navegador e salve como PNG transparente ou página 3D.
Ou instale em um agente de programação
Instalação manual
mkdir -p ~/.claude/skills && cd ~/.claude/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip/popnow-3d-avatar-maker
mkdir -p ~/.agents/skills && cd ~/.agents/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip$popnow-3d-avatar-maker
mkdir -p ~/.cursor/skills && cd ~/.cursor/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip/popnow-3d-avatar-maker
mkdir -p ~/.gemini/skills && cd ~/.gemini/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zippopnow-3d-avatar-maker
mkdir -p ~/.copilot/skills && cd ~/.copilot/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip/popnow-3d-avatar-maker
mkdir -p ~/.config/opencode/skills && cd ~/.config/opencode/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zippopnow-3d-avatar-maker
Requer uma chave de API do PopNow em POPNOW_API_KEY · Obter uma chave de API
O que você quer criar?
Criador de avatar 3D
+3Monte um personagem 3D fofo de pelúcia no navegador e salve como PNG transparente ou página 3D.
Calendário heatmap
+3Um ano de atividade diária em uma grade de calendário sombreada, com sequências, totais e navegação por teclado.
Landing page de SaaS com IA
+3Papel areia, trilhos finos e um quadro kanban ao vivo em que um assistente planeja tarefas.
Seção hero animada
+3Um hero de landing page com uma palavra do título que gira suavemente, dois botões e um quadro largo de imagem.
Site de agência com hero em shader
+3Hero de shader laranja ao vivo atrás de uma frase fixada, navegação em pílula e uma grade de cases.
Landing page SaaS escura
+3Um site de marketing escuro e cheio de movimento para um produto de software, entregue em um único arquivo HTML.
Site de portfólio de designer
+3Seis cartões inclinados em volta de um título sobre cinza calmo, um retrato em vermelho e cases editoriais.
Site de portfólio para desenvolvedor
+3Um site pessoal escuro para engenheiros, com cases, artigos, palestras, currículo e formulário de contato.
Site editorial de SaaS
+3Hero dividido em azul-marinho, título serifado ao lado de uma foto documental e um destaque azul-cobalto.
Modelo de site glassmorphism
+3Pílulas de vidro fosco sobre película quase preta, título serifado enorme e captura de e-mail.
Site de produto de hardware
+3Nomes de modelo enormes e finos sobre fotos prateadas, cartões de especificação e linha em escala.
Diagrama de arquitetura interativo
+3Um diagrama de sistema offline e clicável, feito a partir de um modelo JSON verificado, com a evidência por trás de cada caixa.
Hero interativo com grade
+3Uma grade escura de fios finos que se curva em direção ao cursor e lança um anel luminoso a cada clique.
Explorador de grafo de conhecimento
+3Transforme anotações de projeto em um grafo offline e pesquisável, em que cada afirmação leva à linha de origem.
Modelo de dashboard de KPIs
+3Quatro cartões de KPI com variação, um gráfico de linha, detalhamento e barras de meta em papel quente.
Landing page a partir de mockups com IA
+3Veja três páginas completas antes, escolha uma, e o seu agente a constrói como código limpo e responsivo.
Template de site de revista
+3Um site de revista com qualidade de impresso, com artigos, temas, uma pequena loja e assinaturas, em um arquivo HTML.
Hero com animação de partículas
+3Texto em papel quente ao lado de uma esfera girando de pontos em tinta e azul-petróleo, que muda a cada ideia.
Site de marca pessoal
+3Um retrato esfumado sobre papel quente, sob um colchete fino, com afirmações claras e fortes de cada lado.
Página de lançamento de produto cinematográfica
+3Página quase preta com luz de cinema: título em serifa, cena noturna em letterbox e formulário de reserva.
Template de painel administrativo
+3Um painel de back-office funcional com gráficos, tabelas, kanban e calendário, em um único arquivo HTML offline.
Template de landing page SaaS
+3Um site de marketing claro e tranquilo para um produto de software, com console de produto funcional, preços e cadastro.
Site de portfólio estilo scrapbook
+3Um currículo online de várias páginas feito de objetos de papel, com cases e um currículo para imprimir.
Template de site de loja de tênis
+3Uma loja completa de calçados ou roupas, com catálogo, páginas de produto, sacola e checkout de demonstração em um arquivo HTML.
Landing page de automação de fluxos
+3Página grafite com título pequeno e um grafo de nós ao vivo que roda, tenta de novo e mostra logs.
Um design system de verdade
Espaçamento, escala tipográfica e componentes vêm com a skill, para as páginas parecerem prontas, não genéricas.
Seu conteúdo, não um template
O agente reescreve cada seção para o seu produto e remove o que não se aplica.
Imagens quando precisar
Gere imagens de destaque e fotos de produto com o PopNow, ou mantenha os placeholders limpos em CSS e SVG.
Como funcionam as skills para agentes
Conecte ou instale uma vez
Conecte a PopNow ao Claude ou ao ChatGPT, ou instale a skill no seu agente de programação.
Peça com suas palavras
Chame a skill e descreva o trabalho. Ela segue o próprio roteiro, as regras de layout e as verificações.
Você aprova cada gasto
Quando uma etapa precisa de imagens, vídeo ou som com IA, a skill informa o preço em créditos do PopNow e espera o seu OK.
Perguntas
O que é uma skill para agentes?
Uma skill para agentes é uma pasta com um manual SKILL.md, além de modelos, scripts e referências, que o agente de IA segue quando a tarefa combina. Claude Code, Codex, Cursor e outros agentes a carregam automaticamente, então o resultado segue um design system testado em vez de um prompt avulso.
Qual a diferença entre skills para agentes e MCP?
O MCP conecta um agente a ferramentas e dados, como os modelos de imagem e vídeo da PopNow. Uma skill é um manual que diz ao agente como fazer bem um trabalho inteiro: regras de layout, etapas e verificações. Os dois funcionam juntos: se você conectar a PopNow por MCP, seu assistente consegue encontrar essas skills e usá-las, e as skills chamam a PopNow para imagens e som.
As skills são gratuitas?
Sim, cada skill é gratuita com uma conta PopNow, seja no Claude ou no ChatGPT pela PopNow, seja instalada em um agente de programação. Só as imagens, vídeos, músicas ou vozes que uma skill cria usam créditos da PopNow, e cada um é precificado e aprovado antes de rodar.
Posso usar essas skills no Claude ou no ChatGPT?
Sim. Conecte a PopNow ao Claude, ao ChatGPT ou a outro app compatível com MCP e diga o que você quer criar. Seu assistente mostra estilos que combinam, usa o que você escolher e confirma o preço com você antes de gerar qualquer coisa. Skills que criam arquivos, como apresentações, sites e vídeos em HTML, funcionam melhor em um agente de programação como o Claude Code.
Quais agentes são compatíveis?
Qualquer agente que leia pastas SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot e OpenCode. A skill é a mesma em todos; só muda a pasta de instalação.
Qual a diferença para as skills do próprio PopNow?
As skills da página principal de Skills rodam dentro do PopNow, com Poppie. As skills para agentes rodam no seu próprio agente de programação, no seu computador, o que combina com arquivos que você quer continuar editando, como apresentações, sites e vídeos em HTML.
Posso usar os resultados comercialmente?
Sim. O que você cria é seu, inclusive em trabalhos para clientes. O pacote da skill em si é para uso próprio e não deve ser revendido nem redistribuído.
Qual ferramenta de IA cria vídeos de lançamento de produto?
A PopNow cria. Conecte-a ao Claude ou ao ChatGPT, ou instale uma skill de vídeo de lançamento em um agente de programação, e escolha um entre mais de 20 estilos gratuitos de vídeo de lançamento. O agente renderiza o MP4 a partir do seu produto real e adiciona música, voz e efeitos sonoros da PopNow depois que você aprova o preço; veja Como fazer um vídeo de lançamento de produto com IA.
Qual é a melhor forma de criar vídeos, imagens e apresentações com um agente de IA?
Dê ao agente uma skill para a tarefa e um lugar para criar a mídia: as skills para agentes da PopNow são escritas para a PopNow, então os layouts, prompts e escolhas de modelo acertam o visual já na primeira tentativa, e as imagens, clipes, músicas e vozes vêm de uma única conta PopNow, com cada execução precificada antes.