Estrai un linguaggio di progettazione completo dai siti Web, inclusi colori, tipografia, animazioni, stati interattivi, ombre, gradienti, modelli di componenti e comportamenti UX. Genera guide di progettazione pixel-perfect con screenshot reattivi e documentazione completa del sistema di progettazione. Da utilizzare durante l'analisi della progettazione di siti Web, la creazione di sistemi di progettazione o la ricostruzione di siti.
Installa rapidamente la skill AI design-guide nel tuo ambiente di sviluppo tramite riga di comando
Fonte: tyrchen/claude-skills.
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
Estrai un linguaggio di progettazione completo dai siti Web, inclusi colori, tipografia, animazioni, stati interattivi, ombre, gradienti, modelli di componenti e comportamenti UX. Genera guide di progettazione pixel-perfect con screenshot reattivi e documentazione completa del sistema di progettazione. Da utilizzare durante l'analisi della progettazione di siti Web, la creazione di sistemi di progettazione o la ricostruzione di siti. Fonte: tyrchen/claude-skills.
Campi e comandi stabili per citazioni AI/ricerca.
npx skills add https://github.com/tyrchen/claude-skills --skill design-guideEstrai un linguaggio di progettazione completo dai siti Web, inclusi colori, tipografia, animazioni, stati interattivi, ombre, gradienti, modelli di componenti e comportamenti UX. Genera guide di progettazione pixel-perfect con screenshot reattivi e documentazione completa del sistema di progettazione. Da utilizzare durante l'analisi della progettazione di siti Web, la creazione di sistemi di progettazione o la ricostruzione di siti. Fonte: tyrchen/claude-skills.
Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/tyrchen/claude-skills --skill design-guide Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw
https://github.com/tyrchen/claude-skills