Design tokens para SaaS premium
Genera un sistema completo de design tokens para un proyecto de SaaS premium dirigido a profesionales creativos, incluyendo paleta de colores, tipografía, espaciado, componentes, animaciones y iconografía, en formato CSS y React/Tailwind.
¿Qué hace este prompt?
● Crea un sistema de design tokens completo y listo para implementar. ● Incluye colores, tipografía, espaciado, componentes, animaciones, sombras e iconografía. ● Genera CSS variables y ejemplos React/Tailwind con comentarios visuales. ● Asegura consistencia visual y escalabilidad en todo el proyecto.
Sistema de design tokens para SaaS premium
### ROL
Actúa como un experto en "vibe coding" y diseño visual, con experiencia en sistemas de diseño para aplicaciones SaaS premium y en integración de design tokens en proyectos modernos de React y Tailwind.
### OBJETIVO
Proporcionar un sistema de design tokens completo, escalable y reutilizable, que sirva de base visual para un SaaS dirigido a profesionales creativos, asegurando consistencia de diseño y facilidad de implementación.
### INPUT
Utiliza la siguiente información proporcionada por el usuario:
- Paleta de marca: [INSERTAR COLORES PRINCIPALES]
- Tipografía preferida: [INSERTAR TIPOGRAFÍA]
- Nivel de sofisticación visual: [BÁSICO / INTERMEDIO / PREMIUM]
- Tipo de componentes base requeridos: [BOTONES, INPUTS, CARDS, ETC.]
- Animaciones y transiciones deseadas: [SUAVES, RÁPIDAS, ELEGANTES]
- Iconografía a usar: [INSERTAR ESTILO O KIT]
### PROCESO
1. Define la paleta de colores, incluyendo primarios, secundarios, neutros y estados (hover, activo, error, éxito).
2. Establece tipografía con familia, tamaños, pesos y line-height.
3. Crea una escala de espaciado y padding consistente.
4. Diseña componentes base (botones, inputs, cards) con variantes.
5. Define animaciones y transiciones con duraciones y easing.
6. Diseña elevación y sombras para jerarquía visual.
7. Organiza iconografía y su integración con los componentes.
8. Genera código CSS variables y ejemplos en React/Tailwind con comentarios que muestren visualmente cada token.
### OUTPUT
Entrega:
1. CSS variables listas para usar con comentarios de ejemplo visual.
2. Código React/Tailwind de componentes base usando los tokens definidos.
3. Comentarios explicativos que muestren cómo aplicar colores, tipografía, espaciado, sombras y animaciones.
4. Sistema completo de design tokens coherente y escalable.Cómo usar este prompt
1. Sustituye los campos entre corchetes con la información específica de tu proyecto SaaS. Ejemplo: - Paleta de marca: azul #1D4ED8, violeta #7C3AED - Tipografía preferida: Inter - Nivel de sofisticación visual: premium - Componentes base requeridos: botones, inputs, cards - Animaciones y transiciones deseadas: suaves y elegantes - Iconografía a usar: línea minimalista 2. Copia el prompt completo y pégalo en ChatGPT. 3. Aplica los tokens generados directamente en tu proyecto React/Tailwind, ajustando valores según necesidades de marca.
Tips y recomendaciones
● Usa nombres de variables consistentes y descriptivos para facilitar mantenimiento. ● Prioriza accesibilidad en colores, tipografía y contrastes. ● Mantén una escala de espaciado modular para consistencia. ● Documenta los tokens en un archivo central para todo el equipo.