mubasildesign/saas-landing-page-forge

SaaS Landing Page Forge

Crea una página de inicio SaaS pulida y responsiva dentro del archivo Figma del usuario. Trata el contenido, la evidencia del producto, el sistema de marca y el sistema Figma existente del usuario como la fuente de verdad. Las pautas de diseño genéricas nunca prevalecen sobre ellos.

Comienza con la ingesta

Lee references/intake-and-planning.md. Solicita las entradas en una lista de verificación compacta, reconoce lo que ya está presente y separa los elementos esenciales faltantes de las entradas opcionales.

No te detengas en brechas recuperables. Continúa con suposiciones etiquetadas y marcadores de posición cuando el usuario esté de acuerdo o ya te haya pedido que continúes. Nunca inventes capacidades del producto, precios, pruebas, logotipos de clientes, testimonios, métricas, reclamos de cumplimiento o reglas de marca.

Se requiere un destino Figma válido y un MCP conectado con herramientas de escritura adecuadas para editar el archivo. Si falta alguno, proporciona el resumen de diseño y el plan de activos, luego indica el paso exacto necesario para desbloquear la producción en Figma.

Trabaja en este orden

1. Pre-vuelo: Inspecciona las herramientas Figma MCP disponibles, abre el destino proporcionado, determina el alcance de la edición e inventaría los estilos, variables, componentes, cuadrículas y marcos cercanos existentes. Sigue references/figma-mcp-workflow.md.
2. Resumen: Resume la audiencia, la oferta, la conversión principal, el mensaje, las pruebas, los activos, las restricciones, las entradas faltantes y las suposiciones. Obtén confirmación solo para elecciones que cambien materialmente el resultado.
3. Arquitectura de contenido: Preserva el copy aprobado y organízalo en un camino de conversión claro. Usa references/conversion-and-content.md. Ofrece cambios de copy por separado; nunca reescribas contenido aprobado en silencio.
4. Dirección creativa: Deriva una idea visual coherente de la marca y el producto. Usa references/visual-direction.md. Cuando la dirección sea genuinamente abierta, presenta hasta tres opciones distintas y recomienda una antes de construir.
5. Fundamentos de Figma: Reutiliza el sistema del archivo cuando sea adecuado. De lo contrario, crea un pequeño sistema local de variables/estilos, cuadrículas, jerarquía tipográfica, espaciado, radios y componentes reutilizables.
6. Construcción: Compone la página de inicio de escritorio con contenido real y capturas de pantalla del producto. Crea variantes responsivas para tableta/móvil o comportamiento explícito de puntos de interrupción según se solicite. Usa references/responsive-and-motion.md.
7. Revisión y reparación: Ejecuta references/design-qa.md, corrige problemas materiales en el archivo y luego vuelve a inspeccionar los marcos afectados.
8. Entrega: Informa los nombres exactos de página/marco, componentes y estilos reutilizables, variantes responsivas, anotaciones de movimiento, suposiciones/marcadores de posición, entradas no resueltas y riesgos restantes.

Reglas operativas de Figma

• Usa solo las herramientas que el Figma MCP conectado realmente expone. Nunca afirmes que una edición, renderización o inspección se realizó con éxito sin evidencia de la herramienta.
• Inspecciona antes de escribir. Después de una escritura, inspecciona los nodos resultantes o renderiza antes de continuar.
• No sobrescribas ni elimines trabajo no relacionado. Si el destino es ambiguo, pregunta dónde trabajar o solicita aprobación para crear una página/marco de trabajo claramente nombrado.
• Prefiere capas nativas editables, auto layout, componentes, variantes, variables, estilos de texto y efectos sobre imágenes aplanadas.
• Mantén las capturas de pantalla del producto fieles: preserva la relación de aspecto, recorta intencionalmente y nunca las redibujes de una manera que implique funcionalidad inexistente.
• Usa nombres estables y descriptivos. Evita Frame 123, Group 5 o agrupaciones decorativas sin propósito de diseño.
• No cambies el uso compartido, permisos, estado de publicación, propiedad o bibliotecas.
• Ante una escritura fallida, inspecciona el archivo antes de reintentar para que un éxito parcial no cree duplicados.

Barra de calidad

La página debe comunicar qué hace el producto, para quién es, por qué es creíble y qué acción tomar dentro del primer viewport. Usa un CTA dominante, una jerarquía coherente, tipografía y espaciado disciplinados, contraste accesible, solo pruebas reales y una idea visual conectada al producto en lugar de decoración SaaS genérica.

El movimiento es opcional y con propósito. Especifica solo cuando mejore la atención, comprensión, retroalimentación, continuidad o expresión de marca. Incluye siempre un comportamiento de movimiento reducido.

Límite del alcance

Esta habilidad produce un diseño de página de inicio en Figma y una entrega consciente de la implementación. Puede anotar comportamiento, activos y reglas responsivas, pero no genera código frontend de producción a menos que el usuario solicite ese entregable por separado.

Para conocer la procedencia y la auditoría de capacidades detrás de esta habilidad combinada, consulta references/source-coverage.md.