บทความนี้ได้รับการสนับสนุนจาก Penpot ลองนึกภาพว่าไฟล์ Penpot ของคุณมีชุดไอคอนแบบเต็มนอกเหนือจากการออกแบบ ซึ่งใช้ไอคอนบางส่วนแต่ไม่ใช่ทั้งหมด หากคุณขอให้ AI เช่น Claude หรือ Gemini ส่งออกเฉพาะไอคอนที่ใช้งานอยู่ ก็จะไม่สามารถทำเช่นนั้นได้ ไม่สามารถโต้ตอบกับไฟล์ Penpot ได้ อย่างไรก็ตาม เซิร์ฟเวอร์ Penpot MCP สามารถทำได้ สามารถดำเนินการตามจำนวนที่ได้รับการคัดเลือกภายใต้กฎและการอนุญาตที่ตั้งไว้ โดยเฉพาะอย่างยิ่งเนื่องจาก Penpot มี API ที่กว้างขวาง และยิ่งกว่านั้นอีกเนื่องจากเป็นโอเพ่นซอร์ส งานของ AI คือเพียงทำความเข้าใจจุดประสงค์ของคุณ เลือกการดำเนินการที่เหมาะสมสำหรับเซิร์ฟเวอร์ MCP ที่จะดำเนินการ (การส่งออกในกรณีนี้) และส่งผ่านพารามิเตอร์ใดๆ (เช่น ไอคอนที่กำลังใช้งาน) จากนั้นเซิร์ฟเวอร์ MCP จะแปลสิ่งนี้เป็นคำขอ API ที่มีโครงสร้างและดำเนินการ การคิดว่า AI เป็นเซิร์ฟเวอร์ในร้านอาหารที่รับออเดอร์ของคุณ อาจช่วยได้ เซิร์ฟเวอร์ MCP เป็นทั้งเมนูและพ่อครัว และคำขอ API (หวังว่า) จะเป็นพายพิซซ่าร้อนๆ บนจานอุ่นๆ ทำไมต้องเป็นเซิร์ฟเวอร์ MCP กันแน่? Penpot ไม่สามารถเข้าใจเจตนาของคุณได้เนื่องจากไม่ใช่ LLM และไม่อนุญาตให้ LLM บุคคลที่สามโต้ตอบกับไฟล์ Penpot ของคุณเพื่อความปลอดภัยและความเป็นส่วนตัวของข้อมูล Penpot ของคุณ แม้ว่าเซิร์ฟเวอร์ Penpot MCP จะทำหน้าที่เป็นบริดจ์ที่ปลอดภัย แต่การแปลเจตนาของ AI เป็นคำขอ API โดยใช้ไฟล์และข้อมูล Penpot ของคุณเป็นบริบท สิ่งที่ดีไปกว่านั้นคือเนื่องจาก Penpot ใช้วิธีการออกแบบที่แสดงเป็นโค้ด การออกแบบจึงสามารถสร้าง แก้ไข และวิเคราะห์โดยทางโปรแกรมได้ในระดับละเอียด มันมีบริบทมากกว่า เฉพาะเจาะจงกว่า และมีประสิทธิภาพมากกว่าเมื่อเปรียบเทียบกับเซิร์ฟเวอร์ MCP อื่น ๆ ที่นำเสนอ และรอบคอบมากกว่าเวิร์กโฟลว์ AI ย่อย 'อธิบาย → สร้าง' ที่ฉันไม่คิดว่าจะมีใครต้องการจริงๆ เอกสารไวท์เปเปอร์ AI ของ Penpot อธิบายว่านี่เป็นแนวทางที่ไม่ดี และแนวทาง "แปลงเป็นโค้ด" เป็นแนวทางที่น่าเกลียด ในขณะที่เซิร์ฟเวอร์ MCP ได้รับการปรับปรุงและปรับเปลี่ยนได้มากกว่า คุณสมบัติและรายละเอียดทางเทคนิค ก่อนที่เราจะไปยังกรณีการใช้งาน ต่อไปนี้คือคุณสมบัติและรายละเอียดทางเทคนิคบางส่วนที่อธิบายเพิ่มเติมว่าเซิร์ฟเวอร์ Penpot MCP ทำงานอย่างไร:
สอดคล้องกับมาตรฐาน MCP ผสานรวมกับ Penpot API สำหรับข้อมูลการออกแบบแบบเรียลไทม์ รวม Python SDK, REST API, ระบบปลั๊กอิน และเครื่องมือ CLI ทำงานร่วมกับผู้ช่วย AI ที่เปิดใช้งาน MCP (Claude ใน VS Code, Claude ใน Cursor, Claude Desktop ฯลฯ ); รองรับการแชร์บริบทการออกแบบกับโมเดล AI และให้พวกเขาเห็นและทำความเข้าใจส่วนประกอบต่างๆ อำนวยความสะดวกในการสื่อสารกับ Penpot โดยใช้ภาษาธรรมชาติ
แล้วเซิร์ฟเวอร์ MCP สามารถช่วยให้เราทำอะไรใน Penpot ได้ และการทดลองที่มีอยู่ประสบความสำเร็จอะไรบ้าง? มาดูกัน. กรณีการใช้งานเซิร์ฟเวอร์ Penpot MCP หากคุณเพียงต้องการข้ามไปยังสิ่งที่เซิร์ฟเวอร์ Penpot MCP สามารถทำได้ Penpot มีการสาธิต MCP บางส่วนเก็บไว้ใน Google Drive ที่คุ้มค่าแก่การรับชม Pablo Ruiz-Múzquiz ซีอีโอของ Penpot กล่าวว่าวิดีโอ 03, 04, 06, 08 และ 12 เป็นวิดีโอโปรดของพวกเขา วิธีที่เร็วยิ่งขึ้นในการสรุปเซิร์ฟเวอร์ MCP คือการชมการเปิดตัวจาก Penpot Fest 2025 หรือลองดูตัวอย่างที่ละเอียดยิ่งขึ้นบางส่วนที่ Penpot แสดงให้เห็นในงานแสดงต่อสาธารณะ การออกแบบเป็นโค้ดและกลับมาอีกครั้ง (และอื่นๆ) จากสิ่งที่ฉันพูดไปก่อนหน้านี้เกี่ยวกับวิธีการแสดงการออกแบบ Penpot เป็นโค้ด ซึ่งหมายความว่าเซิร์ฟเวอร์ MCP สามารถใช้เพื่อแปลงการออกแบบเป็นโค้ดโดยใช้ AI แต่ยังรวมถึงโค้ดสำหรับการออกแบบ การออกแบบเป็นเอกสาร เอกสารสำหรับการออกแบบองค์ประกอบของระบบ การออกแบบเป็นโค้ดอีกครั้งตามระบบการออกแบบดังกล่าว และจากนั้นส่วนประกอบใหม่ทั้งหมดตามระบบการออกแบบดังกล่าว มันฟังดูเหนือจริง แต่การสาธิตด้านล่างแสดงให้เห็นถึงความสามารถในการแปลงสภาพนี้ และไม่ได้มาจากคำแนะนำที่คลุมเครือ แต่เป็นตัวเลือกการออกแบบก่อนหน้านี้ โดยไม่คำนึงถึงวิธีการแสดงออก (การออกแบบ โค้ด หรือเอกสารประกอบ) ไม่มีเรื่องน่าประหลาดใจ สิ่งเหล่านี้เป็นเพียงการตัดสินใจที่คุณจะได้ทำต่อไปโดยอิงจากการตัดสินใจครั้งก่อนและดำเนินการอย่างรวดเร็ว ในการสาธิต Juan de la Cruz García นักออกแบบของ Penpot แปลงส่วนประกอบง่ายๆ บางส่วนให้เป็นเอกสารประกอบ การออกแบบองค์ประกอบของระบบ โค้ด ส่วนประกอบใหม่อย่างราบรื่น และแม้แต่โปรเจ็กต์ Storybook ที่สมบูรณ์ เช่น ชิ้นส่วนของ Play-Doh: การออกแบบต่อโค้ด การตรวจสอบการออกแบบ/โค้ด และการดำเนินการที่เรียบง่าย ในการสาธิตที่คล้ายกันด้านล่างนี้ Dominik Jain ผู้ร่วมก่อตั้ง Oraios AI ได้สร้างเว็บแอป Node.js ตามการออกแบบก่อนที่จะอัปเดตสไตล์ฟรอนต์เอนด์ บันทึกชื่อและตัวระบุลงในหน่วยความจำเพื่อให้แน่ใจว่าการแปลจากการออกแบบเป็นโค้ดจะราบรื่น ก่อนที่จะตรวจสอบความสอดคล้องกัน เพิ่มแสดงความคิดเห็นถัดจากรูปร่างที่เลือกใน Penpot จากนั้นแทนที่ข้อความเขียนใน Penpot ด้วยส่วนประกอบที่ดัดแปลงแล้ว มีสิ่งต่างๆ มากมายเกิดขึ้นที่นี่ แต่คุณจะเห็นได้อย่างชัดเจนว่า Dominik พิมพ์อะไรลงใน Claude Desktop ตลอดจนคำตอบของ Claude และมันมีประสิทธิภาพมาก: อย่างไรก็ตาม การสาธิตก่อนหน้านี้ใช้ Claude ใน VS Code ดังนั้นฉันควรทราบว่าเซิร์ฟเวอร์ Penpot MCP นั้นไม่เชื่อเรื่องพระเจ้าแบบ LLM กองเทคโนโลยีของคุณขึ้นอยู่กับคุณโดยสิ้นเชิง IvanTheGeek จัดการเพื่อตั้งค่าเซิร์ฟเวอร์ MCP ด้วย JetBrains Rider IDE และ Junie AI กรณีการใช้งานเพิ่มเติม แปลบอร์ด Penpot เป็น HTML ความหมายและ CSS แบบโมดูลาร์ที่พร้อมใช้งานจริงในขณะที่ใช้ประโยชน์จากโทเค็นการออกแบบ Penpot ใดๆ (โปรดจำไว้ว่าการออกแบบ Penpot นั้นแสดงเป็นโค้ดอยู่แล้ว ดังนั้นนี่ไม่ใช่ช็อตเด็ด): สร้างต้นแบบเว็บเชิงโต้ตอบโดยไม่ต้องเปลี่ยน HTML ที่มีอยู่: ดังที่แสดงไว้ก่อนหน้านี้ แปลงข้อความเขียนเป็นส่วนประกอบ โดยใช้ประโยชน์จากการออกแบบที่มีอยู่และ/หรือองค์ประกอบระบบการออกแบบ: สร้างเอกสารระบบการออกแบบจากไฟล์ Penpot: และนี่คือกรณีการใช้งานเพิ่มเติมจาก Penpot และชุมชน:
การส่งออกขั้นสูง ค้นหาองค์ประกอบการออกแบบโดยใช้ภาษาธรรมชาติ ดึงข้อมูลจาก API ภายนอกโดยใช้ภาษาธรรมชาติ เชื่อมต่อ Penpot กับเครื่องมือภายนอกอื่น ๆ ได้อย่างง่ายดาย บันทึกงานซ้ำ ๆ ลงในหน่วยความจำและดำเนินการงานเหล่านั้น การทดสอบการถดถอยทางสายตา ความสอดคล้องของการออกแบบและการตรวจสอบความซ้ำซ้อน การวิเคราะห์และข้อเสนอแนะด้านการเข้าถึงและการใช้งาน การตรวจสอบการปฏิบัติตามข้อกำหนดของระบบการออกแบบ การตรวจสอบการปฏิบัติตามหลักเกณฑ์ (แบรนด์ เนื้อหา ฯลฯ) ตรวจสอบการยอมรับและการใช้งานด้วยการวิเคราะห์การออกแบบ เก็บเอกสารให้ตรงกับการออกแบบโดยอัตโนมัติ ออกแบบการจัดระเบียบไฟล์ (เช่น การแท็ก/การจัดหมวดหมู่)
โดยพื้นฐานแล้ว เซิร์ฟเวอร์ Penpot MCP นำไปสู่เวิร์กโฟลว์จำนวนไม่สิ้นสุดด้วยประสิทธิภาพและความสะดวกของไคลเอ็นต์ LLM/LLM ที่คุณเลือก แต่จะไม่เปิดเผยข้อมูลของคุณ คุณจะใช้เซิร์ฟเวอร์ MCP เพื่ออะไร? เซิร์ฟเวอร์ Penpot MCP ไม่ได้อยู่ในขั้นเบต้าด้วยซ้ำ แต่เป็นการทดลองที่คุณสามารถมีส่วนร่วมได้ ผู้ใช้ Penpot ได้เริ่มสำรวจกรณีการใช้งานสำหรับเซิร์ฟเวอร์ MCP แล้ว แต่ Penpot ต้องการดูเพิ่มเติม เพื่อให้แน่ใจว่าเครื่องมือการออกแบบรุ่นต่อไปจะตอบสนองความต้องการของนักออกแบบ นักพัฒนา และทีมผลิตภัณฑ์โดยทั่วไป เครื่องมือเหล่านี้จะต้องสร้างขึ้นร่วมกันและร่วมมือกัน โดยเฉพาะอย่างยิ่งในส่วนที่เกี่ยวข้องกับ AI หมายเหตุ: Penpot กำลังมองหาผู้ทดสอบเบต้าที่กระตือรือร้นที่จะสำรวจ ทดลอง และช่วยปรับแต่งเซิร์ฟเวอร์ MCP ของ Penpot หากต้องการเข้าร่วม โปรดเขียนถึง support@penpot.app โดยระบุหัวเรื่องว่า “อาสาสมัครทดสอบเบต้า MCP” มีอะไรที่คุณรู้สึกว่าเซิร์ฟเวอร์ Penpot MCP สามารถทำได้โดยที่เครื่องมือปัจจุบันไม่สามารถทำได้ดีพอ เร็วพอ หรือไม่สามารถทำได้เลย คุณสามารถเรียนรู้วิธีตั้งค่าเซิร์ฟเวอร์ Penpot MCP ได้ที่นี่ และเริ่มซ่อมแซมตั้งแต่วันนี้ หรือหากสมองของคุณมีไอเดียอยู่แล้ว Penpot ต้องการให้คุณเข้าร่วมการสนทนา แบ่งปันคำติชม และพูดคุยเกี่ยวกับกรณีการใช้งานของคุณ ส่วนความคิดเห็นด้านล่างก็ไม่ใช่จุดเริ่มต้นที่ดีเช่นกัน!
