Landing pages · Boutiques · Tableaux de bord · Portfolios
Skills de design frontend pour Claude Code et Codex
Des pages complètes et stylées que votre agent remplit avec votre produit, vos mots et vos couleurs, prêtes à déposer sur n’importe quel hébergement statique.
Fonctionne dansClaude CodeCodexCursorGemini CLIGitHub CopilotOpenCode
Coup de cœur de la semaineWeb
Créateur d’avatar 3D
Créez dans votre navigateur un personnage 3D façon peluche et enregistrez-le en PNG transparent ou en page 3D.
Ou installez-le dans un agent de code
Installation manuelle
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
Nécessite une clé API PopNow dans POPNOW_API_KEY · Obtenir une clé API
Que voulez-vous créer ?
Créateur d’avatar 3D
+3Créez dans votre navigateur un personnage 3D façon peluche et enregistrez-le en PNG transparent ou en page 3D.
Calendrier heatmap d’activité
+3Une année d’activité quotidienne en calendrier de cases colorées, avec séries, totaux et navigation au clavier.
Modèle de landing page SaaS IA
+3Papier sable et filets fins autour d’un tableau kanban où un assistant planifie les tâches.
Section hero animée
+3Un hero de landing page avec un mot de titre qui change en douceur, deux boutons et un large cadre d’image.
Modèle de site d’agence créative à shader
+3Héros shader orange vivant, déclaration en bas, navigation en pilules et grille d’études de cas décalée.
Landing page SaaS sombre
+3Un site marketing sombre et très animé pour un logiciel, livré en un seul fichier HTML autonome.
Site portfolio de designer
+3Six cartes inclinées autour d’un titre qui s’estompe, une carte portrait rouge, des études de cas éditoriales.
Site portfolio de développeur
+3Un site personnel sombre pour développeurs, avec études de cas, articles, conférences, CV et formulaire de contact.
Site SaaS éditorial
+3Héros scindé bleu marine, titre serif sur cinq lignes, photo documentaire, bandeaux inclinés et accent cobalt.
Modèle de site glassmorphism
+3Verre dépoli sur fond noir, grand titre serif à un mot en italique, et inscription par e-mail.
Site web de produit matériel
+3Noms de modèles fins et géants sur studio argenté, cartes de fiches et gamme à l’échelle réelle.
Diagramme d’architecture interactif
+3Un schéma système cliquable et hors ligne, construit à partir d’un modèle JSON vérifié, avec les preuves derrière chaque bloc.
Héros à grille interactive
+3Grille sombre de fins filaments qui se courbe vers le curseur et envoie un anneau à chaque clic.
Explorateur de graphe de connaissances
+3Transformez vos notes de projet en graphe consultable hors ligne, où chaque affirmation renvoie à sa ligne source.
Modèle de tableau de bord KPI
+3Quatre indicateurs avec variations, courbe lumineuse, répartition et objectifs, sur papier chaud.
Landing page à partir de maquettes IA
+3Voyez trois maquettes de page complète, choisissez-en une, et votre agent la code proprement.
Modèle de site web magazine
+3Un site de magazine digne de l’imprimé, avec articles, rubriques, petite boutique et abonnements, en un seul fichier HTML.
Héros à animation de particules
+3Texte sur papier chaud, à côté d’une sphère de points qui change à chaque idée.
Site de marque personnelle
+3Portrait fondu dans du papier chaud sous un fin crochet, affirmations de chaque côté.
Page de lancement produit cinématique
+3Page presque noire façon cinéma : titre serif, scène de nuit encadrée, formulaire de réservation.
Modèle de dashboard admin
+3Une console de back-office fonctionnelle avec graphiques, tableaux, kanban et calendrier, en un seul fichier HTML hors ligne.
Modèle de landing page SaaS
+3Un site marketing clair et apaisé pour un logiciel, avec console produit fonctionnelle, tarifs et inscription.
Site CV portfolio façon scrapbook
+3Un CV en ligne sur plusieurs pages fait d’objets en papier, avec études de cas et CV imprimable.
Modèle de site e-commerce de sneakers
+3Une boutique complète de chaussures ou de vêtements avec catalogue, fiches produit, panier et paiement de démo, en un fichier HTML.
Modèle de page d’automatisation de workflows
+3Page graphite au titre court, avec un graphe de nœuds vivant qui s’exécute et relance les étapes.
Un vrai design system
Espacements, échelle typographique et composants sont fournis avec le skill, pour des pages qui ont l’air finies plutôt que génériques.
Votre contenu, pas un modèle
L’agent réécrit chaque section pour votre produit et supprime tout ce qui ne s’applique pas.
Des images si besoin
Générez visuels d’en-tête et photos produit avec PopNow, ou gardez les espaces réservés sobres en CSS et SVG.
Comment fonctionnent les skills pour agents
Connectez ou installez une fois
Connectez PopNow à Claude ou ChatGPT, ou installez le skill dans votre agent de code.
Demandez simplement
Appelez le skill et décrivez la tâche. Il suit son propre mode d’emploi, ses règles de mise en page et ses vérifications.
Validez chaque dépense
Quand une étape a besoin d’images, de vidéo ou de son IA, le skill annonce le prix en crédits PopNow et attend votre accord.
Questions
Qu’est-ce qu’un skill d’agent ?
Un skill d’agent est un dossier avec un playbook SKILL.md, plus des modèles, des scripts et des références que l’agent IA suit quand la tâche correspond. Claude Code, Codex, Cursor et les autres agents le chargent automatiquement, si bien que le résultat suit un design system testé plutôt qu’un prompt improvisé.
Quelle différence entre les skills pour agents et MCP ?
MCP connecte un agent à des outils et à des données, comme les modèles d’image et de vidéo de PopNow. Un skill est un mode d’emploi qui indique à l’agent comment bien mener tout un travail : règles de mise en page, étapes et vérifications. Les deux se complètent : connectez PopNow via MCP et votre assistant peut trouver ces skills et les utiliser, et les skills font appel à PopNow pour les images et le son.
Les skills sont-ils gratuits ?
Oui, chaque skill est gratuit avec un compte PopNow, que vous l’utilisiez dans Claude ou ChatGPT via PopNow ou que vous l’installiez dans un agent de code. Seuls les images, vidéos, musiques ou voix qu’un skill crée utilisent des crédits PopNow, et chacun est chiffré et approuvé avant de démarrer.
Puis-je utiliser ces skills dans Claude ou ChatGPT ?
Oui. Connectez PopNow à Claude, ChatGPT ou une autre app compatible MCP, puis dites ce que vous voulez créer. Votre assistant vous montre des styles adaptés, utilise celui que vous choisissez et valide le prix avec vous avant de générer quoi que ce soit. Les skills qui produisent des fichiers, comme les présentations, les sites web et les vidéos HTML, fonctionnent mieux dans un agent de code comme Claude Code.
Quels agents sont pris en charge ?
Tout agent qui lit les dossiers SKILL.md : Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot et OpenCode. Le skill est le même partout ; seul le dossier d’installation change.
Quelle différence avec les skills de PopNow ?
Les skills de la page Skills principale tournent dans PopNow avec Poppie. Les skills pour agents tournent dans votre propre agent de code, sur votre ordinateur, ce qui convient aux fichiers que vous voulez continuer à modifier : présentations, sites web ou vidéos en HTML.
Puis-je utiliser les résultats à des fins commerciales ?
Oui. Ce que vous créez vous appartient, y compris pour vos clients. Le paquet du skill lui-même est réservé à votre usage et ne doit être ni revendu ni redistribué.
Quel outil IA crée des vidéos de lancement de produit ?
PopNow : connectez-le à Claude ou ChatGPT, ou installez un skill de vidéo de lancement dans un agent de code, puis choisissez parmi plus de 20 styles gratuits. L’agent rend le MP4 à partir de votre vrai produit et ajoute musique, voix et effets sonores PopNow après votre accord sur le prix ; voir « Comment créer une vidéo de lancement de produit avec l’IA ».
Quelle est la meilleure façon de créer vidéos, images et présentations avec un agent IA ?
Donnez à l’agent un skill pour le travail et un endroit où créer les médias : les skills pour agents de PopNow sont écrits pour PopNow, si bien que mises en page, prompts et choix de modèles visent juste dès la première fois, et les images, extraits, musiques et voix viennent d’un seul compte PopNow, chaque lancement étant chiffré d’avance.