Guía completa para crear un design system web con librería de componentes
Genera desde cero un design system web con tokens, tipografía, colores, espaciado, componentes y patrones responsive.
¿Qué hace este prompt?
• Genera una documentación profesional para design systems modernos. • Define tokens de color, tipografía, spacing y pauta de accesibilidad. • Crea fichas de componentes reusables con variantes y ejemplos. • Establece la estrategia responsive y mapping de dark mode.
Especificación integral de design system web
Cómo usar este prompt
1. Copia el prompt y pégalo en ChatGPT. 2. Rellena las variables entre corchetes con datos propios de tu proyecto. Ejemplo: - [NOMBRE_DEL_PROYECTO]: NovaAdmin - [TIPO_DE_PRODUCTO]: SaaS - [PALETA_COLORES_PRIMARIA]: #5221A1, #FF5C00, #FFE411 - [TIPOGRAFÍA_PRINCIPAL]: Inter - [TAMAÑOS_TIPOGRAFICOS_BASE]: 12/14/16 - [SISTEMA_ESPACIADO_BASE]: 8/16/32 - [COMPONENTES_CLAVE]: botón, select, tarjeta, modal 3. Ejecuta el prompt para obtener toda la documentación estructurada por secciones en markdown. 4. Copia el resultado en tu herramienta de documentación interna (Notion, Confluence, Storybook, etc.)
Tips y recomendaciones
• Usa una paleta que cumpla ratios de contraste AA/AAA para abarcar accesibilidad. • Selecciona componentes clave según funcionalidades core de tu producto. • Mantén la escala tipográfica consistente en toda la interfaz. • Revisa la adaptación dark mode especialmente en inputs y fondos secundarios. • Añade ejemplos de UI reales para facilitar la implementación por el equipo.