• CODE
  • STRUCTURE
  • HUMAN
  • DOCS

How to extract design layer details with your AI

Connect Lanhu to your AI client once. From then on, your agent can read design files to pull the exact layer names and properties you need for development.

Ask AI about this page

Short answer

How can I get layer names and properties using AI?

Your AI uses Lanhu to access design files and list every layer and its specific properties. This gives you the exact data needed to write accurate code. You'll see how the agent handles these files below.

The results.

Where the data lands.

The AI processes the design file and organizes the information into these outcomes.

CODE

Exact CSS values

The AI pulls specific properties like hex codes or spacing. You get the exact numbers to use in your stylesheets.

STRUCTURE

Layer name mapping

The agent identifies every layer name in the file. This ensures your component names match the design hierarchy.

HUMAN

Manual design review

The AI flags discrepancies between layers. You decide if the design needs a fix before you start coding.

DOCS

Design system specs

The agent extracts repeated properties. You can use this to build out your local design tokens.

The workflow

What your AI does when the file arrives.

The AI handles the heavy lifting of navigating the design file structure.

  1. Access the file

    Your agent locates and opens the specific design file you point it toward.

    get_file

  2. Scan the hierarchy

    The AI looks through the entire file to see how everything is organized.

    list_layers

  3. Identify properties

    The agent reads the specific attributes of each layer it finds.

    list_layers

  4. Format for dev

    The AI organizes the layer names and values into a format you can use in your editor.

    list_layers

Try it

Copy these to start.

Use these prompts to begin interacting with your design files.

Starting points

These are opening lines. Swap out the file names and layer descriptions with your own specifics.

Lanhu Connector

You're all set. Choose your MCP client and follow the setup instructions.

Connector linkhttps://edge.vinkius.com/vk_preview_4iCH3CfiI2AC3jXYEzpWp1PeEIfLrczfwHOLhlzu/mcp

Claude Desktop

Follow the steps below to connect in seconds.

  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.jsonCopy
{
  "mcpServers": {
    "lanhu-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_4iCH3CfiI2AC3jXYEzpWp1PeEIfLrczfwHOLhlzu/mcp"
    }
  }
}
Copy into chat04

  • List all the layer names in the 'LandingPage_v2' design file.

  • What are the hex codes and font sizes for the layers in the 'Mobile_App_Header' file?

  • Find the specific layer named 'Primary_Button' in the 'Dashboard_UI' file and give me its padding values.

  • Check the 'Hero_Section' file and list all the layer properties for the background elements.

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

Start here

Connect Lanhu once, then ask.

Just click the link to connect. Your credentials stay encrypted, and you can immediately start asking your AI about your design files.

Connect Lanhu to your AI

FAQ

How this task behaves.

  • 01

    Can the AI change the design layers?

    No. The AI can only read and list the layers and properties. It cannot modify the design file itself.

  • 02

    Does the AI delete any layers?

    No. This connector is read-only. It cannot delete or move anything in your design files.

  • 03

    Can I use this with Cursor?

    Yes, as long as you are using an MCP-compatible client like Cursor, it will work.

  • 04

    How does the AI know which file to look at?

    You tell the AI which file to access by providing the file name or path in your prompt.

  • 05

    Can the AI see the actual images in the layers?

    No. The AI can see the layer names and their properties, but it cannot see or interpret the visual image content.

  • More questions about Lanhu? The Connector page answers them. See everything the Lanhu Connector can do

Connect Lanhu to Claude, Cursor, ChatGPT & more