alieslami745-bot/landing-skill

Figma Diseño de Página de Aterrizaje con Sistema de Diseño

Resumen

Convierte un brief completo de página de aterrizaje en un diseño terminado de Figma. Infiere la estructura de página más pequeña útil a partir del brief, asigna cada requisito al sistema de diseño autorizado, compone un patrón local derivado solo cuando el sistema no tiene un componente único que coincida, y ejecuta un pase de pulido visual automático después del ensamblado.

Este skill diseña en Figma. No escribe HTML, CSS, React, Next.js ni otro código de implementación. Nunca edita ni publica la biblioteca del sistema de diseño fuente.

El lenguaje visual autorizado sigue siendo la fuente de verdad. Las únicas excepciones deliberadas son:

• un fallback de fuente de Figma aplicado localmente cuando la fuente del sistema de diseño no está disponible;
• una composición/componente local derivado construido a partir de partes aprobadas del sistema de diseño y primitivas de Figma cuyos valores visuales están vinculados a estilos o variables del sistema de diseño;
• un slot de activo vacío cuando ni el sistema de diseño ni el brief contienen un activo adecuado.

Cada excepción debe ser visible en el informe de finalización.

Enrutamiento: Basalam o sistema de diseño personalizado

Resuelve la ruta del sistema de diseño por ejecución de aterrizaje, antes de cualquier operación en Figma o Mobbin:

• BASALAM_MODE: usa la fuente de Basalam incluida en este paquete. No le pidas al usuario un enlace al sistema de diseño ni otro sistema de diseño.
• CUSTOM_DS_MODE: usa el sistema de diseño o el skill de sistema de diseño instalado proporcionado por el usuario.
• ROUTE_PENDING: el usuario solicitó una página de aterrizaje pero la ruta de la marca aún no es explícita.

Si el brief dice explícitamente que la página de aterrizaje es para Basalam, selecciona BASALAM_MODE sin preguntar de nuevo. Si menciona explícitamente otra marca o contexto de producto, selecciona CUSTOM_DS_MODE. Si ninguno está claro, pregunta exactamente:

این لندینگ برای باسلام است؟ بله / خیر

No realices ninguna mutación en Figma o Mobbin mientras la ruta sea ROUTE_PENDING. Mantén la respuesta limitada a la ejecución actual de la página de aterrizaje; si el brief o la marca cambian, resuelve la ruta de nuevo.

Incorporación para primer uso

Después de que la ruta sea conocida, en la primera invocación de una nueva conversación, si el usuario aún no ha proporcionado todas las entradas requeridas, envía un mensaje corto específico de la ruta antes de preguntas detalladas o el preflight:

• BASALAM_MODE:

  برای شروع بفرست: ۱) brief ۲) نود/فریم مقصد در Figma ۳) assetهای لازم، در صورت وجود.

• CUSTOM_DS_MODE:

  برای شروع بفرست: ۱) brief ۲) design system یا اسکیل آن ۳) نود/فریم مقصد در Figma ۴) assetهای لازم، در صورت وجود.

Si las entradas ya están completas, omite la incorporación y ejecuta el preflight. No lo repitas después de que el usuario haya proporcionado las entradas. Continúa recopilando solo los detalles faltantes y devuelve BLOCKED sin mutación cuando falte un prerrequisito.

Cuándo usar

Usa este skill cuando el usuario quiera una página de aterrizaje diseñada en Figma y proporcione:

1. un brief completo y su contenido aprobado;
2. ya sea BASALAM_MODE con la fuente incluida o CUSTOM_DS_MODE con una fuente de sistema de diseño de Figma explícita y accesible;
3. un destino de Figma exacto y editable.

Mobbin es un recurso de investigación opcional, no una entrada requerida. Si un MCP de Mobbin configurado está disponible, úsalo solo lectura para encontrar patrones de UX cercanos antes de componer un patrón faltante. Cuando la investigación de Mobbin sea realmente necesaria pero no haya un MCP de Mobbin configurado y autorizado disponible, pausa antes de cualquier mutación en Figma y ofrece la opción de conexión descrita a continuación. Después de que el usuario elija la continuación local—o cuando un Mobbin conectado no tenga una coincidencia útil—continúa con el método local de UI/UX en este skill.

No uses este skill para código, trabajo solo de copia, creación de sistemas de diseño, mantenimiento de bibliotecas fuente, o una exploración visual no restringida que no tenga una fuente y destino de Figma autorizados.

Entradas requeridas

Trata los valores en blanco, desconocidos, TBD, ambiguos, inaccesibles o en conflicto como faltantes. No elijas un destino en silencio ni inventes hechos de negocio.

0. Ruta

Requiere un BASALAM_MODE o CUSTOM_DS_MODE resuelto. Si la ruta es desconocida, usa ROUTE_PENDING, haz la pregunta de Basalam, realiza cero mutaciones y espera la respuesta.

1. Brief

Requiere:

• producto o servicio y oferta;
• audiencia objetivo, problema del usuario, nivel de conciencia y objeciones importantes;
• propuesta de valor y beneficios respaldados;
• un objetivo de conversión y una CTA principal;
• hechos aprobados, afirmaciones, pruebas, precios, texto legal y copia de secciones cuando sean necesarios;
• secciones requeridas y prohibidas, si el usuario tiene alguna;
• idioma, dirección de escritura, puntos de interrupción solicitados y tamaños de viewport;
• el rol, la relación de aspecto o la necesidad de contenido previsto para cada imagen, icono o ilustración esperada.

Usa los activos proporcionados o los activos aprobados del sistema de diseño cuando estén disponibles. La falta de un activo visual no bloquea por sí sola la ejecución: puede resolverse con el material permitido más cercano o un slot de activo vacío explícito como se describe a continuación.

Redacta la copia común de interfaz solo cuando el brief lo permita explícitamente y los hechos proporcionados sean suficientes. Nunca inventes afirmaciones, pruebas, precios, testimonios, lenguaje legal o hechos de negocio.

2. Fuente del sistema de diseño

En BASALAM_MODE, resuelve la fuente incluida solo desde estas rutas relativas al paquete:

• references/basalam-design-system/manifest.json
• references/basalam-design-system/BASALAM-RULES.md
• references/basalam-design-system/kit/
• assets/basalam-design-system/fonts/

Verifica el manifiesto, los archivos de coordinación requeridos, las referencias de componentes relevantes y los activos de fuente antes de la mutación en Figma. No le pidas al usuario una URL del sistema de diseño ni sustituyas en silencio otro sistema. Si el paquete falta o falla las comprobaciones de integridad, devuelve BASALAM_DEPENDENCY_MISSING con las rutas exactas faltantes/corruptas y realiza cero mutaciones.

En CUSTOM_DS_MODE, requiere una URL o clave de biblioteca/archivo de Figma sin ambigüedad, con acceso de lectura y componentes, variantes, variables, estilos de texto y estilos de superficie/fondo publicados relevantes identificables, además de cualquier icono/activo disponible. La ausencia de un icono o activo adecuado se maneja con ASSET_NEAREST o ASSET_SLOT; no invalida la fuente por sí misma. Requiere el tema o modo previsto cuando exista más de uno.

Si el usuario menciona un skill de sistema de diseño instalado en CUSTOM_DS_MODE, cárgalo junto con este skill. Un nombre de skill es suficiente solo cuando resuelve una fuente de Figma autorizada sin ambigüedad; de lo contrario, informa la fuente como faltante.

Fuente Basalam incluida

La ruta de Basalam es portátil: el paquete contiene una instantánea versionada de las reglas del sistema de diseño basalam proporcionadas por el usuario, referencias del kit y archivos de fuente Dana. Resuélvelas en relación con este paquete de skill; nunca uses una ruta absoluta personal y nunca requieras un skill de basalam-design-system instalado por separado para BASALAM_MODE.

Lee BASALAM-RULES.md y los dos archivos de coordinación en kit/ primero, luego carga solo las referencias de componentes/tokens relevantes para el brief. El paquete es de solo lectura durante una ejecución de diseño. Su manifiesto registra la procedencia, la fecha de instantánea, los tamaños de archivo y los hashes SHA-256. Las fuentes incluidas son recursos, no permiso para instalar fuentes automáticamente; verifica su disponibilidad en Figma y aplica la política de fuente documentada si el tiempo de ejecución no puede ver Dana.

3. Destino en Figma

Requiere un archivo de diseño de Figma más una página de destino existente exacta y un nodo/frame de inserción, proporcionados como una URL de nodo o identificadores equivalentes, con acceso de edición. No crees un archivo, página o destino de reemplazo cuando falte alguna parte.

Una URL de nivel de archivo por sí sola nunca satisface este requisito. No elijas una página predeterminada, uses la raíz del lienzo ni crees un frame de inserción. Informa la página exacta faltante, el nodo/frame de inserción y cualquier acceso de edición no verificado como brechas separadas.

Límites no negociables

• Trabaja solo en Figma. Nunca generes código de implementación.
• Los componentes visuales mapeados directamente deben tener procedencia en la fuente del sistema de diseño explícitamente autorizada.
• Se permite una composición local derivada solo en el archivo de destino. Sus hijos visuales pueden ser instancias autorizadas del sistema de diseño, variantes publicadas, variables, estilos de texto, estilos de superficie/fondo, iconos, activos aprobados y primitivas nativas de Figma como Frame, Auto Layout, Text, Rectangle y Component.
• Cada propiedad visual de una primitiva local debe estar vinculada a un token/estilo autorizado del sistema de diseño. No se permite ningún color, gradiente, superposición, tamaño de fuente, peso, altura de línea, espaciado, radio, sombra, efecto o valor visual arbitrario codificado, excepto la anulación de familia FONT_FALLBACK documentada.
• Un componente local derivado nunca debe desvincularse de una instancia autorizada, publicarse en la biblioteca fuente ni usarse para crear en silencio un segundo lenguaje de diseño. Permanece dentro del destino y se registra su procedencia.
• Nunca uses una biblioteca de terceros, un activo externo, un icono dibujado a mano, un visual de Mobbin copiado o un componente extranjero.
• Los resultados de Mobbin son solo referencias de UX. Reinterpreta su jerarquía, patrón de interacción y composición con el sistema de diseño autorizado; no reproduzcas el estilo de marca ni importes sus activos.
• No menciones ni pausas por Mobbin cuando cada patrón requerido sea DIRECT_MAPPED. Nunca instales o conectes Mobbin en nombre del usuario a menos que soliciten explícitamente ayuda de configuración.
• En BASALAM_MODE, usa solo la fuente Basalam incluida y su procedencia verificada. Nunca recurras en silencio a un sistema de diseño personalizado o no relacionado.
• La fuente principal del sistema de diseño siempre se prefiere. Se permite un fallback de fuente solo bajo la política de fallback de fuente a continuación.
• El pulido de fondo puede usar solo los estilos de superficie/fondo existentes del sistema de diseño. Nunca crees un nuevo gradiente, superposición, color o efecto de fondo.
• No cambies la copia, las afirmaciones, el orden de las secciones, el número de secciones, el significado de la CTA ni los activos proporcionados durante el Pase de Pulido.
• Nunca edites, publiques o mutes la biblioteca del sistema de diseño fuente.
• Nunca hagas un diseño parcial mientras falte un prerrequisito, destino, permiso, contenido, token o plan de construcción válido requerido. Un slot de activo vacío aprobado es una excepción de finalización explícita, no un parcial no informado.

Modos de construcción y estados

Usa estos términos en el mapa de cobertura interno y el informe final:

• DIRECT_MAPPED: se usa un componente/variante existente autorizado del sistema de diseño.
• DS_COMPOSED: se construye una composición local o un componente local reutilizable en el destino a partir de partes autorizadas del sistema de diseño y primitivas de Figma vinculadas a tokens.
• ASSET_NEAREST: se usa el activo permitido más cercano del sistema de diseño o del brief.
• ASSET_SLOT: no existe ningún activo adecuado; se crea un slot de reemplazo vacío con reglas de diseño/superficie del sistema de diseño.
• FONT_FALLBACK: la fuente principal del sistema de diseño no está disponible y se aplica una fuente de Figma accesible mientras se preservan las métricas de tipografía del sistema de diseño.
• POLISH_COMMITTED: el pulido automático pasó el control de calidad.
• ASSEMBLY_DELIVERED_POLISH_ROLLED_BACK: el ensamblado es válido, pero el pulido falló después de dos intentos y se eliminó.
• AWAITING_MOBBIN_CHOICE: se necesita investigación de referencia, Mobbin no está conectado y el usuario no ha elegido si conectarlo o continuar localmente; no se ha producido ninguna mutación.
• MOBBIN_SKIPPED_BY_USER: el usuario eligió el método local de UI/UX después de que Mobbin se encontrara no disponible.
• ROUTE_PENDING: la ruta de la marca de la página de aterrizaje es desconocida y la pregunta de Basalam está esperando una respuesta; no se ha producido ninguna mutación.
• BASALAM_MODE: la fuente Basalam incluida está seleccionada para esta ejecución de página de aterrizaje.
• CUSTOM_DS_MODE: una fuente de sistema de diseño proporcionada por el usuario está seleccionada para esta ejecución de página de aterrizaje.
• BASALAM_DEPENDENCY_MISSING: la fuente Basalam incluida o sus requisitos de integridad faltan o son inválidos; no se ha producido ninguna mutación.
• BLOCKED: no se puede satisfacer un prerrequisito o regla de construcción requerida.

DS_COMPOSED, ASSET_SLOT y FONT_FALLBACK son excepciones permitidas y documentadas. AWAITING_MOBBIN_CHOICE y ROUTE_PENDING son pausas temporales, no BLOCKED. BASALAM_DEPENDENCY_MISSING es una parada de preflight con cero mutaciones. Estos estados no autorizan un estilo personalizado arbitrario.

Puerta de preflight atómico

Antes de cualquier operación de Figma mutante, ejecuta un preflight completo de solo lectura. Crear un archivo, página, frame, nodo, componente, instancia, marcador de posición o sección parcial cuenta como mutación.

Carga figma:figma-generate-design y figma:figma-use antes de cualquier operación de lectura o escritura en Figma. En BASALAM_MODE, carga las reglas Basalam incluidas y verifica su manifiesto antes de resolver componentes; en CUSTOM_DS_MODE, carga el skill de sistema de diseño mencionado antes de resolver su fuente.

Valida todo lo siguiente junto:

1. La ruta está resuelta. En BASALAM_MODE, el manifiesto incluido, las referencias requeridas y los activos de fuente están presentes y son válidos; en CUSTOM_DS_MODE, la fuente del sistema de diseño proporcionada por el usuario es explícita y alcanzable.
2. El brief contiene los hechos requeridos, el contenido aprobado, la CTA, el idioma/dirección y los requisitos de punto de interrupción.
3. El archivo de destino, la página, el nodo de inserción, el tipo de archivo y el permiso de edición son válidos.
4. La estructura de la página de aterrizaje se puede inferir sin inventar hechos de negocio.
5. Cada sección seleccionada, punto de interrupción y estado requerido es DIRECT_MAPPED o tiene un plan DS_COMPOSED válido.
6. Cada plan DS_COMPOSED puede construirse a partir de partes autorizadas del sistema de diseño y primitivas nativas de Figma vinculadas a tokens sin un nuevo token, estilo, edición de biblioteca de componentes o activo extranjero.
7. Cada activo esperado tiene uno de estos resultados: activo proporcionado/autorizado, ASSET_NEAREST o ASSET_SLOT.
8. La fuente principal del sistema de diseño está disponible para cada script, peso y estilo requerido; o se ha identificado un candidato de fallback de Figma accesible válido.
9. Determina si se necesita investigación de Mobbin. Registra MOBBIN_NOT_NEEDED cuando cada patrón requerido es DIRECT_MAPPED. De lo contrario, registra MOBBIN_USED, MOBBIN_SKIPPED_BY_USER, MOBBIN_ERROR, MOBBIN_NO_MATCH o LOCAL_UX_METHOD. Si Mobbin es necesario pero no está disponible y el usuario aún no ha elegido una ruta, usa la opción de conexión de Mobbin a continuación antes de devolver READY.

Construye una tabla de cobertura antes de la mutación:

| Requisito | Propósito de la sección | Modo de construcción | Hijos/primitivas del sistema de diseño | Tokens/estilos | Fuente de contenido | Estado del activo | Fuente

…

[truncado para traducción]