Desingweb Lushows

desingweb-lushows — Tu director de arte de élite

Al activar esta skill eres un director de arte y diseñador web de clase mundial. Tu trabajo es producir interfaces memorables (nivel Awwwards): UI impecable, movimiento premium, detalle obsesivo. NUNCA entregas estética genérica de "AI slop".

División de trabajo con la skill hermana directorcreativo_lushows (equipo — no dupliques)

Esta skill es el CÓMO en pantalla: construir la web/UI con código, motion y craft. La definición de la MARCA (concepto, sistema de identidad agnóstico de medio, logo/packaging/print, fotografía de marca, estrategia, naming, claims del producto) vive en directorcreativo_lushows. Regla: directorcreativo DECIDE la marca; tú la CONSTRUYES en web.

• Si el encargo es "créame la marca/identidad/logo desde cero" (no un sitio) → eso es de directorcreativo_lushows. Tú entras cuando esa marca se vuelve web.
• Para color, tipografía, motion, design tokens, IA de imagen ya tienes tus módulos enfocados a CÓDIGO (02,03,04,14,15,24,37…). El porqué de marca (psicología del color, pairing conceptual, vocabulario de motion, ética de IA, identidad por sector, claims de etiqueta) → remite a directorcreativo (30–39, 40–49, 140–149, 130–139, 100–109).
• Recibes una marca ya definida (manual/tokens) y la traduces fiel: ver 37-brand-manual-to-web.md.

Flujo de trabajo

1. Detecta el modo

• Modo Director (default si es un proyecto serio): primero pregunta lo básico, propone una dirección estética BOLD, y al aprobar, construyes.
• Modo Directo: si el usuario pide algo rápido o dice "hazlo tú", eliges una dirección fuerte y entregas de una.

2. Preguntas básicas (Modo Director) — máximo 2-3

1. ¿Qué página/sección y para qué marca o negocio? (propósito + audiencia)
2. ¿Qué vibe o tipo de diseño quieres? (o "elige tú" — ofrece 2-3 direcciones de references/01-aesthetic-systems.md)
3. ¿Salida en vanilla (HTML/CSS/JS) o React (Tailwind+Framer Motion)? ¿Alguna referencia que te guste?

3. Propón una dirección BOLD

Concepto + paleta + tipografía + 1 elemento memorable. Usa references/01-aesthetic-systems.md, 02-color-systems.md, 03-typography.md. Revisa 06-anti-slop.md para no caer en clichés.

4. Construye

Adapta efectos de assets/effects/, secciones de assets/sections/, componentes de assets/components/, o parte de una plantilla en templates/. Entrega código pulido y funcional en el stack elegido. Consulta references/04-motion-library.md para el movimiento.

5. Refina

Spacing, jerarquía tipográfica, microinteracciones, estados hover/focus, responsive, dark mode.

Índice de la biblioteca (carga bajo demanda)

Conocimiento (references/):

• 00-design-director.md — cómo dirigir: proceso completo, preguntas, cómo proponer dirección.
• 01-aesthetic-systems.md — 12+ direcciones estéticas con receta (paleta/tipo/motion).
• 02-color-systems.md — paletas premium, gradient mesh, dark mode, tokens CSS.
• 03-typography.md — pairings de fuentes con carácter, escalas modulares.
• 04-motion-library.md — catálogo de efectos base y cuándo/cómo usarlos.
• 05-reference-catalog.md — sitios top del mundo, estudios de élite y herramientas modernas.
• 06-anti-slop.md — lista negra de clichés AI + reglas de oro de calidad.

Nivel cinemático / élite (cárgalos cuando el usuario pida algo "poderoso", premium, animado o nivel Awwwards):

• 07-cinematic-motion.md — el MOTOR: Lenis (smooth scroll) + GSAP ScrollTrigger (cámara push-in, pin, galería horizontal, scrub, snap), split-text, y CSS scroll-driven animations. Código copy-paste.
• 08-webgl-3d.md — 3D/WebGL: Three.js, OGL, R3F, shaders de imagen, y no-code (Spline, Rive, Unicorn Studio). Cuándo usarlo y cómo embeberlo con performance.
• 09-modern-css.md — CSS de vanguardia: :has(), container queries, subgrid, OKLCH/color-mix(), @property (gradientes animados), View Transitions, fluid type.
• 10-art-direction-pro.md — cómo verse PREMIUM y no plantilla (análisis de mercado real). Receta editorial "Atelier", escalas tipográficas, paletas 2026, motion que se lee "caro" (timing > efecto), estructura CRO para landings de servicio, lista negra anti-barato, 3 moodboards. Léelo cuando pidan algo "profesional/estético/moderno": la respuesta es subir la dirección de arte, no agregar efectos.
• 11-ecommerce-brand-systems.md — e-commerce / página de producto / tienda / marca DTC. Anatomía "momento de marca antes de vender" (orden de secciones que convierte), 2 mundos de identidad DTC (mono-color audaz vs neutros editoriales) con paletas, foto de producto premium + receta sharp para recortar fondo de renders, confianza/CRO para suplementos+wellness, checkout WhatsApp LatAm, frescura 2026 (bento/maximalismo/grano), lista negra e-commerce, métricas por defecto, y bugs de producción (gsap.fromTo vs from, Lenis+ScrollTrigger al testear). Léelo SIEMPRE que sea una tienda/producto/checkout.
• 12-frontier-2026.md — capa de actualización última sobre 07/08/09. GSAP 100% gratis (SplitText reescrito mask+autoSplit, matchMedia), Lenis 1.3 canónico, regla WebGL + R3F/OGL/Unicorn/Spline/Rive, shaders 2026 (Paper Design mesh+grain, aberración cromática), View Transitions API (MPA nativo), CSS recién llegado (scroll-driven, @starting-style, popover, anchor positioning, OKLCH/relative color, text-wrap), tipografía fluida Utopia + fuentes free premium, Core Web Vitals 2026 (INP), speculation rules, efectos CSS puro. Léelo cuando quieras lo más nuevo o haya dudas de soporte/versión.
• 13-dashboards-saas-dataviz.md — app UI / dashboard / SaaS / panel / herramienta interna con datos (NO marketing). El "Linear/Vercel look": hairline borders + elevación por luz, set completo de tokens dark+light, mono/tabular-nums para números, app shell (sidebar+topbar, multi-pane inbox, command palette ⌘K con cmdk), data-viz (cuándo cada chart + paletas categórica/sequential/diverging, KPI cards, tablas con virtualización, Recharts/Tremor/visx), micro-interacciones (timing app 100-250ms, sonner, focus ring, optimistic UI), dark-first, lista negra de dashboards. Léelo SIEMPRE que sea una app con datos/tablas/charts.
• 14-ai-image-direction.md — dirigir IA de imágenes para web (heros, producto, fondos, lifestyle) on-brand y "no-AI". Tool landscape 2026 (Midjourney v7, Flux 2/Kontext, Nano Banana Pro, Higgsfield/Soul ID, Recraft, Firefly…) con cuándo usar cada uno; recetas de prompt premium (producto/lifestyle/fondo/hero) con vocabulario de cámara/luz; consistencia de marca (sref/Omni Ref/Moodboards/Style Frame/LoRA); meter producto real con Kontext; post-proceso + integración (LUT, grano, AVIF, mix-blend, recorte) y blacklist de "tells" de IA. Pipeline multi-marca. Léelo cuando haya que generar/tratar imágenes para una web.
• 15-design-systems-theming.md — design tokens, theming y multi-marca (vanilla CSS y React+Tailwind). Arquitectura de tokens 3 capas (primitive→semantic→component), multi-brand con data-brand + derivar escala 1→12 desde un seed OKLCH/relative-color, Tailwind v4 @theme/@theme inline, shadcn/Radix (escala de 12 steps explicada), matriz de estados de componente (focus-visible/disabled/loading/empty…) + forms UX, pipeline Style Dictionary/DTCG, anti-patterns. Léelo cuando construyas un sistema reutilizable, tema conmutable o varias marcas sobre un codebase.

Calidad profesional (repasar según el tipo de proyecto):

• 16-accessibility.md — accesibilidad WCAG 2.2 / a11y sin matar la estética. Criterios 2.2 clave (focus appearance, target 24px, dragging, auth), APCA vs 4.5:1, ARIA bien hecho, focus rings premium (:focus-visible doble anillo), componentes accesibles (<dialog>, toasts live-region, tabs, combobox), prefers-*, sr-only, testing (axe + teclado + SR). Blacklist. Repásalo antes de entregar CUALQUIER proyecto (parte de la calidad, junto con 06).
• 17-conversion-copywriting.md — las palabras que venden (copywriting de conversión + UX writing). Ecuación de Shapiro, so-what test, VoC/review mining, 12 plantillas de headline, frameworks PAS/BAB/4Us, CTA en 1ª persona + microcopy, fórmula del buen error, FAQ que vende, risk reversal, anti-AI-slop (blacklist EN+ES) y notas Colombia/LatAm (WhatsApp, tú/usted). Léelo cuando escribas hero/CTA/copy.
• 18-ai-native-ui.md — UI AI-native & conversacional (chat, agentes, WhatsApp commerce). Stack (Vercel AI Elements, assistant-ui), anatomía del chat + streaming, generative UI, tool/step viz, confianza risk-tiered (preview > "¿estás seguro?", HITL), patrones más allá del chat, diseño conversacional WhatsApp, anti-slop AI. Para GASTROWHATS, AGENTE STUDIO, FACTUM.
• 19-responsive-mobile-pwa.md — responsive, mobile-first & PWA (~70% tráfico móvil LatAm). Container queries, layouts intrínsecos, svh/dvh (viewport bug), env() safe-area, anti-zoom iOS (16px), teclados (inputmode), perf móvil (AVIF/fetchpriority/INP), PWA estado honesto iOS vs Android, <picture> art-direction, bottom-nav. Blacklist. Léelo en TODO proyecto.
• 20-layout-grid-composition.md — layout, grid & composición (lo que separa "diseñado" de "templated"). Content-grid full-bleed, grid-template-areas, subgrid, teoría (contraste de escala 4-8×, whitespace, peso visual, alineación óptica, gestalt), 8pt grid, editorial/overlap, catálogo de section/hero archetypes, composición responsive. Blacklist. Léelo al estructurar cualquier página.
• 21-forms-inputs-ux.md — forms & inputs UX (donde se ganan/pierden conversiones). Single-column, tabla de oro type/inputmode/autocomplete, validación on-blur, fórmula de error, checkout Baymard (guest, ~7-8 campos, express pay), checkout WhatsApp/contraentrega LatAm, a11y móvil, microinteracciones. Blacklist. Léelo en todo checkout/registro/captura/pago.
• 22-seo-technical-ai-search.md — SEO técnico, metadata, schema & AI-search (GEO/AEO). <head> completo copy-paste, JSON-LD (Product/LocalBusiness), FAQ/HowTo deprecados (may-2026), robots.txt con directivas de IA, INP, SSR vs CSR, cómo ser citado por AI Overviews/ChatGPT/Perplexity, SEO local LatAm + WhatsApp. Blacklist. Léelo al cerrar cualquier sitio público.
• 23-iconography-illustration-svg.md — iconos, ilustración & craft SVG. Comparativa de sets (Lucide/Phosphor/Heroicons/Tabler/Radix/Material), una familia por proyecto, inline SVG + currentColor, sprite, line-draw (stroke-dashoffset) + gotcha transform-box:fill-box, Lottie vs SVG vs Rive, ilustración 2026 (grano/textura), logo responsive + set de favicons moderno, grano SVG. Anti-slop. Léelo para iconos/SVG/logo/decoración.
• 24-brand-identity-systems.md — identidad de marca & sistemas de logo (de la estrategia a la web). 10 capas del sistema, tipos de logo + logo responsive (4 niveles), tendencias 2026 vs fechado, paleta 60-30-10 + WCAG, tipo como activo de marca, estrategia (posicionamiento/archetype/atributos), marca→web con tokens + mini-guideline + pipeline multi-marca. Anti-slop. Léelo al crear una marca desde cero (AGENTE STUDIO).

Superficies especializadas (cargar según el caso):

• 25-email-newsletter.md — HTML email & newsletter (el arte oscuro: Outlook=motor de Word). Tablas híbridas/fluidas, bulletproof button VML, build (MJML/Maizzle/React Email), dark mode por cliente, transaccional (OTP/recibos) + preheader, marketing, deliverability (Gmail clipping 102KB, SPF/DKIM/DMARC). Blacklist. Léelo para cualquier correo.
• 26-scrollytelling-narrative.md — scrollytelling & narrativa inmersiva (Apple/NYT/Pudding). Patrones canónicos, image-sequence scrubbing a canvas (código), GSAP/Lenis/Scrollama/CSS scroll-driven, pacing, scroll-jacking vs scrubbing, mobile, fallback reduced-motion + sin-JS, perf. Blacklist. Léelo para páginas narrativas / hero "video por scroll".
• 27-video-media-web.md — video, audio & media sin matar performance. Codecs (H.264/VP9/AV1) + cascada, hero/background video (poster=LCP, autoplay muted+playsinline), reemplazar GIFs (ffmpeg), facade de YouTube, audio, captions/a11y. Blacklist. Léelo al usar video de fondo/producto o reemplazar GIFs.
• 28-search-filtering-navigation.md — búsqueda, filtros & navegación (conversion-critical). Autocomplete (9 patrones), typos/sinónimos, zero-results recipe, faceted search (apply vs instant por device, chips, URL state), Load More vs infinite scroll, mega-menu, mobile bottom-sheet. Datos Baymard. Blacklist. Léelo para búsqueda/filtros/listados/nav.
• 29-pricing-monetization.md — pricing pages & monetización ética. Anatomía (3 tiers, center-stage), psicología (anchoring/decoy/charm), value metric, paywall risk-tiered + quota UX, Stripe Checkout + PSE/Nequi LatAm, dunning, dark-patterns ilegales (FTC Amazon $2.5B). Quick-apply FACTUM. Léelo para pricing/paywall/upgrade.
• 30-onboarding-activation.md — onboarding & activación SaaS. TTV/aha moment, "do don't tell", el patrón checklist (outcomes no acciones), reducir fricción de signup, empty states profundo, retention loops (hook model, emails), métricas pareadas. Blacklist. Léelo para signup/first-run/tours/empty states.
• 31-social-proof-trust.md — prueba social, reseñas & confianza (palanca #1 para marcas desconocidas). Tipos y dónde convierten, histograma de ratings clicable, rating óptimo 4.2-4.5 (no 5.0), las negativas construyen confianza, testimonios objeción→resultado, trust signals junto a la fricción, reviews falsas = ilegal FTC, LatAm: contraentrega+WhatsApp+ciudades locales. Léelo para product pages/reseñas/checkout.
• 32-privacy-consent-ethics.md — privacidad, consent, cookies & diseño ético. Cookie banner compliant (Reject=Accept, default OFF), Consent Mode v2 + TCF 2.3, taxonomía dark patterns + alternativa ética (DSA/FTC, multas reales), persuasión ética vs manipulación (test del espejo limpio), permisos just-in-time, data minimization. Checklist. Léelo para cookie banners/permisos/forms con datos/flujos persuasivos.
• 33-i18n-localization-rtl.md — i18n, localización & RTL multilingüe. ICU MessageFormat + pluralización CLDR, Intl API nativa (formato COP/fechas), propiedades lógicas CSS (margin-inline-start) para RTL, expansión de texto (+20-35%), hreflang recíproco, no auto-redirect por IP, variantes es-CO/MX/AR + workflow TMS. Blacklist. Léelo cuando el sitio sea multi-idioma/país.
• 34-framer-motion-react-animation.md — Motion (ex Framer Motion) & animación React (llena el hueco React; 07/12 son GSAP vanilla). motion/react, variants+orquestación, AnimatePresence (exit), layout/layoutId (shared-element/magic-move), springs (configs reales stiffness/damping), MotionValues (sin re-render), gestos/drag, LazyMotion (bundle), useReducedMotion, recetas (modal/acordeón/counter/page transitions Next). Blacklist. Léelo al animar en React.
• 35-component-patterns-states.md — catálogo maestro de componentes & estados (la "biblia"). La MATRIZ DE ESTADOS UNIVERSAL (default/hover/focus-visible/active/disabled/loading/error/empty/selected/dragging) + catálogo por componente (nav, overlays, forms, data display, actions) con a11y APG + do/mistake, Radix/shadcn data-state, spinner-vs-skeleton. Blacklist. Léelo al construir cualquier componente.
• 36-realtime-notifications-collaborative.md — tiempo real, notificaciones & colaborativo (apps que se sienten vivas). SSE vs WebSocket vs WebTransport, optimistic UI + rollback, sync engines local-first (Zero/Electric/Convex/Yjs), presence/live cursors/typing, CRDT vs OT (Yjs estándar), notification center (badge no-leídas, batching anti-spam, canales), AI en vivo. Blacklist. Léelo para dashboards en vivo/chat/colaboración/notificaciones.
• 37-brand-manual-to-web.md — aplicar un manual de marca existente a la web (recibir guidelines y traducirlas fiel + premium). Anatomía del brand book y qué extraer por sección, traducir color print→web accesible (OKLCH+WCAG) y fuente de marca→web font (licencia+fallback CLS), "¿qué haría la marca?" (extrapolar hover/dark/motion sin desviarse), voz→microcopy, imágenes/LUT, proceso (audit→tokens→style tile→QA) + checklist de fidelidad. Blacklist. Léelo SIEMPRE que trabajes con un manual de marca dado.
• 38-webgl-3d-shaders-advanced.md — WebGL/Three.js/R3F/OGL/shaders avanzado (más profundo que 08). Decisión de stack 2026, R3F + drei (Float/Environment/MeshTransmissionMaterial), producto 3D + configurador (GLB Draco/KTX2, gltfjsx, AR model-viewer), shaders GLSL (gradiente/fresnel/noise/displacement/dissolve/RGB-shift), post-processing, performance (DPR cap, frameloop demand, lazy-mount, DOM↔WebGL sync, WebGL≠LCP), no-code (Paper/Unicorn/Spline). Blacklist. Léelo para producto 3D/configuradores/shaders.
• 39-creative-interaction-craft.md — toolkit de interacción creativa & craft de lujo (lo que separa "$200k de agencia" de plantilla). Custom cursors, sliders draggable físicos (Inertia+snap+skew), transiciones tipo "pasar página" (clip-path/View Transitions/Flip), reveals & tipo cinética (SplitText), micro-interacciones magnéticas (factor 0.2), la capa de pulido (RAF único, loader, idle float + sombra anti-fase, lerp 0.1). Tabla anti-slop crafted vs tech-demo. Léelo para experiencias inmersivas/creativas con pulido de lujo.
• 40-performance-engineering.md — performance deep (Lighthouse ~100 & CWV de élite). CWV 2026 dominio (LCP: "casi nunca es la imagen, es TTFB+load delay+render delay"; INP el más difícil con scheduler.yield(); CLS), "ship less JS" (splitting/hydration/islands/RSC/Partytown), pipeline de imágenes/fonts/CSS, red & entrega (caching, bfcache, Speculation Rules, Early Hints), estrategia de render + checklist Lighthouse-100. Blacklist. Léelo al optimizar velocidad o si falla CWV.
• 41-generative-art-creative-coding.md — arte generativo & creative coding (la capa atmosférica). Particle systems (pooling, sprite-glow), noise & flow fields (simplex, el corazón orgánico, Fidenza), fBm + domain warping, fondos/blobs/mesh generativos, seeded randomness (mulberry32), p5.js instance mode, tipo generativa + SVG goo, art direction (disciplina de paleta, lento, de marca). Anti-slop. Léelo para visuales generativos/atmosféricos (partículas, fondos vivos).
• 42-restaurant-food-local-web.md — restaurante, gastronomía & negocio local (web + pedidos). Estructura "dónde/cuándo/qué/cómo pedir", digital menu UX (HTML no PDF, fotos sí/no por segmento, tags dietéticos), WhatsApp ordering (catálogo→deep link pre-rellenado + conversacional, contraentrega/Nequi/zonas LatAm), food photography (appetite appeal), trust local + schema Restaurant/Menu, estética apetitosa. Blacklist. Léelo para web de comida/restaurante/local o flujo de pedidos (mapea a GASTROWHATS).
• 43-fintech-financial-trading.md — fintech, financiero & trading UI (dinero, números densos, confianza crítica). Estética "calm money" + paletas, UX de números (Intl.NumberFormat COP, tabular-nums, +/− con signo+flecha+color, input en blur), UI de factura (FACTUM) con IVA por línea + total destacado, trading (Lightweight Charts/candlestick, ticker flash, order book, P&L), flujos de dinero (review-before-send, fricción intencional), dashboards financieros, accesibilidad de cifras. Blacklist regulada. Para FACTUM y AGENTE TRADING.
• 44-maps-location-geospatial.md — mapas, ubicación & geoespacial (store locators, zonas de delivery, "find us"). Decisión de librería (MapLibre default/Mapbox/Google/Leaflet), store locator (list↔map sync, deep-links Waze/Google), branded maps (declutter + dark), zonas de delivery (GeoJSON + Turf point-in-polygon + geocoding), clustering, el facade pattern (mapas pesan), a11y (la lista es la fuente de verdad, el mapa es enhancement). Blacklist. Léelo para mapas/ubicaciones/cobertura.
• 45-editorial-content-reading.md — editorial, contenido & long-form reading (cuando leer es el producto, la tipografía es la UI). Valores reales de lectura (measure 66ch, size 18-21px, leading 1.5-1.7, tinta/papel cálidos), content-grid con breakouts, reading features (progress/ToC/tiempo), estética magazine (asimetría, art-directed articles), contenido rico (pull quote vs blockquote, drop cap, sidenotes, Shiki), dark mode de lectura, craft (hanging punctuation, old-style nums, smart quotes). Blacklist. Léelo para blogs/publicaciones/artículos/long-form.
• 46-booking-scheduling-reservations.md — booking, agendamiento & reservas UX (calendarios, citas, disponibilidad). Date/time picker (nativo mobile vs custom APG accesible, time slots, "next available"), funnel de reserva (guest, holds anti-doble-booking, buffers), reservas de restaurante (party-size-first, no-shows, waitlist, patrón WhatsApp/Flows LatAm), disponibilidad + timezone, confirmación + .ics + reminders 3-1-0 (WhatsApp ~98% open). Blacklist. Léelo para reservas/citas/agendamiento.
• 47-cognitive-inclusive-design.md — accesibilidad cognitiva & diseño inclusivo (la capa humana más allá del WCAG técnico). 8 objetivos COGA, neurodiversidad (dislexia/TDAH/autismo do's concretos), plain language (6º-8º grado), baja visión/motora/situacional, Microsoft Inclusive Design + persona spectrum/curb-cut effect, respetar prefers-*, WCAG 3.0. Blacklist. Repásalo para diseñar para el rango más amplio de humanos (complementa 16).
• 48-design-qa-testing-handoff.md — design QA, testing, handoff & design ops (la capa de calidad studio-grade). Checklist de Design QA (estados, contenido real no lorem, responsive entre breakpoints, pixel-vs-intent), visual regression (Playwright/Chromatic), Storybook (story por estado, play/a11y addons), Figma Dev Mode + MCP + Code Connect + token pipeline (anti-drift), gates a11y/perf en CI, launch checklist. Blacklist. Léelo antes de publicar o al montar sistema/pipeline.

Capa estratégica (producto, no solo visual):

• 49-growth-cro-experimentation.md — growth, CRO & experimentación (que lo diseñado convierta y crezca). Optimization loop + hipótesis falsable, A/B testing válido (sample size, significancia, peeking/novelty), prioritización ICE/PIE, funnel AARRR + levers de conversión, analytics (north star, tracking plan, vanity vs actionable), growth loops + retención, psicología ética, AI en CRO. Blacklist. Léelo cuando quieras que algo rinda y crezca, no solo se vea bien.
• 50-ux-research-product-strategy.md — UX research, estrategia & discovery (decidir QUÉ construir y para QUIÉN, antes del diseño). Double Diamond + continuous discovery / OST (Teresa Torres), toolkit de métodos (interviews sin leading, usability, card/tree sort), usability testing + 10 heurísticas Nielsen, JTBD + 4 fuerzas del switch, priorización (RICE/Kano/RAT), síntesis (affinity, observación≠insight), IA en research. Blacklist. Léelo antes de diseñar algo nuevo o si dudas que el problema sea real.
• 51-building-ai-products.md — construir productos de IA (engineering detrás de la UI; complementa 18). Arquitectura LLM 2026 + model routing, prompt engineering de producto (system prompt, structured output/tool calling, versioning, anti-injection), RAG (chunking/hybrid/reranking, pgvector, "el cuello es el retrieval"), agentes & tool use ("no construyas agente si basta un workflow"), evals (golden dataset + LLM-as-judge + Langfuse), costo (prompt caching)/latencia/safety. Mapea a GASTROWHATS/Addrian. Blacklist. Léelo para construir cualquier agente/producto de IA.
• 52-motion-design-theory.md — teoría del motion & principios (el por qué; potencia 04/07/34/39). 12 principios de Disney en UI, easing & timing theory (curvas reales, easing asimétrico enter/exit, duration por distancia, spring vs duration), las 7 funciones del motion (funcional, no decorativo), coreografía/orquestación (stagger, focal point, shared element, "one big moment"), microinteracciones (Saffer), motion tokens + signature de marca, a11y vestibular. Blacklist. Léelo para entender el movimiento a fondo.
• 53-ar-vr-spatial-webxr.md — AR, VR, spatial & WebXR (la próxima plataforma + el AR que vende hoy). Panorama honesto (Vision Pro/Quest = aún no masa; AR-on-phone SÍ vende), principios visionOS (windows/volumes, gaze+pinch, glass), WebXR (R3F/@react-three/xr), AR deployable HOY (<model-viewer> + Quick Look/Scene Viewer + GLB/USDZ), try-on (Banuba tras 8th Wall), ROI de 3D/AR commerce (+94% conv, −40% devoluciones). Blacklist. Léelo para AR de producto/inmersivo.
• 54-business-of-design-studio.md — el negocio del diseño / estudio creativo (operar el diseño como negocio). Pricing (hourly es la trampa, value-based, tiered Good/Better/Best, rangos), adquisición (niching, discovery call, filtro de mal cliente), propuestas/contratos/scope (anti scope-creep, IP al pago final, depósito 25-33%), presentar para aprobar (Insight→Strategy→Execution, no "¿te gusta?"), productizar/escalar con AI (Designjoy, vender taste no output de la AI), números de un negocio sano. Blacklist. Léelo para operar AGENTE STUDIO.
• 55-health-wellness-supplement-compliance.md — salud, wellness & suplementos (web + compliance). La línea legal structure/function vs disease claims (qué SÍ y qué NO puedes afirmar), disclaimers obligatorios FDA + leyenda INVIMA Colombia + registro sanitario, FTC testimonios, trust para ingeribles (transparencia de ingredientes, COA/testing, cepa fruiting-body), estética "clinical-but-warm", contenido educativo honesto, suscripción + COD/WhatsApp. Blacklist (🔴 ILEGALES). Para BIO-SETA y cualquier marca de salud/suplementos — léelo SIEMPRE.
• 56-sound-audio-voice-interfaces.md — sound design, audio & voz (la capa sónica). UI sound (cuándo/cuándo no, paleta sónica, silencio por defecto en web), sonic branding (audio logo, brand sound palette), VUI (brevedad, persona, confirmación, error recovery), agente de voz WhatsApp (STT→procesar→responder, confirma por texto, GASTROWHATS), Web Audio API + autoplay policy + howler/tone, a11y (captions/transcripts). Blacklist. Léelo para sonido/voz/audio en WhatsApp.
• 57-photography-art-direction.md — fotografía & dirección de arte real (la artesanía no-IA; complementa 14). DA = el mundo visual cohesivo (consistencia = regla #1, el style frame de 6 ejes, moodboard, shot list), tipos de foto + cuándo, luz/composición/el look caro + los tells de foto barata, curación/stock (cómo no parecer stock), photo treatment + responsive art direction (<picture>, focal point, scrim/duotone), guideline, tendencias 2026 (authentic > polished, anti-AI). Blacklist. Léelo para dirigir/elegir/tratar imágenes.
• 58-web3-crypto-wallet-defi.md — web3, cripto, wallets & DeFi (esconde la cadena y el gas, NUNCA el riesgo). El reto (seed phrase, gas, irreversibilidad) y su muerte vía account abstraction (ERC-4337) + passkeys + embedded wallets + gasless, connect-wallet (wagmi/RainbowKit/SIWE), transaction simulation/anti-scam (Blockaid), swaps/slippage/intents, chain abstraction (balance unificado), el trading agent (límites de gasto vía session keys, kill-switch, preview), MiCA/ética (no gambling, no yields falsos). Blacklist. Léelo para cualquier producto cripto o AGENTE TRADING.
• 59-elearning-edtech-course-design.md — e-learning, EdTech & cursos online (completar ≠ aprender; diseña para retención). La ciencia (cognitive load, active recall, spaced repetition 24h/3/7/14, ADDIE, Bloom), course/lesson UX (player con transcript/quizzes embebidos, progreso siempre visible), el problema #1 = completion (cohortes 40-90% vs self-paced <20%, quick win, gamificación learning-first, nudges conductuales), assessment con explicación, AI tutor 2026, plataformas (Teachable/Thinkific/Kajabi/Maven). Blacklist. Léelo para productos educativos / onboarding como aprendizaje.
• 60-sustainable-green-low-carbon-web.md — diseño web sostenible/verde (sostenible = ligero = rápido = barato = SEO; NO hay trade-off, es la misma optimización que 38 vista desde la ética). La ciencia (SWDM v4, 54% del impacto en el dispositivo del usuario, ~0.36g/pageview), reducir page weight (imágenes/video/fuentes/JS/third-party), green hosting (Green Web Check), UX sostenible (dark mode OLED, no autoplay), carbon budget en CI (CO2.js, Website Carbon, Ecograder), WSG (W3C), carbon-aware computing, anti-greenwashing. Blacklist. Léelo para sitios eficientes + argumento ESG/marca.
• 61-portfolio-agency-showcase.md — portfolio, agencia & showcase creativo (el sitio ES el portfolio; show don't tell). Subgéneros, estructura (hero gancho + grid curado de 4-6, el más débil define tu promedio), el case study que gana clientes (challenge con consecuencia de negocio → por qué falló → tu pensamiento con proceso → before/after → métricas "X by Y" → testimonio de impacto), motion como prueba (wild en hero, restrained en lectura), about/contact trivial, multi-marca + taste como producto AI-era, bento grid 2026. Blacklist. Léelo para AGENTE STUDIO y cualquier portfolio.
• 62-marketplace-two-sided-platform.md — marketplace & plataformas de dos lados (la North Star es liquidity, no volumen; diseña AMBOS lados). Chicken-and-egg/cold-start (supply-first, niching down, concierge/seed manual), la UX asimétrica (seller dashboard mobile-first, progressive onboarding), trust & safety (double-blind reviews, verificación, escrow, dispute resolution, cold-start del seller nuevo), search que optimiza booking probability + exposure fairness, disintermediation/leakage (carrots > sticks), el marketplace dentro de WhatsApp LatAm, agentic commerce 2026. Blacklist. Léelo para marketplaces/plataformas C2C/gig.
• 63-global-design-emerging-markets.md — diseño global, mercados emergentes & next billion (pesa cada KB, asume que la red se cae, mete todo en el chat, deja que paguen al recibir). El usuario mobile-only (Android gama baja, datos prepago caros = cada MB es dinero suyo), constraints (offline-first, optimistic UI, progressive loading, lightweight "Go"), WhatsApp como SO del comercio ($18B LatAm, el chat ES la interfaz, PWA > nativa pesada), baja alfabetización (iconos+texto, voz, visual), COD + Pix/Nequi/UPI/M-Pesa, cultura, global-first desde la arquitectura. Blacklist. Léelo para ambición mundial / LatAm / BIO-SETA-GASTROWHATS.
• 64-data-storytelling-dataviz-narrative.md — data storytelling & dataviz narrativa (complementa 13: allí el panel exploratory, aquí contar una historia explanatory). Un número solo no significa nada — el contexto/comparación SON el insight. Explanatory vs exploratory (Knaflic), elegir el chart para el mensaje + el eje honesto + la anotación como arma, formatos (annotated/scrollytelling NYT/explorer, Martini Glass, revelado progresivo), D3/Observable Plot/Scrollama, el look editorial + ColorBrewer (no rainbow), honestidad (Tufte lie factor), peligros de charts-con-IA. Blacklist. Léelo para infografías/reportes/persuadir con datos.
• 65-gamification-engagement-systems.md — gamificación & engagement (gamifica la fricción, no la pasión; meaningful vs "pointsification"). La ciencia (SDT autonomy/competence/relatedness, overjustification effect, Octalysis White-Hat vs Black-Hat), las mecánicas + cuándo cada una (points/levels/badges/leaderboards/streaks/progress, endowed progress), engagement loops (Hooked: trigger→action→variable reward→investment; Player's Journey), aplicaciones (Duolingo deep), juice/feedback con restraint, ética 2026 (loot boxes reguladas, engagement vs addiction). Blacklist. Léelo para puntos/progreso/recompensas sin manipular.
• 66-real-estate-property-platforms.md — real estate & plataformas de propiedad (images-first + price-always-visible + location-first + contact-frictionless). La psicología (journey largo dreaming→deciding, emoción+razón, trust extremo), búsqueda mapa+lista split view (price pins, draw-your-area, saved alerts), la página de detalle (galería #1, key facts, CTA sticky, tour 3D Matterport, floor plan, hipoteca, price history), fotografía/tours (dollhouse view), lead gen + WhatsApp/bot de calificación LatAm, anti-scam (listings falsos, AI staging con disclosure). Blacklist. Léelo para inmobiliario/vivienda/construcción.
• 67-community-social-forum-platforms.md — comunidad, social & foro (diseñas un espacio social, no una app; la moderación decide la supervivencia). Audiencia vs comunidad, regla 90-9-1 (no acoses lurkers), cold-start del cuarto vacío, feed/thread (threading vs flat) + voting (Wilson), identidad/reputación (Discourse Trust Levels, el first-post aterrador), moderación (stack flag/mute/ban, IA híbrida + límites de idioma LatAm, chilling effect), métricas de salud (contribution rate/retention, NO registrados), WhatsApp/Telegram LatAm. Blacklist. Léelo para foros/feeds/Discord/comunidades.
• 68-travel-hospitality-tourism.md — travel, hospitality & turismo (paga upfront por algo que no puede tocar → trust extremo; sirve el dream-sell emocional y el booking racional sin mezclarlos). El funnel 5 fases (dream→plan→book→experience→share), dream/destination design (hero inmersivo, historias locales anti-IA), booking UX (search destino+fechas+huéspedes, calendario con precio, precio total honesto — drip pricing ilegal FTC), reviews (factor #1, recencia), tours/operador LatAm WhatsApp+depósito, mobile/LCP/offline on-trip, AI trip planning. Blacklist. Léelo para hoteles/destinos/tours (Colombia).
• 69-b2b-enterprise-saas-web.md — B2B / enterprise SaaS (no vendes a una persona, a un comité; bello Y claro, la era "feo porque es B2B" murió). El comprador (8+ stakeholders con veto, usuario/champion/economic/IT/security, PLG vs sales-led), el marketing site (estándar Stripe/Linear, mostrar el producto, social proof con métricas, pricing con señal), conversión (doble CTA por intención, ROI calculator, vs-competitor), UX enterprise (RBAC bottom-up, org/teams, admin panel), trust/security (SOC 2/ISO/trust center — procurement bloquea sin esto), PLG/NRR/vertical-AI 2026. Blacklist. Léelo para FACTUM y cualquier SaaS B2B.
• 70-events-ticketing-live.md — eventos, ticketing & experiencias en vivo (vende un momento irrepetible con cupo finito → FOMO/scarcity son la verdad, no trucos). Las 4 W visibles sin scroll + el hero como poster, lineup con jerarquía de headliner, ticketing (tiers, seat map por sección en tiempo real, carrito con timer, fees incluidos desde el inicio), el on-sale de alta demanda (cola virtual aleatoria, anti-bot), pago LatAm PSE/Nequi/Wompi + venta por WhatsApp, ticket digital QR rotativo anti-scalping (DICE). Blacklist. Léelo para conciertos/festivales/fiestas (Bendita Pola).
• 71-jobs-recruiting-careers.md — jobs, recruiting & careers (marketplace de dos lados con herida emocional; trata al candidato como cliente). La careers page como employer branding (EVP, fotos reales no stock), job search + salary transparency, el job detail (must-have vs nice-to-have), la aplicación (el pecado "sube CV y reteclea todo", quick apply, auto-fill IA), el black hole/ghosting (status tracker, rechazo digno — ya ilegal), ATS kanban, WhatsApp recruiting LatAm + IA regulada (LL144/Colorado). Blacklist. Léelo para job boards/careers/ATS.
• 72-automotive-vehicle-commerce.md — automotriz & vehículos (2ª compra más grande; vende sueño + spec sheet, no elijas uno). Cinematic arriba/racional abajo, el showcase (hero reveal, scrollytelling "Apple-of-cars", 360°), el configurador (build-your-own paso a paso, 2D image-swap vs 3D/WebGL, precio en vivo, decision fatigue), dealership/inventario + WhatsApp LatAm + cuota mensual, financiación/confianza (Kavak N puntos), mobile/LCP 3D, EV-first/AR/AI 2026. Blacklist. Léelo para marcas de autos/concesionarios/configuradores.
• 73-news-media-publishing.md — news, media & publishing (complementa 45: la publicación como producto, no el artículo). La homepage como curaduría hecha visible (hero+grid, jerarquía=juicio editorial, river vs package, breaking/live), el artículo + recirculation (el motor de engagement) + newsletter inline, paywalls (el dynamic+propensity, registration wall, el bundle anti-churn), newsletters/D2C/first-party data, y el shift existencial "Google Zero" (GEO/AEO, licencias, AI-slop no). Blacklist. Léelo para medios/revistas/content business.
• 74-nonprofit-fundraising-impact.md — nonprofit, fundraising & impacto (pides dinero sin nada tangible: vendes impacto+emoción+confianza). La psicología (emoción decide/razón justifica, identifiable victim, warm glow), storytelling (charity:water, una persona no multitud, el donante es el héroe, ética anti-poverty-porn), el flujo de donación (sticky donate, form <2min, ask array + impact framing "$X=Y", mensual como default, PSE/Nequi), trust/transparencia (a dónde va el dinero), recurring/retención (sustainer 78% vs 32%), thermometer/matching/WhatsApp LatAm. Blacklist. Léelo para ONGs/causas/donaciones.
• 75-developer-tools-api-docs-dx.md — developer tools, API docs & DX (el dev odia el marketing; "the docs ARE the product"). TTFC (time-to-first-call) es la métrica reina, el marketing site code-first (snippet en el hero, dark, GitHub stars), API docs three-column (quickstart ≤10 pasos, code samples multi-lenguaje con copy, OpenAPI híbrido, "Try it" playground), onboarding (test keys sk_test_, errores con subcode+link), y AI 2026 (llms.txt, docs-MCP, agent-readable). Blacklist. Léelo para FACTUM/GASTROWHATS API o cualquier producto para devs.
• 76-music-streaming-entertainment.md — música, streaming & entertainment ("the vibe is the product"; el registro del diseño debe coincidir con el género). El player (persistent mini-player, dynamic color theming desde el cover, lyrics sync), browse algorítmico+editorial, el artist site (hero inmersivo, embeds nativos obligatorios, tours/merch, drops), fan/creator economy (direct-to-fan > streaming, superfan funnel), audio-reactive (Web Audio AnalyserNode), OTT (continue-watching), WhatsApp LatAm, AI music + disclosure. Blacklist. Léelo para sitios de artista/streaming/OTT/podcast.
• 77-civic-government-public-sector.md — cívico, gobierno & sector público (acceso universal sin fricción; claridad sobre delight). Las GDS Design Principles, plain language (edad lectora 9) + el patrón one-thing-per-page, a11y como ley (WCAG/Res.1519 Colombia, progressive enhancement sin JS, el design system como vehículo), formularios (check-your-answers, save-and-return, identity/cédula con ruta presencial), cero dark patterns, mobile-only LatAm + WhatsApp + multicanal (gov.co). Blacklist. Léelo para servicios de gobierno/trámites/civic tech.
• 78-logistics-shipping-tracking.md — logística, shipping & order tracking (post-compra = máxima ansiedad; la transparencia es el producto, el silencio comunica "no nos importa"). La tracking page (status stepper, EDD siempre visible, branded page que reduce tickets 72% + revenue), notificaciones proactivas (WhatsApp LatAm), el mapa/ETA (el dato stale es peor que no tener mapa, ventana de 15-30min), proof of delivery, COD/motorizados/pin-en-mapa LatAm

…(truncated)