design-guide
✓Extrahieren Sie eine umfassende Designsprache aus Websites, einschließlich Farben, Typografie, Animationen, interaktiven Zuständen, Schatten, Farbverläufen, Komponentenmustern und UX-Verhalten. Erstellt pixelgenaue Designanleitungen mit responsiven Screenshots und vollständiger Dokumentation des Designsystems. Verwenden Sie es zum Analysieren des Website-Designs, zum Erstellen von Designsystemen oder zum Neuaufbau von Websites.
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
Extrahieren Sie eine umfassende Designsprache aus Websites, einschließlich Farben, Typografie, Animationen, interaktiven Zuständen, Schatten, Farbverläufen, Komponentenmustern und UX-Verhalten. Erstellt pixelgenaue Designanleitungen mit responsiven Screenshots und vollständiger Dokumentation des Designsystems. Verwenden Sie es zum Analysieren des Website-Designs, zum Erstellen von Designsystemen oder zum Neuaufbau von Websites. Quelle: tyrchen/claude-skills.
Fakten (zitierbereit)
Stabile Felder und Befehle für KI/Such-Zitate.
- Installationsbefehl
npx skills add https://github.com/tyrchen/claude-skills --skill design-guide- Quelle
- tyrchen/claude-skills
- Kategorie
- *Kreativität
- Verifiziert
- ✓
- Erstes Auftreten
- 2026-02-01
- Aktualisiert
- 2026-02-18
Schnelle Antworten
Was ist design-guide?
Extrahieren Sie eine umfassende Designsprache aus Websites, einschließlich Farben, Typografie, Animationen, interaktiven Zuständen, Schatten, Farbverläufen, Komponentenmustern und UX-Verhalten. Erstellt pixelgenaue Designanleitungen mit responsiven Screenshots und vollständiger Dokumentation des Designsystems. Verwenden Sie es zum Analysieren des Website-Designs, zum Erstellen von Designsystemen oder zum Neuaufbau von Websites. Quelle: tyrchen/claude-skills.
Wie installiere ich design-guide?
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/tyrchen/claude-skills --skill design-guide Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code oder Cursor
Wo ist das Quell-Repository?
https://github.com/tyrchen/claude-skills
Details
- Kategorie
- *Kreativität
- Quelle
- skills.sh
- Erstes Auftreten
- 2026-02-01