·screenshot-to-code
*

screenshot-to-code

gked2121/claude-skills

Convertissez les captures d'écran de l'interface utilisateur en code HTML/CSS/React/Vue fonctionnel. Détecte les modèles de conception, les composants et génère des mises en page réactives. Utilisez-le lorsque les utilisateurs fournissent des captures d'écran de sites Web, d'applications ou de conceptions d'interface utilisateur et souhaitent implémenter du code.

3Installations·0Tendance·@gked2121

Installation

$npx skills add https://github.com/gked2121/claude-skills --skill screenshot-to-code

SKILL.md

Convert UI screenshots into production-ready code with accurate styling and structure.

When a user provides a screenshot of a UI design:

Default: If not specified, use React with Tailwind CSS for modern designs, or plain HTML/CSS for simple pages.

Convertissez les captures d'écran de l'interface utilisateur en code HTML/CSS/React/Vue fonctionnel. Détecte les modèles de conception, les composants et génère des mises en page réactives. Utilisez-le lorsque les utilisateurs fournissent des captures d'écran de sites Web, d'applications ou de conceptions d'interface utilisateur et souhaitent implémenter du code. Source : gked2121/claude-skills.

Voir l'original

Faits (prêts à citer)

Champs et commandes stables pour les citations IA/recherche.

Commande d'installation
npx skills add https://github.com/gked2121/claude-skills --skill screenshot-to-code
Catégorie
*Créativité
Vérifié
Première apparition
2026-02-11
Mis à jour
2026-02-18

Réponses rapides

Qu'est-ce que screenshot-to-code ?

Convertissez les captures d'écran de l'interface utilisateur en code HTML/CSS/React/Vue fonctionnel. Détecte les modèles de conception, les composants et génère des mises en page réactives. Utilisez-le lorsque les utilisateurs fournissent des captures d'écran de sites Web, d'applications ou de conceptions d'interface utilisateur et souhaitent implémenter du code. Source : gked2121/claude-skills.

Comment installer screenshot-to-code ?

Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/gked2121/claude-skills --skill screenshot-to-code Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor

Où se trouve le dépôt source ?

https://github.com/gked2121/claude-skills