Claude Thiết kế: Hướng dẫn Kết nối Công cụ

Quy trình thiết kế sản phẩm hiện đại đòi hỏi sự phối hợp liên tục giữa nhiều công cụ — file thiết kế trên Figma, feedback người dùng từ Intercom, tài liệu sản phẩm trên Notion, task trên Linear, và số liệu hành vi từ Amplitude. Claude kết nối với toàn bộ hệ sinh thái này thông qua MCP (Model Context Protocol), giúp designer và product manager có trợ lý AI nắm đầy đủ ngữ cảnh của sản phẩm thay vì phải giải thích lại từ đầu trong mỗi cuộc trò chuyện.

Bài viết này trình bày kiến trúc kết nối, sáu danh mục connector được hỗ trợ trong plugin thiết kế, và các bước thiết lập cụ thể.

Kiến trúc kết nối

Plugin thiết kế hoạt động theo mô hình tool-agnostic — logic phân tích và quy trình làm việc được định nghĩa theo danh mục chức năng, không gắn với Figma hay Sketch cụ thể. Các placeholder trong file plugin có dạng ~~category:

• ~~design tool — đại diện cho công cụ thiết kế vector/prototype
• ~~user feedback — đại diện cho nền tảng thu thập phản hồi người dùng
• ~~product analytics — đại diện cho công cụ theo dõi hành vi trong sản phẩm
• ~~knowledge base — đại diện cho nơi lưu trữ tài liệu và design system
• ~~project tracker — đại diện cho công cụ quản lý sprint và backlog
• ~~chat — đại diện cho kênh trao đổi nội bộ nhóm

Mô hình này đảm bảo tính bền vững của plugin: khi đội chuyển từ Sketch sang Figma, hoặc từ Jira sang Linear, chỉ cần cập nhật file .mcp.json mà không cần viết lại quy trình làm việc.

Danh sách kết nối hỗ trợ

Plugin thiết kế hỗ trợ sáu danh mục connector, bao phủ toàn bộ vòng đời thiết kế từ khám phá người dùng đến giao hàng:

Lưu ý: Danh mục ~~product analytics hiện chưa có MCP server mặc định trong bản phân phối. Bạn cần tự chọn và cấu hình một trong các lựa chọn thay thế như Amplitude hay Mixpanel nếu cần số liệu hành vi người dùng trong quy trình thiết kế.

Cách thiết lập kết nối

Quy trình thiết lập cho đội thiết kế sản phẩm thường bắt đầu với Figma — công cụ trung tâm của hầu hết quy trình làm việc thiết kế:

Bước 1: Thiết lập Figma MCP

Figma cung cấp MCP server chính thức. Bạn cần Personal Access Token từ tài khoản Figma (hoặc Service Account Token cho môi trường nhóm). Truy cập Figma Settings > Security > Personal access tokens để tạo token với quyền đọc file và comment.

Bước 2: Kết nối nền tảng feedback người dùng

Connector ~~user feedback đặc biệt có giá trị cho designer — nó cho phép Claude truy cập trực tiếp vào phản hồi thực tế của người dùng khi phân tích vấn đề thiết kế, thay vì chỉ dựa vào mô tả của bạn.

Bước 3: Kết nối knowledge base

Kết nối Notion hoặc Confluence để Claude có thể tham chiếu design system, brand guidelines, và tài liệu nghiên cứu người dùng trong các quyết định thiết kế.

Bước 4: Cấu hình project tracker

Kết nối Linear hoặc Jira để Claude có thể tạo task, cập nhật status, và tra cứu yêu cầu kỹ thuật liên quan trực tiếp từ hội thoại thiết kế.

Ví dụ cấu hình .mcp.json

Cấu hình mẫu cho đội thiết kế dùng Figma, Notion, Linear, và Intercom:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-figma"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_figma_token"
      }
    },
    "notion": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-notion"],
      "env": {
        "NOTION_API_TOKEN": "your_notion_token"
      }
    },
    "linear": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-linear"],
      "env": {
        "LINEAR_API_KEY": "your_linear_api_key"
      }
    },
    "intercom": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-intercom"],
      "env": {
        "INTERCOM_ACCESS_TOKEN": "your_intercom_token"
      }
    },
    "slack": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-slack"],
      "env": {
        "SLACK_BOT_TOKEN": "xoxb-your-token",
        "SLACK_TEAM_ID": "T0XXXXXXX"
      }
    }
  }
}

Để thêm product analytics, ví dụ Amplitude:

"amplitude": {
  "command": "npx",
  "args": ["-y", "@modelcontextprotocol/server-amplitude"],
  "env": {
    "AMPLITUDE_API_KEY": "your_api_key",
    "AMPLITUDE_SECRET_KEY": "your_secret_key"
  }
}

Tùy chỉnh và mở rộng

Plugin thiết kế có thể tùy chỉnh sâu để phù hợp với quy trình cụ thể của từng đội:

Chuyển từ Jira sang Linear: Nhiều đội thiết kế chuyển sang Linear vì giao diện gọn gàng hơn. Đổi entry jira sang linear trong .mcp.json — plugin tiếp tục hoạt động vì nó tham chiếu ~~project tracker.

Kết nối Dovetail cho nghiên cứu UX: Nếu đội dùng Dovetail để tổng hợp user research, thêm connector này dưới danh mục ~~user feedback. Claude có thể tham chiếu cả dữ liệu định tính lẫn định lượng khi phân tích thiết kế.

Adobe XD hoặc Framer thay Figma: Đổi entry figma sang MCP server tương ứng của công cụ bạn dùng. Đảm bảo server đó hỗ trợ các thao tác bạn cần: đọc file, truy cập component library, và lấy comment.

Nhiều workspace Notion: Nếu tổ chức có nhiều Notion workspace (ví dụ: một cho design system, một cho team wiki), bạn có thể khai báo nhiều instance server với token riêng.

Ứng dụng thực tế trong quy trình thiết kế

Khi kết nối đầy đủ, Claude có thể hỗ trợ các tác vụ thiết kế phức tạp:

• Phân tích file Figma hiện tại và đề xuất cải tiến dựa trên design system từ Notion
• Tổng hợp feedback người dùng từ Intercom để xác định vấn đề thiết kế cần ưu tiên
• Tạo task Linear tự động từ kết quả phân tích người dùng với đầy đủ context
• So sánh hành vi người dùng từ Amplitude với giả định thiết kế ban đầu
• Soạn thảo design spec và cập nhật tài liệu Notion trực tiếp từ hội thoại

Bước tiếp theo

Với hệ sinh thái công cụ thiết kế được kết nối, Claude trở thành cộng sự sáng tạo thực sự — hiểu file thiết kế, biết phản hồi người dùng, và nắm ngữ cảnh sản phẩm đầy đủ. Khám phá thêm các plugin và ứng dụng tại Thư viện Ứng dụng.

Bài viết liên quan

• Claude Kỹ thuật: Hướng dẫn Kết nối Công cụ
• Claude Marketing: Hướng dẫn Kết nối Công cụ
• Claude Năng suất: Hướng dẫn Kết nối Công cụ
• Claude cho Thiết kế: Tổng quan Plugin
• Claude cho Design: User Research từ A đến Z