• CODE
  • STRUCTURE
  • HUMAIN
  • DOCS

Extraire les détails des calques de design avec votre IA

Connectez Lanhu à votre client IA une seule fois. Ensuite, votre agent pourra lire vos fichiers de design pour extraire les noms de calques et les propriétés nécessaires au développement.

Demandez à l'IA à propos de cette page

Réponse rapide

Comment obtenir les noms et propriétés des calques via l'IA ?

Votre IA utilise Lanhu pour accéder aux fichiers de design et lister chaque calque avec ses propriétés spécifiques. Vous obtenez ainsi les données exactes pour écrire un code précis. Découvrez ci-dessous comment l'agent traite ces fichiers.

Les résultats.

Les données obtenues.

L'IA traite le fichier de design et organise les informations selon ces différents formats.

CODE

Valeurs CSS exactes

L'IA extrait des propriétés précises comme les codes hexadécimaux ou les espacements. Vous récupérez les valeurs exactes pour vos feuilles de style.

STRUCTURE

Mapping des calques

L'agent identifie chaque nom de calque dans le fichier. Cela garantit que vos composants respectent la hiérarchie du design.

HUMAIN

Révision du design

L'IA signale les écarts entre les calques. Vous décidez si le design nécessite une correction avant de lancer le code.

DOCS

Spécifications du design system

L'agent extrait les propriétés répétitives. Utilisez ces données pour construire vos propres jetons de design (design tokens).

Le flux

Ce que fait votre IA une fois le fichier reçu.

L'IA gère la complexité de la navigation dans la structure du fichier de design.

  1. Accéder au fichier

    Votre agent localise et ouvre le fichier de design spécifique que vous lui indiquez.

    get_file

  2. Analyser la hiérarchie

    L'IA parcourt l'intégralité du fichier pour comprendre son organisation.

    list_layers

  3. Identifier les propriétés

    L'agent lit les attributs spécifiques de chaque calque trouvé.

    list_layers

  4. Formater pour le dev

    L'IA organise les noms de calques et les valeurs dans un format prêt à l'emploi dans votre éditeur.

    list_layers

Essayez

Copiez ces exemples pour commencer.

Utilisez ces prompts pour interagir avec vos fichiers de design.

Points de départ

Ce sont des exemples de phrases d'accroche. Remplacez les noms de fichiers et les descriptions de calques par vos propres données.

Lanhu Connector

Tout est prêt. Choisissez votre client MCP et suivez les instructions de configuration.

Lien du connecteurhttps://edge.vinkius.com/vk_preview_4iCH3CfiI2AC3jXYEzpWp1PeEIfLrczfwHOLhlzu/mcp

Claude Desktop

Suivez les étapes ci-dessous pour vous connecter en quelques secondes.

  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.
Configuration · claude_desktop_config.jsonCopier
{
  "mcpServers": {
    "lanhu-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_4iCH3CfiI2AC3jXYEzpWp1PeEIfLrczfwHOLhlzu/mcp"
    }
  }
}
Copiez dans le chat04

  • Liste tous les noms de calques du fichier de design 'LandingPage_v2'.

  • Quels sont les codes hexadécimaux et les tailles de police pour les calques du fichier 'Mobile_App_Header' ?

  • Trouve le calque nommé 'Primary_Button' dans le fichier 'Dashboard_UI' et donne-moi ses valeurs de padding.

  • Vérifie le fichier 'Hero_Section' et liste toutes les propriétés des calques pour les éléments d'arrière-plan.

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

Commencez ici

Connectez Lanhu une fois, puis interrogez.

Cliquez simplement sur le lien pour établir la connexion. Vos identifiants restent cryptés et vous pouvez immédiatement questionner votre IA sur vos fichiers de design.

Connecter Lanhu à votre IA

FAQ

Fonctionnement de la tâche.

  • 01

    L'IA peut-elle modifier les calques de design ?

    Non. L'IA peut uniquement lire et lister les calques et leurs propriétés. Elle ne peut pas modifier le fichier de design lui-même.

  • 02

    L'IA supprime-t-elle des calques ?

    Non. Ce connecteur est en lecture seule. Il ne peut ni supprimer ni déplacer d'éléments dans vos fichiers de design.

  • 03

    Puis-je l'utiliser avec Cursor ?

    Oui, tant que vous utilisez un client compatible MCP comme Cursor, cela fonctionnera.

  • 04

    Comment l'IA sait-elle quel fichier consulter ?

    Vous indiquez à l'IA le fichier à consulter en précisant son nom ou son chemin dans votre prompt.

  • 05

    L'IA peut-elle voir les images réelles dans les calques ?

    Non. L'IA voit les noms des calques et leurs propriétés, mais elle ne peut pas voir ni interpréter le contenu visuel des images.

  • D'autres questions sur Lanhu ? La page du connecteur y répond. Voir toutes les capacités du connecteur Lanhu

Connectez Lanhu à Claude, Cursor, ChatGPT et d'autres