Crea un Design System completo en 20 min - Figma + IA

Описание: ¿Te imaginas pasar de un diseño estático en Figma a un Design System completo con variables semánticas, primitivas y documentación web en solo 10 minutos? 🤯

En este vídeo te enseño el flujo de trabajo que he estado testeando y que me ha volado la cabeza. Vamos a usar la IA (Claude + MCP) para que analice nuestras pantallas, cree toda la lógica de tokens por nosotros y hasta nos genere una librería de componentes en HTML y CSS que respeta nuestro sistema.

Se acabó el perder semanas configurando nombres de colores y espaciados a mano. Es hora de dejar de hacer "diseñitos" y empezar a trabajar como un verdadero Product Designer apoyado en la inteligencia artificial.

Si quieres entrar en la comunidad para estar al día de todo y subir el nivel (y el ticket) de tus proyectos, tienes el link al grupo de Whatsapp.

https://chat.whatsapp.com/BOG1NJagXih...

Prompt para Claude (crear variables y aplicarlas a todas las propiedades)
role: Lead Design System Architect.

Task: Create a scalable, full-featured Design System by auditing these 6 key screens.
Strategy: 1. Analyze Sample: Extract core styles from the provided screens.
2. Systemic Inference: Don't just list what you see; extrapolate a complete scale. If you see a 4px and 8px gap, build a full spacing scale (0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64).
3. Semantic Logic: Apply the strict naming convention we defined earlier (lowercase, slashes, integer line-heights).
Hierarchy to build:
Color: color/semantic/[category]/[element]/[state]
Typography: text/[category]/[property]-[size/weight/line-height] (No %, use integers).
Spacing & Radius: space/[scale] and radius/[size].
Important: Even if you don't see a specific state (like a "disabled" button) in these 4 screens, include the necessary variables that a B2B SaaS dashboard would logically require to be complete.

Prompt para crear nuestro repositorio de design system:

Role: Lead Design System Architect & Frontend Engineer. Task: Develop a high-fidelity Design System Documentation Portal using the provided 3 JSON token files (value.tokens.json, dark.tokens.json, light.tokens.json) as the "Source of Truth".
Project Setup:
Use React and Tailwind CSS.
Map all JSON tokens (Color, Typography, Spacing, Radius, Elevation, Motion) to a global theme.
UI Architecture:
Sidebar Navigation: Fixed left bar organized by token categories and subcategories (e.g., Color - Text, Color - Background, Spacing - Layout).
Token Explorer (The Table): Create a 3-column data grid:
Token & Info: Full path (e.g., text.body.size-md), visual preview of the property, and a functional description.
Light Mode: Show the value + the Primitive reference (e.g., 4px or blue-500).
Dark Mode: Show the corresponding dark mode value.
Live Component Gallery: - Build a library of UI components (Buttons, Cards, Inputs, Toasts) that dynamically use the tokens.
Constraint: The components must respect the spacing tokens for paddings/gaps and typography tokens for all text properties.
Technical Logic:
Spacing & Radius: Convert numeric tokens to rem/px units correctly.
Typography: Ensure line-height is treated as an integer (pixels) as per our previous setup.
Tone: Analytical, clean, B2B SaaS aesthetic.
Instruction: Analyze the uploaded JSON directory first, then build the DesignSystemPortal component.

🏆 Suscríbete para más:
   / @oscarrgb