Meridian
Resumen del diseño
Meridian sustituye tres tarjetas idénticas por una cotización dominante y dos alternativas. El tamaño del equipo y el periodo de facturación actualizan precios y recomendaciones al instante, mientras una tabla comparativa reducida mantiene fijos los encabezados de los planes.
Registro de verificación
VerificadoUna revisión independiente en el navegador ejercitó 100 estados con equipos de 1–50 personas y ambos periodos de facturación, verificando 300 importes mensuales por nivel, 150 totales anuales y todas las recomendaciones; la facturación anual para 25 personas produjo $1,920 / $3,360 / $5,760.
Límites de la verificaciónLa misma revisión aún detectó que el bloque recomendado puede salir de su propia columna durante el relevo de desplazamiento y dejar ese encabezado brevemente vacío mientras las filas comparativas son legibles; el estado final fijo correcto no elimina este defecto.
Prompt
Una página de precios para un producto de colaboración en equipo (desde 1440×900, adaptable hasta 390 píxeles de ancho), con interfaz en inglés: tres niveles, facturación mensual y anual, precio total según el tamaño del equipo, tabla comparativa de funciones y preguntas frecuentes. El nombre y las funciones del producto son ficticios.
El cambio inmediato de precios es el núcleo de este trabajo: al arrastrar el control de tamaño del equipo o alternar entre facturación mensual y anual, el precio de cada nivel rueda hasta su nuevo valor y el nivel recomendado cambia con el tamaño del equipo; al desplazarse por la tabla comparativa, los nombres de los niveles permanecen fijos arriba. No dispongas tres tarjetas redondeadas idénticas en fila.
Colores: fondo blanco puro, texto negro tinta y esmeralda como único acento. No uses blanco cálido, beige ni naranja.
Diseña tres estados: vista predeterminada, facturación anual para un equipo de 25 personas y comparación de funciones expandida.
Ver el prompt original en chino
一个团队协作产品的定价页(1440×900 起,响应式到 390 宽),界面用英文:三个档位、月付和年付切换、按团队人数算总价、功能对比表和常见问题。产品名和功能都是虚构的。
价格当场变化是这件作品的核心:拖动人数、切换月付年付时,每档的价格数字滚动到新值,推荐的档位跟着人数变;功能对比表往下滚时档位名吸在顶上。不要做成三张一样的圆角卡片排一排。
配色:纯白底、墨黑字、祖母绿做唯一强调色;不用暖白、米色和橙色。
设计三个状态:默认、年付加 25 人团队、展开功能对比。
Abrir ejemplo interactivo