Un design system es, simplemente, el conjunto de decisiones de marca ya tomadas: qué colores usar, qué tipos de letra, cómo escribir y cómo se ven tus tarjetas o botones. En lugar de inventarlo cada vez, lo consultas. Así tus presentaciones, newsletters y cursos parecen hechos por el mismo equipo —aunque los haga gente distinta.
01 · Primero: qué es exactamente
Un design system es una colección organizada de decisiones visuales y de contenido. Sirve para que no tengas que decidir desde cero cada vez que creas algo.
- Es una biblioteca — Guarda colores, tipografías, iconos, estilos de botones, tarjetas, plantillas y ejemplos.
- Es una guía — Explica cuándo usar cada cosa: qué tono escribir, cuánto espacio dejar, qué estilo evitar.
- Es un acelerador — Reduce discusiones pequeñas y ayuda a producir materiales consistentes con menos esfuerzo.
02 · Lo que suele incluir
No hace falta empezar con un sistema enorme. Para una newsletter, una intranet, un curso o un carrusel, basta con estas piezas.
| Pieza | Para qué sirve | Ejemplo sencillo |
|---|---|---|
| Colores | Para que todo se reconozca como parte de la misma familia. | Un color principal para llamadas a la acción y varios neutros para fondos. |
| Tipografías | Para que títulos, subtítulos y textos tengan jerarquía clara. | Título grande, texto normal, etiqueta pequeña. |
| Componentes | Para no reinventar tarjetas, botones, cajas o bloques de contenido. | Una tarjeta de consejo que siempre tiene número, título y descripción. |
| Tono de voz | Para que todos escriban con el mismo estilo. | Cercano, directo, sin tecnicismos innecesarios. |
03 · Para qué te va a servir
Cuando se crea un contenido, se una presentación, o una infografía, casi nunca empezamos de cero. Nos basamos en contenidos anteriores, reutilizamos una presentación, un documento… El resultado puede ser bueno pero no tiene por qué parecerse al de la pieza anterior.
Un design system evita esa improvisación: no tienes que pensar en esas decisiones cada vez porque ya están tomadas.
04 · ¿Qué necesitas para crear un Design System?
No hace falta tener todo perfecto antes de empezar. Con tres tipos de material ya tienes suficiente para que Cowork detecte patrones y construya una guía reutilizable.
05 · ¿Qué le das a Cowork?
El punto de partida es una carpeta con tu material real: logos, capturas, documentos, presentaciones, ejemplos buenos y ejemplos que no funcionaron. Cowork analiza todo eso junto y extrae los patrones. Puedes darle el siguiente prompt para guiar el análisis.
Analiza esta carpeta y crea un design system completo basado en su contenido.
Revisa documentos, capturas, imágenes, logos y presentaciones disponibles.
Extrae patrones visuales, tipográficos y de tono. Luego guarda el resultado
en el formato que prefieras:
── Opción A · Skill de Cowork (recomendado)
Crea una carpeta design-system/ con esta estructura:
SKILL.md → instrucciones para que Cowork use el sistema
tokens/colors.yaml → paleta: primarios, secundarios, neutros, semánticos
tokens/type.yaml → familias, pesos, escalas y jerarquía
tokens/spacing.yaml → márgenes, grids y ritmo vertical
assets/ → logos, iconos y recursos gráficos listos para usar
guidelines/ → reglas de tono, layout y componentes en Markdown
examples/ → capturas o HTML de piezas correctas e incorrectas
── Opción B · HTML navegable
Una guía visual en HTML con todas las secciones del sistema, ejemplos
de uso correcto e incorrecto, y un checklist de «qué falta».
── Opción C · Documento Markdown
Un único README.md con todas las decisiones documentadas, pensado
para compartir con el equipo o pegar en Notion.Por qué la Opción A es la mejor: al guardarlo como Skill, Cowork puede leer el sistema directamente en futuros proyectos. Cada vez que crees una newsletter, un carrusel o una presentación, tendrá el contexto de marca sin que tengas que repetírselo.
Descarga la Skill que genera Design Systems
También puedes usar esta SKILL que he generado, para crear nuevos Design System (es un .zip) y la cargas dentro de Copilot Cowork
06 · ¿Qué te genera Cowork?
A partir de tu material, Cowork genera un sistema completo y ordenado. No un documento estático, sino una base que puedes invocar en cualquier proyecto futuro.
07 · El ejemplo Cowork: cómo se usa el Design System en skill una vez generada.
Una vez generada la Skill, Cowork la lee al inicio de cada proyecto. No hace falta repetir el contexto de marca: está en la carpeta, siempre disponible.
- Invocas la Skill al abrir un proyecto nuevo en Cowork.
- Cowork lee el
SKILL.mdy los tokens: ya sabe qué colores usar, qué tono escribir y qué estructura seguir. - Pides una newsletter, un carrusel o una presentación. El resultado sale con la marca, sin que tengas que describírsela.
El contexto viaja con el proyecto.
08 · Checklist para empezar esta semana
Si quieres probarlo sin montar un gran proyecto, empieza pequeño. Una carpeta buena vale más que una teoría perfecta.
- Reúne 10 piezas reales: una presentación, una newsletter, una captura, logos y dos ejemplos que te gusten.
- Añade 3 piezas que no funcionaron bien. Sirven para detectar reglas de «no hacer».
- Pide a Cowork que extraiga patrones visuales, componentes, tono y huecos.
- Revisa el resultado con alguien de marca, comunicación o negocio.
- Úsalo en una pieza nueva y ajusta lo que falte.
Un design system es una forma de dejar de improvisar.
Empieza como una guía, pero acaba siendo una manera más fácil de trabajar. Sube tus documentos, capturas o archivos: Cowork detecta los patrones que ya existen en tu marca.
Deja una respuesta