# Research — AI design tools, Desktop apps และ MCP สำหรับเว็บ

**ตรวจแหล่งข้อมูล:** 9 กันยายน 2026 · **ขอบเขต:** เอกสารผู้ให้บริการและโครงการต้นทาง · **ใช้ประกอบ:** [คู่มือติดตั้ง](../labs/install-ai-tools.md), [Lab Design Tools/MCP](../labs/design-tools-and-mcp.md), [prompt library](../prompts/design-tools-prompts.md)

ข้อเสนอการสอนของ **AI Web Studio**, ส่วนหนึ่งของ **977-121 Module: Website Design and Development** ที่ PSU วิทยาเขตภูเก็ต คือเลือกเครื่องมือให้ตรงขั้นงาน: สำรวจแบบ → ทำให้ข้อมูลแบบตรวจได้ → implement หนึ่งหน้า → ทดสอบกับ browser การเปรียบเทียบนี้ไม่ได้จัดอันดับความนิยม หรือรับรองว่าเครื่องมือใดแทนการตรวจงานของผู้พัฒนาได้

## สิ่งที่เปลี่ยนวิธีสอน

**Claude Design เป็นผลิตภัณฑ์จริงที่มี canvas และ workflow ของตนเอง** มี beta access สำหรับแผนที่รองรับ, design system ขององค์กร, export และ handoff ไป Claude Code จึงสอนแยกจาก Claude chat/Artifacts และสอน Design MCP ด้วยวิธีของ Claude Code ที่ Anthropic ระบุ [Claude Design](https://claude.com/product/design), [Getting started](https://support.claude.com/en/articles/14604416-get-started-with-claude-design)

**Google Stitch มี MCP แล้ว** ข่าวเปิดตัวปี 2025 อธิบาย text/image → UI และ paste to Figma แต่ประกาศ Google Labs วันที่ 18 มีนาคม 2026 เพิ่ม canvas, design agent, `DESIGN.md`, MCP server และ SDK การใช้บทความเปิดตัวอย่างเดียวจึงไม่พออธิบายการเชื่อมต่อปัจจุบัน [Google Labs: Stitch update](https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/), [Stitch MCP setup](https://stitch.withgoogle.com/docs/mcp/setup/)

**Figma remote กับ desktop MCP ใช้ context ต่างกัน** ฝั่ง remote ใช้ลิงก์ file/frame/layer ส่วน desktop อ่าน selection ในไฟล์ที่เปิดได้ เอกสาร Figma แนะนำ remote เพราะมีความสามารถกว้างกว่าและไม่ต้องเปิด Figma Desktop [MCP introduction](https://developers.figma.com/docs/figma-mcp-server/), [Remote setup](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/), [Desktop setup](https://developers.figma.com/docs/figma-mcp-server/local-server-installation/)

**ชื่อแอปกับวิธีทำงานต้องแยกให้ชัด** เอกสาร OpenAI ปัจจุบันอธิบาย ChatGPT และ Codex ใน desktop app แต่ Codex CLI ยังเป็นการติดตั้งอีกทาง ส่วน Claude Desktop มี chat และ Code/Cowork ตามสิทธิ์ การบอกว่า “ติดตั้ง Desktop แล้ว” จึงไม่ตอบว่า terminal binary หรือ connector พร้อมใช้หรือไม่ [OpenAI desktop app](https://learn.chatgpt.com/docs/app.md), [Codex CLI](https://learn.chatgpt.com/docs/codex/cli.md), [Claude Desktop](https://support.claude.com/en/articles/10065433-install-claude-desktop)

## ตารางเลือกเครื่องมือ

| เครื่องมือ | บทบาทที่มีหลักฐานรองรับ | การส่งต่อ | ขอบเขตที่ต้องตรวจ |
| --- | --- | --- | --- |
| Claude Design | สร้าง/ปรับ prototype และใช้ design system | HTML/ZIP/PDF/PPTX, Handoff to Claude Code, Design MCP | beta, plan/admin setting และคุณภาพระบบแบรนด์ที่สกัด |
| Google Stitch | สำรวจ UI จาก brief/ภาพและทำงานกับ canvas/design context | export, Figma handoff ตามฟีเจอร์ที่บัญชีมี, MCP/SDK | วิธี auth ปัจจุบันและความสมบูรณ์ของ design→code |
| Figma MCP | ส่ง frame, component, variable และ screenshot ให้ coding agent | remote HTTP หรือ Figma Desktop HTTP | client support, file permission, seat และ tool limits |
| Penpot MCP | อ่าน/แก้ design context ของ page, components และ tokens | remote HTTP หรือ local plugin/server | active page/tab และ credential ใน server URL |
| Claude/ChatGPT Desktop | วิเคราะห์ brief และวิจารณ์ภาพ/ไฟล์ที่แนบ | ข้อเสนอแก้และ handoff ไป coding tool | อย่าอ้างว่า screenshot review คือ browser test |

หลักฐานแต่ละแถว: [Claude Design guide](https://support.claude.com/en/articles/14604416-get-started-with-claude-design), [Stitch update](https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/), [Figma tools](https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/), [Penpot MCP](https://help.penpot.app/mcp/), [OpenAI app](https://learn.chatgpt.com/docs/app.md), [Claude Desktop](https://support.claude.com/en/articles/10065433-install-claude-desktop)

การเลือก Penpot เป็นหัวข้อต่อยอดเป็น **ข้อเสนอของผู้จัดหลักสูตร** เพราะมี official MCP และเป็นทางเลือกออกแบบแบบ open source ไม่ใช่ข้อสรุปว่ามีผู้ใช้มากกว่าบริการอื่น ไม่เพิ่มรายชื่อเครื่องมือจำนวนมากโดยไม่มีแบบฝึกหัดที่ต่างกันชัดเจน

## Connection map และความหมายของ “ต่อแล้ว”

| ต้นทาง → client | วิธีที่มีเอกสารรองรับ | หลักฐานที่ผู้เรียนต้องแสดง |
| --- | --- | --- |
| Claude Design → Claude Code | `https://api.anthropic.com/v1/design/mcp`, `/design-login`, `/design-sync` | อ่าน design/system ที่ตั้งใจใช้ได้ |
| Figma → Claude Code | official plugin หรือ remote MCP | authorization และอ่าน frame จริง |
| Figma → Codex | Figma plugin ใน app หรือ `codex mcp add ... --url ...` | frame/component/variable ตรงต้นฉบับ |
| Figma → Claude Desktop | connector ตาม client compatibility ของ Figma | tools ปรากฏและเรียกอ่านได้ |
| Stitch → coding client | `https://stitch.googleapis.com/mcp`, API key header ผ่าน environment ของ client | authenticated tool call และ project/screen ที่ตรงเป้าหมาย |
| Penpot → MCP client | URL ส่วนตัวจาก Integrations และ Connect ในไฟล์ | ชื่อ page/token จาก tab ที่เลือก |
| ไฟล์ออกแบบ → Desktop chat | แนบ screenshot/HTML หรือไฟล์ที่รองรับ | รายการ input ที่อ่านได้และข้อจำกัด |

อ่านคำสั่งเต็มและขั้นตรวจใน [Lab](../labs/design-tools-and-mcp.md) ตารางนี้สรุปจาก [Anthropic Design MCP](https://support.claude.com/en/articles/14604416-get-started-with-claude-design), [Figma setup](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/), [Figma supported clients](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server), [Stitch setup](https://stitch.withgoogle.com/docs/mcp/setup/), [Penpot setup](https://help.penpot.app/mcp/)

**ChatGPT chat กับ Codex ในแอป:** เอกสาร custom MCP apps ของ ChatGPT อธิบาย remote MCP และการเปิด developer mode ใน web workspace ตามสิทธิ์ ไม่ใช่สูตรเชื่อม `localhost` ในแชต ส่วน Codex ใช้ configuration ของ Codex และ Figma ที่ผู้ให้บริการระบุ ไม่ควรสรุปจากชื่อ Desktop ว่าทุก surface รองรับเหมือนกัน [ChatGPT MCP apps](https://help.openai.com/en/articles/12584461-developer-mode-and-full-mcp-connectors-in-chatgpt), [Desktop quickstart](https://learn.chatgpt.com/docs/app.md)

## การนำ Rawinnipa เข้า design workflow

คำแนะนำ Stitch ใน lab ประกอบจาก service contract ที่ตรวจใน [Google Labs SDK](https://github.com/google-labs-code/stitch-sdk/tree/575a9fb6319bd9d1ce8175e4a89e5958e024bbfd) กับ syntax ของ [Codex MCP](https://learn.chatgpt.com/docs/extend/mcp.md) และ [Claude Code MCP](https://code.claude.com/docs/en/mcp) จึงระบุชัดว่าเป็น config ตัวอย่างของหลักสูตร ไม่ใช่คำสั่ง enrollment ที่ Google แสดงในทุกบัญชี หน้า setup ที่ต้อง sign in ยังเป็นจุดเริ่มสร้างสิทธิ์ของผู้เรียน

Source ของบริษัทคือ `/home/dev/projects/rawinnipa-brandbook/01-strategy/Rawinnipa_Brand_Guidelines_v1.0.md` ส่วนค่าที่นำมาใช้ในโครงการอยู่ใน `DESIGN.md` และ `design-system/` ให้แยก **ข้อกำหนดแบรนด์** ออกจาก **ข้อกำหนดผลิตภัณฑ์**: เว็บไซต์นี้ใช้ Light เป็น default และให้เลือก Dark ตามคำขอเจ้าของโครงการ โดยรักษา Rawin Green, Inter/Noto Sans Thai, โลโก้ต้นฉบับและน้ำเสียงเดิม

Claude Design รองรับการตั้ง design system จาก codebase, prototypes, documents และ assets การสกัดระบบอัตโนมัติยังต้องตรวจสี/ฟอนต์/component และทดลองใน project ก่อน publish สำหรับทีม [Design system setup](https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design)

Google ระบุการใช้ `DESIGN.md` เพื่อส่งต่อ design rules ได้ แต่อย่าคิดว่า Markdown ชื่อเดียวกันมี schema ตรงกันทุกเครื่องมือ ให้เทียบข้อมูลที่ import/export กับต้นฉบับ เช่น canvas/text/action, type scale, component states และ responsive rules แล้วเก็บ mapping [Stitch design update](https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/)

## ข้อจำกัดและข้อมูลที่ควรตรวจซ้ำก่อนสอน

- **Claude Design Desktop:** help page ปัจจุบันกล่าวถึง Desktop sidebar แต่อีกหน้า admin guide ที่เก่ากว่ายังบอก web-only หลักสูตรจึงใช้ `claude.ai/design` เป็น entry point และไม่บังคับให้มี sidebar [Getting started](https://support.claude.com/en/articles/14604416-get-started-with-claude-design), [Admin guide](https://support.claude.com/en/articles/14604406-claude-design-admin-guide-for-team-and-enterprise-plans)
- **Figma:** read/write และ usage limits ขึ้นกับ client/seat/plan จึงเริ่ม read-only ก่อน และไม่สอนให้ทุกบัญชีเขียนกลับ canvas ได้เสมอ [Figma MCP guide](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server)
- **OpenAI installation:** CLI local ที่ตรวจเป็น `0.153.4`; `codex doctor` และ `codex update` ต้องตรวจ `--help` ตามรุ่น บทติดตั้งใช้ channel ทางการ และแยก ChatGPT subscription กับ API billing [CLI](https://learn.chatgpt.com/docs/codex/cli.md), [Authentication](https://learn.chatgpt.com/docs/auth.md)
- **Port บนเครื่อง shared:** Figma Desktop 3845 และ Penpot local 4400/4401 เป็นพอร์ตที่ vendor ใช้ ไม่ใช่สิทธิ์ข้ามทะเบียนของเครื่อง ให้ตรวจ shared-infra ก่อนเปิด; remote ไม่มี local design-server process ที่ต้องเปิดเพิ่ม [Figma local](https://developers.figma.com/docs/figma-mcp-server/local-server-installation/), [Penpot local](https://help.penpot.app/mcp/)

หลักฐานรอบนี้เป็นการอ่านเอกสารและตรวจโครงสร้างเว็บไซต์หลักสูตร ไม่ได้ติดตั้งแอปทั้งสี่ใหม่ ไม่ได้เชื่อมบัญชี design ของผู้เรียนหรืออัปโหลด brandbook ไปบริการภายนอก ดังนั้นผลการเชื่อมแต่ละบัญชีต้องเก็บจาก lab จริง การทดสอบเว็บไซต์หลักสูตรไม่ได้แทนการทดสอบ MCP ของบริการเหล่านั้น

## นำไปใช้ในตาราง 2 วัน

ให้ติดตั้ง AI tools ก่อนเรียน เลือกหนึ่ง design path ในช่วงวันแรก 120–150 นาที แล้วนำแบบไปใช้กับ company slice ในช่วงถัดไป Full lab, การลอง client ที่สอง และ Penpot เป็นเนื้อหาฝึกต่อที่เกินเวลาได้ตามโครงหลักสูตร **2 วัน วันละ 4 ชั่วโมง รวม 8 ชั่วโมงรวมพัก** ดู [คู่มือผู้สอน](../instructor/course-guide.md) สำหรับตารางนาทีและวิธีเก็บหลักฐาน