Bài viết này được tài trợ bởi Penpot Hãy tưởng tượng rằng tệp Penpot của bạn chứa một bộ biểu tượng đầy đủ ngoài bản thân thiết kế, sử dụng một số nhưng không phải tất cả các biểu tượng đó. Nếu bạn yêu cầu một AI như Claude hoặc Gemini chỉ xuất các biểu tượng đang được sử dụng thì nó sẽ không thể thực hiện được điều đó. Nó không thể tương tác với các tập tin Penpot. Tuy nhiên, máy chủ Penpot MCP có thể. Nó có thể thực hiện một số hoạt động được lựa chọn cẩn thận theo các quy tắc và quyền đã đặt, đặc biệt vì Penpot có API mở rộng và thậm chí còn hơn thế nữa vì đây là nguồn mở. Công việc của AI chỉ đơn giản là hiểu ý định của bạn, chọn thao tác phù hợp để máy chủ MCP thực hiện (xuất trong trường hợp này) và chuyển bất kỳ tham số nào (tức là các biểu tượng đang được sử dụng). Sau đó, máy chủ MCP sẽ chuyển yêu cầu này thành yêu cầu API có cấu trúc và thực thi nó. Có thể hữu ích khi coi AI như một máy chủ trong nhà hàng nhận đơn đặt hàng của bạn, máy chủ MCP vừa là thực đơn vừa là đầu bếp, và yêu cầu API (hy vọng) là một chiếc bánh pizza nóng hổi trên đĩa ấm. Chính xác thì tại sao lại là máy chủ MCP? Chà, Penpot không thể hiểu ý định của bạn vì đó không phải là LLM và cũng không cho phép LLM của bên thứ ba tương tác với các tệp Penpot của bạn để bảo mật và riêng tư cho dữ liệu Penpot của bạn. Mặc dù các máy chủ Penpot MCP hoạt động như một cầu nối an toàn, chuyển ý định AI thành các yêu cầu API bằng cách sử dụng các tệp và dữ liệu Penpot của bạn làm ngữ cảnh. Điều tuyệt vời hơn nữa là vì Penpot áp dụng cách tiếp cận thiết kế được thể hiện dưới dạng mã, nên các thiết kế có thể được tạo, chỉnh sửa và phân tích theo chương trình ở cấp độ chi tiết. Nó phù hợp hơn với ngữ cảnh, cụ thể hơn và do đó mạnh mẽ hơn so với những gì máy chủ MCP khác cung cấp và chu đáo hơn nhiều so với quy trình làm việc AI 'Mô tả → Tạo' mà tôi không nghĩ có ai thực sự muốn. Sách trắng AI của Penpot mô tả đây là cách tiếp cận tồi và cách tiếp cận 'Chuyển đổi sang mã' là cách tiếp cận xấu, trong khi các máy chủ MCP thì tinh tế và dễ thích ứng hơn. Tính năng và chi tiết kỹ thuật Trước khi chuyển sang các trường hợp sử dụng, đây là một số tính năng và chi tiết kỹ thuật giải thích thêm về cách hoạt động của máy chủ Penpot MCP:
Tuân thủ các tiêu chuẩn MCP; Tích hợp với API Penpot cho dữ liệu thiết kế theo thời gian thực; Bao gồm SDK Python, API REST, hệ thống plugin và công cụ CLI; Hoạt động với mọi trợ lý AI hỗ trợ MCP (Claude trong VS Code, Claude trong Cursor, Claude Desktop, v.v.); Hỗ trợ chia sẻ bối cảnh thiết kế với các mô hình AI, đồng thời cho phép chúng xem và hiểu các thành phần; Tạo điều kiện giao tiếp với Penpot bằng ngôn ngữ tự nhiên.
Vậy thì, máy chủ MCP có thể cho phép chúng tôi làm gì trong Penpot và các thử nghiệm hiện tại đã đạt được những gì? Chúng ta hãy xem xét. Các trường hợp sử dụng máy chủ Penpot MCP Nếu bạn chỉ muốn bỏ qua những gì máy chủ Penpot MCP có thể làm, Penpot có một số bản demo MCP được lưu trữ trong Google Drive rất đáng xem. Giám đốc điều hành Penpot Pablo Ruiz-Múzquiz đã đề cập rằng các video 03, 04, 06, 08 và 12 là video yêu thích của họ. Một cách thậm chí còn nhanh hơn để tóm tắt các máy chủ MCP là xem buổi ra mắt từ Penpot Fest 2025. Nếu không, chúng ta hãy xem một số ví dụ tinh tế hơn mà Penpot đã trình diễn trong buổi giới thiệu công khai của họ. Thiết kế theo mã và quay lại (và hơn thế nữa) Tiếp tục những gì tôi đã nói trước đó về cách các thiết kế Penpot được thể hiện dưới dạng mã, điều này có nghĩa là các máy chủ MCP có thể được sử dụng để chuyển đổi thiết kế thành mã bằng cách sử dụng AI, nhưng cũng có thể sử dụng mã để thiết kế, thiết kế thành tài liệu, tài liệu để thiết kế các thành phần hệ thống, thiết kế lại mã hóa dựa trên hệ thống thiết kế đã nói và sau đó là các thành phần hoàn toàn mới dựa trên hệ thống thiết kế đã nói. Nghe có vẻ kỳ quái, nhưng bản demo bên dưới cho thấy khả năng biến đổi này và nó không phải từ hướng dẫn mơ hồ mà là từ các lựa chọn thiết kế trước đó, bất kể chúng được thể hiện như thế nào (thiết kế, mã hoặc tài liệu). Không có gì ngạc nhiên cả - đây chỉ đơn giản là những quyết định mà bạn sẽ đưa ra dựa trên những quyết định trước đó và được thực hiện nhanh chóng. Trong bản demo, Juan de la Cruz García, Nhà thiết kế tại Penpot, chuyển đổi một cách dễ dàng một số thành phần đơn giản thành tài liệu, các thành phần hệ thống thiết kế, mã, các thành phần mới và thậm chí cả một dự án Storybook hoàn chỉnh như một mảnh Play-Doh: Thiết kế theo mã, xác thực thiết kế/mã và các thao tác đơn giản Trong bản demo tương tự bên dưới, Dominik Jain, Đồng sáng lập tại Oraios AI, tạo một ứng dụng web Node.js dựa trên thiết kế trước khi cập nhật kiểu giao diện người dùng, lưu tên và mã nhận dạng vào bộ nhớ để đảm bảo dịch từ thiết kế sang mã trơn tru trước khi kiểm tra tính nhất quán, thêm mộtnhận xét bên cạnh hình đã chọn trong Penpot, sau đó thay thế nét vẽ nguệch ngoạc trong Penpot bằng một thành phần được điều chỉnh. Có rất nhiều điều đang diễn ra ở đây, nhưng bạn có thể thấy chính xác những gì Dominik đang nhập vào Claude Desktop cũng như các phản hồi của Claude, và nó rất mạnh mẽ: Nhân tiện, bản demo trước đã sử dụng Claude trong VS Code, vì vậy tôi cần lưu ý rằng các máy chủ Penpot MCP không thể tin được LLM. Kho công nghệ của bạn hoàn toàn phụ thuộc vào bạn. IvanTheGeek đã thiết lập được máy chủ MCP của họ bằng JetBrains Rider IDE và Junie AI. Thêm trường hợp sử dụng Dịch bảng Penpot sang HTML ngữ nghĩa và CSS mô-đun sẵn sàng sản xuất trong khi tận dụng bất kỳ mã thông báo thiết kế Penpot nào (hãy nhớ rằng các thiết kế Penpot đã được thể hiện dưới dạng mã, vì vậy đây không phải là một cảnh quay trong bóng tối): Tạo nguyên mẫu web tương tác mà không thay đổi HTML hiện có: Như được hiển thị trước đó, hãy chuyển đổi một nét vẽ nguệch ngoạc thành một thành phần, tận dụng các thành phần thiết kế và/hoặc hệ thống thiết kế hiện có: Tạo tài liệu hệ thống thiết kế từ tệp Penpot: Và đây là một số trường hợp sử dụng khác từ Penpot và cộng đồng:
Xuất khẩu tiên tiến, Tìm kiếm các yếu tố thiết kế bằng ngôn ngữ tự nhiên, Lấy dữ liệu từ các API bên ngoài bằng ngôn ngữ tự nhiên, Dễ dàng kết nối Penpot với các công cụ bên ngoài khác, Lưu các tác vụ lặp đi lặp lại vào bộ nhớ và thực hiện chúng, Kiểm tra hồi quy trực quan, Kiểm tra tính nhất quán và dự phòng của thiết kế, Phân tích và phản hồi về khả năng tiếp cận và khả năng sử dụng, Kiểm tra tuân thủ hệ thống thiết kế, Kiểm tra tuân thủ hướng dẫn (thương hiệu, nội dung, v.v.), Giám sát việc áp dụng và sử dụng bằng phân tích thiết kế, Tự động giữ tài liệu đồng bộ với thiết kế, Thiết kế tổ chức tệp (ví dụ: gắn thẻ/phân loại).
Về cơ bản, máy chủ Penpot MCP dẫn đến vô số quy trình làm việc nhờ vào tính hiệu quả và dễ dàng của ứng dụng khách LLM/LLM mà bạn đã chọn mà không làm lộ dữ liệu của bạn với nó. Bạn sẽ sử dụng máy chủ MCP để làm gì? Máy chủ Penpot MCP thậm chí còn chưa ở giai đoạn beta nhưng đây là một thử nghiệm đang hoạt động mà bạn có thể tham gia. Người dùng Penpot đã bắt đầu khám phá các trường hợp sử dụng cho máy chủ MCP, nhưng Penpot muốn xem thêm. Để đảm bảo rằng thế hệ công cụ thiết kế tiếp theo đáp ứng nhu cầu của các nhà thiết kế, nhà phát triển và nhóm sản phẩm nói chung, chúng phải được xây dựng một cách tập thể và hợp tác, đặc biệt là khi liên quan đến AI. Lưu ý: Penpot đang tìm kiếm những người thử nghiệm beta mong muốn khám phá, thử nghiệm và giúp cải tiến Máy chủ MCP của Penpot. Để tham gia, hãy viết thư tới support@penpot.app với dòng chủ đề “Tình nguyện viên thử nghiệm beta MCP”. Có điều gì mà bạn cảm thấy máy chủ Penpot MCP có thể làm được mà các công cụ hiện tại không thể hoạt động đủ tốt, đủ nhanh hoặc hoàn toàn không thể làm được không? Bạn có thể tìm hiểu cách thiết lập máy chủ Penpot MCP ngay tại đây và bắt đầu mày mò ngay hôm nay hoặc nếu đầu óc bạn đang tràn ngập các ý tưởng, Penpot muốn bạn tham gia thảo luận, chia sẻ phản hồi và nói về các trường hợp sử dụng của bạn. Ngoài ra, phần bình luận ngay bên dưới cũng không phải là nơi tồi để bắt đầu!
