AIでデザインレイヤーの詳細情報を抽出する方法｜Lanhu MCPコネクター

AIがLanhu経由でデザインファイルにアクセスし、すべてのレイヤーとその詳細なプロパティをリストアップします。これにより、正確なコードを書くために必要なデータが手に入ります。エージェントによるファイル処理の詳細は以下の通りです。

1. 01

   ファイルへのアクセス

   エージェントが指定されたデザインファイルを特定し、開きます。

   get_file
2. 02

   階層のスキャン

   AIがファイル全体を確認し、要素がどのように構成されているかを把握します。

   list_layers
3. 03

   プロパティの特定

   エージェントが見つけた各レイヤーの具体的な属性を読み取ります。

   list_layers
4. 04

   開発用フォーマットへの変換

   AIがレイヤー名と値を、エディタで使いやすい形式に整理します。

   list_layers

Lanhu Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_4iCH3CfiI2AC3jXYEzpWp1PeEIfLrczfwHOLhlzu/mcpコピー

Claude Desktop

以下の手順で数秒で接続できます。

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.

設定 · claude_desktop_config.jsonコピー

{
  "mcpServers": {
    "lanhu-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_4iCH3CfiI2AC3jXYEzpWp1PeEIfLrczfwHOLhlzu/mcp"
    }
  }
}

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

リンクをクリックして接続するだけです。認証情報は暗号化され、すぐにAIに対してデザインファイルに関する質問ができるようになります。

• 01

  AIはデザインレイヤーを変更できますか？

  いいえ。AIができるのはレイヤーやプロパティの読み取りとリストアップのみです。デザインファイル自体を書き換えることはできません。

• 02

  AIはレイヤーを削除しますか？

  いいえ。このコネクターは読み取り専用です。デザインファイル内の要素を削除したり移動したりすることはありません。

• 03

  Cursorで使用できますか？

  はい。CursorのようなMCP対応のクライアントを使用していれば、問題なく動作します。

• 04

  AIはどのファイルを見ればよいか、どうやって判断しますか？

  プロンプトの中でファイル名やパスを指定することで、AIにアクセスすべきファイルを伝えることができます。

• 05

  AIはレイヤー内の実際の画像を見ることができますか？

  いいえ。AIはレイヤー名やプロパティを確認することはできますが、画像の内容そのものを視覚的に認識したり解釈したりすることはできません。

• Lanhuについて他に質問がありますか？コネクターのページで回答しています。 Lanhu MCPコネクターの全機能を見る