Communitygithub.com

Usine de Sites Web 3D

Construisez un site web 3D à partir d'un dossier de contenu et d'actifs, ou transformez un site existant en site 3D. Un pipeline à cinq rôles (éclaireur, sculpteur, animateur, constructeur, critique) crée des objets 3D réels en code (three.js, le logo ou les modèles de l'utilisateur, Spline), des animations graphiques de style studio, et les intègre dans le site avec les interactions demandées par l'utilisateur. À utiliser lorsque l'utilisateur dit /3d-website-factory, « site web 3D », « usine de sites web », « configure l'usine de sites web », « construis-moi ça en site web », « rends mon site web 3D », « ajoute de la 3D à mon site », « rends mon logo 3D », « fais-le réagir au curseur », « ajoute une scène Spline », ou « ajoute un film de défilement ».

Qu'est-ce que Usine de Sites Web 3D ?

Cette compétence d'agent IA implémente un pipeline complet de création de sites web 3D. Elle permet soit de générer un site web 3D à partir d'un dossier de contenu et d'actifs (texte, logo, images, modèles 3D) dans un répertoire `content/`, soit de transformer un site web existant (HTML, React, Next, Vue, Svelte, Astro, WordPress) en version 3D sans en modifier le design ou le contenu. Le pipeline se compose de cinq rôles spécialisés : un éclaireur planifie l'architecture et la charte graphique, un sculpteur crée les objets 3D (via three.js ou Spline), un animateur conçoit les animations et chorégraphies de défilement, un constructeur assemble le site et intègre les interactions, et un critique valide la qualité en dix points. La compétence est conçue pour fonctionner avec des agents capables de lancer des sous-agents (comme Claude Code, Codex, Cursor) ou de les exécuter séquentiellement. Elle prend en charge la génération de scènes Spline via un connecteur MCP dédié. Les coûts pour les contenus payants (images, vidéos IA) doivent être validés par l'utilisateur, et le goût est strictement encadré par une liste de références. Le résultat final est un site web statique prêt à être prévisualisé localement via un serveur HTTP Python, et peut être déployé sur Hostinger, Netlify, Vercel ou GitHub Pages à la demande de l'utilisateur. Chaque opération (construction, modification, mise à niveau) suit un processus structuré avec des points de décision utilisateur, et les modifications sont effectuées de manière minimaliste pour préserver l'intégrité du site existant.

Compatible avec✓Claude Code✓Codex CLI✓Cursor
npx skills add https://github.com/bibeksarkar001/3d-website-factory/tree/HEAD/skills/3d-website-factory
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait Usine de Sites Web 3D ?

S ci-dessous est le dossier contenant ce fichier. Prérequis : Chrome, Python 3, Node 22+. Le film nécessite également ffmpeg.

Le pipeline

           ┌──> Sculpteur (objets 3D) ──┐
Éclaireur ─┤                            ├──> Constructeur (assemblage) ──> Critique ──┐
(plan)     └──> Animateur (animation) ──┘         ^                                    │
   ^ l'utilisateur approuve le plan              └──── correctifs, max 3 tours ──────────┘
RôleDescriptionProduit
Éclaireurroles/scout.mdLe plan : faits, charte graphique à partir d'une référence de qualité, écrans, liste d'objets 3D
Sculpteurroles/sculptor.mdUn module three.js par objet 3D (ou une scène Spline)
Animateurroles/animator.mdBoucles explicatives, chorégraphie de défilement, apparitions
Constructeurroles/builder.mdLe site web, tout assemblé, les interactions de l'utilisateur câblées
Critiqueroles/critic.mdRéussite ou échec sur dix questions fixes, avec correctifs

Les rôles communiquent uniquement via des fichiers dans l'espace de travail : le plan dans _work/<slug>/, le code dans sites/<slug>/. Ainsi, n'importe quel rôle peut être refait seul (« rends la 3D plus brillante » est une tâche de sculpteur, puis constructeur et critique).

Exécution des rôles. Si votre outil peut lancer des sous-agents (Claude Code, Codex, Cursor et autres), lancez-en un par rôle avec cette invite, et exécutez le sculpteur et l'animateur en même temps :

Vous êtes le <rôle> de l'Usine de Sites Web 3D. Lisez <S>/roles/<role>.md et <S>/references/taste.md, puis effectuez votre rôle pour le site <slug> dans l'espace de travail <chemin absolu>. Le dossier de compétence est <S>. Signalez ce que vous avez écrit et tout ce que vous n'avez pas pu faire.

Sinon, jouez les rôles vous-même dans l'ordre, en lisant chaque description juste avant de commencer. Dans les deux cas, vous êtes le chef d'orchestre : vous parlez à l'utilisateur, vérifiez chaque transmission, et vous arrêtez aux portes.

Portes où l'utilisateur décide : l'entretien de l'éclaireur et son résumé (référence, apparence, concept du héros, écrans, objets avec coûts), avant toute dépense, et à la fin. Tout le reste s'exécute sans demander.

Progression. Une construction peut prendre une heure. Avant chaque rôle, dites à l'utilisateur en une ligne ce qu'il fait (« Sculpteur : construction du logo en argile, gratuit »), et après, ce qu'il a produit.

Tâches

Ils disentTâche
« configure », première utilisation, ou aucun espace de travail n'existeA. Configuration
« construis-moi ça », « construis le site pour X »B. Construction
« rends mon site web 3D », « ajoute de la 3D à ce site »C. Mise à niveau d'un site existant
« fais suivre le robot au curseur », « change la 3D », toute modification d'un site construitD. Modification
« ajoute un film », « ajoute une vidéo »E. Film (references/film.md)

A. Configuration

sh "$S/scripts/init.sh"        # crée ./website-factory, n'écrase jamais

Dites à l'utilisateur en termes simples : les mots vont dans content/, le logo dans assets/logo/ (le SVG est le meilleur, il peut devenir 3D), les images dans assets/images/, les modèles 3D dans assets/models/, les sites qu'il aime dans assets/style/. Puis dites « construis-moi ça en site web ». Ne construisez pas tant qu'il n'y a pas de contenu ou qu'il ne demande pas une démo.

B. Construction

Un site par fichier dans content/ (ignorez les noms commençant par _, et les fichiers qui ont déjà un dossier dans sites/ sauf si on vous demande de reconstruire). slug = le nom du fichier en kebab-case. Exécutez le pipeline complet. À la fin, écrivez sites/<slug>/REPORT.md et dites à l'utilisateur : ce que sont chaque objet 3D et animation, chaque choix que vous avez fait qu'il a laissé ouvert, les modifications de texte (copy.md), les crédits dépensés, le verdict du critique, ce qui reste ouvert, et comment prévisualiser : python3 -m http.server 8080 --directory sites/<slug>. Puis proposez de publier (voir Publication).

C. Mise à niveau d'un site existant

Exécutez ceci dans le dossier du site web de l'utilisateur. Le site reste le sien : même design, mêmes mots.

  1. L'éclaireur scanne le code et écrit le plan. Proposez : quels objets vont où, ce qui bouge, quels fichiers changent. Attendez un oui.
  2. S'il s'agit d'un dépôt git, créez une branche. Modifiez le moins de fichiers possible. Pas de restylage, changement de mots, réorganisation ou mise à jour de dépendances.
  3. Le sculpteur et l'animateur créent leurs parties. Le constructeur les ajoute de la manière native du site :
    • HTML simple : comme dans roles/builder.md.
    • React, Next, Vue, Svelte, Astro : un composant côté client qui rend la boîte et importe le module d'objet après le montage. Placez stage.js et les modules dans le dossier statique ou source utilisé par le framework. Si le projet utilise déjà three.js ou react-three-fiber, utilisez-les plutôt que la carte d'importation.
    • WordPress : un thème enfant ou un bloc HTML personnalisé. Jamais un thème parent ou un site en production.
  4. Porte : les propres builds et tests du site passent toujours. Avec son serveur de développement en cours d'exécution, node "$S/scripts/probe.mjs" <url> _work/avant avant le changement et _work/apres après (gardez _work/ hors de git). Le critique compare. check.py est uniquement pour les pages de la tâche B.
  5. Montrez la différence et comment prévisualiser. Ne poussez ni ne déployez jamais sauf si l'utilisateur le demande (voir Publication).

D. Modification

Trouvez le rôle propriétaire du changement, refaites uniquement la partie de ce rôle, puis la porte du constructeur et le critique.

Scènes Spline

Une scène Spline est une source de 3D parmi d'autres (voir roles/sculptor.md).

  • Scène communautaire (gratuite, sans compte) : sh "$S/scripts/browser.sh" embed <url-communautaire> affiche l'URL intégrable. Elle charge tout l'éditeur Spline, environ 15 secondes et un écran noir lors de la première visite. Bon pour une démo. Pour un vrai site, l'utilisateur l'ouvre dans un compte Spline gratuit, la remixe, puis Export > URL publique, et vous donne le lien my.spline.design/..., qui se charge en une ou deux secondes.
  • Sur la page : <div class="f-3d" data-spline="URL" data-title="Ce que c'est" style="height:100vh"></div>. factory.js la charge paresseusement, l'estompe et la surdimensionne pour cacher les boutons du visualiseur.
  • Créditez l'auteur de la scène dans le pied de page uniquement si la licence de la scène le demande.
  • La page doit toujours défiler avec le curseur dessus (probe.mjs le teste). Si ce n'est pas le cas, ajoutez data-shield.
  • Le connecteur Spline (claude mcp add --transport http spline https://mcp.spline.design/mcp) peut construire de nouvelles scènes. Il a une limite d'appels quotidienne : utilisez-le uniquement lorsque l'utilisateur le demande, et dites combien d'appels vous avez utilisés.

Actifs et argent

D'où proviennent les 3D, images et films, quels fournisseurs utiliser (connecteur ou CLI Higgsfield, autres générateurs connectés, ou la voie manuelle gratuite), et les règles de génération payante : references/assets.md.

Publication

Uniquement lorsque l'utilisateur le demande. Utilisez ce qui est connecté : un connecteur d'hébergement (Hostinger, Netlify, Vercel et autres proposent des outils de déploiement), ou la CLI GitHub pour GitHub Pages, ou dites à l'utilisateur quel dossier télécharger. Confirmez la cible (domaine ou dépôt) avant le premier déploiement. Après cela, redéployez les modifications uniquement lorsqu'on vous le demande.

Règles qui s'appliquent toujours

  • Argent. La 3D construite en code, les scènes communautaires Spline et l'animation sont gratuites. Tout ce qui est payant (images IA, vidéo ou 3D, un plan Spline) nécessite le oui de l'utilisateur avec un coût indiqué dans cette conversation, à chaque fois. Pilotez un écran d'abord.
  • Vérité. Uniquement les faits de l'utilisateur. Jamais de chiffres, prix, clients, citations, récompenses ou logos inventés.
  • Goût. Rien de la liste de mauvais goût dans references/taste.md.
  • Accessibilité. Le mouvement réduit obtient une page fixe finie. Les images ont un texte alternatif. Le texte a un contraste lisible.
  • Travail des autres. Ne copiez jamais les mots, images ou code d'un site de référence. Conservez tout crédit requis par la licence d'un actif ; n'ajoutez aucun autre crédit.
  • Nettoyage. Arrêtez chaque serveur et navigateur que vous avez démarré.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community