Brief: Generador Visual de DESIGN.md

Cliente: CREA STUDIO S.A.S.
Proyecto: Herramienta visual para generar archivos DESIGN.md automáticamente
Contexto: Ya existen DESIGN_TEMPLATE.md y GUIDE_DESIGN_MD.md como base teórica

Resumen Ejecutivo

Necesitamos una app web visual donde un usuario sube assets de su marca (logos, screenshots, colores) y el sistema genera automáticamente un archivo DESIGN.md completo y estructurado, listo para ser usado por agentes AI.

El producto final será una herramienta SaaS interna (o eventualmente comercial) que permite a cualquier equipo definir su sistema de diseño sin escribir código o Markdown manualmente.

Contexto de Negocio

Qué es DESIGN.md:

Estándar creado por Google Stitch, adoptado por 69+ marcas líderes (Stripe, Apple, Nike, Vercel, etc.)
Es un archivo Markdown que define el sistema visual de una marca
Lo leen agentes AI para generar interfaces coherentes
Ya tenemos una plantilla base: DESIGN_TEMPLATE.md (9 secciones universales)

Problema que resuelve:

Definir un sistema de diseño es trabajo manual tedioso
Requiere conocimientos técnicos (Markdown, especificaciones visuales)
Los equipos no técnicos no pueden hacerlo solos

Propuesta de valor:

Upload visual → click → DESIGN.md descargable
Democratiza el diseño de sistemas para equipos sin designers
Perfecto para clientes de CREA STUDIO, proyectos internos, y eventualmente SaaS público

Especificaciones Funcionales

Core Features

Upload de Assets
Logo (PNG, SVG, JPG)
Screenshots de sitio/app actual (múltiples)
Archivos de fuente (TTF, OTF, WOFF2) - opcional
Imágenes de referencia (moodboards)
Extracción Automática
Colores del logo (análisis de paleta dominante)
Colores de screenshots (superficies, texto, acentos)
Tipografía detectada en screenshots (OCR + análisis visual)
Espaciado detectado (ratio de padding, margins)
Border radius identificado en UI
Edición Visual Manual
Pickers de color para cada rol (primary, surface, text, semantic)
Selector de fuentes (Google Fonts + custom uploads)
Sliders de spacing (sistema de 4px/8px base unit)
Preview en vivo de componentes (buttons, cards, inputs)
Preview del Sistema
Canvas interactivo mostrando:
- Hero section
- Cards
- Buttons (primary, secondary, ghost)
- Inputs
- Navigation
Cambios en tiempo real según se edita
Generación y Exportación
Generar DESIGN.md completo (9 secciones)
Descargar como archivo Markdown
Guardar proyecto para continuar después
Copy/paste directo al clipboard

Flujo de Usuario

Usuario entra → landing simple con "Crear nuevo proyecto"
Upload de logo + screenshots → sistema analiza automáticamente
Sistema muestra propuesta inicial de colores, fuentes, espaciado
Usuario edita visualmente (agrega, modifica, elimina colores, ajusta valores)
Preview en vivo muestra cómo quedaría la UI
Usuario está satisfecho → click "Generar DESIGN.md"
Descarga archivo listo para usar

Arquitectura Técnica

Frontend

Tech Stack Sugerido:

Next.js 14+ (App Router) - React framework con SSR/SSG
TypeScript - Type safety
Tailwind CSS - Estilos rápidos
shadcn/ui o Radix UI - Componentes UI de alta calidad
React Color o colord - Manipulación de colores
html2canvas - Generar screenshots de preview para análisis

Páginas:

/
/new           → Crear nuevo proyecto
/[id]          → Editor visual
/[id]/preview  → Preview interactivo del sistema
/[id]/export   → Generar y descargar DESIGN.md

Backend

Tech Stack Sugerido:

Next.js API Routes (o Vercel Functions)
Prisma + PostgreSQL - Persistencia de proyectos
Supabase - Auth, DB, storage (opcional, simplifica stack)

API Endpoints:

POST  /api/analyze/logo       → Extraer colores del logo
POST  /api/analyze/screenshot → Analizar tipografía, spacing, borders
POST  /api/generate/design-md  → Generar archivo final
GET   /api/projects/[id]       → Cargar proyecto guardado
PUT   /api/projects/[id]       → Guardar cambios

Modelos de IA

Modelos sugeridos:

Gemini 1.5 Flash / Pro - Análisis de imágenes (logos, screenshots)
GPT-4o - Generación del DESIGN.md estructurado
Claude 3.5 Sonnet - Refinamiento de contenido si se requiere

Integración:

Usar API de OpenAI/Google directamente o vía SDK
Cache de análisis para reducir costos
Streaming de respuestas para mejor UX

Referencias y Estándares

Archivos Existentes en CREA STUDIO

Léer y usar como base:

/Cerebro/DESIGN_TEMPLATE.md → Plantilla de 9 secciones
/Cerebro/GUIDE_DESIGN_MD.md → Guía de aplicación
/Cerebro/brands/*/brand.json → Datos de marca (Nutz, Clumps, Crea Studio)
/Cerebro/brands/*/brand.html → Visualizador web

Estructura de 9 Secciones (OBLIGATORIO)

El DESIGN.md generado SIEMPRE debe incluir:
1. Visual Theme & Atmosphere - Filosofía, personalidad
2. Color Palette & Roles - Colores con roles semánticos
3. Typography Rules - Fuentes, escala, pesos
4. Component Stylings - Botones, cards, inputs, nav
5. Layout Principles - Spacing, grid, border radius
6. Depth & Elevation - Sombras, niveles
7. Do's and Don'ts - Reglas y anti-reglas
8. Responsive Behavior - Breakpoints, mobile
9. Agent Prompt Guide - Referencia rápida para AI

Ejemplos de DESIGN.md Reales

Referencia de sistemas bien hechos:

Stripe (minimalista, sofisticado)
Apple (minimalista, fotografía)
Nike (monocromático, bold)
Spotify (dark, inmersivo)
Vercel (engineer-focused, monochrome)

Están disponibles vía CLI:

npx getdesign add stripe
npx getdesign add apple
npx getdesign add nike
npx getdesign add spotify
npx getdesign add vercel

Prioridades de Desarrollo

MVP (Fase 1 - 2 semanas)

Must Have:

[ ] Upload de logo y screenshots
[ ] Extracción automática de colores (logo)
[ ] Formulario visual para editar colores manualmente
[ ] Preview básico de colores
[ ] Generar DESIGN.md base (solo sección de colores)
[ ] Descargar archivo Markdown

V1 (Fase 2 - 4 semanas)

Should Have:

[ ] Análisis de screenshots (tipografía, spacing)
[ ] Editor de tipografía (fuentes, escala)
[ ] Editor de spacing (sistema de 4px/8px)
[ ] Preview interactivo de componentes (buttons, cards)
[ ] Generar DESIGN.md completo (todas las 9 secciones)
[ ] Guardar/proyectos en DB
[ ] Auth básica (email/password)

V2 (Fase 3 - 6+ semanas)

Nice to Have:

[ ] Extracción automática de tipografía (OCR)
[ ] Detección de border radius
[ ] Sugerencias de IA basadas en ejemplos de marcas similares
[ ] Templates predefinidos (Stripe-style, Apple-style, etc.)
[ ] Exportar a brand.json + brand.html simultáneamente
[ ] Colaboración en tiempo real
[ ] Historial de versiones

Estilo Visual y UX

Personalidad de la app:

Clean, profesional, minimalista
Inspirada en Vercel/Linar (developer-friendly)
Acción principal clara: "Upload assets" → "Generate DESIGN.md"

Colores sugeridos:

Primary: #000000 (Vercel black) o #0066FF (tech blue)
Background: #FFFFFF (white)
Text: #171717 (near-black)

UI Patterns:

Drag & drop zones para uploads
Color swatches interactivos
Live preview a la derecha del editor (split view en desktop)
Progress bar durante el análisis
Modal de éxito con descarga directa

Restricciones y Consideraciones

Técnicas:

Debe funcionar en browsers modernos (Chrome, Firefox, Safari, Edge)
Responsive (mobile, tablet, desktop)
Performance rápida (análisis no debe bloquear UI)

Costos:

API calls de IA → optimizar con caching
Storage → usar S3 o servicio similar
DB → PostgreSQL managed (Railway, Supabase, Neon)

Mantenimiento:

El estándar de 9 secciones NO cambia (stable)
Templates de referencia pueden agregarse fácilmente

Entregables Esperados

Código completo del proyecto
Frontend (Next.js, React, TypeScript)
Backend (API Routes, integración IA)
Deploy instructions (Vercel/Netlify)
README detallado
Cómo correr localmente
Arquitectura del sistema
Configuración de environment variables
Estructura de DB
Documentación de componentes
Páginas del sistema
Flujo de datos
Integración con APIs de IA
Demo funcional
Al menos 3 ejemplos completos de uso
DESIGN.md generados de marca real (puede ser Crea Studio)

Comunicación y Preguntas

Preguntas clave:
1. ¿Qué modelo de IA prefieres para el análisis (Gemini, GPT-4o, Claude)?
2. ¿Necesitamos auth OAuth o simple email/password es suficiente?
3. ¿Queremos SaaS público desde el inicio o tool interna primero?
4. ¿Presupuesto aproximado para APIs mensuales?

Aclaraciones solicitadas:

Confirmar que usaremos los 3 archivos de referencia (DESIGN_TEMPLATE.md, GUIDE_DESIGN_MD.md, brand.html)
Definir si usaremos Supabase o implementación propia

Métricas de Éxito