ziqingchuan/landingPageSkill

Componer Landing Page

Convierte una configuración user_config_info.json en una página de aterrizaje educativa HTML de un solo archivo, correcta en términos de negocio, visualmente única y ejecutable directamente en el navegador. El flujo es autocontenido, sin dependencia de sistemas externos.

Versión del contrato de configuración 3.0, clave: conversionFlow es la única fuente de verdad para el flujo de conversión.

Entradas

Archivo	Rol
user_config_info.json	Configuración real del proyecto actual (proporcionada por el usuario)
references/user-config-spec.md	Especificación de campos: significado, tipo, valores permitidos, valores predeterminados
references/business-rules.md	Reglas de negocio: invariantes de comportamiento como conversión, reserva, múltiples hijos y materias
references/frontend-design.md	Dirección visual: temática, tipografía, diseño, anti-patrones de plantillas
references/engineering-conventions.md	Convenciones de ingeniería: adaptación CJK, modo de renderizado i18n, aislamiento de nombres, carga inicial
references/question-bank.json	Banco de preguntas estándar: enunciados, opciones, mapeo de categorías por materia

Los archivos de referencia están incluidos. El usuario solo necesita proporcionar user_config_info.json.

Prioridades

Configuración válida → Invariantes de negocio → Solicitudes explícitas del usuario → Convenciones de ingeniería → Dirección estética

La configuración es de solo lectura: no se genera, completa ni valida. El orden de las fases y nodos de conversionFlow no puede ajustarse. En caso de conflicto, señalar el campo y la regla específicos, sin adivinar en silencio.

Flujo de trabajo

Paso 1: Obtener la configuración

Lee user_config_info.json. Si no se proporciona, detenerse; si falla el análisis, indicar la ubicación del error. Si project.notes no está vacío, se considera una preferencia complementaria del usuario sobre la estructura, el tono y el estilo visual, que afecta directamente la dirección estética del Paso 5, pero no sobrescribe campos estructurados ni interruptores de funcionalidad.

Paso 2: Leer la especificación de campos

Lee completamente user-config-spec.md y comprende la semántica de cada campo. Prestar especial atención al orden de dos niveles de conversionFlow (orden de fases + orden de nodos) y a los 5 tipos de ítem (field / question / verification / booking / calendarSync). No realizar validación de esquema.

Paso 3: Construir el modelo de negocio de solo lectura

Basado en la configuración y la especificación de campos, extraer en el pensamiento el modelo de negocio del proyecto actual:

• Materias: materia de entrada del lead (project.subject) + materias adicionales (extraSubjects)
• Flujo de conversión: orden de fases y nodos de conversionFlow; la fase donde se encuentre un nodo verification indica la ubicación del código de verificación
• Campos: cuáles están habilitados, cuáles son obligatorios, a quién pertenecen (parent/child), campos condicionados por materia
• Interruptores: booking / multiChild / multiSubject / syncCalendar / contactMode / flowMode
• Unidad de requisitos previos: todos los nodos field y question en la fase lead (en el orden de los ítems)
• Coincidencia del banco de preguntas: los nodos con kind=question emparejan su questionId con question-bank.json, seleccionan texto en chino/inglés según project.language, y usan optionId para los datos enviados

Paso 4: Leer las reglas de negocio

Lee completamente business-rules.md y extrae los invariantes de negocio que deben cumplirse. Las reglas de negocio son restricciones de resultado, no una lista de módulos; la IA decide la arquitectura de información de acuerdo con estas restricciones.

Paso 5: Formar la dirección estética

Lee completamente frontend-design.md y, según sus requisitos, realiza un diseño en dos fases:

1. Brainstorm: Color (4-6 hex), Tipo (2+ roles tipográficos), Diseño (una frase + diagrama ASCII), Firma (un elemento único y distintivo)
2. Crítica: Autocrítica contra project.theme, project.adScene, project.notes; cualquier parte que suene genérica y predeterminada debe cambiarse. Solo después de confirmar la singularidad, escribir el código.

Paso 6: Generar el código de la página

Primero leer engineering-conventions.md para comprender las restricciones de ingeniería activadas por la configuración actual (unidades CJK, modo de renderizado i18n, aislamiento de nombres, carga inicial). Estas son barreras de calidad de código, no alteran el resultado de negocio.

Generar un HTML completo de un solo archivo:

• <head> con meta, título, enlace CDN a Google Fonts, <style> en línea; <body> con <script> en línea
• Sin dependencias de herramientas de construcción externas, paquetes npm ni archivos locales
• CSS en línea, con atención a la especificidad de los selectores; JS en línea, implementando todo el flujo de negocio requerido por la configuración
• Toda la interacción debe ser realizable en el navegador (el envío de formularios puede ser simulado, pero debe estar claramente marcado)
• Los elementos decorativos deben ser SVG en línea; las imágenes de tipo fotográfico deben usar enlaces directos de CDN gratuitos, con restricciones de tamaño
• Diseño responsivo hasta dispositivos móviles, enfoque de teclado visible, respetar prefers-reduced-motion

El comportamiento de negocio se implementa según las secciones 5-11 de business-rules.md. Requisitos adicionales a nivel de codificación:

• El contenedor de verificación debe usar data-verification-stage para marcar la fase
• Cuando no haya datos de horarios reales, usar datos prototipo claramente etiquetados, no simular inventario
• Los campos ocultos, funcionalidades no habilitadas y datos de ramas no seleccionadas no deben incluirse en el resultado del envío

Paso 7: Autoevaluación

Antes de la entrega, autoevaluar contra la lista de verificación:

• Corrección de negocio: Confirmar cada punto contra la lista de verificación de aceptación en business-rules.md
• Calidad de diseño: El plan pasa autocrítica, la tipografía y los colores se derivan del plan, la firma es única, diseño responsivo, enfoque de teclado, prefers-reduced-motion, selectores CSS sin anulación
• Estabilidad de ingeniería: Confirmar cada punto contra la lista de autoevaluación en engineering-conventions.md (unidades CJK, modo de renderizado i18n, prefijo de nombres, aislamiento de ámbito, carga inicial)
• Ejecutabilidad del código: Archivo único que se puede abrir y ejecutar directamente, sin dependencias externas, fuentes mediante CDN

Paso 8: Entrega

Guardar como archivo en el directorio de trabajo del usuario, con nombre basado en project.name. Explicar en lenguaje natural breve: sobre qué configuración se basa, qué capacidades principales se implementan, el elemento de firma, y qué datos son prototipo y necesitan reemplazo.

Modos de fallo

Situación	Manejo
No se proporciona user_config_info.json	Detenerse, indicar que se necesita el archivo de configuración
Error al analizar JSON	Indicar la ubicación del error, no adivinar la corrección
Conflicto entre configuración y reglas de negocio	Señalar el campo y la regla específicos, pedir confirmación al usuario
conversionFlow contiene un tipo desconocido	Señalar el nodo específico, no saltarlo en silencio
Se necesitan datos reales pero no están disponibles	Usar datos prototipo claramente etiquetados, no simular datos reales
Solicitud del usuario en conflicto con la configuración	Procesar según la cadena de prioridades y explicarlo al usuario