Volver a Open Class

Hands-On #2

De idea a prototipo completo

Genera flujos completos de 5 pantallas para diferentes industrias. Cada prompt incluye las especificaciones para crear una experiencia coherente de principio a fin.

Plataforma para usar

Prompts para herramientas

Prompts especializados para crear herramientas de diseño. Selecciona la categoría que necesites.

01 UX Tool - Design System Manager
Pantalla 1 - Dashboard de Componentes:
"Diseña dashboard de design system con sidebar izquierdo mostrando categorías (Foundations, Components, Patterns, Templates). Área principal con grid de componentes cards: cada card con preview del componente, nombre, versión actual, status badge (stable/beta/deprecated), última actualización, usage stats '142 instances'. Color-coding: verde componentes actualizados, amarillo necesitan update, rojo deprecated. Search bar potente arriba. Quick filters: plataforma (iOS/Android/Web), categoría, status. Stats overview arriba: total componentes, coverage %, issues abiertos."

Pantalla 2 - Detalle de Componente:
"Crea vista detallada split-screen: izquierda preview interactivo del componente con variantes en tabs (default, hover, active, disabled, error). Controles para ajustar props en tiempo real (size, color, state). Derecha: documentación estructurada con tabs: Usage (cuándo usar, cuándo no), Anatomy (partes del componente etiquetadas), Props (tabla de propiedades con tipos), Accessibility (WCAG compliance, keyboard nav), Code (snippets por plataforma). Version history timeline abajo. Comments section para feedback del equipo."

Pantalla 3 - Audit de Inconsistencias:
"Diseña herramienta de auditoría mostrando mapa de calor de archivos Figma con inconsistencias detectadas. Lista de issues agrupados por severidad: crítico (componentes sin vincular), alto (estilos locales vs sistema), medio (naming inconsistente). Cada issue card con: screenshot del problema, ubicación (file/page/frame), sugerencia de fix automático, botón 'Fix now' o 'Ignore'. Bulk actions: 'Fix all auto-fixable'. Progress bar de design system adoption por proyecto. Export reporte PDF para stakeholders."

Pantalla 4 - Component Request Workflow:
"Crea formulario de solicitud de nuevo componente con wizard multi-step: 1) '¿Qué necesitas?' (template de user story), 2) 'Context' (upload screenshots/mockups del caso de uso), 3) 'Similar patterns' (sistema sugiere componentes existentes que podrían servir), 4) 'Priority & impact' (selector de urgencia, cuántos proyectos lo necesitan). Review panel con votación del equipo. Status tracking: submitted → under review → in development → ready. Integration con Jira/Linear para crear tickets."

Pantalla 5 - Analytics de Adopción:
"Diseña dashboard de métricas con gráficas grandes: adoption rate over time (línea ascendente), components más usados (bar chart horizontal), proyectos con mayor/menor cobertura (scatter plot), tiempo promedio de implementación por componente. Heatmap de uso por plataforma. Red de dependencias de componentes (graph visualization). Exportable data para reports. Filters por fecha range, equipo, producto. Alertas configurables: 'Component usage dropped 40%'. Recommendations: 'Deprecate Button v1, 0% usage last 60 days'."
02 UX Tool - User Research Repository
Pantalla 1 - Research Library:
"Diseña repositorio con vista de grid/lista togglable de estudios: cada card con thumbnail de artefacto clave, título del estudio, fecha, metodología tag (usability test, interview, survey), participants count, researcher avatar, proyecto asociado. Filtros avanzados sidebar: fecha range, metodología, usuario tipo, producto, status. Search semántica: buscar por hallazgos ('users struggle with checkout'). Saved searches. Quick stats arriba: total studies, insights generated, recommendations implemented. Pestañas: All Studies, My Studies, Starred, Recent."

Pantalla 2 - Study Detail:
"Crea vista comprehensiva con tabs: Overview (objetivos, metodología, timeline, team), Participants (tabla con demographics, recruitment screener), Protocol (discusion guide, tasks, materials), Findings (insights organizados por tema con severity tags), Recommendations (priorizadas por impacto/esfuerzo en matriz 2x2), Artifacts (videos, transcripts, notes, recordings). Cada insight con: descripción, evidencia (video clips, quotes), frecuencia observada, impact rating, related recommendations. Tagging system para búsqueda cross-study."

Pantalla 3 - Insight Synthesis Board:
"Diseña canvas tipo Miro para affinity mapping colaborativo. Sticky notes con quotes/observaciones draggable. Color-coding por participante o tema. Clustering automático con AI suggestions. Drawing tools para agrupar. Voting dots para priorizar insights con el equipo. Export canvas como imagen o Figma. Real-time collaboration con avatares de team members. Templates precargados: empathy map, journey map, affinity diagram. Integration con transcripts: highlight text → create sticky. Time-based filtering para replay del proceso de síntesis."

Pantalla 4 - Participant Database:
"Crea CRM de participantes con tabla filterable: nombre, email, demographics (edad, género, ocupación, ubicación), segmento/persona, studies participadas (con links), ratings dejados por researchers, disponibilidad, consent status, incentivo preferido. Advanced search: 'Android users in SF who work in fintech'. Bulk actions: invite to study, send incentivo. Calendar view mostrando availability. Recruitment pipeline: sourced → screened → scheduled → completed. GDPR compliance tools: export data, delete participant. Notes privadas por participante."

Pantalla 5 - Insights Dashboard:
"Diseña vista ejecutiva con widgets: total insights por producto/feature, insights trends over time (detectar patrones emergentes), top pain points rankeados por frecuencia, recommendations status tracker (proposed/in progress/shipped), impact metrics si disponibles (before/after launch de fixes). Tag cloud de temas recurrentes. 'Research coverage' heatmap mostrando features con/sin research. Slack/email digest configurables. Export PowerPoint pre-formateado para stakeholders. Link insights a product roadmap items."
03 UX Tool - Usability Testing Platform
Pantalla 1 - Test Setup Wizard:
"Diseña wizard de creación de test con steps claros: 1) 'Test type' (moderated/unmoderated, remote/in-person) con comparativa de pros/cons, 2) 'Target audience' (persona selector + demographic filters), 3) 'Tasks' (template library: first-use, checkout, search, navigation), 4) 'Success metrics' (completion rate, time on task, error rate, SUS score), 5) 'Schedule' (immediate/scheduled, duration, participants needed). Preview del test flow. Pricing calculator si plataforma cobra por uso. Save as template para futuros tests."

Pantalla 2 - Task Builder:
"Crea interfaz de construcción de tareas con blocks arrastrables: scenario text, starting URL, success criteria (llegó a X page, completó Y action), follow-up questions (rating scales, open-ended), navigation paths esperados. Logic branching visual: 'If user selects A → show question B'. Timer settings por tarea. Randomization options. Preview mode simulando participant view. Templates precargados: 'Add to cart task', 'Account creation', 'Search and filter'. Accessibility checks: reading level, language clarity."

Pantalla 3 - Live Session Monitor:
"Diseña dashboard para observar sessions en vivo (unmoderated tests). Grid de participantes activos con mini-screens mostrando su pantalla. Click para expandir y ver full session: screen recording, front camera (si permite), mouse movements heatmap en tiempo real, audio transcription live, facial expressions analysis (frustration/confusion detection). Chat con participante si moderated. Timecoded notes input. Red flags auto-detected: stuck >2min, rage clicks, back button spam. Ability to intervene o end test early si problemas técnicos."

Pantalla 4 - Results Analysis:
"Crea dashboard de resultados con métricas clave en cards grandes: completion rate (80% con trend), avg time on task (2:34 con benchmark comparison), error rate (15%), SUS score (68/100). Task-level breakdown table: cada task con success %, avg duration, issues encountered. Heatmaps agregados: clicks, scrolls, attention. Video highlights reel: clips de momentos clave (fails, delights, confusion). Quotes wall con participant verbatims. Path analysis: sankey diagram de navigation flows. Export presentation-ready report."

Pantalla 5 - Recommendations Generator:
"Diseña asistente AI que analiza resultados y sugiere fixes. Lista priorizada de issues con: descripción problema, severity (basado en impact x frequency), evidencia (video clips, data), recomendaciones específicas con mockups sugeridos, effort estimate. Cada recomendación con voting system para equipo. Link a similar issues en tests previos. Create Jira/Linear ticket directamente con toda la context. Impact projection: 'Fixing this could improve completion rate by ~12%'. Alternative solutions ranked por feasibility."
04 UX Tool - Information Architecture Tester
Pantalla 1 - Card Sorting Setup:
"Diseña configuración de estudio de card sorting con dos modos: open (usuarios crean categorías) vs closed (categorías predefinidas). Input de cards: bulk paste de lista, import CSV, o manual add uno por uno. Cada card con título y descripción opcional. Para closed sort: definir categorías target con descripciones. Settings: shuffle cards, limit time, allow duplicates. Randomization de orden. Participant instructions editor con preview. Recruitment: panel propio vs external link para share. Estimado '15-20 participants recommended'."

Pantalla 2 - Sorting Interface (Participant View):
"Crea interfaz limpia para participantes: cards arrastrables en área unsorted izquierda, categorías (columnas) a derecha para drop. En open sort: '+New category' button prominente con inline editing. Card hover muestra descripción completa. Progress indicator: '12/40 cards sorted'. Undo/redo buttons. Mobile-friendly: tap card → select category. Instructions collapsible arriba. Optional: think-aloud prompts 'Why did you put this here?'. Auto-save progress. Graceful handling si participant abandona (partial data saved)."

Pantalla 3 - Dendrograma Analysis:
"Diseña visualización de dendrograma (árbol de agrupamiento) mostrando cómo participantes agruparon cards. Cards en nodos, líneas conectando según similarity. Threshold slider para ver agrupamientos en diferentes niveles de granularidad. Heatmap complementario: matriz de co-ocurrencia (qué cards fueron agrupadas juntas frecuentemente). Color-coding por strength of association. Click en card para ver todos los paths donde terminó. Outliers identificados: cards sin consenso de categoría. Export como imagen para documentación."

Pantalla 4 - Tree Testing:
"Crea interfaz de tree testing: participante ve solo una tarea ('Where would you find X?') y estructura de árbol colapsada. Click para expandir nodos uno a uno. Radio buttons para seleccionar respuesta final. Success: seleccionó nodo correcto. Metrics tracked: directness (path efficiency), time, backtracking count. Multiple tasks en secuencia. Results dashboard: success rate por tarea, donde faltaron usuarios (lostness heatmap), first click analysis (correcto/incorrecto), common wrong paths (sankey), optimal vs actual paths comparison side-by-side."

Pantalla 5 - IA Recommendations:
"Diseña output con suggested information architecture basada en resultados. Visualización de sitemap recomendado con: categorías propuestas (basadas en clustering), contenido bajo cada categoría, alternative labelings con participant vocabulary, confidence scores por sección. Side-by-side comparison: current IA vs proposed IA con metrics projection. Highlight problemas: orphan content, ambiguous labels, deep buried content. Interactive: drag nodes para ajustar. Export como sitemap (XML), Figma file, o Miro board. Iterations tracker: test IA v1 → iterate → test v2."
05 UX Tool - Journey Mapping Collaborative Canvas
Pantalla 1 - Template Gallery:
"Diseña biblioteca de templates de journey maps: Customer Journey Map (B2C), Service Blueprint (B2B), Experience Map (omnichannel), User Story Map (agile). Cada template como card grande con: preview thumbnail, descripción de cuándo usar, tiempo estimado de workshop, participants recomendados, output examples. Quick start con blank canvas. Industry-specific templates: e-commerce, SaaS, healthcare, financial. Filtros por: metodología, complejidad, time commitment. Clone from previous projects. Import from Miro/FigJam. Collaborative workspace setup: invite team members, set permissions."

Pantalla 2 - Journey Canvas (Workshop Mode):
"Crea canvas infinito con swimlanes predefinidas: Phases (arriba), User Actions, Thoughts, Emotions (emoji scale), Pain Points (red), Opportunities (green), Touchpoints, Backstage (internal processes). Sticky notes con color-coding. Cursor presence de collaborators en tiempo real. Drawing tools para conectar elementos. Emoji reactions. Comments threading. Timer para time-boxing actividades. Templates de stickies: pain point, opportunity, quote. Bulk actions: group, align, distribute. Frames para secciones. Background grid. Zoom fit-to-screen. Auto-layout options."

Pantalla 3 - Persona Selector:
"Diseña panel lateral para seleccionar/switch entre personas cuyo journey se está mapeando. Cada persona card con: foto, nombre, key demographics, goals, frustrations. Multi-persona view: overlay journeys de diferentes users para comparar (color-coded). 'Journey for [Persona]' highlighted arriba del canvas. Quick switch con keyboard shortcuts. Link a full persona document. Edit persona inline. Add new persona on-the-fly durante workshop. Usage stats: tiempo mapeando cada persona. Export journey por persona individually o comparativo."

Pantalla 4 - Research Evidence Panel:
"Crea sidebar con research snippets vinculables al journey: video clips de user interviews, quotes, survey data, analytics screenshots, support tickets, NPS scores. Drag evidencia al canvas como linked notes. Color-coding por fuente. Timestamp en videos. Search evidencia: 'frustrated with checkout'. Filter por estudio, fecha, participant. Each evidence piece con metadata: source, date, participant, study. Pin key insights. Vote on most impactful evidencias. Export journey con evidencia como appendix PDF. AI suggestions: 'This pain point appears in 8 interviews'."

Pantalla 5 - Opportunity Prioritization:
"Diseña vista de synthesis post-workshop: todas las opportunities identificadas como cards en matriz 2x2 (impact vs effort). Drag para reposicionar. Color-coding por journey phase. Click card para ver context en journey. Voting system: team members vote prioridades. Filter por: quick wins, strategic, backlog. Link opportunities a Jira/Linear/Asana. Export action plan: table con opportunity, owner, timeline, success metrics. ROI calculator para high-impact items. Dependencies mapping: 'Fix A antes de B'. Roadmap view: Q1-Q4 timeline. Share-out deck auto-generated con screenshots del journey + prioritized opportunities."
01 UI Tool - Design Token Manager
Pantalla 1 - Token Explorer:
"Diseña interfaz tipo IDE con tree view izquierdo mostrando jerarquía de tokens: Colors (→ Brand, Semantic, Component-specific), Typography (→ Font families, Sizes, Weights), Spacing (→ Scale), Shadows, Borders, Radii, Motion. Cada token expandible. Área principal muestra token seleccionado con: preview grande, value actual ($color-primary: #FF6B00), alias chain si apunta a otro token, usage count, computed value final. Inspector de variaciones: light/dark mode toggle en vivo. Search potente con regex support. Recent tokens. Favorites starred."

Pantalla 2 - Token Editor:
"Crea editor con dual view: código JSON/YAML izquierda (syntax highlighting), preview visual derecha actualizando en real-time. Para color tokens: color picker avanzado con WCAG contrast checker vs otros colores, accessibility rating, suggested pairings. Para typography: live text preview en múltiples sizes, line-height calculator. Para spacing: visual scale preview con boxes. Validation: errores si valores inválidos, warnings si breaks naming convention. Version control: commit message, diff view con previous version. Export options: CSS variables, SCSS, JS object, Figma styles."

Pantalla 3 - Theme Builder:
"Diseña interfaz de generación de temas: base theme selector (light/dark/high-contrast), brand color input (primary, secondary), auto-generate paleta completa con tints/shades. Side-by-side preview de UI components usando theme: buttons, cards, forms, todos actualizándose live. Accessibility checker: todos los pares de foreground/background rated WCAG AA/AAA. Manual overrides permitidos para cualquier token. Semantic token mapping: 'surface-primary → $color-neutral-100 in light, $color-neutral-900 in dark'. Export theme package. Theme variations: save winter/summer/brand-event themes."

Pantalla 4 - Token Documentation:
"Crea auto-generated documentation site con cada token categorizado. Cada token page con: visual examples (color swatches, typography specimens), usage guidelines ('Use $color-error for destructive actions'), do's and don'ts con visual examples, code snippets por plataforma (React, iOS, Android), component usage ('Used in Button, Alert, Badge'), deprecation warnings si aplica. Search indexado. Versioned docs: v1.0, v2.0. Changelog de cambios entre versiones. Embed tokens site via iframe para share con developers."

Pantalla 5 - Sync Dashboard:
"Diseña command center para mantener tokens sincronizados entre herramientas. Status cards: Figma (synced 2 min ago, green), Code repo (out of sync, orange warning, 'Push changes'), Design system site (synced). Logs de sync actividad. Manual sync triggers: 'Pull from Figma', 'Push to code', 'Sync to [design tool]'. Conflict resolution UI cuando valores difieren: side-by-side comparison, choose source of truth. CI/CD integration status: Github Actions passing/failing. Usage analytics: tokens changed most frequently, unused tokens candidates for deprecation."
02 UI Tool - Responsive Layout Inspector
Pantalla 1 - Device Preview Grid:
"Diseña workspace con múltiples viewports simultáneos: iPhone 15 Pro, Pixel 8, iPad Pro, Desktop 1440px, Desktop 1920px dispuestos en grid. Cada viewport muestra el mismo diseño responsivamente. Sincronización: scroll en uno, todos scrollean. Interaction en uno, todos reaccionan. Toggle views on/off. Custom viewport añadir: ingresar width/height. Orientación rotate para mobile/tablet. Status bar overlays opcionales. Device frames toggle. Zoom controls individual por viewport. Screenshot all devices at once. Highlight differences tool."

Pantalla 2 - Breakpoint Editor:
"Crea timeline horizontal mostrando breakpoints: 320px (mobile-s), 375px (mobile-m), 768px (tablet), 1024px (desktop), 1440px (desktop-l). Drag breakpoint markers para ajustar. Add custom breakpoints. Viewport ruler arriba mostrando size actual mientras arrastras. Rules panel: define layout behavior en cada range (columns, padding, font-sizes). Visual diff: overlay de layout anterior vs nuevo cuando cambias breakpoint. Test tool: slowly drag viewport width para ver layout adaptarse smoothly. Export breakpoints como CSS media queries, SCSS mixins."

Pantalla 3 - Layout Issues Detector:
"Diseña auditor automatizado de problemas responsive: overflow horizontal (scrollbars detectados), texto cortado, imágenes distorsionadas (aspect ratio incorrecto), tap targets < 44px, colisiones de elementos. Cada issue como card con: severity (critical/warning), screenshot del problema en device specific, ubicación (selector CSS), sugerencia de fix. Bulk view todas issues. Filter por device, severity. 'Fix now' lleva a inspector con element highlighted. Re-scan tras hacer cambios. Issue trends: 'Fixed 12, introduced 3 new'."

Pantalla 4 - Component Responsive Variants:
"Crea biblioteca de componentes mostrando todas las variantes responsive lado a lado. Ej: 'Navigation' component → mobile (hamburger menu), tablet (híbrido), desktop (full menu). Cada variante con: viewport donde aplica, prop overrides por breakpoint, estados (default, hover, active). Interactive playground: ajusta props, ve cambios across devices. Usage stats: 'Mobile variant usado en 45 screens'. Export design specs por variante. Annotations de comportamiento: 'Menu items collapse into drawer <768px'. Design token usage per variant."

Pantalla 5 - Performance Impact Preview:
"Diseña dashboard de performance metrics por viewport: bundle size affected, render time (mobile slower), image loading (showing responsive image sizes), font loading strategies. Visual budget tracker: 'Mobile bundle: 234KB / 250KB limit'. Suggestions: 'Lazy load carousel images on mobile', 'Use system fonts on mobile to save 45KB'. Lighthouse scores simulation. Network throttling: 3G, 4G, wifi. Critical rendering path visualizado. Before/after optimizations comparison con FPS metrics."
03 UI Tool - Animation Timeline Editor
Pantalla 1 - Animation Selector:
"Diseña biblioteca de animaciones del proyecto: lista con thumbnails animados (auto-playing previews), nombre, duración, easing, componente donde se usa, categoría (micro-interaction, page transition, loading, feedback). Filter por: duration range, category, complexity. Sort por: recent, most used, alphabetical. Quick actions: duplicate, edit, delete, export. Usage counter: 'Used in 8 components'. Tags: #onboarding #success #error. Create new animation templates: entrance, exit, morph, scale, fade, slide. Import from LottieFiles or code."

Pantalla 2 - Timeline Editor:
"Crea interfaz tipo After Effects con timeline horizontal abajo: múltiples layers (elemento1, elemento2, elemento3), keyframes como diamonds en timeline, properties animadas (x, y, opacity, scale, rotate) expandibles por layer. Playhead draggable. Preview pane arriba mostrando animación. Controls: play/pause, loop, speed (0.5x-2x). Snap to keyframes. Easing curves editor (bezier handles). Add keyframe en property. Onion skinning para ver frames anteriores. Current time indicator con frame number. Duration ruler con markers."

Pantalla 3 - Easing Curve Library:
"Diseña catálogo de easing functions con preview visual: linear, ease-in, ease-out, ease-in-out, custom cubic-bezier. Cada easing como card con: curve visualization, mathematical formula, use case ('ease-out for exits'), animated example (ball bouncing con esa curva). Favorites section con project's most used easings. Custom curve editor: drag bezier handles, see numeric values, test en live preview. Save custom as preset. Material Design, iOS, Framer Motion presets importables. Comparison mode: A/B test dos easings lado a lado."

Pantalla 4 - State Transitions:
"Crea visual state machine para componentes: estados como nodos (default, hover, active, disabled, loading, error, success), transiciones como arrows entre ellos con animation specs. Click arrow para edit: duration, easing, properties animadas. Interactive preview: trigger transiciones manualmente o auto-cycle. Define gestures que triggean transiciones (tap, swipe, long-press). Conditional transitions: 'if loading >2s → show skeleton'. Export como code (React Spring, Framer Motion, CSS). Validate no hay estados unreachable."

Pantalla 5 - Performance Analyzer:
"Diseña profiler mostrando FPS graph durante animación: drop below 60fps highlighted en red. Frame-by-frame analysis: cuánto tarda cada frame, bottlenecks identificados (layout thrashing, paint operations caras). Recommendations: 'Use transform instead of left/top for 60fps', 'Add will-change for smoother animation'. Comparison tool: hardware simulation (low-end mobile vs high-end desktop). Layer compositing visualizado: qué layers crean new compositor layers. GPU usage. Before/after optimization comparison con FPS metrics."
04 UI Tool - Typography Scale Generator
Pantalla 1 - Scale Calculator:
"Diseña calculadora de escala tipográfica con inputs: base size (16px default), scale ratio selector (predefined: Minor Third 1.2, Major Third 1.25, Perfect Fourth 1.333, Golden Ratio 1.618, o custom ratio). Output: preview de 10 sizes generados (12px caption, 14px body-small, 16px body, 20px h6, 25px h5, etc.) con labels. Live preview de cada size con Lorem Ipsum. Rounding options: round to pixels, 4px multiples, or precise decimals. Export as CSS variables, tokens JSON, Figma styles. Quick compare: overlay different scales side-by-side."

Pantalla 2 - Type Specimen:
"Crea showcase de familia tipográfica elegida: alphabet en mayúsculas/minúsculas, números, caracteres especiales, todos en tamaño large. Different weights visualizados (Thin 100 → Black 900) cada uno con sample texto. Glyph inspector: click letra para ver detailed metrics (x-height, cap-height, ascenders/descenders, baseline). OpenType features toggle: ligatures, small-caps, stylistic alternates, old-style figures. Language support check: test strings en español, português, etc. Variable font axes si aplica: weight slider, width slider con live preview."

Pantalla 3 - Pairing Tester:
"Diseña interfaz para probar pairings de fuentes: heading font (dropdown con previews) + body font (otro dropdown). Live preview con UI mocks: hero section, card, form, mostrando jerarquía. Harmony score calculado basado en: contrast (sans + serif es bueno), x-height similarity, visual weight balance. Suggestions panel: 'Popular pairings', 'Try similar fonts'. Font metadata: classification (humanist, geometric, grotesque), mood tags, designed by. Save pairings como presets. Export pairing specs: sizes, weights usados en cada contexto."

Pantalla 4 - Vertical Rhythm Calculator:
"Crea herramienta de line-height y spacing: input baseline grid (8px típico), auto-calculate line-heights para cada font size que alineen al grid. Visual grid overlay mostrando cómo texto se alinea. Spacing scale generado basado en baseline (8, 16, 24, 32, 40px). Margin/padding recommendations para mantener ritmo vertical. Examples con real UI: headings + párrafos alineados perfectamente. Deviation checker: highlights elementos que rompen grid. Export spacing tokens. Before/after: diseño sin vertical rhythm vs con."

Pantalla 5 - Accessibility Checker:
"Diseña auditor de tipografía con checks: minimum font sizes (mobile 16px for body), line-height ratios (1.5 for body, 1.2 for headings), line length (45-75 characters), contrast ratios vs background colors (WCAG AA/AAA), font weight legibility (no thin fonts <16px). Each check con pass/fail status, explanation, fix suggestion. Readability scores: Flesch reading ease, grade level. Dyslexia-friendly check: sans-serif, adequate spacing, no italics for body. Senior-friendly check: larger sizes, higher contrast. Export accessibility report para stakeholders."
05 UI Tool - Icon System Manager
Pantalla 1 - Icon Library Grid:
"Diseña galería de íconos en grid con múltiples vistas: 16x16, 24x24, 32x32, 48x48 toggleables. Cada ícono como card: preview en hover mostrando todas las variants (filled, outline, sharp, rounded), nombre, tags, usage count. Multi-select para bulk actions. Search potente: por nombre, tag, o dibujar sketch de ícono (AI search). Filters: category (arrows, social, e-commerce), style (duotone, linear, solid), recientes, favorites. Sort by: alphabetical, most used, recently added. Create new icon: blank canvas o import SVG. Grid/list view toggle."

Pantalla 2 - Icon Editor:
"Crea editor vectorial simplificado: canvas con grid, vector paths editables con pen tool, geometric shapes (circle, rect, polygon), boolean operations (union, subtract, intersect), stroke width control, fill/stroke toggle. Sidebar con layers panel. Snap to pixel grid crucial para sharp renders. Preview en múltiples sizes simultáneamente (¿se ve bien en 16px?). Optical adjustments: ligeramente más bold en sizes pequeños. Export options: SVG optimized, React component, PNG @1x-3x. Accessibility: add title/desc para screen readers."

Pantalla 3 - Consistency Checker:
"Diseña auditor de consistencia cross-icon library: grid size violations (íconos que no llenan uniformemente el canvas), stroke width inconsistencies (algunos 2px otros 1.5px), style mismatches (mayoría outline pero algunos filled), naming convention violations (inconsistent prefixing). Visual comparison: overlay múltiples íconos para verificar optical alignment. Color usage: detectar íconos con hardcoded colors vs usando currentColor. Export audit report. Batch fix tools: 'Normalize all stroke widths to 2px', 'Rename using convention [category]-[name]'."

Pantalla 4 - Icon Documentation:
"Crea auto-generated docs por ícono: preview grande, código snippet (React, Vue, Svelte, HTML), instalación instructions, props available (size, color, className), usage guidelines ('Use for positive actions'), semantic meaning, accessibility considerations (need aria-label), related íconos (alternatives o variations). Do's and don'ts con visual examples: correcto vs incorrecto context de uso. Version history: changelog si ícono fue updated. Contribution stats: designed by, date added. Download options: SVG, PNG, PDF, copy JSX."

Pantalla 5 - Integration Hub:
"Diseña dashboard de deployment: Figma sync status (last synced, # icons synced, conflicts), NPM package versión (v2.4.1, publish new version button), CDN link generado (unpkg, jsDelivr), design system documentation embedded status, CI/CD pipeline health. Usage analytics: most downloaded íconos, platforms usando biblioteca (web 45%, iOS 30%, Android 25%). Migration guides cuando breaking changes. Deprecation warnings para íconos que se van a retirar. Community requests: users pueden suggest new íconos con voting system. Release notes generator automático."

Prompts por industria

Cada prompt contiene las instrucciones para generar 5 pantallas de un flujo completo. Copia el prompt completo y pégalo en Google AI Studio.

01 Fintech - App de Microinversiones (Millennials Latinos)
Pantalla 1 - Splash/Bienvenida:
"Diseña una pantalla de bienvenida para app de microinversiones. Fondo con gradiente violeta a azul, ilustración isométrica de una alcancía digital flotante con monedas cayendo. Logo centrado arriba, headline 'Invierte desde $10' en tipografía bold, subheadline explicativo, y botón CTA 'Comenzar' en amarillo neón. Estilo moderno fintech."

Pantalla 2 - Registro:
"Crea pantalla de registro con campos minimalistas: nombre, email, teléfono. Cada input con iconos a la izquierda (persona, sobre, teléfono). Progress bar arriba mostrando paso 1/3. Ilustración pequeña de un cohete en la esquina superior derecha. Botón continuar deshabilitado hasta completar campos. Checkbox de términos con link destacado."

Pantalla 3 - Selección de Perfil de Inversor:
"Diseña pantalla con 3 cards verticales: 'Conservador' (color verde, ícono escudo), 'Moderado' (color naranja, ícono gráfica balanceada), 'Agresivo' (color rojo, ícono cohete). Cada card muestra retorno estimado anual y nivel de riesgo con barras. Headline '¿Qué tipo de inversor eres?' arriba. Botón continuar abajo."

Pantalla 4 - Primera Inversión:
"Crea pantalla con slider grande central para seleccionar monto ($10-$1000). Número del monto en tipografía extra large. Abajo, desglose visual con 3 mini-cards mostrando distribución sugerida: acciones tech 40%, bonos 30%, cripto 30%. Gráfica de dona colorida. Botón 'Invertir ahora' en amarillo neón. Texto pequeño 'Puedes cambiar esto después'."

Pantalla 5 - Confirmación Success:
"Diseña pantalla de éxito con animación de confetti en background. Ícono de check gigante en círculo verde. Headline '¡Tu dinero ya está trabajando!'. Muestra monto invertido en grande. Proyección estimada a 1 año abajo. Dos botones: 'Ver mi portafolio' (primario) y 'Invitar amigos' (secundario). Ilustración de plantas creciendo en la parte inferior."
02 HealthTech - Telemedicina para Adultos Mayores
Pantalla 1 - Home Dashboard:
"Diseña dashboard principal con tipografía mínimo 18px. Header con saludo 'Hola, María' y foto de perfil grande. 4 cards grandes con espaciado generoso: 'Próxima cita' (calendario ícono), 'Mis medicamentos' (pastilla ícono), 'Resultados médicos' (documento ícono), 'Llamar doctor' (teléfono ícono). Cada card con ícono grande a la izquierda y texto descriptivo. Paleta cálida beige/azul suave."

Pantalla 2 - Agendar Cita:
"Crea pantalla de calendario mensual grande con números extra visibles. Días disponibles en verde suave, no disponibles en gris. Fecha seleccionada con círculo azul sólido. Abajo, lista de horarios disponibles en cards horizontales grandes: '9:00 AM', '11:00 AM', '2:00 PM'. Cada horario en botón de mínimo 60px altura. Botón confirmar siempre visible abajo."

Pantalla 3 - Selección de Especialidad:
"Diseña lista vertical con 6 especialidades médicas. Cada item como card horizontal grande con foto del doctor, nombre en bold grande, especialidad abajo, y rating con estrellas doradas grandes. Ícono de la especialidad (corazón para cardiólogo, etc.) a la izquierda. Spacing generoso entre cards. Header '¿Qué especialista necesitas?' en tipografía clara."

Pantalla 4 - Confirmación de Cita:
"Crea pantalla resumen con información jerárquica. Arriba: ícono calendario grande. Card central con fondo blanco elevado mostrando: foto doctor (grande), nombre, especialidad, fecha y hora en tipografía bold 20px, modalidad 'Videollamada'. Botón 'Confirmar cita' verde grande (mínimo 56px altura). Link 'Cambiar horario' abajo en azul subrayado."

Pantalla 5 - Recordatorio Pre-Cita:
"Diseña pantalla de preparación con checklist visual. Headline '¿Listo para tu cita?'. Lista de 4 items con checkboxes grandes: 'Conexión a internet funcionando', 'Cámara y micrófono activos', 'Documentos médicos a mano', 'En lugar tranquilo'. Cada item con ícono ilustrativo grande. Countdown timer destacado '15 minutos para tu cita'. Botón 'Ingresar a consulta' pulsante."
03 EdTech - Aprendizaje de Idiomas para Niños
Pantalla 1 - Selección de Avatar:
"Diseña pantalla lúdica con 8 avatares de personajes animales en grid 2x4: panda, león, unicornio, dragón, etc. Cada avatar en card cuadrado colorido con sombra suave y animación hover. Headline arriba '¡Elige tu compañero de aventuras!'. Paleta arcoíris. Avatar seleccionado con borde dorado brillante. Botón '¡Siguiente!' en forma de nube con carita feliz."

Pantalla 2 - Mapa de Niveles:
"Crea mapa de progreso estilo videojuego con path serpentino. 10 niveles como islas flotantes conectadas por puentes. Nivel actual iluminado y animado, niveles anteriores con check dorado, niveles futuros con candado. Cada isla temática: playa, bosque, montaña. Arriba: barra XP con estrellitas y avatar del niño. Monedas coleccionadas en esquina superior derecha con animación brillante."

Pantalla 3 - Lección Activa:
"Diseña pantalla de ejercicio con ilustración grande arriba (ej: manzana roja gigante). Palabra en inglés 'APPLE' en tipografía playful gigante. 4 opciones de traducción en botones coloridos tipo candy: cada botón diferente color (rojo, azul, verde, amarillo) con la palabra en español. Timer visual tipo reloj de arena arriba derecha. Vidas restantes como corazones en esquina izquierda. Música note ícono para escuchar pronunciación."

Pantalla 4 - Feedback Correcto:
"Crea pantalla de celebración con confetti animado y estrellas cayendo. Personaje avatar saltando feliz en el centro. Mensaje '¡Increíble!' en letras grandes que rebotan. Mostrar +10 puntos con animación de subida. Barra de progreso de la lección llenándose. Botón 'Siguiente palabra' en forma de flecha grande y colorida. Sound effects visuales: notas musicales flotando."

Pantalla 5 - Recompensas Desbloqueadas:
"Diseña pantalla de logros con cofre de tesoro abriéndose (animación). Mostrar 3 premios ganados: 1) Nueva ropa para avatar, 2) 50 monedas, 3) Insignia 'Campeón de frutas'. Cada premio en card separado con ilustración detallada. Headline '¡Has completado el nivel!' con fuegos artificiales. Botones 'Equipar' y 'Continuar aventura'. Background con confetti permanente cayendo."
04 E-commerce - Moda Sostenible para Gen Z
Pantalla 1 - Landing/Feed:
"Diseña feed estilo brutalist con grid asimétrico de productos. Tipografía Helvetica bold en negro. Imágenes de productos en blanco/negro con un solo elemento de color (la prenda). Cada card con overlay al hover mostrando precio en grande y etiqueta 'CO2 saved: 2kg'. Header minimalista con logo, buscador y carrito. CTA banner arriba 'Plant a tree with every purchase' en verde neón. Aesthetic crudo, bordes sharp."

Pantalla 2 - Detalle de Producto:
"Crea layout split-screen: izquierda galería de 4 fotos swipeable con dots indicator. Derecha: nombre producto en tipografía huge bold, precio destacado, selector de talla como botones outline grandes (XS-XL). Sección expandible 'Impact' con gráfica mostrando agua ahorrada, CO2 reducido, árboles plantados. Material composition con iconos. Reviews con fotos de users. Sticky button 'Add to cart' negro sólido."

Pantalla 3 - Carrito:
"Diseña carrito minimalista con lista vertical de productos. Cada item: thumbnail izquierda, info centro (nombre, talla, precio), quantity selector derecha (- número +), ícono trash. Abajo: subtotal, descuento estudiante (si aplica), shipping, total en bold extra large. Progress bar visual 'Unlock free shipping at $75'. CTA dual: 'Continue shopping' (ghost button) y 'Checkout' (filled negro). Counter de impacto total: '3 trees planted'."

Pantalla 4 - Checkout:
"Crea pantalla de pago tipo formulario limpio. Steps arriba: Shipping (completo check verde), Payment (activo), Review (gris). Campos apilados: dirección autocomplete, método de pago con cards visuales (Visa, Mastercard, PayPal). Checkbox 'Carbon neutral shipping +$2'. Order summary sticky en sidebar derecha en desktop, collapsible en mobile. Input de código descuento. Trust badges abajo: secure payment, easy returns."

Pantalla 5 - Confirmación:
"Diseña success page minimalista. Check circle animado grande arriba. Order number en mono-space font destacado. Estimado de entrega con timeline visual de 4 pasos: Processing, Shipped, Out for delivery, Delivered. Card de impacto ambiental: 'Your purchase saved 5kg CO2 and planted 2 trees' con ilustración isométrica de árboles creciendo. CTA 'Track order' primario, 'Share your impact' secundario con íconos social. Email sent confirmation."
05 FoodTech - Comida Saludable para Profesionales
Pantalla 1 - Explorar Menú:
"Diseña pantalla de categorías con horizontal scroll de collections: 'Breakfast Bowls', 'Power Lunches', 'Protein Boxes', 'Salad Bar'. Cada collection como card con imagen apetitosa, nombre, cantidad de opciones, tiempo prep promedio. Filtros arriba: dietary (vegan, keto, gluten-free) como chips seleccionables. Search bar con sugerencias inteligentes. Quick actions: 'Repeat last order', 'Chef's special today'. Clean iOS style, mucho white space."

Pantalla 2 - Customizar Bowl:
"Crea pantalla de builder con secciones collapsibles: Base (rice, quinoa, greens), Protein (chicken, tofu, salmon), Veggies (6+ opciones), Toppings, Dressing. Cada ingrediente como card horizontal con foto mini, nombre, +/- quantity, precio extra si aplica. Sidebar derecho sticky: preview visual del bowl armándose, calorie counter actualizándose en tiempo real, macros bar (proteins/carbs/fats). Alergias warning en rojo si aplica. Precio total grande abajo."

Pantalla 3 - Delivery Time Slot:
"Diseña selector de horario con calendar view de semana. Días como tabs horizontales, slots de 30min como grid vertical. Color code: verde (disponible), amarillo (pocos slots), gris (completo). Slot seleccionado destacado con borde bold. Info arriba: 'Your office: 123 Main St' con link para cambiar. Estimado 'Ready in 25-30min'. Toggle 'Schedule for later' vs 'ASAP'. Delivery fee mostrado claramente. Map preview pequeño con tiempo estimado."

Pantalla 4 - Review Order:
"Crea pantalla de resumen con accordion sections: Order items (editable), Delivery details (address, time, instructions field), Payment method (saved cards con radio buttons). Promo code input expandible. Subtotal breakdown transparent: items, delivery fee, service fee, tip selector (15%, 18%, 20%, custom). Total en tipografía large y bold. Estimado nutricional del pedido completo abajo. CTA 'Place order' verde grande con loading state."

Pantalla 5 - Order Tracking:
"Diseña tracking en tiempo real con mapa grande arriba mostrando restaurante, driver (dot animado), y destino. Timeline vertical abajo: Order placed (check), Preparing (in progress con spinner), Out for delivery (pending), Delivered (pending). Foto y nombre del driver, rating, botón 'Contact driver'. ETA actualizado en real-time en tipografía grande. Illustration del plato pedido. Botón 'Cancel order' discret abajo."
06 PropTech - Renta de Apartamentos para Estudiantes
Pantalla 1 - Search con Mapa:
"Diseña split view: mapa interactivo izquierda con pins de propiedades, lista resultados derecha scrollable. Filtros arriba como chips: precio range slider, distance to campus, roommates (0-3+), amenities (wifi, laundry, parking). Cada listing card: foto principal, precio/mes large, dirección, distancia a universidad con walk time, roommates actualmente (avatares pequeños), quick stats (beds, baths). Card hover expande en mapa. Toggle vista lista/mapa. Results counter '48 apartments found'."

Pantalla 2 - Detalle de Propiedad:
"Crea pantalla con galería fullwidth arriba (swipeable, 8+ fotos, counter '1/8'). Abajo: precio destacado con breakdown (rent + utilities), botón 'Schedule tour' sticky. Tabs: Overview (descripción, amenities con íconos, rules), Roommates (cards con foto, major, año, mini bio, compatibility score), Location (mapa con points of interest: campus, grocery, gym), Reviews (rating breakdown, comments con fotos). 3D virtual tour embedded si disponible."

Pantalla 3 - Programar Visita:
"Diseña scheduler con dual calendar view: disponibilidad propietario izquierda, tu calendario derecha (opcional sync con Google Cal). Time slots cada hora de 9am-6pm. Tipo de tour: In-person o Virtual (video call). Input para invitar roommate potencial a la visita. Questions para el landlord (textarea). Resumen con: propiedad, fecha/hora, tipo tour, attendees. Confirmación via email/SMS toggle. CTA 'Confirm tour' con loading states."

Pantalla 4 - Match con Roommates:
"Crea pantalla tipo dating app con cards de potenciales roommates. Card grande central con: foto, nombre, edad, universidad/major, bio corta, lifestyle tags (early bird, social, quiet, clean freak), budget range, move-in date. Quiz compatibility score '85% match' destacado. Swipe left (pass) o right (interest), o botones grandes 'Pass' / 'Connect'. Matches mutuas abajo como avatares pequeños. Filter preferences: sleep schedule, cleanliness, socialness."

Pantalla 5 - Aplicación a Propiedad:
"Diseña formulario multi-step con progress bar: Personal info (paso 1/4), Student verification (paso 2/4), Financial (paso 3/4), References (paso 4/4). Upload documents: ID, enrollment proof, income/guarantor info. Auto-save progress. Sidebar derecho con resumen de propiedad aplicando. Application fee $50 claramente mostrado. Background check consent checkbox. Estimado 'Hear back in 24-48hrs'. CTA 'Submit application' con security badges."
07 Fitness - Entrenamiento en Casa para Mujeres 30-45
Pantalla 1 - Onboarding Goals:
"Diseña pantalla de selección de objetivos con 6 cards ilustradas: 'Lose weight', 'Tone up', 'Build strength', 'Flexibility', 'Stress relief', 'Postpartum recovery'. Cada card con ilustración femenina empowering, título bold, descripción corta. Multi-select permitido. Gradiente motivacional rosa/naranja de fondo. Progress dots abajo '1 of 4'. Headline '¿Qué quieres lograr?'. Illustration de mujer meditando en esquina. Botón 'Continue' grande."

Pantalla 2 - Fitness Level Assessment:
"Crea quiz interactivo con pregunta grande: '¿Cuánto tiempo llevas sin ejercitarte?'. 4 opciones como botones grandes con emojis: '< 1 month 💪', '1-6 months 🤔', '6-12 months 😅', '1+ year 😬'. Siguiente pregunta al seleccionar. Progress bar animado arriba. Background con subtle pattern de dumbbells. Ilustración de mujer tomando agua. Tone motivacional, nunca judgmental. Smooth transitions entre preguntas."

Pantalla 3 - Workout en Vivo:
"Diseña pantalla de entrenamiento con video del instructor ocupando 60% superior. Overlay transparente abajo con: temporizador circular grande countdown, ejercicio actual en bold, siguiente ejercicio en preview pequeño. Rep counter central animado (10... 9... 8...). Botones: pause (grande), skip exercise, adjust intensity. Music toggle. Progress bar del workout total. Motivational quotes apareciendo cada 30 segs. Heart rate zone si wearable conectado."

Pantalla 4 - Workout Completado:
"Crea pantalla de celebración con confetti sutil. Headline '¡Workout completado! 🎉'. Stats destacadas en cards: duración, calorías quemadas (con flame icon), personal record si aplica. Gráfica de intensidad cardíaca durante workout. Selfie prompt 'Capture your post-workout glow' con cámara. Rating de dificultad del workout (1-5 estrellas). Share to social con templates pre-diseñados. CTA dual: 'Cool down stretch' y 'Back to home'."

Pantalla 5 - Weekly Progress:
"Diseña dashboard de progreso con calendar heat map mostrando workouts completados (gradiente de color por intensidad). Arriba: streak actual '7 days 🔥', total workouts este mes, tiempo total. Gráficas: peso tendencia (opcional), measurements changes, fuerza progression en ejercicios clave. Before/after photo comparison con slider. Next milestone con progress bar. Motivational quote personalizado. Botón 'Schedule next week'. Community feed con logros de otras usuarias para motivación."
08 AgriTech - Monitoreo de Cultivos para Pequeños Agricultores
Pantalla 1 - Dashboard Principal:
"Diseña dashboard simple con 4 cards grandes: 'Mis lotes' (lista de parcelas con estado de salud), 'Clima hoy' (temperatura, lluvia, humedad con íconos grandes), 'Alertas' (notificaciones importantes con badge rojo), 'Recomendaciones' (tareas sugeridas hoy). Iconografía universal sin texto dependiente. Color verde dominante para salud buena, amarillo advertencia, rojo crítico. Header con nombre agricultor y foto. Offline mode indicator claro."

Pantalla 2 - Detalle de Lote:
"Crea pantalla de cultivo específico con foto aérea del lote arriba (si disponible) o ícono de cultivo grande. Info clave en cards: humedad del suelo (medidor visual tipo tanque llenándose), última lluvia, días desde siembra (contador visual), plagas detectadas (lista con íconos y severidad). Gráfica simple de temperatura última semana. Botón grande 'Regar ahora' o 'Programar riego'. Estado de crecimiento con ilustraciones de plantas en etapas."

Pantalla 3 - Pronóstico Semanal:
"Diseña calendario de 7 días horizontal con cada día como card: fecha, ícono clima grande (sol, nubes, lluvia), temp max/min, probabilidad lluvia en %, recomendación ('Buen día para fertilizar'). Hoy destacado con borde. Alertas importantes arriba con ícono warning: 'Helada esperada mañana - protege cultivos'. Ilustraciones simples que no requieran alfabetización alta. Botones de acción directa: 'Ver consejos', 'Configurar alerta'."

Pantalla 4 - Recomendaciones de Riego:
"Crea pantalla con calculadora visual simple: ilustración de planta con gotas de agua. Input grande para hectáreas del lote, tipo de cultivo (dropdown con íconos), humedad actual (slider visual). Resultado en card destacado: 'Regar X litros' en número grande, 'Tiempo estimado: Y horas', 'Mejor momento: mañana 6am-8am'. Razón explicada en texto simple. Botón 'Programar recordatorio'. Tips ahorro de agua abajo con íconos."

Pantalla 5 - Registro de Actividades:
"Diseña formulario simple para logging: '¿Qué hiciste hoy?'. Botones grandes con íconos: Regar, Fertilizar, Fumigar, Cosechar, Otro. Selector de lote visual (fotos o íconos de cultivos). Cantidad usada (input numérico grande). Fecha/hora con calendario visual. Opción de tomar foto como evidencia. Historial de actividades abajo como timeline simple. Auto-guardado con indicador. Funciona offline, sincroniza cuando hay señal."
09 TravelTech - Selección de Asientos Low-Cost
Pantalla 1 - Vista de Avión Completa:
"Diseña representación visual del avión desde arriba. Filas numeradas claramente, asientos como cuadrados con código de color: verde (disponible), azul (tu selección), gris (ocupado), dorado (premium available). Leyenda de colores arriba. Zoom controls para mobile. Info de vuelo en header: origen-destino, duración, fecha. Quick filters: 'Window only', 'Aisle only', 'Together' si múltiples pasajeros. Precio base 'Included' vs extras mostrados inline."

Pantalla 2 - Detalle de Asiento:
"Crea modal/drawer con info del asiento seleccionado: número grande (12A), tipo (Window), sección (Economy), pitch/recline specs con íconos visuales. Pros/cons: '✓ Extra legroom', '✗ Near bathroom'. User reviews rating y comments ('Quiet section', 'Good for sleeping'). Precio extra si aplica en grande (+$15). Photos del asiento real si disponibles. Amenities cercanas (outlet, wifi). Comparar con asientos adyacentes. CTA dual: 'Select' o 'Choose different'."

Pantalla 3 - Upgrade Offers:
"Diseña pantalla de upsell con 3 tiers comparativos: 'Current (Economy)', 'Comfort+' (+$45), 'Premium' (+$120). Cada tier como columna con: visual del asiento (foto), beneficios en checklist, price delta. Destacar diferencias: legroom measurement visual, priority boarding, free drinks, checked bag. 'Most popular' badge en tier medio. Toggle para ver 'Per person' vs 'Total'. Countdown timer sutil 'Upgrade price valid for 10 min'. Skip option clara."

Pantalla 4 - Pasajeros Múltiples:
"Crea interfaz para asignar asientos a múltiples viajeros. Lista de pasajeros izquierda: 'John Doe (Adult)', 'Jane Doe (Child 8yo)'. Mapa de avión derecha con asientos ya seleccionados numerados y conectados visualmente. 'Auto-assign together' button que encuentra mejores asientos contiguos. Individual override permitido. Prioridad mostrada: niños cerca de padres, preferencias individuales recordadas. Total cost updating en real-time abajo."

Pantalla 5 - Confirmación de Selección:
"Diseña resumen final con boarding passes preview. Cada pasajero como card: nombre, asiento asignado visual (12A, window icon), gate info placeholder. Mapa mini del avión mostrando tus asientos destacados. Cambios permitidos con penalidad mostrada. Extras añadidos listados: seat selection fee, any upgrades. Add to calendar button. Download/email boarding pass. Reminder setup 'Notify me 24hrs before'. CTA 'Confirm & continue to payment' grande. Secure lock icon."
10 SocialTech - Red para Creadores de Contenido
Pantalla 1 - Perfil Showcase:
"Diseña perfil maximalista tipo Bento grid: header con cover video/gif animado, avatar grande con borde de color personalizable. Grid asimétrico de portfolio: videos featured, carousels de imágenes, testimonios, case studies. Stats destacadas en cards flotantes: 1.2M followers, 4.5M engagement, $250 avg collab rate. Bio expandible con tags de nichos (#TechReview #Unboxing). Social links como íconos grandes. Booking calendar integration teaser. Verified badge prominente. Custom color theme del creador."

Pantalla 2 - Dashboard de Analytics:
"Crea dashboard de stats con múltiples widgets: gráfica de crecimiento de followers (últimos 30 días), engagement rate por plataforma (IG, TikTok, YouTube como tabs), top performing posts en grid con metrics overlay, demographic breakdown (edad, ubicación con mapita), best time to post heatmap. Revenue tracking este mes. Collaboration requests counter con badge. Export report button. Comparación con period anterior (+12% growth visual). Filters por fecha range."

Pantalla 3 - Collaboration Marketplace:
"Diseña feed de oportunidades de collab con filtro sidebar: industria, presupuesto range, tipo de contenido (video, foto, story). Cada oportunidad como card: marca logo, brief corto, deliverables, compensation, deadline, aplicantes actuales. Quick apply button. 'Match score' basado en tu perfil (85%). Status tags: Open, Applied, Under Review, Accepted. Sort by: newest, best pay, best match. Featured collabs arriba con spotlight. Saved/bookmarked section."

Pantalla 4 - Content Calendar:
"Crea calendario mensual visual con color-coding por plataforma y tipo de contenido. Cada día con mini-cards de posts programados: thumbnail, plataforma icon, hora publicación, status (draft, scheduled, published). Drag-and-drop para reprogramar. Multi-view: mes, semana, día. Quick add desde cualquier fecha. Template library sidebar. Bulk schedule option. Collaboration deadlines marcadas con flag icon. Analytics preview on hover. Export calendario como imagen para cliente."

Pantalla 5 - Collaboration Chat:
"Diseña messenger para negociaciones con marcas. Lista de conversaciones izquierda: marca logo, nombre, último mensaje, unread badge. Chat derecha: mensajes con timestamps, file sharing (contracts, briefs), media preview. Quick actions: 'Send rate card', 'Share portfolio', 'Propose date'. Contract templates pre-built para enviar. Video call button. Payment request integration. Mark as paid/completed. Archive completed deals. Starred messages. Search conversations. Notification preferences por chat."
11 InsurTech - Reporte de Siniestro Auto
Pantalla 1 - Inicio Reporte:
"Diseña pantalla reassuring con ilustración isométrica de dos autos chocando suavemente (no dramática). Headline calmante 'Estamos aquí para ayudarte'. Dos opciones grandes como cards: 'Accidente menor' (raspones, golpes) y 'Accidente mayor' (no funciona, ambulancia necesaria). Cada card con descripción y timeline estimado de proceso. Color azul tranquilizador dominante. Botón de emergencia rojo pequeño arriba '¿Necesitas ambulancia?' Progreso guardado automáticamente."

Pantalla 2 - Ubicación y Fotos:
"Crea pantalla con mapa grande mostrando ubicación actual (GPS auto-detected) con pin draggable para ajustar. Botón 'Usar ubicación actual' vs 'Ingresar dirección manualmente'. Abajo: upload de fotos con guía visual ilustrada (4 ángulos del daño, placas, otro vehículo si aplica). Camera interface nativa con overlay guide mostrando cómo encuadrar. Preview thumbnails con opción de retomar. Counter '3/6 fotos'. Tips: 'Incluye referencias de contexto'."

Pantalla 3 - Detalles del Incidente:
"Diseña formulario conversacional con una pregunta por pantalla, transiciones suaves. Q1: '¿Cuándo ocurrió?' (date/time picker grande). Q2: '¿Estabas conduciendo?' (Yes/No botones). Q3: '¿Hubo heridos?' (radio buttons con ilustraciones). Q4: '¿Otros vehículos involucrados?' con opción de añadir info de terceros. Q5: '¿Reportado a policía?' con upload de reporte si sí. Progress bar animado arriba. Botón back permitido. Auto-save constant."

Pantalla 4 - Chat con Ajustador:
"Crea interfaz de chat en vivo con foto y nombre del ajustador asignado. Mensajes con timestamps. Ajustador envía: 'Revisé tu caso, solo necesito confirmar...'. Opciones de respuesta rápida como chips seleccionables además de input libre. Status arriba: 'Estimado de respuesta: 2hrs'. File sharing para docs adicionales. Video call option si ajustador lo solicita. Traducción automática si necesario. Notification cuando ajustador escribe. Chat history guardado."

Pantalla 5 - Status y Timeline:
"Diseña tracking de caso con timeline vertical: Reporte recibido (check verde), Revisión en proceso (activo con spinner), Aprobación (pendiente), Pago autorizado (pendiente). Cada paso con fecha estimada. Card destacado arriba: 'Estimado de reparación: $1,200-$1,500', 'Taller recomendado' con mapa/dirección, 'Deducible: $500'. Opción de elegir taller alternativo. Status notifications toggle. Documentos generados (claim number, authorization) descargables. CTA 'Contactar ajustador' siempre visible."
12 PetTech - Gestión Veterinaria
Pantalla 1 - Perfil de Mascota:
"Diseña perfil adorable con foto circular gigante de la mascota en el centro (upload custom o elegir de ilustraciones). Nombre en tipografía playful arriba. Info básica en cards cute: especie (perro/gato icon), raza, edad (con birthday cake icon), peso actual (con tendencia up/down arrow). Tarjeta de salud summary: vacunas al día (green check), próxima cita, condiciones crónicas si aplica. Background con pattern sutil de paws. Color scheme basado en tipo de mascota (naranja/gatos, azul/perros)."

Pantalla 2 - Timeline de Vacunas:
"Crea vista de historial médico como timeline vertical con hitos importantes. Cada vacuna como card: nombre vacuna, fecha aplicada (con check verde si completada), próximo refuerzo con countdown ('En 45 días'), veterinario que aplicó. Cards pendientes con alert amarillo sutil. Filtros: 'Todas', 'Vacunas', 'Desparasitación', 'Chequeos'. Add event button (+) grande flotante. Exportar PDF del historial completo. Recordatorios automáticos configurables. Ilustraciones de jeringas y médicos friendly, nunca scary."

Pantalla 3 - Recordatorios Medicamentos:
"Diseña pantalla de gestión de meds con lista de medicamentos activos. Cada med como card expandible: nombre, dosis, frecuencia, hora(s) del día con iconos (mañana sun, noche moon). Toggle para marcar dosis como dada con confetti micro-animation. Notificaciones push preview. Calendario mensual pequeño mostrando días de tratamiento. Stock counter 'Quedan 12 pastillas, reordenar en 4 días'. Link a farmacia/compra. Instrucciones especiales (con comida, etc). Photo upload de la medicina para fácil identificación."

Pantalla 4 - Agendar Cita Vet:
"Crea scheduler con lista de veterinarias cercanas (map view toggle). Cada clínica con: rating estrellas, distancia, foto, especialidades, disponibilidad próxima ('Hoy 4pm'). Filtros: urgencias 24/7, especialidades, precio range. Seleccionar clínica → calendario con slots. Tipo de visita: chequeo, vacuna, emergencia, grooming. Añadir notas/síntomas. Upload foto si tiene herida/problema visible. Reminder preferences. Add to calendar con dirección. Opción virtual consultation si disponible."

Pantalla 5 - Tips Personalizados:
"Diseña feed de consejos curado basado en perfil de mascota: edad, raza, condiciones. Cards de contenido: 'Ejercicio para [raza]' con video, 'Dieta senior' artículo, 'Cuidado dental' checklist. Cada tip con ilustración custom, source (vet verificado badge), save/bookmark. Categorías: nutrición, ejercicio, comportamiento, salud. Quiz integrado 'Test your pet knowledge'. Community tips de otros dueños con misma raza. Seasonal reminders (calor, frío). Product recommendations con afiliados. Vet AMA section."