design-guide
✓Extraiga un lenguaje de diseño completo de sitios web, incluidos colores, tipografía, animaciones, estados interactivos, sombras, degradados, patrones de componentes y comportamientos de UX. Genera guías de diseño con píxeles perfectos con capturas de pantalla responsivas y documentación completa del sistema de diseño. Úselo al analizar el diseño de sitios web, crear sistemas de diseño o reconstruir sitios.
Instalación
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
Extraiga un lenguaje de diseño completo de sitios web, incluidos colores, tipografía, animaciones, estados interactivos, sombras, degradados, patrones de componentes y comportamientos de UX. Genera guías de diseño con píxeles perfectos con capturas de pantalla responsivas y documentación completa del sistema de diseño. Úselo al analizar el diseño de sitios web, crear sistemas de diseño o reconstruir sitios. Fuente: tyrchen/claude-skills.
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/tyrchen/claude-skills --skill design-guide- Fuente
- tyrchen/claude-skills
- Categoría
- *Creatividad
- Verificado
- ✓
- Primera vez visto
- 2026-02-01
- Actualizado
- 2026-02-18
Respuestas rápidas
¿Qué es design-guide?
Extraiga un lenguaje de diseño completo de sitios web, incluidos colores, tipografía, animaciones, estados interactivos, sombras, degradados, patrones de componentes y comportamientos de UX. Genera guías de diseño con píxeles perfectos con capturas de pantalla responsivas y documentación completa del sistema de diseño. Úselo al analizar el diseño de sitios web, crear sistemas de diseño o reconstruir sitios. Fuente: tyrchen/claude-skills.
¿Cómo instalo design-guide?
Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/tyrchen/claude-skills --skill design-guide Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor
¿Dónde está el repositorio de origen?
https://github.com/tyrchen/claude-skills
Detalles
- Categoría
- *Creatividad
- Fuente
- skills.sh
- Primera vez visto
- 2026-02-01