🔍 ¿Qué hace esta skill?

La Frontend Design Skill eleva la calidad del frontend generado por Claude a nivel de producción. Genera código creativo, polished y único para landing pages, dashboards y componentes UI.

🌐
Landing Pages
Páginas de aterrizaje de alta conversión con diseño moderno y animaciones.
📊
Dashboards
Paneles interactivos con gráficos y métricas de diseño profesional.
🧩
Componentes UI
Componentes React reutilizables con diseño consistente.
🛍️
E-commerce
Product pages y checkouts con UX optimizada para conversión.

⚙️ Cómo instalar

1
Descarga el archivo ZIP
Haz clic en el botón de descarga para obtener frontend-design.zip.
2
Descomprime en tu carpeta de skills
Extrae el contenido en la carpeta de skills de Claude:
~/.claude/skills/frontend-design/
3
Verifica que existe SKILL.md
Comprueba que dentro de frontend-design/ existe el archivo SKILL.md.
frontend-design/ ├── SKILL.md └── ...
4
Reinicia Claude Code o Cowork
Cierra y vuelve a abrir la aplicación. Claude detectará la skill automáticamente.
5
¡Empieza a usar la skill!
Describe tu tarea en lenguaje natural y Claude activará la skill cuando sea necesario.

💬 Ejemplos de uso

🌐 Landing
Crea una landing page para nuestra app de productividad con hero, features y CTA.
📊 Dashboard
Diseña un dashboard admin con sidebar, KPIs, tabla de usuarios y gráfico de actividad.
🧩 Components
Crea un sistema de componentes UI en React con botones, inputs y modales consistentes.
🛍️ E-commerce
Diseña una página de producto con galería, selector de variantes y botón de compra.

🛠️ Características

✅
Anti-IA Genérico Diseños creativos y únicos, no el output estándar de IA.
✅
Accesibilidad HTML semántico con ARIA labels y contraste adecuado.
✅
CSS Moderno Variables CSS, Grid, Flexbox y animaciones de última generación.
✅
React Best Practices Componentes funcionales, hooks apropiados y código mantenible.
✅
Responsive Interfaces perfectamente adaptadas a móvil, tablet y escritorio.

❓ Preguntas frecuentes

Sí. Prioriza código legible, comentado y bien estructurado.
Sí. Especifica el framework CSS que uses y Claude lo aplicará.
Sí. Usa CSS Grid y Flexbox modernos en todo el output.