PROMPT_BASE44_DESIGN_MD

PROMPT PARA AGENTE DE BASE44

COPIA Y PEGA ESTO COMPLETO:

Desarrollar Generador Visual de DESIGN.md

Contexto

CREA STUDIO necesita una app web visual donde usuarios suben assets de marca (logos, screenshots) y el sistema genera automáticamente un archivo DESIGN.md completo.

Ya existe:

• Estándar de 9 secciones para DESIGN.md
• Plantilla base: /Cerebro/DESIGN_TEMPLATE.md
• Guía de uso: /Cerebro/GUIDE_DESIGN_MD.md

Lo que necesito

Desarrolla una app web full-stack con estas características:

Core Features

1. Upload de logo + screenshots

2. Extracción automática de:

3. Colores del logo (paleta dominante)

4. Colores de screenshots (superficies, texto, acentos)
5. Tipografía detectada

6. Espaciado y border radius

7. Editor visual manual (pickers de color, selectores de fuente, sliders)

8. Preview en vivo del sistema (hero, cards, buttons, inputs)
9. Generar y descargar DESIGN.md completo (9 secciones)

Tech Stack Sugerido

• Frontend: Next.js 14+ (App Router) + TypeScript + Tailwind CSS + shadcn/ui
• Backend: Next.js API Routes + Prisma + PostgreSQL
• AI Models: Gemini 1.5 Flash (análisis de imágenes) + GPT-4o (generación DESIGN.md)
• Deploy: Vercel

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/PUT /api/projects/[id] → CRUD proyectos

Flujo de Usuario

1. Upload logo + screenshots → análisis automático
2. Sistema muestra propuesta inicial
3. Usuario edita visualmente (colores, fuentes, spacing)
4. Preview en vivo de componentes
5. Click "Generar DESIGN.md" → descargar

Arquitectura

/new              → Crear proyecto (upload assets)
/[id]             → Editor visual (split view: editor | preview)
/[id]/preview     → Preview interactivo
/[id]/export      → Generar y descargar DESIGN.md

9 Secciones Obligatorias

El DESIGN.md generado SIEMPRE debe incluir:
1. Visual Theme & Atmosphere
2. Color Palette & Roles
3. Typography Rules
4. Component Stylings
5. Layout Principles
6. Depth & Elevation
7. Do's and Don'ts
8. Responsive Behavior
9. Agent Prompt Guide

Referencias

• Plantilla base: /Cerebro/DESIGN_TEMPLATE.md
• Guía completa: /Cerebro/GUIDE_DESIGN_MD.md
• Ejemplos reales: npx getdesign add stripe/apple/nike/spotify/vercel

MVP (Fase 1 - 2 semanas)

• [ ] Upload logo + screenshots
• [ ] Extracción colores logo
• [ ] Editor visual colores
• [ ] Preview colores
• [ ] Generar DESIGN.md (solo sección de colores)
• [ ] Descargar Markdown

V1 (Fase 2 - 4 semanas)

• [ ] Análisis screenshots (tipografía, spacing)
• [ ] Editor tipografía + spacing
• [ ] Preview interactivo componentes
• [ ] Generar DESIGN.md completo (todas las 9 secciones)
• [ ] Persistencia en DB
• [ ] Auth básica

Entregables

1. Código completo del proyecto (frontend + backend)
2. README con instrucciones de setup y deploy
3. Demo funcional con al menos 3 ejemplos completos
4. Documentación de componentes y flujo de datos

Preguntas clave (responde antes de empezar)

1. ¿Qué modelo de IA prefieres para análisis (Gemini/GPT-4o/Claude)?
2. ¿Auth: OAuth o email/password simple?
3. ¿SaaS público desde inicio o tool interna primero?
4. ¿Presupuesto mensual para APIs?

Importante: Este es un producto estratégico para CREA STUDIO. Si tiene éxito, puede convertirse en SaaS comercial. Código debe ser limpio, escalable y bien documentado.

Para ver el contexto completo: Leer /Cerebro/BRIEF_GENERADOR_DESIGN_MD.md

END OF PROMPT