/promptCode & devNOUVEAU

Bibliothèque de composants frontend

Bibliothèque de composants frontend — rendu d’exemple (Claude)
aperçu du rendu

À quoi ça sert

Pour poser la base d’un design system côté code. Précisez à la suite du prompt votre framework (React, Vue…) et les composants dont vous avez besoin.

Aperçu

/prompt · le prompt
Agis comme un ingénieur frontend senior qui construit un système d’interface de niveau production. Crée des…
aperçu tronqué — débloquez pour tout voir

Mode d’emploi

  1. Copiez le prompt et collez-le dans Claude.
  2. Remplacez les mots entre crochets [ ] par vos propres valeurs.
  3. Lancez la génération — ajustez et relancez autant que vous voulez.

Tout ce qui apparaît entre crochets est une variable à personnaliser. Par exemple, [sujet] peut devenir « un chat roux » ou « une paire de baskets ».

Pourquoi ce prompt fonctionne

Les états de chargement, vides et limites sont exigés d’emblée, alors qu’ils manquent dans la plupart des composants générés. La conception des props est un livrable à part, ce qui pousse à une API cohérente entre composants. Les exemples d’usage servent de documentation immédiate.

Erreurs fréquentes

  • Ne pas préciser le framework ni la librairie de style, ce qui donne un code à réadapter.
  • Croire l’accessibilité annoncée sans la vérifier au clavier et au lecteur d’écran.
  • Demander trop de composants à la fois : la qualité baisse sur les derniers.

Exemple de résultat

Un ensemble de composants codés, avec leur API de props, des exemples d’utilisation et les règles à suivre.

Dans la même catégorie

Créer un serveur MCP — illustration/skill
Code & dev
GRATUITNOUVEAU

Créer un serveur MCP

Construis des serveurs MCP propres pour connecter une API à un LLM.

gratuit