59 Prototype.
Interactive product mockups — dashboards, apps, landing pages, internal tools. Anything you’d hand a stakeholder and click through.
Tipo de artefacto
Escena
- 001
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'. - 002
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. - 003
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. - 004
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. - 005
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'. - 006
Informe de Visualización de Datos Convierte datos CSV, Excel o JSON en una página de informe visual refinada. - 007
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. - 008
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. - 009
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. - 010
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 '电子指南'. - 011
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'. - 012
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. - 013
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 运维手册. - 014
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 '财报'. - 015
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. - 016
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. - 017
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. - 018
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 '入职'. - 019
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). - 020
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`. - 021
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 '发票'. - 022
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. - 023
Documento pergamino Kami Lienzo de pergamino cálido (#f5f4ed), acento monocromo azul tinta (#1B365D), una familia serif y tipografía de grado editorial. - 024
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 '看板'. - 025
Ú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. - 026
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. - 027
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. - 028
Póster de Marketing Póster vertical o imagen para compartir estilo Historias con fuerte impacto visual. - 029
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 '会议纪要'. - 030
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'. - 031
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 '移动端引导'. - 032
Currículum Moderno Currículum moderno y minimalista, una página A4, listo para imprimir o exportar a PDF. - 033
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. - 034
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. - 035
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. - 036
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. - 037
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. - 038
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. - 039
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. - 040
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. - 041
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'. - 042
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. - 043
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". - 044
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 '三连发'. - 045
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. - 046
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. - 047
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. - 048
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 目标. - 049
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. - 050
Tarjeta para compartir en Twitter Tarjeta de cita o datos de Twitter diseñada para acompañar una publicación. - 051
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. - 052
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. - 053
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). - 054
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. - 055
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. - 056
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. - 057
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. - 058
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. - 059
Tarjeta Xiaohongshu Tarjetas de conocimiento estilo Xiaohongshu, organizadas como un carrusel deslizable de múltiples tarjetas.