• CÓDIGO
  • ESTRUCTURA
  • HUMANO
  • DOCUMENTACIÓN

Extraer detalles de capas de diseño con tu IA

Conecta Lanhu a tu cliente de IA una sola vez. A partir de ahí, tu agente podrá leer archivos de diseño para obtener los nombres de capas y las propiedades exactas que necesitas para desarrollar.

Pregunta a la IA sobre esta página

Respuesta rápida

¿Cómo obtener nombres y propiedades de capas con IA?

Tu IA utiliza Lanhu para acceder a los archivos de diseño y listar cada capa con sus propiedades específicas. Esto te proporciona los datos exactos para escribir código preciso. Verás cómo el agente gestiona estos archivos más abajo.

Los resultados.

Dónde terminan los datos.

La IA procesa el archivo de diseño y organiza la información en estos resultados.

CÓDIGO

Valores CSS exactos

La IA extrae propiedades específicas como códigos hexadecimales o espaciados. Obtienes los números exactos para tus hojas de estilo.

ESTRUCTURA

Mapeo de nombres de capas

El agente identifica cada nombre de capa en el archivo. Así aseguras que los nombres de tus componentes coincidan con la jerarquía del diseño.

HUMANO

Revisión manual de diseño

La IA señala discrepancias entre capas. Tú decides si el diseño necesita un ajuste antes de empezar a programar.

DOCUMENTACIÓN

Especificaciones de sistema de diseño

El agente extrae propiedades repetitivas. Puedes usar esto para construir tus propios tokens de diseño locales.

El flujo

Lo que hace tu IA al recibir el archivo.

La IA se encarga del trabajo pesado de navegar por la estructura del archivo de diseño.

  1. Acceder al archivo

    Tu agente localiza y abre el archivo de diseño específico que le indiques.

    get_file
  2. Escanear la jerarquía

    La IA analiza todo el archivo para ver cómo está organizada la información.

    list_layers
  3. Identificar propiedades

    El agente lee los atributos específicos de cada capa que encuentra.

    list_layers
  4. Formatear para desarrollo

    La IA organiza los nombres de las capas y sus valores en un formato listo para usar en tu editor.

    list_layers

Pruébalo

Copia estos ejemplos para empezar.

Usa estos prompts para interactuar con tus archivos de diseño.

Puntos de partida

Estas son frases iniciales. Cambia los nombres de archivos y las descripciones de las capas por tus datos específicos.

Lanhu Connector

Todo listo. Elige tu cliente MCP y sigue las instrucciones de configuración.

Enlace del conectorhttps://edge.vinkius.com/vk_preview_4iCH3CfiI2AC3jXYEzpWp1PeEIfLrczfwHOLhlzu/mcp

Claude Desktop

Sigue los pasos siguientes para conectarte en segundos.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Lanhu capabilities are ready to use.
Configuración · claude_desktop_config.jsonCopiar
{
  "mcpServers": {
    "lanhu-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_4iCH3CfiI2AC3jXYEzpWp1PeEIfLrczfwHOLhlzu/mcp"
    }
  }
}
Copia en el chat04
  • Lista todos los nombres de las capas en el archivo de diseño 'LandingPage_v2'.

  • ¿Cuáles son los códigos hex y los tamaños de fuente de las capas en el archivo 'Mobile_App_Header'?

  • Busca la capa específica llamada 'Primary_Button' en el archivo 'Dashboard_UI' y dame sus valores de padding.

  • Revisa el archivo 'Hero_Section' y lista todas las propiedades de las capas de los elementos de fondo.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Empieza aquí

Conecta Lanhu una vez y luego pregunta.

Solo tienes que hacer clic en el enlace para conectar. Tus credenciales permanecen cifradas y podrás empezar a preguntar a tu IA sobre tus archivos de diseño de inmediato.

Conectar Lanhu a tu IA

FAQ

Cómo funciona esta tarea.

  • 01

    ¿Puede la IA cambiar las capas del diseño?

    No. La IA solo puede leer y listar las capas y sus propiedades. No puede modificar el archivo de diseño.

  • 02

    ¿La IA elimina alguna capa?

    No. Este conector es de solo lectura. No puede borrar ni mover nada en tus archivos de diseño.

  • 03

    ¿Puedo usar esto con Cursor?

    Sí, siempre que uses un cliente compatible con MCP como Cursor, funcionará sin problemas.

  • 04

    ¿Cómo sabe la IA qué archivo debe revisar?

    Le indicas a la IA a qué archivo acceder mencionando su nombre o ruta en tu prompt.

  • 05

    ¿Puede la IA ver las imágenes reales dentro de las capas?

    No. La IA puede ver los nombres de las capas y sus propiedades, pero no puede ver ni interpretar el contenido visual de las imágenes.

  • ¿Tienes más dudas sobre Lanhu? La página del conector tiene todas las respuestas. Ver todo lo que puede hacer el conector Lanhu

Conecta Lanhu a Claude, Cursor, ChatGPT y más