// DESIGN

Design System Starter

Crea las bases de un design system escalable con tokens, componentes y documentación.

AvanzadoChatGPTClaude2.3k COPIAS

PROMPT.TXT

Actúa como un design systems architect con experiencia en Figma, Storybook y sistemas de diseño empresariales. Define las bases completas de un design system para:

**Producto:** [NOMBRE_DEL_PRODUCTO]
**Industria:** [INDUSTRIA]
**Plataformas:** [Web / iOS / Android / Todas]
**Stack de implementación:** [React / Vue / Angular / Flutter / Otro]
**Tamaño del equipo de diseño:** [NÚMERO_DISEÑADORES]
**Madurez actual:** [Sin design system / Librería básica / System existente a mejorar]

**Define el design system con:**

**1. Design Tokens (base del sistema):**
- Color tokens: paleta base, paleta semántica (primario, secundario, éxito, error, advertencia, info), modos claro/oscuro
- Tipografía tokens: escala tipográfica (xs a 5xl), familias, pesos, line heights
- Spacing tokens: escala de espaciado (4px base)
- Border radius tokens
- Shadow/elevation tokens
- Motion tokens: duraciones y curvas de easing

**2. Componentes fundamentales (Atoms):**
Para cada componente: props/variants, estados (default, hover, focus, disabled, error), accesibilidad (ARIA, keyboard nav), código de referencia.

Lista de componentes a definir: Button, Input, Label, Badge, Avatar, Icon, Divider.

**3. Componentes compuestos (Molecules):**
Card, Form Group, Modal, Toast/Notification, Dropdown, Navigation Item.

**4. Principios de accesibilidad:**
WCAG 2.1 AA minimum requirements para este sistema.

**5. Documentación y governance:**
- Cómo nombrar componentes y tokens (convención de naming)
- Proceso de contribución (cómo se añaden nuevos componentes)
- Versionado del sistema
- Changelogs

**6. Roadmap de implementación:**
Prioridad de qué construir primero (MVP del design system) vs fases posteriores.

// INSTRUCCIONES DE USO

1Copia el prompt completo con el botón de arriba.
2Reemplaza todas las variables [EN_MAYÚSCULAS] con tu información real.
3Pégalo en ChatGPT, Claude o Gemini y envíalo.
4Revisa el resultado e itera ajustando los detalles según tu caso.

[ AD · 728×90 ]

// PROMPTS RELACIONADOS

Brief Creativo Completo

Crea un brief creativo detallado que alinea a diseñadores, creativos y stakeholders desde el inicio.

INTERMEDIOChatGPTClaude+13.1k×

Guía de Investigación de Usuarios

Diseña un proceso completo de investigación UX con guiones de entrevista, encuestas y análisis.

AVANZADOChatGPTClaude1.9k×

Auditoría UX de Producto Digital

Evalúa la experiencia de usuario de tu app o web e identifica los principales problemas.

AVANZADOChatGPTClaude2.3k×

Actúa como un design systems architect con experiencia en Figma, Storybook y sistemas de diseño empresariales. Define las bases completas de un design system para: **Producto:** [NOMBRE_DEL_PRODUCTO] **Industria:** [INDUSTRIA] **Plataformas:** [Web / iOS / Android / Todas] **Stack de implementación:** [React / Vue / Angular / Flutter / Otro] **Tamaño del equipo de diseño:** [NÚMERO_DISEÑADORES] **Madurez actual:** [Sin design system / Librería básica / System existente a mejorar] **Define el design system con:** **1. Design Tokens (base del sistema):** - Color tokens: paleta base, paleta semántica (primario, secundario, éxito, error, advertencia, info), modos claro/oscuro - Tipografía tokens: escala tipográfica (xs a 5xl), familias, pesos, line heights - Spacing tokens: escala de espaciado (4px base) - Border radius tokens - Shadow/elevation tokens - Motion tokens: duraciones y curvas de easing **2. Componentes fundamentales (Atoms):** Para cada componente: props/variants, estados (default, hover, focus, disabled, error), accesibilidad (ARIA, keyboard nav), código de referencia. Lista de componentes a definir: Button, Input, Label, Badge, Avatar, Icon, Divider. **3. Componentes compuestos (Molecules):** Card, Form Group, Modal, Toast/Notification, Dropdown, Navigation Item. **4. Principios de accesibilidad:** WCAG 2.1 AA minimum requirements para este sistema. **5. Documentación y governance:** - Cómo nombrar componentes y tokens (convención de naming) - Proceso de contribución (cómo se añaden nuevos componentes) - Versionado del sistema - Changelogs **6. Roadmap de implementación:** Prioridad de qué construir primero (MVP del design system) vs fases posteriores.