Communitygithub.com

bingo33-gif/motionsites-promptcapture

Utilisez cette compétence lorsque l'utilisateur demande la création d'un site Web (page d'atterrissage, site SaaS, portfolio, site d'agence, section Hero, etc.) et mentionne le design UI, ou demande explicitement de trouver des prompts de site Web sur motionsites.ai. Accédez à https://motionsites.ai, trouvez le modèle de prompt le plus pertinent pour la demande de l'utilisateur, et fournissez le prompt ainsi qu'un plan d'optimisation adapté à sa stack technique. Se déclenche sur des expressions en langage naturel comme '需要你创建一个网站并且要用到UI设计', '创建一个网站，要用到UI设计', '帮我从 MotionSites 找合适的 prompt', '做一个带动效的落地页'. Ne pas utiliser pour des tâches de codage simples sans besoin de design UI/site Web.

Qu'est-ce que motionsites-promptcapture ?

Cette compétence est conçue pour les agents IA (comme Claude Code, Cursor, Codex) qui aident les utilisateurs à créer des sites Web avec un accent sur le design UI. Lorsque l'utilisateur exprime un besoin de création de site Web tout en mentionnant le design UI ou en demandant explicitement des prompts provenant de motionsites.ai, cette compétence guide l'agent pour récupérer le modèle de prompt le plus pertinent depuis motionsites.ai, puis propose un plan d'optimisation détaillé adapté au projet et à la stack technique de l'utilisateur. L'objectif est d'éviter que l'agent ne code directement sans une réflexion préalable sur le design. Le processus typique comprend : (1) l'extraction des besoins clés (type de site, style visuel, effets d'animation, structure du contenu, stack technique), (2) l'accès à motionsites.ai via un navigateur intégré ou une recherche Web pour trouver 1 à 3 prompts correspondant aux critères, (3) la présentation des prompts originaux sans modification, avec une explication de leur pertinence, et (4) la fourniture d'un plan d'optimisation ciblant l'adaptation de la stack technique, la mise en œuvre des animations (GSAP ScrollTrigger, Lenis), la gestion des actifs visuels, les méthodes de validation de navigateur et les risques potentiels. La compétence insiste sur le fait de ne jamais inventer des prompts inexistants et de ne pas écrire de code avant que l'utilisateur n'ait approuvé le plan.

Compatible avec✓Claude Code~Codex CLI✓Cursor
Part ofDesign & UI
npx skills add bingo33-gif/motionsites-promptcapture
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

MotionSites Prompt Capture

Objectif

Lorsque l'utilisateur exprime un besoin de conception de site Web/UI, accédez à motionsites.ai pour trouver le modèle de prompt correspondant et fournissez un plan d'optimisation adapté au projet de l'utilisateur. Le résultat de cette compétence est « prompt recommandé + plan d'optimisation », pas l'écriture directe de code.

Flux de travail

1. Extraire les besoins

Confirmez d'abord les informations clés. Si des éléments manquent, continuez avec des valeurs par défaut raisonnables, sans poser de questions répétées :

  • Type de site : page d'atterrissage / site SaaS / portfolio / site d'agence / section Hero / page e-commerce, etc.
  • Style visuel : sombre, verre dépoli, dégradé, minimaliste, 3D, fond de particules, etc.
  • Besoins d'animation : animations de défilement, parallaxe, défilement fluide, interaction 3D, etc.
  • Structure du contenu : quels blocs sont nécessaires (navigation, Hero, fonctionnalités, tarification, pied de page, etc.)
  • Stack technique : par défaut React/Next.js + Tailwind + shadcn/ui (environnement de plugin Build Web Apps) ; si l'utilisateur spécifie une autre stack, utilisez celle-ci.

2. Accéder à motionsites.ai

  • Utilisez de préférence le navigateur intégré à l'application (si l'utilisateur l'a déjà ouvert ou s'il est disponible) pour ouvrir https://motionsites.ai/ et parcourir les catégories (SaaS, Agence, Portfolio, Pages d'atterrissage, Sections Hero, etc.).
  • Si le navigateur n'est pas disponible, utilisez open_page ou une recherche Web pour obtenir les informations de la page. Notez que ce site est une SPA rendue en JavaScript, donc la récupération statique peut ne pas obtenir le contenu des catégories ; dans ce cas, expliquez qu'utiliser le navigateur est plus précis.
  • Filtrez selon les trois dimensions « Type + Style + Animation » et trouvez 1 à 3 prompts les plus correspondants.

3. Produire le prompt recommandé

  • Affichez le texte original complet du prompt sélectionné, sans le réécrire ni le traduire.
  • Expliquez la raison de la correspondance de chaque prompt (pourquoi il convient au besoin de l'utilisateur).
  • Si aucun prompt ne correspond parfaitement, choisissez le plus proche et indiquez clairement les différences ; n'inventez jamais de prompts inexistants.

4. Donner le plan d'optimisation

Énumérez les points d'optimisation un par un en fonction du projet réel de l'utilisateur :

  • Adaptation de la stack technique : le prompt est par défaut destiné à Lovable/Bolt/Cursor/Claude ; expliquez comment le migrer vers la stack de l'utilisateur (par défaut React + Tailwind + shadcn/ui ; découpage des composants, réutilisation des tokens de design).
  • Implémentation des animations : motionsites utilise couramment GSAP ScrollTrigger + Lenis pour le défilement fluide ; donnez les compromis clés lors de l'implémentation (performance, dégradation, accessibilité, prefers-reduced-motion).
  • Actifs visuels : si des images Hero, des textures ou des icônes sont nécessaires, expliquez qu'ils peuvent être générés avec imagegen ou importés à partir des ressources demandées dans le prompt.
  • Méthode de validation : après l'implémentation, utilisez playwright / frontend-testing-debugging pour effectuer une validation navigateur (responsive, animations, erreurs console).
  • Indication des risques : signalez les parties du prompt qui pourraient ne pas convenir au projet actuel (dépendances, surcoût de performance, contenu factice).

5. Clôture

Enfin, demandez à l'utilisateur s'il souhaite commencer l'implémentation selon le plan d'optimisation ; n'écrivez pas de code avant que l'utilisateur ait confirmé.

Exemples de déclenchement

  • « 需要你创建一个网站并且要用到UI设计 »
  • « Je veux créer une page d'atterrissage SaaS, trouve-moi des prompts depuis MotionSites »
  • « Aide-moi à créer un site portfolio avec une section Hero animée, donne-moi d'abord le plan »

Remarques

  • Ne sautez pas l'étape « trouver le prompt » pour coder directement.
  • Le texte original du prompt reste inchangé ; le plan d'optimisation cible le projet de l'utilisateur, sans modifier le prompt lui-même, sauf si l'utilisateur le demande.
  • Utilisez de préférence le navigateur pour parcourir motionsites.ai avant de faire votre choix, évitez de deviner le contenu du site de mémoire.

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