0:005:47

Usa y crea design systems en v0

Clase 6 de 11

Clase 6 / 11

Recursos

Crear interfaces consistentes es más simple cuando usas design systems bien configurados. Aquí verás cómo en Vcero puedes ajustar colores, tipografías y componentes, importar tu CSS, probar estilos con TweakCN y aplicarlos para generar una interfaz funcional que crea imágenes con Nano Banana Pro, todo en minutos.

¿Cómo crear e importar un design system en v0?

En el sidebar de Vcero, entra a design systems. Puedes partir de un ejemplo o crear uno nuevo. Verás a la izquierda los colores de la app y, a la derecha, el preview en vivo. Ajusta y observa cómo cambian los componentes antes de guardar.

Selecciona un sistema base o crea uno nuevo.
Edita colores primario y secundario, y más configuraciones que vienen de Tailwind y Next.js.
Cambia la tipografía y mira el resultado en el preview.
Ajusta radio del borde, sombra y offset para coherencia visual.
Prueba en distintos componentes y pulsa save para guardar.
Asigna un nombre claro, por ejemplo: “Design system de Manu”, y confirma con save changes.

¿Qué opciones de configuración verás en el editor?

Colores de la aplicación y tokens derivados de Tailwind y Next.js.
Tipografías con reflejo inmediato en el preview.
Parámetros visuales como radio, sombra, offset y spacing.
Vista previa de componentes para validar contraste y jerarquía.

¿Cómo importar tu CSS existente sin errores?

Desde create, elige import them.
Pega el archivo de CSS que ya tengas, sea de un proyecto en Vcero o externo.
Importa y verifica el preview.
Nombra y guarda para tenerlo disponible en tu lista de design systems.

¿Cómo probar y clonar estilos con TweakCN?

TweakCN es una herramienta útil para testear design systems con una librería amplia de ejemplos, incluso de apps conocidas como Twitter. Su interfaz es similar a la de Vcero, con colores agrupados, tipografías y controles como spacing y radio.

En TweakCN, elige un estilo, por ejemplo Twitter, y pulsa try it now.
Ajusta lo necesario y luego ve a code para copiar el CSS.
En Vcero, usa import them y pega el CSS copiado.
Guarda con un nombre claro, por ejemplo “Twitter”.
Ya tienes otro design system listo para usar en tus proyectos.

¿Cómo aplicar el design system para crear una interfaz de imágenes?

Con tus design systems listos, puedes usarlos desde new chat. En más, selecciona design system y elige, por ejemplo, “Twitter”. La idea es generar una interfaz donde ingresas un prompt y se crean imágenes con Nano Banana Pro. Además, puedes pedir múltiples imágenes y un sidebar para previsualizarlas.

En new chat, elige el design system deseado.
Describe la interfaz: campo de prompt, generación con Nano Banana Pro, vista de muchas imágenes y sidebar para navegar.
Pega un screenshot o un boceto como contexto para guiar el diseño.
Genera y revisa: verás un diseño full screen que respeta los colores de Twitter.
Prueba con una petición real, por ejemplo: “una imagen de un perro salchicha en el parque”.
Obtendrás un prototipo funcional. Luego itera tamaños de componentes y detalles visuales según lo necesites.

¿Qué habilidades y conceptos refuerzas en este flujo?

Configuración de tokens visuales: colores, tipografías, radio, sombra, spacing.
Importación eficiente con CSS desde proyectos previos.
Validación rápida en preview y componentes reales.
Pruebas con TweakCN para comparar y clonar estilos conocidos.
Aplicación de un design system a una interfaz funcional de generación de imágenes.
Prototipado con imágenes de referencia como guías de estructura.
Uso de prompts para testear flujos de generación.
Iteración del diseño manteniendo la coherencia del sistema visual.

¿Ya creaste o importaste tu design system en Vcero o TweakCN? Comparte tu captura y, si te animas, el CSS para que otros puedan importarlo y usarlo en sus proyectos.

Luis Rebollo

Hace 6 meses•editado

Para los que tengan problemas al importar en v0, es necesario un par de tweaks al css, con ayuda de chatgpt me funciono el siguiente codigo (para el tema de twitter):

@import "tailwindcss";

@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

:root {

--background: #ffffff;

--foreground: #0f1419;

--card: #f7f8f8;

--card-foreground: #0f1419;

--popover: #ffffff;

--popover-foreground: #0f1419;

--primary: #1e9df1;

--primary-foreground: #ffffff;

--secondary: #0f1419;

--secondary-foreground: #ffffff;

--muted: #e5e5e6;

--muted-foreground: #0f1419;

--accent: #e3ecf6;

--accent-foreground: #1e9df1;

--destructive: #f4212e;

--destructive-foreground: #ffffff;

--border: #e1eaef;

--input: #f7f9fa;

--ring: #1da1f2;

--chart-1: #1e9df1;

--chart-2: #00b87a;

--chart-3: #f7b928;

--chart-4: #17bf63;

--chart-5: #e0245e;

--sidebar: #f7f8f8;

--sidebar-foreground: #0f1419;

--sidebar-primary: #1e9df1;

--sidebar-primary-foreground: #ffffff;

--sidebar-accent: #e3ecf6;

--sidebar-accent-foreground: #1e9df1;

--sidebar-border: #e1e8ed;

--sidebar-ring: #1da1f2;

--radius: 1.3rem;

}

.dark {

--background: #000000;

--foreground: #e7e9ea;

--card: #17181c;

--card-foreground: #d9d9d9;

--popover: #000000;

--popover-foreground: #e7e9ea;

--primary: #1c9cf0;

--primary-foreground: #ffffff;

--secondary: #f0f3f4;

--secondary-foreground: #0f1419;

--muted: #181818;

--muted-foreground: #72767a;

--accent: #061622;

--accent-foreground: #1c9cf0;

--destructive: #f4212e;

--destructive-foreground: #ffffff;

--border: #242628;

--input: #22303c;

--ring: #1da1f2;

--chart-1: #1e9df1;

--chart-2: #00b87a;

--chart-3: #f7b928;

--chart-4: #17bf63;

--chart-5: #e0245e;

--sidebar: #17181c;

--sidebar-foreground: #d9d9d9;

--sidebar-primary: #1da1f2;

--sidebar-primary-foreground: #ffffff;

--sidebar-accent: #061622;

--sidebar-accent-foreground: #1c9cf0;

--sidebar-border: #38444d;

--sidebar-ring: #1da1f2;

}

@theme inline {

--color-background: var(--background);

--color-foreground: var(--foreground);

--color-card: var(--card);

--color-card-foreground: var(--card-foreground);

--color-popover: var(--popover);

--color-popover-foreground: var(--popover-foreground);

--color-primary: var(--primary);

--color-primary-foreground: var(--primary-foreground);

--color-secondary: var(--secondary);

--color-secondary-foreground: var(--secondary-foreground);

--color-muted: var(--muted);

--color-muted-foreground: var(--muted-foreground);

--color-accent: var(--accent);

--color-accent-foreground: var(--accent-foreground);

--color-destructive: var(--destructive);

--color-destructive-foreground: var(--destructive-foreground);

--color-border: var(--border);

--color-input: var(--input);

--color-ring: var(--ring);

--color-chart-1: var(--chart-1);

--color-chart-2: var(--chart-2);

--color-chart-3: var(--chart-3);

--color-chart-4: var(--chart-4);

--color-chart-5: var(--chart-5);

--color-sidebar: var(--sidebar);

--color-sidebar-foreground: var(--sidebar-foreground);

--color-sidebar-primary: var(--sidebar-primary);

--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);

--color-sidebar-accent: var(--sidebar-accent);

--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);

--color-sidebar-border: var(--sidebar-border);

--color-sidebar-ring: var(--sidebar-ring);

--radius-sm: calc(var(--radius) - 4px);

--radius-md: calc(var(--radius) - 2px);

--radius-lg: var(--radius);

--radius-xl: calc(var(--radius) + 4px);

}

@layer base {

* {

@apply border-border outline-ring/50;

}

body {

@apply bg-background text-foreground;

}

A mi me gusto mucho teste tema:

Juan José Botero García

Hace 2 meses

Gracias, con el nuevo import ya si funciona el Desing System.

Conoce y domina v0

Portafolio web en 2 minutos con V-Cero

Qué es v0 de Vercel

Cómo empezar un proyecto en v0

Sigue trabajando desde tu móvil en la App de v0

Diseña y publica tus proyectos

Publica y comparte tu Proyecto

Usa y crea design systems en v0

Realiza ajustes y mejoras a tu proyecto

Escala tus Proyectos

Integración nativa de Fal en Vercel con V0

Conecta Supabase a tu proyecto en v0

Integración de GitHub y MCPs en V0

Recursos adicionales de v0

Usa y crea design systems en v0

Progreso del curso

Conoce y domina v0

Diseña y publica tus proyectos

Escala tus Proyectos

Recursos

Recursos