เชื่อมโยงการออกแบบ Figma ไปยังตัวแทน AI ผ่าน MCP สำหรับนักพัฒนา
figma-mcp-bridge โดย Gethopp เชื่อมต่อการออกแบบ Figma กับตัวแทน AI โดยใช้ Model Context Protocol (MCP) ซึ่งช่วยให้โมเดลสามารถบริโภคโครงสร้างการออกแบบและการอ้างอิงระดับโหนด แอปพลิเคชันนี้ทำงานเป็นปลั๊กอิน Figma และเซิร์ฟเวอร์ MCP ท้องถิ่นเพื่อให้อาหารโมเดลด้วยบริบทการออกแบบแบบเรียลไทม์ ช่วยให้ตัวแทนสามารถกำหนดเป้าหมายองค์ประกอบโดยใช้คีย์ไฟล์และ ID โหนด ผู้ใช้เป้าหมายคือทีมพัฒนาที่รวม LLMs เข้ากับการออกแบบเป็นโค้ด การวิเคราะห์การออกแบบ หรือกระบวนการทำงานอัตโนมัติที่ต้องการการเข้าถึงโมเดลโดยตรงไปยังไฟล์การออกแบบสด
งานที่ใช้จริงมุ่งเน้นไปที่การออกแบบสู่โค้ดและการวิเคราะห์ระบบ
นักพัฒนาสามารถใช้เครื่องมือนี้ในการสร้างโค้ดส่วนประกอบจากการออกแบบ, ตรวจสอบระบบการออกแบบ, และดำเนินการอัตโนมัติที่มุ่งเป้าไปที่องค์ประกอบต่างๆ สะพานเชื่อมจะเปิดเผยกุญแจไฟล์และ ID โหนดเพื่อให้ตัวแทนสามารถขอข้อมูลโหนดเฉพาะได้ และรองรับการทำงานหลายไฟล์สำหรับการอ้างอิงข้ามเอกสาร ผลลัพธ์ทั่วไป รวมถึงโค้ดสั้นๆ ที่เชื่อมโยงกับโหนด, รายการของโทเค็นและส่วนประกอบ, และคำอธิบายที่มีโครงสร้างซึ่งโมเดลสามารถเปลี่ยนเป็นขั้นตอนการดำเนินการได้
การส่งมอบบริบทระดับองค์ประกอบช่วยปรับปรุงความเฉพาะเจาะจงของคำถามแต่ต้องมีการตรวจสอบ
โดยการจัดเตรียมบริบทระดับองค์ประกอบและการอ้างอิงโหนด เครื่องมือนี้ช่วยเพิ่มความเฉพาะเจาะจงของคำถามโมเดล มันรวมเข้ากับลูกค้า MCP เช่น Claude Desktop เพื่อให้โมเดลได้รับข้อมูลการออกแบบที่มีโครงสร้างแทนที่จะเป็นข้อความที่แยกออกจากกัน ความถูกต้อง ขึ้นอยู่กับโมเดลพื้นฐานและคุณภาพของข้อความนำเข้า; โค้ดที่สร้างขึ้นและการวิเคราะห์ระบบต้องการการตรวจสอบและการทดสอบจากมนุษย์ก่อนการนำไปใช้ โดยเฉพาะอย่างยิ่งสำหรับพฤติกรรม UI ที่ซับซ้อนหรือปัญหาการเข้าถึง
การตั้งค่าต้องการส่วนประกอบในท้องถิ่นและสภาพแวดล้อมของลูกค้าที่เข้ากันได้
สะพานเชื่อมทำงานเป็นปลั๊กอินคู่ข้างใน Figma และเซิร์ฟเวอร์ MCP ที่โฮสต์ในท้องถิ่น ดังนั้นลูกค้าที่เข้ากันได้กับ MCP และแอป Figma Desktop หรือ Web จึงเป็นสิ่งจำเป็น การติดตั้งมักจะต้องการ Node.js และการเข้าถึงเครือข่ายในท้องถิ่นระหว่างปลั๊กอินและเซิร์ฟเวอร์ เนื่องจากมันทำหน้าที่เป็นพร็อกซี่คำขอผ่านปลั๊กอิน จึงข้ามข้อจำกัดอัตราการใช้ API REST ของ Figma ซึ่งมีผลต่อความถี่ที่ตัวแทนสามารถสอบถามข้อมูลการออกแบบในระหว่างการทำงานแบบวนซ้ำ
เหมาะที่สุดสำหรับท่อวิศวกรรมมากกว่าการใช้งานเฉพาะของนักออกแบบ
การแจกจ่ายแบบโอเพนซอร์สและประวัติของนักพัฒนาที่สร้าง Hoppscotch แสดงให้เห็นถึงการมุ่งเน้นเครื่องมือที่มุ่งเป้าไปที่วิศวกรที่ฝัง AI ลงในท่อพัฒนาการ เครื่องมือนี้เหมาะสำหรับทีมที่สามารถปรับเปลี่ยนโค้ดและจัดการบริการในท้องถิ่น และมันปรับตัวเข้าสู่กระบวนการอัตโนมัติหรือ CI ที่ข้อมูลการออกแบบที่มีโครงสร้างจะช่วยในการทำงานที่ขับเคลื่อนด้วยโมเดล ผู้ใช้ที่ไม่ใช่ทางเทคนิค ควรคาดหวังขั้นตอนการตั้งค่าและการรวมก่อนที่จะใช้ผลลัพธ์ที่สร้างขึ้นในผลิตภัณฑ์
ทางเลือกที่ใช้งานได้จริงสำหรับการรวมระบบที่มุ่งเน้นวิศวกรรม
สำหรับทีมที่รวมผลลัพธ์ของโมเดลเข้ากับกระบวนการทำงานของนักพัฒนา เครื่องมือนี้ให้เส้นทางตรงสู่การทำงานอัตโนมัติที่มีการออกแบบและการสร้างโค้ด คาดหวังถึงความพยายามในการรวมระบบและให้ถือว่าผลิตภัณฑ์ที่สร้างขึ้นเป็นผลลัพธ์ร่างที่ต้องการการตรวจสอบ การแลกเปลี่ยนนี้เร่งการทดลองกับรูปแบบ UI ภายในข้อจำกัดด้านวิศวกรรม และเหมาะสำหรับกลุ่มที่จับคู่ผลลัพธ์ของโมเดลกับการตรวจสอบของนักพัฒนาก่อนที่จะรวมเข้ากับโครงการต่างๆ
