·modern-frontend-design
</>

modern-frontend-design

Cómo diseñar y crear interfaces frontend modernas y de primera calidad que parezcan productos SaaS de alta gama, herramientas de inteligencia artificial modernas y sitios web de diseño galardonados, no plantillas genéricas ni diseños obsoletos. Utilice esta habilidad siempre que el usuario le pida que cree una interfaz, una página de destino, diseñe un panel, cree una interfaz de usuario de aplicación web, cree una interfaz SaaS, cree un sitio de cartera o produzca cualquier tipo de interfaz web orientada al usuario. Úselo también cuando el usuario diga cosas como "haz que parezca moderno", "constrúyeme una interfaz de usuario hermosa", "crea una página de inicio para mi aplicación", "diseña una página de precios" o menciona cualquier cosa relacionada con el diseño de interfaz, UI/UX, arquitectura de componentes o diseños web responsivos, incluso si no dicen explícitamente "interfaz" o "diseño".

37Instalaciones·23Tendencia·@deveshpunjabi

Instalación

$npx skills add https://github.com/deveshpunjabi/modern-frontend-skill --skill modern-frontend-design

Cómo instalar modern-frontend-design

Instala rápidamente el skill de IA modern-frontend-design en tu entorno de desarrollo mediante línea de comandos

  1. Abrir Terminal: Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.)
  2. Ejecutar comando de instalación: Copia y ejecuta este comando: npx skills add https://github.com/deveshpunjabi/modern-frontend-skill --skill modern-frontend-design
  3. Verificar instalación: 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, Cursor u OpenClaw

Fuente: deveshpunjabi/modern-frontend-skill.

SKILL.md

Ver original

You are not just writing code. You are a senior frontend developer, a UI/UX designer, a product designer, and a visual design strategist — all at once. Your mission is to transform any user prompt, idea, or product concept into a visually stunning, modern, premium-quality website or web application.

Why this matters: most AI-generated frontends look generic, use dated patterns, and ignore the product context entirely. The result should resemble high-end SaaS products, modern AI tools, and award-winning design websites. A fintech dashboard should feel different from a creator platform. A cybersecurity tool should feel different from a social app. The design must serve the product.

The difference between a forgettable UI and a premium one is taste, restraint, and invisible details:

Datos (listos para citar)

Campos y comandos estables para citas de IA/búsqueda.

Comando de instalación
npx skills add https://github.com/deveshpunjabi/modern-frontend-skill --skill modern-frontend-design
Categoría
</>Desarrollo
Verificado
Primera vez visto
2026-03-09
Actualizado
2026-03-11

Browse more skills from deveshpunjabi/modern-frontend-skill

Respuestas rápidas

¿Qué es modern-frontend-design?

Cómo diseñar y crear interfaces frontend modernas y de primera calidad que parezcan productos SaaS de alta gama, herramientas de inteligencia artificial modernas y sitios web de diseño galardonados, no plantillas genéricas ni diseños obsoletos. Utilice esta habilidad siempre que el usuario le pida que cree una interfaz, una página de destino, diseñe un panel, cree una interfaz de usuario de aplicación web, cree una interfaz SaaS, cree un sitio de cartera o produzca cualquier tipo de interfaz web orientada al usuario. Úselo también cuando el usuario diga cosas como "haz que parezca moderno", "constrúyeme una interfaz de usuario hermosa", "crea una página de inicio para mi aplicación", "diseña una página de precios" o menciona cualquier cosa relacionada con el diseño de interfaz, UI/UX, arquitectura de componentes o diseños web responsivos, incluso si no dicen explícitamente "interfaz" o "diseño". Fuente: deveshpunjabi/modern-frontend-skill.

¿Cómo instalo modern-frontend-design?

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/deveshpunjabi/modern-frontend-skill --skill modern-frontend-design 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, Cursor u OpenClaw

¿Dónde está el repositorio de origen?

https://github.com/deveshpunjabi/modern-frontend-skill

Detalles

Categoría
</>Desarrollo
Fuente
skills.sh
Primera vez visto
2026-03-09

Skills Relacionados

Ninguno