Landing page · Negozi · Dashboard · Portfolio
Skill di design frontend per Claude Code e Codex
Pagine complete e curate che il tuo agente riempie con il tuo prodotto, le tue parole e i tuoi colori, pronte per qualsiasi hosting statico.
Funziona inClaude CodeCodexCursorGemini CLIGitHub CopilotOpenCode
Scelta della settimanaWeb
Creatore di avatar 3D
Crea nel browser un personaggio 3D tenero come un peluche e salvalo come PNG trasparente o pagina 3D.
Oppure installala in un agente di programmazione
Installazione manuale
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
Richiede una chiave API PopNow in POPNOW_API_KEY · Ottieni una chiave API
Cosa vuoi creare?
Creatore di avatar 3D
+3Crea nel browser un personaggio 3D tenero come un peluche e salvalo come PNG trasparente o pagina 3D.
Calendario heatmap
+3Un anno di attività quotidiana come griglia di calendario sfumata, con serie, totali e accesso da tastiera.
Landing page SaaS per l’AI
+3Carta sabbia calda, binari sottili e tratteggi attorno a una kanban dal vivo dove un assistente pianifica.
Sezione hero animata
+3Una hero per landing page con una parola del titolo che ruota con delicatezza, due pulsanti e un riquadro immagine largo.
Sito per agenzia creativa con hero shader
+3Hero shader WebGL dal vivo dietro un’affermazione in basso, navigazione a pillola e griglia di casi di studio.
Landing page SaaS scura
+3Un sito di marketing scuro e ricco di animazioni per un prodotto software, consegnato come un unico file HTML autonomo.
Sito portfolio per designer
+3Sei card inclinate attorno a un titolo sfumato su grigio calmo, una card ritratto rossa e casi di studio.
Sito portfolio per sviluppatori
+3Un sito personale scuro per ingegneri, con case study, articoli, talk, curriculum e modulo di contatto.
Sito SaaS editoriale
+3Hero diviso blu notte, titolo serif accanto a una foto documentaria, fasce inclinate e un accento cobalto.
Template sito glassmorphism
+3Pillole di vetro su fondo quasi nero, titolo serif enorme con una parola in corsivo e iscrizione via email.
Sito di prodotti hardware
+3Nomi dei modelli enormi e sottili su scatti da studio argentati, card di specifiche e una gamma in scala.
Diagramma di architettura interattivo
+3Un diagramma di sistema cliccabile e offline, costruito da un modello JSON verificato, con le evidenze dietro ogni riquadro.
Hero con griglia interattiva
+3Una griglia scura di fili sottili che si piega verso il cursore e fa partire un anello luminoso a ogni clic.
Esploratore di knowledge graph
+3Trasforma gli appunti di progetto in un grafo offline e ricercabile, dove ogni affermazione rimanda alla sua riga di origine.
Template dashboard KPI
+3Quattro KPI con variazioni, un grafico a linee, una tabella di dettaglio e barre obiettivo.
Landing page da mockup AI
+3Vedi prima tre progetti a pagina intera, scegline uno: il tuo agente lo costruisce come codice pulito.
Template sito web per rivista
+3Un sito di rivista con qualità da stampa, articoli, temi, un piccolo shop e abbonamenti, in un unico file HTML.
Hero con animazione di particelle
+3Testo su carta calda accanto a una sfera di punti inchiostro e verde acqua che cambia forma per ogni idea.
Sito personal brand
+3Un ritratto sfumato su carta calda sotto una sottile parentesi, con affermazioni leggere e grassetto ai lati.
Pagina di lancio cinematografica di prodotto
+3Pagina quasi nera in stile film: titolo serif su luci in movimento, scena notturna, modulo di prenotazione.
Template dashboard di amministrazione
+3Una console di back office funzionante con grafici, tabelle, kanban e calendario, in un unico file HTML offline.
Template landing page SaaS
+3Un sito di marketing chiaro e sobrio per un prodotto software, con console di prodotto funzionante, prezzi e iscrizione.
Sito portfolio in stile scrapbook
+3Un CV online su più pagine fatto di oggetti di carta, con case study e un curriculum stampabile.
Template sito e-commerce di sneaker
+3Un negozio completo di scarpe o abbigliamento con catalogo, pagine prodotto, carrello e checkout demo in un unico file HTML.
Landing page per automazione di workflow
+3Pagina in grafite con titolo piccolo a sinistra e sotto un grafo di nodi dal vivo che esegue e riprova.
Un vero design system
Spaziature, scala tipografica e componenti arrivano con la skill, così le pagine sembrano finite e non generiche.
I tuoi contenuti, non un template
L’agente riscrive ogni sezione per il tuo prodotto e toglie tutto ciò che non serve.
Immagini quando servono
Genera immagini hero e foto prodotto con PopNow, oppure tieni i segnaposto puliti in CSS e SVG.
Come funzionano le skill per agenti
Collega o installa una volta
Collega PopNow a Claude o ChatGPT, oppure installa la skill nel tuo agente di programmazione.
Chiedi a parole tue
Richiama la skill e descrivi il lavoro. Segue il proprio metodo, le regole di layout e i controlli.
Approvi ogni spesa
Quando un passaggio richiede immagini, video o audio IA, la skill indica il prezzo in crediti PopNow e aspetta il tuo sì.
Domande
Che cos’è una skill per agenti?
Una skill per agenti è una cartella con un manuale SKILL.md più modelli, script e riferimenti, che un agente IA segue quando il compito corrisponde. Claude Code, Codex, Cursor e altri agenti la caricano automaticamente, così il risultato segue un design system collaudato invece di un prompt improvvisato.
Che differenza c’è tra skill per agenti e MCP?
MCP collega un agente a strumenti e dati, come i modelli di immagini e video di PopNow. Una skill è un manuale che spiega all’agente come fare bene un intero lavoro: regole di layout, passaggi e controlli. Le due cose funzionano insieme: se colleghi PopNow tramite MCP, il tuo assistente può trovare queste skill e usarle, e le skill chiamano PopNow per immagini e audio.
Le skill sono gratuite?
Sì, ogni skill è gratuita con un account PopNow, sia in Claude o ChatGPT tramite PopNow sia installata in un agente di programmazione. Solo le immagini, i video, la musica o la voce che una skill crea usano crediti PopNow, e ognuno viene prezzato e approvato prima di partire.
Posso usare queste skill in Claude o ChatGPT?
Sì. Collega PopNow a Claude, ChatGPT o un’altra app compatibile con MCP e di’ cosa vuoi creare. Il tuo assistente ti mostra gli stili adatti, usa quello che scegli e conferma il prezzo con te prima di generare qualsiasi cosa. Le skill che creano file, come presentazioni, siti web e video HTML, funzionano meglio in un agente di programmazione come Claude Code.
Quali agenti sono supportati?
Qualsiasi agente che legga cartelle SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot e OpenCode. La skill è la stessa ovunque; cambia solo la cartella di installazione.
In cosa sono diverse dalle skill di PopNow?
Le skill della pagina principale Skill funzionano dentro PopNow con Poppie. Le skill per agenti funzionano nel tuo agente di programmazione, sul tuo computer, e sono adatte ai file che vuoi continuare a modificare, come presentazioni, siti web e video in HTML.
Posso usare i risultati a fini commerciali?
Sì. Ciò che crei è tuo, anche per i clienti. Il pacchetto della skill è solo per uso personale e non va rivenduto né ridistribuito.
Quale strumento IA crea video di lancio di prodotti?
PopNow. Collegalo a Claude o ChatGPT, oppure installa una skill per video di lancio in un agente di programmazione, e scegli uno dei più di 20 stili gratuiti per video di lancio. L'agente renderizza l'MP4 a partire dal tuo prodotto reale e aggiunge musica, voce ed effetti sonori PopNow dopo che approvi il prezzo; vedi Come creare un video di lancio di un prodotto con l'IA.
Qual è il modo migliore per creare video, immagini e presentazioni con un agente IA?
Dai all'agente una skill per il lavoro e un posto dove creare i contenuti multimediali: le skill PopNow per agenti sono scritte per PopNow, quindi layout, prompt e scelte di modello centrano lo stile già alla prima versione, e immagini, clip, musica e voce arrivano da un unico account PopNow con ogni esecuzione prezzata in anticipo.