ต้นแบบ · รุ่นทดลอง: มีทุก server ในทะเบียนทางการ อัปเดตทุก 30 นาที เข้าสู่ระบบด้วย Google เพื่อเขียนรีวิวได้แล้ว
PopNx MCPที่รวม MCP สำหรับคนใช้ AI · อธิบายเป็นภาษาคน
☰ เมนูไทย ตั้งค่า
โหมดมือใหม่ เปิด
สีหน้าจอตามเครื่องสว่างมืด
ภาษาไทยEnglish中文日本語한국어EspañolDeutsch

TheDesignAgent

โดย thedesignagent.aiรุ่น 0.5.3i★ –iบนเครื่องหรือคลาวด์
ชื่อใน registryai.thedesignagent/mcp

วิธีติดตั้ง

ภาพรวม

คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)

A design agent in your coding agent's loop: briefs each screen, reviews UX and visual quality.

ใช้ทำอะไรได้

ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry

  • การเชื่อมต่อ: บนเครื่องหรือคลาวด์
  • ช่องทาง (transport): stdio, Streamable HTTP
  • หมวด: เครื่องมือนักพัฒนา
  • ต้องใส่ค่าเหล่านี้: THEDESIGNAGENT_API_KEY, Authorization

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ผลตรวจผ่าน 2/3 · สิ่งที่คุณถามผ่านเซิร์ฟเวอร์ของผู้ทำ (www.thedesignagent.ai)

ขั้นแรก: คุณใช้ AI ตัวไหน

เลือกแอปที่คุณใช้ ขั้นตอนจะขึ้นด้านล่าง

ต่อกับ Claude ได้ · ประมาณ 5 นาที

ต้องมีคีย์ของ TheDesignAgent (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย) · ตั้งครั้งเดียวที่ claude.ai หรือแอปบนคอม แล้วใช้ในแชตได้ · บัญชีฟรีเพิ่มได้ 1 ตัว

  1. สมัครและสร้างคีย์ของ TheDesignAgent

    เปิดเว็บของผู้ทำ สมัครบัญชีแล้วสร้างคีย์ (API key) เก็บไว้ ใช้ในขั้นถัดไป อาจมีค่าใช้จ่าย

    เปิดเว็บของ TheDesignAgent ↗

  2. เปิดหน้า Connectors ของ Claude

    CustomizeConnectors

    CustomizeConnectors1+ Add2https://…3Add4

  3. กด “+ Add” → “Add custom connector” แล้วกรอก 2 ช่องนี้

    คัดลอกจากที่นี่ไปวางในช่องชื่อเดียวกันบนหน้าจอของ Claude แล้วกด Continue

    Name · ชื่อTheDesignAgent
    Remote MCP server URL · ที่อยู่https://www.thedesignagent.ai/mcp

    ที่หัวข้อ Request headers เพิ่มชื่อและค่านี้

    ชื่อ headerAuthorization
    ค่าBearer <วางคีย์ของคุณตรงนี้>

    วางคีย์ในช่องของแอปเท่านั้น อย่าวางในแชตหรือส่งให้ใคร

    หัวข้อ Authentication ปล่อยตามที่ Claude ตรวจเจอ แล้วกด Add

  4. เปิดใช้ในแชต

    +ConnectorsTheDesignAgent

  5. ลองเลย

    ใช้ TheDesignAgent บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง

    ✓ ถ้า Claude บอกว่ากำลังใช้ TheDesignAgent หรือมีชื่อเครื่องมือของ TheDesignAgent ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ChatGPT ยังต่อ TheDesignAgent ไม่ได้

TheDesignAgent ต้องใส่คีย์ส่วนตัวตอนต่อ แต่หน้าช่วยเหลือของ OpenAI พูดถึงแค่การเข้าสู่ระบบแบบ OAuth ยังไม่มีวิธีใส่คีย์ที่เราตรวจได้

คุณทำแบบนี้แทนได้

ก · ใช้แอปที่ต่อ TheDesignAgent ได้

  • ต้องมีคีย์ของ TheDesignAgent (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย) · ตั้งครั้งเดียวที่ claude.ai หรือแอปบนคอม แล้วใช้ในแชตได้ · บัญชีฟรีเพิ่มได้ 1 ตัว
  • ต้องมีคีย์ของ TheDesignAgent (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย)
  • ต้องมีคีย์ของ TheDesignAgent (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย)
  • ต้องมีคีย์ของ TheDesignAgent (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย)

ข · ตัวอื่นในหมวด เครื่องมือนักพัฒนา ที่ต่อกับ ChatGPT ได้

เลือกจากตัวที่ใช้มากในหมวดเดียวกัน เฉพาะตัวที่ต่อด้วยที่อยู่ได้โดยไม่ต้องใส่คีย์

ต่อกับ Claude Code ได้ · ประมาณ 5 นาที

ต้องมีคีย์ของ TheDesignAgent (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย)

  1. สมัครและสร้างคีย์ของ TheDesignAgent

    เปิดเว็บของผู้ทำ สมัครบัญชีแล้วสร้างคีย์ (API key) เก็บไว้ ใช้ในขั้นถัดไป อาจมีค่าใช้จ่าย

    เปิดเว็บของ TheDesignAgent ↗

  2. เปิด Terminal

    Mac: กด Command+Space พิมพ์ Terminal · Windows: เปิด PowerShell

  3. วางคำสั่งนี้แล้วกด Enter

    claude mcp add --transport http thedesignagent https://www.thedesignagent.ai/mcp --header 'Authorization: ใส่ค่าของคุณ'

    แก้ “ใส่ค่าของคุณ” เป็นคีย์ของคุณก่อนกด Enter

    วางคีย์ในช่องของแอปเท่านั้น อย่าวางในแชตหรือส่งให้ใคร

  4. พิมพ์ /mcp ใน Claude Code

    ต้องเห็น TheDesignAgent ในรายการและขึ้นว่าเชื่อมต่อแล้ว

  5. ลองเลย

    ใช้ TheDesignAgent บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง

    ✓ ถ้า Claude Code บอกว่ากำลังใช้ TheDesignAgent หรือมีชื่อเครื่องมือของ TheDesignAgent ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ต่อกับ Cursor ได้ · ประมาณ 5 นาที

ต้องมีคีย์ของ TheDesignAgent (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย)

  1. สมัครและสร้างคีย์ของ TheDesignAgent

    เปิดเว็บของผู้ทำ สมัครบัญชีแล้วสร้างคีย์ (API key) เก็บไว้ ใช้ในขั้นถัดไป อาจมีค่าใช้จ่าย

    เปิดเว็บของ TheDesignAgent ↗

  2. กดปุ่มนี้เพื่อเปิด Cursor

    เปิดใน Cursor

    Cursor จะถามยืนยันการติดตั้ง ให้กด Install

  3. ใส่คีย์ในช่องที่ว่างไว้

    ในค่าตั้งของ TheDesignAgent ช่อง Authorization ยังว่าง ใส่คีย์ของคุณแล้วบันทึก

    วางคีย์ในช่องของแอปเท่านั้น อย่าวางในแชตหรือส่งให้ใคร

  4. เปิดแชตของ AI ใน Cursor โหมด Agent

  5. ลองเลย

    ใช้ TheDesignAgent บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง

    ✓ ถ้า Cursor บอกว่ากำลังใช้ TheDesignAgent หรือมีชื่อเครื่องมือของ TheDesignAgent ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Cursor เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ต่อกับ VS Code ได้ · ประมาณ 5 นาที

ต้องมีคีย์ของ TheDesignAgent (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย)

  1. สมัครและสร้างคีย์ของ TheDesignAgent

    เปิดเว็บของผู้ทำ สมัครบัญชีแล้วสร้างคีย์ (API key) เก็บไว้ ใช้ในขั้นถัดไป อาจมีค่าใช้จ่าย

    เปิดเว็บของ TheDesignAgent ↗

  2. กดปุ่มนี้เพื่อเปิด VS Code

    เปิดใน VS Code

    VS Code จะถามยืนยันการติดตั้ง ให้กด Install

  3. ใส่คีย์ในช่องที่ว่างไว้

    ในค่าตั้งของ TheDesignAgent ช่อง Authorization ยังว่าง ใส่คีย์ของคุณแล้วบันทึก

    วางคีย์ในช่องของแอปเท่านั้น อย่าวางในแชตหรือส่งให้ใคร

  4. เปิดแชตของ AI ใน VS Code โหมด Agent

  5. ลองเลย

    ใช้ TheDesignAgent บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง

    ✓ ถ้า VS Code บอกว่ากำลังใช้ TheDesignAgent หรือมีชื่อเครื่องมือของ TheDesignAgent ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ VS Code เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

โปรแกรมอื่นที่ใช้ MCP ได้ เช่น Windsurf, Zed หรือ Gemini CLI มีวิธีเพิ่มต่างกัน ดูวิธีของแต่ละตัวในหน้ารวมโปรแกรม

ดูโปรแกรมที่ใช้ MCP ทั้งหมด →

ที่อยู่สำหรับโปรแกรมที่ต่อผ่านเว็บ

ที่อยู่https://www.thedesignagent.ai/mcp

ค่าตั้งแบบไฟล์ JSON อยู่ในหัวข้อ “สำหรับคนเขียนโค้ด” ด้านล่าง

ติดตรงไหน? ถามคนที่ใช้ TheDesignAgent อยู่💬 พูดคุย →
สำหรับคนเขียนโค้ด: คำสั่ง Terminal และค่าตั้ง JSON

ต่อผ่านเว็บ

Claude Code

claude mcp add --transport http thedesignagent https://www.thedesignagent.ai/mcp --header 'Authorization: ใส่ค่าของคุณ'

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "thedesignagent": {
      "url": "https://www.thedesignagent.ai/mcp",
      "headers": {
        "Authorization": "ใส่ค่าของคุณ"
      }
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "thedesignagent": {
      "type": "http",
      "url": "https://www.thedesignagent.ai/mcp",
      "headers": {
        "Authorization": "ใส่ค่าของคุณ"
      }
    }
  }
}

ติดตั้งในเครื่อง

Claude Code

claude mcp add thedesignagent --env THEDESIGNAGENT_API_KEY='ใส่ค่าของคุณ' --env CHROME_PATH='ใส่ค่าของคุณ' -- npx -y @thedesignagent/mcp

Claude Desktop (claude_desktop_config.json)

{
  "mcpServers": {
    "thedesignagent": {
      "command": "npx",
      "args": [
        "-y",
        "@thedesignagent/mcp"
      ],
      "env": {
        "THEDESIGNAGENT_API_KEY": "ใส่ค่าของคุณ",
        "CHROME_PATH": "ใส่ค่าของคุณ"
      }
    }
  }
}

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "thedesignagent": {
      "command": "npx",
      "args": [
        "-y",
        "@thedesignagent/mcp"
      ],
      "env": {
        "THEDESIGNAGENT_API_KEY": "ใส่ค่าของคุณ",
        "CHROME_PATH": "ใส่ค่าของคุณ"
      }
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "thedesignagent": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@thedesignagent/mcp"
      ],
      "env": {
        "THEDESIGNAGENT_API_KEY": "ใส่ค่าของคุณ",
        "CHROME_PATH": "ใส่ค่าของคุณ"
      }
    }
  }
}

ค่าที่ต้องใส่เอง

  • THEDESIGNAGENT_API_KEY ความลับ จำเป็น env
    Your TheDesignAgent API key (starts with tda_)
  • CHROME_PATH env
    Browser binary for Visual screenshots, if not found automatically
  • Authorization ความลับ HTTP header
    Optional: Bearer tda_... API key, for CI and headless use. Without it, clients that support MCP authorization sign in with OAuth.

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

สรุป

ดาวน์โหลดต่อสัปดาห์i
126/สัปดาห์
โดเมนที่ยืนยัน
✓ thedesignagent.ai
licensei
ไม่ระบุ license
การเชื่อมต่อ
บนเครื่องหรือคลาวด์
ช่องทาง (transport)
stdio, streamable-http
รุ่นล่าสุดi
0.5.3
ส่งเข้า registryi
7 ต.ค. 2569
แก้โค้ดล่าสุดi
–
ผู้ทำ
thedesignagent.ai
แพ็กเกจ
npm: @thedesignagent/mcp
repo
–
เว็บผู้ทำ
www.thedesignagent.ai
สถานะใน registry
ใช้งานอยู่

ใช้กับโปรแกรมไหนได้

ดูจากแบบการต่อของ server ตัวนี้ และเอกสารของผู้ทำโปรแกรมแต่ละตัว ตรวจเมื่อ 10 พ.ย. 2569

ต่อผ่านคลาวด์ได้ใน

ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast

ติดตั้งบนเครื่องได้ใน

ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast

ดูโปรแกรมทั้งหมดพร้อมข้อดีข้อเสีย →

คู่มือที่เกี่ยวข้อง

เรื่องที่ 8เช็ก 5 ข้อก่อนติดตั้ง MCP ไม่ให้ข้อมูลรั่วใช้เวลาราว 2 นาทีต่อตัว ดูจากหน้าของตัวนั้นบนเว็บเรา และหน้าขออนุญาตของโปรแกรม AI ก่อนกดยอมอ่าน 4 นาที

ทำอะไรได้บ้าง

server ให้ล็อกอินก่อนจึงจะแสดงรายการเครื่องมือ

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 11 พ.ย. 2569

  • ! ควรระวัง

    ตัวตนผู้ทำตรงกับ repo

    ทะเบียนไม่ได้ระบุ repo ของโค้ด จึงยังจับคู่ผู้ลงทะเบียน (thedesignagent.ai) กับโค้ดไม่ได้

  • … ยังไม่ตรวจ

    ยังมีคนดูแล

    ยังไม่ได้อ่านข้อมูล repo จาก GitHub

  • … ยังไม่ตรวจ

    มีสัญญาอนุญาต (license)

    ยังไม่ได้อ่านข้อมูล repo จาก GitHub

  • ✓ ผ่าน

    endpoint ตอบ

    ตอบกลับใน 250 ms (HTTP 401)

  • ✓ ผ่าน

    ล็อกอินแบบ OAuth

    ประกาศวิธีล็อกอินแบบ OAuth ให้โปรแกรม AI พาไปล็อกอินเอง

  • … ยังไม่ตรวจ

    คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

    ยังไม่ได้ตรวจ เราอ่านรายการเครื่องมือตอนตรวจ endpoint

พูดคุย

ถาม แชร์เคล็ดลับ หรือแจ้งว่าใช้ไม่ได้ เรียงตามที่คนกดว่ามีประโยชน์

ยังไม่มีใครโพสต์ ถามหรือแชร์เป็นคนแรกได้เลย

ข้อความในส่วนนี้เขียนโดยผู้ใช้ ไม่ใช่ทีม PopNx

เข้าสู่ระบบด้วย Google เพื่อโพสต์

รีวิวจากผู้ใช้

ยังไม่มีรีวิว

เข้าสู่ระบบด้วย Google เพื่อเขียนรีวิว

เทียบกับตัวอื่นในหมวด เครื่องมือนักพัฒนาi

  • ดาวมากกว่า 0% ของอีก 5755 ตัวในหมวดนี้
  • ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 48% ของอีก 5755 ตัวในหมวดนี้
  • ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 28% ของอีก 5755 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

TheDesignAgent ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 2 จาก 3 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

ต้องใส่ค่าเหล่านี้: THEDESIGNAGENT_API_KEY, Authorization

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

ได้ทั้งสองแบบ จะลงในเครื่องหรือต่อผ่านคลาวด์ก็ได้

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.5.3) เข้า registry 36 วันที่ผ่านมา

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต่อผ่าน URL จึงใช้กับโปรแกรมที่รับ remote MCP ได้ เช่น ChatGPT แผน Business ขึ้นไป

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี REA, Netdata, Front-End Checklist

ตัวที่ใช้แทนได้

server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว

อ่านการ์ด:↓ ดาวน์โหลดต่อสัปดาห์i★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

REA

แกะการทำงานของโปรแกรมและแอปจากเทอร์มินัลหรือจาก AI

โดย morlutoใช้กันมาก↓ 388.7K/สัปดาห์★ 448.2Kอัปเดต 17 วันที่ผ่านมา

รันบนเครื่อง
ติดตั้ง

Netdata

ดูสถานะเซิร์ฟเวอร์แบบเรียลไทม์ ทั้งตัวเลข log การแจ้งเตือน และจุดผิดปกติ

โดย netdataใช้กันมาก★ 81.3Kอัปเดต 7 วันที่ผ่านมา

รันบนคลาวด์
ติดตั้ง

Front-End Checklist

ตรวจโค้ดหน้าเว็บและเว็บจริงกับกฎคุณภาพงานหน้าบ้าน 386 ข้อ

โดย thedaviddiasใช้กันมาก★ 74.7Kอัปเดต 37 วันที่ผ่านมา

รันบนคลาวด์
ติดตั้ง

README จากผู้ทำ

ไม่พบ README ใน repo