design-guide
✓Extrayez un langage de conception complet à partir de sites Web, notamment les couleurs, la typographie, les animations, les états interactifs, les ombres, les dégradés, les modèles de composants et les comportements UX. Génère des guides de conception au pixel près avec des captures d'écran réactives et une documentation complète du système de conception. À utiliser lors de l'analyse de la conception de sites Web, de la création de systèmes de conception ou de la reconstruction de sites.
Installation
SKILL.md
Extract the complete design language from any website with automated analysis of colors, typography, animations, interactions, and UX patterns. Goes far beyond basic CSS extraction to capture the full design system.
✅ design-guide.md - Main comprehensive guide ✅ All screenshots - Visual reference ✅ designdata.json - Structured data for programmatic use ✅ Source files - HTML, CSS, computed styles
Optional: ✅ Recreated components - If requested ✅ Comparison analysis - If analyzing multiple sites ✅ Token library - CSS/SCSS variables file
Extrayez un langage de conception complet à partir de sites Web, notamment les couleurs, la typographie, les animations, les états interactifs, les ombres, les dégradés, les modèles de composants et les comportements UX. Génère des guides de conception au pixel près avec des captures d'écran réactives et une documentation complète du système de conception. À utiliser lors de l'analyse de la conception de sites Web, de la création de systèmes de conception ou de la reconstruction de sites. Source : tyrchen/claude-skills.
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/tyrchen/claude-skills --skill design-guide- Source
- tyrchen/claude-skills
- Catégorie
- *Créativité
- Vérifié
- ✓
- Première apparition
- 2026-02-01
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que design-guide ?
Extrayez un langage de conception complet à partir de sites Web, notamment les couleurs, la typographie, les animations, les états interactifs, les ombres, les dégradés, les modèles de composants et les comportements UX. Génère des guides de conception au pixel près avec des captures d'écran réactives et une documentation complète du système de conception. À utiliser lors de l'analyse de la conception de sites Web, de la création de systèmes de conception ou de la reconstruction de sites. Source : tyrchen/claude-skills.
Comment installer design-guide ?
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/tyrchen/claude-skills --skill design-guide 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/tyrchen/claude-skills
Détails
- Catégorie
- *Créativité
- Source
- skills.sh
- Première apparition
- 2026-02-01