Velo de aurora
A self-contained WebGL2 hero: layered aurora light curtains warped over a night sky scattered with stars; move the cursor to sway the veil.
Prototipo.
Maquetas de productos interactivas — paneles de control, aplicaciones, páginas de inicio, herramientas internas. Cualquier cosa que le entregarías a un stakeholder para hacer clic.
Tipo de artefacto
Escena
Entrada de blog
Artículo largo / entrada de blog — con cabecera, marcador de imagen hero, cuerpo del artículo con figuras y citas destacadas, firma del autor, publicaciones relacionadas. Use cuando el brief solicite 'blog', 'artículo', 'entrada', 'ensayo' o 'estudio de caso'.
Piscina de cáusticas
A self-contained WebGL2 hero: animated water caustics woven from domain-warped ripples; click the water to drop a ripple. No meshes, no textures.
Informe de caso clínico
Presentación estructurada de casos médicos para rondas, conferencias y documentación. Genera informes en formato SOAP o narrativo con signos vitales fisiológicamente precisos, laboratorios y planes basados en evidencia.
Mapa de capacidades interactivo Codex
Convierte un artículo extenso, hilo, memo o narrativa de producto en un mapa de capacidades clickeable estilo Codex con bucle de flujo de trabajo, matriz de casos de uso y panel de detalles responsive.
Critique
Realiza una revisión de diseño experta en 5 dimensiones sobre cualquier artefacto HTML del proyecto — Filosofía/Jerarquía visual/Detalles/Funcionalidad/Innovación, cada una puntuada de 0 a 10. Genera un informe HTML autocontenido con gráfico de radar, puntuaciones respaldadas y tres listas: Mantener/Corregir/Mejoras rápidas.
Panel de control
Panel de administración y análisis en un solo archivo HTML. Barra lateral izquierda fija, barra superior con usuario/búsqueda, cuadrícula principal de tarjetas KPI y gráficos. Úselo para pantallas de 'panel de control', 'administración', 'analítica' o 'panel de gestión'.
Informe de Visualización de Datos
Convierte datos CSV, Excel o JSON en una página de informe visual refinada.
Dating Web
Panel de citas/emparejamiento orientado al consumidor con navegación lateral izquierda, barra de señales de comunidad, KPIs destacados, gráfico de barras de coincidencias mutuas de 30 días y bloque de tendencia de tasa de coincidencia. Tipografía editorial con acento contenido. Ideal para sitios de citas, emparejamiento, paneles de comunidad o redes sociales.
prototipo Leer prompt completo → Valoración DCF
Valoración por flujo de caja descontado y análisis de valor intrínseco para empresas públicas. Para DCF, valor justo, valor intrínseco, precio objetivo y análisis de sobre/infravaloración.
Galería de profundidad
A scroll-reactive 3D image gallery in Three.js: Z-stacked images crossfade over per-image mood backgrounds with velocity breath, a glowing cursor trail and an editorial CMYK/RGB/HEX/PMS color card.
Escaparate 3D de dispositivos
Escaparate estático en 3D de iPhone y MacBook con HTML real incrustado en las pantallas, refracción de lente de vidrio y composición giratoria de 360 grados.
Guía digital
Vista previa de guía digital de dos páginas: página 1 es portada (título, autor, estadísticas de 'Qué incluye', avance del índice); página 2 es doble página (cuerpo de lección con cita destacada y lista de pasos). Tono lifestyle / marca creador. Usar cuando se solicite 'e-guide', 'guía digital', 'lookbook', 'lead magnet', 'guía de creador', 'playbook', 'guía PDF' o '电子指南'.
Distorsión y grano
A vertical gallery (Three.js) where planes bend with scroll velocity, ripple under the cursor via simplex noise, and carry a film grain.
Página de documentación
Una página de documentación con navegación lateral, cuerpo de artículo desplazable y tabla de contenidos. Úsela cuando se mencione 'documentación', 'guía', 'referencia API' o 'tutorial'.
Marketing por correo electrónico
Plantilla de correo para lanzamiento de producto con cabecera, imagen hero, titular en cursiva, texto principal, CTA principal y cuadrícula de especificaciones en diseño HTML de columna única centrada.
Runbook de ingeniería
Un runbook de ingeniería — resumen del servicio, tabla de alertas, enlaces a dashboards, procedimientos comunes con comandos copiables, rotación de guardia y checklist de respuesta a incidentes. Úselo para runbooks, documentos ops, guías de guardia, documentos SRE o 运维手册.
Informe financiero
Informe financiero trimestral/mensual con cabecera de KPI, gráficos de ingresos y consumo, tabla resumen P&L, aspectos destacados y párrafo de perspectivas. Usar cuando el brief mencione 'informe financiero', 'informe Q3', 'revisión MRR', 'P&L' o '财报'.
Plantilla de panel en vivo Flowai
Panel de gestión de equipos con estética FlowAI que incluye tres pestañas (Miembros del equipo, Detalles del equipo, Registro de actividad), fila de estadísticas KPI, tabla de miembros, gráfico de barras de distribución de roles, minigráficos de presencia en línea y actividad, y panel de principales contribuyentes. Compatible con tema claro/oscuro, tooltips, zoom y exportación CSV.
Aplicación gamificada
Prototipo de aplicación móvil gamificada de tres pantallas: portada, misiones diarias con cintas de XP y barra de nivel, detalle de misión. Ideal para aplicaciones gamificadas, rastreadores de hábitos, aplicaciones de vida RPG, aplicaciones de subida de nivel, misiones diarias y aplicaciones de XP/rachas.
Panel de GitHub
Panel de análisis de repositorio GitHub — estrellas, forks, colaboradores, issues, pull requests, actividad reciente y principales colaboradores. Úselo para panel de repositorio GitHub, informe de crecimiento de código abierto, página de salud del repositorio o vista de análisis de GitHub.
Deriva de semitono
A self-contained WebGL2 hero: a flowing field screened through a rotated halftone dot grid into a duotone print aesthetic; move the cursor to bend the drift.
Lámina holográfica
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
Galería de paralaje horizontal
A horizontal-scroll WebGL gallery (Three.js): frames glide sideways with lerp smoothing and each image parallaxes its texture (UV shift) by its position in the viewport.
Incorporación de RRHH
Plan de incorporación de nuevos empleados en una sola página: horario de la primera semana, presentación del compañero + gerente, trayectoria de aprendizaje, lista de equipos y resultados 'estás listo cuando…'. Usar cuando el brief mencione 'incorporación', 'nuevo empleado', 'plan primera semana' o '入职'.
Html Ppt Taste Brutalist
Presentación HTML 16:9 al estilo tactical-telemetry / terminal CRT. Diapositivas carbón de CRT desactivado, monoespacio fósforo blanco, acento rojo peligro, superposición de líneas de escaneo, sintaxis ASCII, densidad sobre decoración. Destilado de Leonxlnx/taste-skill `brutalist-skill` (modo Tactical Telemetry).
Html Ppt Taste Editorial
Presentación HTML 16:9 de estilo editorial minimalista. Diapositivas en crema cálido, serif para títulos + grotesca para cuerpo, líneas finas, metadatos monoespaciados, espacios en blanco generosos, un acento. Destilado de Leonxlnx/taste-skill `minimalist-skill`.
Factura
Página de factura imprimible — bloque de remitente + destinatario, tabla de artículos, desglose de impuestos, totales e instrucciones de pago. Úsala cuando el brief mencione 'invoice', 'bill', 'billing statement' o '发票'.
Kami Landing
Produce un documento de una página con calidad de impresión — lienzo de pergamino cálido, acento azul tinta, serif de un solo peso, sin cursiva, sin grises fríos. El resultado se lee como un documento profesional o un one-pager de estudio, no como una UI de aplicación. Multilingüe por diseño (EN · zh-CN · ja). Un archivo HTML autocontenido, sin dependencias.
Documento pergamino Kami
Lienzo de pergamino cálido (#f5f4ed), acento monocromo azul tinta (#1B365D), una familia serif y tipografía de grado editorial.
Tablero Kanban
Tablero kanban / de tareas con columnas (To do / In progress / In review / Done), tarjetas arrastrables, avatares de asignados, swimlanes y barra de filtros superior. Úselo cuando se mencione 'kanban', 'task board', 'sprint board', 'trello' o '看板'.
prototipo Leer prompt completo → Últimos 30 días
Investigación de tendencias comunitarias y sociales de los últimos 30 días. Úselo para conocer la opinión actual, el sentimiento reciente, las reacciones de la comunidad, la prueba social, la reacción al lanzamiento, el escaneo de tendencias o el contexto de los últimos 30 días.
Iridiscencia líquida
A self-contained WebGL2 hero: a living oil-on-water field brightened into iridescent caustic filaments; move the cursor to bend the flow.
Metal líquido
Crea un shader de metal líquido a pantalla completa — ondas de cromo fundido con un reflejo especular que barre una paleta iridiscente de película fina — renderizado a 60fps como un único index.html autónomo.
Artículo de revista
Diseño de artículo de revista inspirado en Huashu / huashu-md-html para convertir Markdown o notas en un ensayo HTML largo y pulido.
Póster de Revista
Póster editorial estilo periódico con papel prensa, línea de fecha, título serif de gran tamaño con tachado y cursiva, cuerpo de texto en 2 columnas y 6 secciones numeradas con citas anotadas. Ideal para pósters de revista, diseños editoriales, estilo periódico o manifiestos.
Póster de Marketing
Póster vertical o imagen para compartir estilo Historias con fuerte impacto visual.
Actas de reunión
Página de actas de reunión — barra de título con asistentes, lista de agenda, bloque de decisiones, tabla de tareas con responsables y fechas, y pie de página para la próxima reunión. Usar cuando se mencionen 'actas de reunión', 'minutas', 'notas 1:1', 'resumen all-hands' o '会议纪要'.
Aplicación móvil
Una pantalla de aplicación móvil renderizada dentro de un marco iPhone 15 Pro con precisión de píxeles en la página. Se crea copiando el archivo semilla assets/template.html y pegando un arquetipo de pantalla desde references/layouts.md. Úsalo cuando el brief solicite 'aplicación móvil', 'aplicación iOS', 'aplicación Android', 'pantalla de teléfono' o 'UI de aplicación'.
Onboarding móvil
Flujo de onboarding móvil multipantalla representado como tres marcos de teléfono uno al lado del otro — splash, propuesta de valor, inicio de sesión. Barra de estado, puntos de deslizamiento, CTA principal. Usar cuando se mencione 'onboarding móvil', 'onboarding iOS', 'registro telefónico' o '移动端引导'.
Currículum Moderno
Currículum moderno y minimalista, una página A4, listo para imprimir o exportar a PDF.
Motion Frames
Composición de motion design de un solo fotograma con animaciones CSS en bucle: anillo de texto giratorio, globo animado, temporizador, etiquetas parallax. Renderiza como póster de vídeo hero para HyperFrames o cualquier exportador basado en keyframes. Ideal para motion design, hero animado, loops, pósteres de vídeo y tarjetas de título.
Rejilla de neón
Crea una escena synthwave de rejilla de neón — una rejilla de suelo en perspectiva que se desplaza hacia un sol retro con bandas, bajo un campo de estrellas de neón — renderizada a 60fps como un único index.html autónomo.
prototipo Leer prompt completo → Página principal de Open Design
A pixel-faithful mirror of the live open-design.ai homepage — an interactive WebGL/Three.js (React Three Fiber) hero built on Next.js. Features a real-time 3D "Open Design" wordmark (Draco-compressed geometry), a scattered sticker collage, custom variable fonts, cursor-reactive parallax, and scroll-driven motion. This is a first-party showcase of the visual ceiling Open Design targets for interactive marketing surfaces on the web — with all assets bundled locally (only the Draco decoder loads from a CDN, like the other WebGL examples), rendering in the sandboxed preview. Use as a reference for high-craft 3D landing pages, agent-native product sites, and motion-rich hero sections.
Página de destino Open Design
Produce una página de destino editorial de una sola página con el lenguaje visual Atelier Zero (collage editorial Monocle / Apartamento / Études). Rellena inputs.json desde un brief de marca, opcionalmente genera 16 recursos de collage vía gpt-image-2 y emite un archivo HTML autónomo con animaciones de scroll y navegación fija.
Orbit General
Se activa automáticamente por Orbit cuando hay dos o más conectores conectados. Recopila la actividad de las últimas 24 horas de todos los conectores autenticados (GitHub, Linear, Notion, Slack, 飞书, Calendario, Gmail, Drive, Sentry, Vercel, etc.) y genera un panel adaptativo en cuadrícula bento en la parte superior de "我的设计". Ejecutado automáticamente por el programador de resumen diario de Orbit.
Orbit Github
Habilidad de Orbit para generar automáticamente resúmenes diarios basados en conexiones de GitHub. Recupera PRs, solicitudes de revisión, issues, ejecuciones de CI y merges de las últimas 24 horas y los muestra en el estilo de notificaciones nativo de GitHub. Invocado automáticamente por el programador de resumen diario de Orbit.
Orbit Gmail
Extrae la actividad de la bandeja de entrada de las últimas 24 horas y genera un resumen diario cuando Gmail es el único servicio conectado o está explícitamente seleccionado. Se activa automáticamente por el programador de Orbit y no debe ejecutarse manualmente.
Orbit Linear
Se activa automáticamente por el pipeline de Orbit cuando Linear es el único conector conectado del usuario o cuando el usuario limita explícitamente su resumen diario a Linear. Extrae las últimas 24 horas de movimiento de issues, cambios de estado, asignaciones y progreso de ciclo, y lo renderiza en el lenguaje visual nativo de la bandeja de entrada de Linear.
Orbit Notion
Habilidad de briefing de Open Orbit — seleccionada por el pipeline de Orbit cuando Notion es el único conector conectado del usuario o cuando el usuario limita explícitamente su resumen diario a Notion. Extrae las ediciones de documentos, comentarios, menciones y cambios de filas de base de datos de las últimas 24 horas desde la conexión autenticada de Notion del usuario y renderiza el resumen como una página nativa de Notion (elementos callout/toggle/tabla de base de datos). Esta habilidad no debe activarse manualmente — es invocada por el programador de resumen diario de Orbit con datos de Notion en vivo.
Galaxia de partículas
Crea una galaxia de partículas en remolino — decenas de miles de puntos GPU en fusión aditiva girando en espiral alrededor de un núcleo brillante, con sus órbitas resueltas en el vertex shader — renderizada en vivo a 60fps como un único index.html autónomo.
Galería de revelado por píxeles
A scroll-reactive masonry gallery (Three.js + GSAP) where each image develops from a pixel/grid dissolve on viewport entry, with a split-text heading and click-to-fullscreen Flip.
Especificación de producto
Especificación de producto/PRD en una página: problema, métricas de éxito, alcance, historias de usuario, notas de diseño, plan de lanzamiento, preguntas abiertas. Para especificaciones y briefs de funcionalidades.
Página de precios
Una página de precios independiente — encabezado, niveles de planes, tabla comparativa de características y preguntas frecuentes. Úsala cuando el brief solicite 'precios', 'planes', 'niveles de suscripción' o una página de 'comparar planes'.
Hero con raymarching
Crea un hero 3D con raymarching — metaballs que se transforman con sombras suaves y una luz de borde fresnel, orbitando lentamente y trazadas por esferas píxel a píxel en un fragment shader — renderizado a pantalla completa a 60fps como un único index.html autónomo.
Tarjeta de publicación de Reddit
Tarjeta de publicación de Reddit realista con barra de votos y contador de comentarios, ideal para superposiciones de video o compartir historias.
Landing SaaS
Página de aterrizaje SaaS de una sola página con hero, características, prueba social, precios y CTA. Respeta los tokens activos de color/tipografía/diseño del DESIGN.md. Palabras clave: "saas landing", "marketing page", "product landing".
Carrusel Social
Un carrusel de tres tarjetas para redes sociales en formato 1080×1080 – tres paneles cinematográficos alineados con la marca, con titulares que se conectan a lo largo de la serie ('adelante.' → 'al siguiente.' → 'mirando al futuro.'). Cada tarjeta incluye marca, número/total, pie de foto y affordance de 'bucle'. Úselo para solicitudes de 'publicación en carrusel', 'carrusel social', 'carrusel de Instagram', 'serie de LinkedIn', 'tarjetas de hilo de X' o '三连发'.
Panel de redes sociales
Panel de análisis de redes sociales para creadores en un solo archivo HTML. Con selector de plataforma (X / LinkedIn / YouTube / Instagram), tarjetas KPI (seguidores, tasa de interacción, me gusta, reposts), gráfico de crecimiento de seguidores, vista previa del post destacado de la semana y panel lateral de temas en tendencia/comentarios principales.
Tarjeta Spotify Reproduciendo
Tarjeta estilo Spotify con carátula de álbum, barra de progreso y controles de reproducción, ideal para superposiciones de video o páginas personales.
Animación Sprite
Diapositiva explicativa animada en estilo pixel art con fondo crema, año en negrita, mascota en pixel art (carta Hanafuda, hongo o consola de 8 bits), tipografía japonesa cinética y cinta de línea de tiempo. Animación CSS pura, lista para grabar en video vertical.
OKR del equipo
Página de seguimiento de OKR con banner trimestral, tres objetivos con sus resultados clave como barras de progreso, avatares de responsables, píldoras de estado y barra lateral 'resumen del trimestre'. Usar cuando se mencionen OKR, resultados clave, objetivos o 目标.
Tweaks
Añade un panel de controles en vivo a cualquier elemento HTML para ajustar color de acento, escala tipográfica, densidad, movimiento y tema. Los cambios se aplican instantáneamente a las propiedades personalizadas de CSS y se guardan en localStorage.
Tarjeta para compartir en Twitter
Tarjeta de cita o datos de Twitter diseñada para acompañar una publicación.
Velar. — Inmobiliaria de lujo
Landing page inmobiliaria de lujo de una sola página con estética cinematográfica: un precargador de máquina de escribir que se eleva y desaparece, una imagen de edificio impulsada por el scroll que surge desde abajo y se amplía mientras se fija a una sección oscura de declaración, una franja de estadísticas oscura sticky con números que cuentan hacia arriba y una galería de vídeo que se expande al pasar el cursor y se desliza por encima de la sección oscura.
Celdas de Voronoi
A self-contained WebGL2 hero: a living Voronoi network with drifting feature points, palette-keyed cells and glowing boundaries; move the cursor to push the cells.
Página de lista de espera
Página de destino minimalista prelanzamiento con captura de correos, logo de marca y capa decorativa opcional. Lee colores, tipografía y reglas de diseño desde DESIGN.md. Ideal para lanzamientos de productos, registros beta, programas de acceso anticipado y proyectos independientes.
prototipo Leer prompt completo → Web effect extractor
Extract visual effects, Canvas/WebGL/Shader behavior, and interaction details from a reference website, then rebuild them as an editable Open Design artifact.
Prototipo Web
Prototipo web de escritorio de propósito general. Archivo HTML autocontenido creado copiando `assets/template.html` y pegando diseños de `references/layouts.md`. Opción predeterminada para páginas de destino, marketing, documentación o SaaS.
Web Prototype Taste Brutalist
Prototipo web de impresión industrial suiza. Lienzo de papel periódico, grotesca negra monolítica, números que desbordan el viewport, divisores de cuadrícula ultrafinos, acento rojo peligro, decoración de sintaxis ASCII. Destilado de Leonxlnx/taste-skill `brutalist-skill` (modo impresión industrial suiza).
Web Prototype Taste Editorial
Prototipo web editorial-minimalista. Lienzo monocromático cálido, título serif + cuerpo grotesco, bordes de 1px, chips pastel tenues, espacios en blanco generosos, micro-movimiento ambiental.
Web Prototype Taste Soft
Prototipo web suave nivel Apple. Lienzo plateado/crema, tarjetas con doble marco, CTAs con botones anidados, radios squircle generosos, animación elástica y malla ambiental. Basado en soft-skill de Leonxlnx/taste-skill y secciones 4–8.
Experiencia WebGL
Crea una experiencia WebGL/WebGL2 a pantalla completa en tiempo real — shaders animados, escenas 3D, visuales generativos, campos de partículas — ejecutada en vivo en la GPU. Se activa ante solicitudes de WebGL, shader, 3D, generativo, GPU o visual en tiempo real.
prototipo Leer prompt completo → Website Clone
Clone or visually recreate a website using source-first reconnaissance, route crawling, interaction probes, asset capture, and post-clone audit notes.
Wireframe Anotado
Un wireframe lo-fi anotado/redline de una página de aterrizaje de escritorio — bloques greybox dentro de un marco de navegador, pines de anotación numerados (①–⑤) y un panel de especificaciones a la derecha que asocia cada pin con una breve nota de ingeniería/UX. Ideal para solicitudes de wireframe anotado, redline, especificación de wireframe, landing lo-fi o baja fidelidad.
Wireframe Greybox
Un wireframe greybox / blueprint lo-fi nítido de un panel SaaS de escritorio — bloques grises neutros, marcadores de imagen con una cruz diagonal, texto en barras lorem, un panel de gráfico esquemático y anotaciones redline monoespaciadas en una cuadrícula de 12 columnas. Ideal para solicitudes de greybox, wireframe blueprint, dashboard lo-fi o baja fidelidad.
Wireframe de Flujo Móvil
Wireframe lo-fi del flujo de una app móvil — de tres a cuatro marcos de teléfono en fila (onboarding → feed de inicio → detalle → confirmación), contenido greybox dentro de cada dispositivo, flechas conectoras punteadas con etiquetas de paso numeradas y notas adhesivas. Ideal para solicitudes de wireframe móvil, app flow, user flow o lo-fi mobile.
Wireframe Boceto
Wireframe dibujado a mano con fondo de papel cuadriculado, tono de marcador/lápiz, pestañas múltiples, notas adhesivas y marcadores de gráficos. Ideal para solicitudes de wireframe, boceto, lo-fi o pizarra.
Visualizador Worker
Crea un visualizador en tiempo real cuyo cómputo pesado corre en un Web Worker — sistemas de partículas, física, fractales, visualización de datos/audio — compartiendo memoria opcionalmente vía SharedArrayBuffer, renderizado en canvas a 60fps. Se activa ante solicitudes de web worker, simulación, partículas, física, fractal, cómputo fuera del hilo principal o visualizador en tiempo real.
Tarjeta de publicación X / Twitter
Tarjeta realista de publicación X con métricas de interacción (me gusta, reposts, vistas), ideal para superposiciones de video o tarjetas de imagen compartibles.
prototipo Leer prompt completo → X Research
Investigación del sentimiento público en X/Twitter sobre mercados, empresas, productos o comunidades. Úsalo para conocer la opinión pública, publicaciones de expertos o reacciones sociales sobre acciones, sectores, empresas, productos o eventos del mercado.
Tarjeta Xiaohongshu
Tarjetas de conocimiento estilo Xiaohongshu, organizadas como un carrusel deslizable de múltiples tarjetas.