Mobbin

ทางการ

Mobbin เป็นมาตรฐานอุตสาหกรรมด้านการอ้างอิงการออกแบบ UI และ UX สำหรับแอปมือถือ เว็บแอป และเว็บไซต์ แพลตฟอร์มนี้ให้บริการผู้สร้างผลิตภัณฑ์และนักออกแบบหลายล้านคนทั่วโลกเพื่อช่วยให้พวกเขาออกแบบประสบการณ์ดิจิทัลที่ดีขึ้น เชื่อมต่อ Mobbin กับเอเจนต์ AI ของคุณเพื่อค้นคว้าและสำรวจแนวคิดการออกแบบ UI และ UX ได้ดียิ่งขึ้น

ดูบน mobbin.comลองใช้ MCP นี้ผู้สนับสนุน

คุณทำอะไรได้บ้างด้วย Mobbin MCP?

  • ค้นหาหน้าจอ UI — ขอรูปแบบหน้าจอมือถือหรือเว็บที่เฉพาะเจาะจง เช่น หน้าเข้าสู่ระบบ เพย์วอลล์ สถานะว่าง หรือฟอร์ม ผ่าน search_screens
  • สำรวจโฟลว์หลายขั้นตอน — ค้นหาลำดับการใช้งานผู้ใช้ เช่น การเริ่มต้นใช้งาน การชำระเงิน หรือการยกเลิก โดยใช้ search_flows
  • ค้นหาส่วนของเว็บไซต์ — ค้นหาการอ้างอิงโครงสร้างหน้า เช่น ฮีโร่ ตารางราคา หรือส่วนท้าย ด้วย search_sections
  • เปรียบเทียบการออกแบบผลิตภัณฑ์ — ขอตัวอย่างแบบเคียงข้างกันจากแอปเฉพาะ เช่น โฟลว์การชำระเงินจาก Airbnb และ Booking.com
  • จัดการกับอัตราจำกัด — เมื่อพบ HTTP 429 ให้รอตามระยะเวลาที่ระบุในส่วนหัว Retry-After ก่อนลองใหม่

เซิร์ฟเวอร์ MCP แบบโฮสต์

npx add-mcp 'https://api.mobbin.com/mcp'

ติดตั้งลง Claude Code, Codex, Cursor และอื่นๆ

เอกสาร

Mobbin MCP

Mobbin MCP ช่วยให้ผู้ช่วย AI และเอเจนต์เขียนโค้ดที่เข้ากันได้สามารถค้นหาหน้าจอจริง โฟลว์หลายขั้นตอน และส่วนต่างๆ ของเว็บไซต์จากผลิตภัณฑ์ดิจิทัลที่เผยแพร่แล้วโดยใช้ภาษาธรรมชาติ ผลลัพธ์สามารถรวมถึงภาพหน้าจอ ชื่อแอป บริบทของโฟลว์ และลิงก์ไปยังหน้า Mobbin ที่เกี่ยวข้อง

การเข้าถึง

  • ปลายทาง: https://api.mobbin.com/mcp
  • การส่งข้อมูล: Streamable HTTP
  • การอนุญาต: OAuth ผ่านบัญชี Mobbin ของผู้ใช้
  • แผน: Pro, Team และ Enterprise
  • ขีดจำกัดอัตรา: 60 คำขอต่อ 60 วินาทีต่อผู้ใช้
  • แกลเลอรีแบบโต้ตอบ: รองรับในไคลเอนต์ที่เข้ากันได้กับ MCP Apps รวมถึง ChatGPT, Claude Desktop และ Web และ Codex App

ในการเชื่อมต่อครั้งแรก ไคลเอนต์ MCP จะเปิดหน้าต่างเบราว์เซอร์เพื่อให้ผู้ใช้ลงชื่อเข้าใช้ Mobbin และอนุญาตการเข้าถึง ไม่จำเป็นต้องคัดลอกคีย์ API ด้วยตนเองสำหรับ MCP

ชุดเครื่องมือ MCP ที่เผยแพร่ในปัจจุบันเป็นแบบอ่านอย่างเดียว: ใช้เพื่อดึงข้อมูลอ้างอิงการออกแบบเท่านั้น และไม่สร้าง แก้ไข หรือลบเนื้อหาบัญชี Mobbin

เครื่องมือ

search_screens

ค้นหาหน้าจอ UI ของมือถือและเว็บแต่ละรายการ ใช้สำหรับสถานะหรือรูปแบบเฉพาะ เช่น หน้าล็อกอิน เพย์วอลล์ สถานะว่าง ไดอะล็อก ฟอร์ม หรือการจัดการการนำทาง

search_flows

ค้นหาโฟลว์ผู้ใช้หลายขั้นตอนแบบเรียงลำดับ ใช้เมื่อลำดับและบริบทมีความสำคัญ เช่น การเริ่มต้นใช้งาน การชำระเงิน การตั้งค่าบัญชี การยืนยันตัวตน การสมัครสมาชิก หรือการยกเลิก

search_sections

ค้นหาส่วนต่างๆ ของเว็บไซต์ ใช้สำหรับการอ้างอิงการจัดองค์ประกอบหน้า เช่น ฮีโร่ ส่วนราคา คำรับรอง การนำทาง และส่วนท้าย

ผลลัพธ์ประกอบด้วยอะไรบ้าง

ขึ้นอยู่กับการค้นหาและไคลเอนต์ ผลลัพธ์สามารถรวมถึงภาพหน้าจอ ชื่อผลิตภัณฑ์ บริบทของโฟลว์หรือส่วน และลิงก์กลับไปยัง Mobbin ไคลเอนต์ MCP ที่รองรับ MCP Apps สามารถแสดงผลลัพธ์เป็นแกลเลอรีแบบโต้ตอบได้

เอเจนต์ควรเก็บชื่อผลิตภัณฑ์และ URL ของ Mobbin สำหรับการอ้างอิงที่สำคัญ เพื่อให้ผู้ใช้สามารถตรวจสอบแหล่งที่มาได้

ขั้นตอนการทำงานที่แนะนำ

  1. ระบุแพลตฟอร์ม หมวดหมู่ผลิตภัณฑ์ เป้าหมายผู้ใช้ และคำถามด้านการออกแบบ
  2. เลือกการค้นหาหน้าจอ โฟลว์ หรือส่วนของเว็บไซต์
  3. ตรวจสอบผลิตภัณฑ์ที่เกี่ยวข้องหลายรายการแทนที่จะพึ่งพาตัวอย่างเดียว
  4. เก็บชื่อผลิตภัณฑ์และ URL ของ Mobbin สำหรับการอ้างอิงที่สำคัญแต่ละรายการ
  5. แยกการสังเกตที่มองเห็นได้จากการตีความและคำแนะนำ
  6. ปรับผลลัพธ์ให้เข้ากับแบรนด์ กลุ่มเป้าหมาย ระบบการออกแบบ ความต้องการด้านการเข้าถึง และข้อจำกัดของผลิตภัณฑ์ของผู้ใช้

ข้อจำกัดของหลักฐาน

  • ตัวอย่าง Mobbin แสดงว่าผลิตภัณฑ์ใช้การออกแบบนั้น แต่ไม่ได้พิสูจน์ว่าการออกแบบนั้นปรับปรุงการแปลงหรือเมตริกอื่นๆ
  • รูปแบบที่เกิดขึ้นซ้ำเป็นธรรมเนียมปฏิบัติ ไม่ใช่แนวทางปฏิบัติที่ดีที่สุดโดยอัตโนมัติ
  • ตรวจสอบข้อมูลเมตาของการจับภาพเมื่อความใหม่ของข้อมูลมีความสำคัญ
  • อย่าคัดลอกการออกแบบ แบรนด์ ข้อความ หรือทรัพย์สินที่ได้รับการคุ้มครองโดยตรง
  • ประเมินความสามารถในการเข้าถึงอย่างอิสระ

ข้อผิดพลาดและการกู้คืน

  • การอนุญาตล้มเหลว: เชื่อมต่อ Mobbin ใหม่และทำขั้นตอนการลงชื่อเข้าใช้ OAuth ให้เสร็จสมบูรณ์
  • HTTP 429 Too Many Requests: รอตามระยะเวลาในส่วนหัว Retry-After ก่อนลองอีกครั้ง
  • ผลลัพธ์ขาดหายไปหรืออ่อนแอ: ทำให้คำขอเฉพาะเจาะจงมากขึ้นโดยระบุแพลตฟอร์ม หมวดหมู่ผลิตภัณฑ์ เป้าหมายผู้ใช้ รูปแบบ หรือโฟลว์
  • ผลลัพธ์แคบเกินไป: ลบข้อจำกัดที่ไม่จำเป็นหรือค้นหาหน้าจอ โฟลว์ และส่วนต่างๆ แยกกัน
  • เพิกถอนการเข้าถึง: เพิกถอนไคลเอนต์ที่เชื่อมต่อจากการตั้งค่าบัญชี Mobbin

ตัวอย่างพรอมต์

  • ค้นหา Mobbin สำหรับหน้าจอการเริ่มต้นใช้งานจากแอปธนาคาร
  • เปรียบเทียบวิธีที่ Airbnb และ Booking.com จัดการโฟลว์การชำระเงิน
  • ค้นหาเพย์วอลล์บนมือถือที่อธิบายการเรียกเก็บเงินรายไตรมาสและรายปีอย่างชัดเจน
  • ค้นหาส่วนราคา SaaS ที่มีตารางเปรียบเทียบคุณสมบัติที่ซับซ้อน
  • แสดงหน้าจอการขออนุญาตแจ้งเตือนและระบุรูปแบบที่เกิดขึ้นซ้ำ
  • ค้นหาสถานะว่างที่ใช้โดยผลิตภัณฑ์การทำงานร่วมกันเพื่อประสิทธิภาพ

การตั้งค่าและการสนับสนุน

ราคาและการเข้าถึงแผน: https://mobbin.com/pricing.md

ภาพรวมผลิตภัณฑ์: https://mobbin.com/index.md

บริบทเอเจนต์ที่สมบูรณ์: https://mobbin.com/llms-full.txt