Research — AI design tools, Desktop apps และ MCP สำหรับเว็บ
ตรวจแหล่งข้อมูล: 9 กันยายน 2026 · ขอบเขต: เอกสารผู้ให้บริการและโครงการต้นทาง · ใช้ประกอบ: คู่มือติดตั้ง, Lab Design Tools/MCP, prompt library
ข้อเสนอการสอนของ 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, Getting started
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, Stitch MCP setup
Figma remote กับ desktop MCP ใช้ context ต่างกัน ฝั่ง remote ใช้ลิงก์ file/frame/layer ส่วน desktop อ่าน selection ในไฟล์ที่เปิดได้ เอกสาร Figma แนะนำ remote เพราะมีความสามารถกว้างกว่าและไม่ต้องเปิด Figma Desktop MCP introduction, Remote setup, Desktop setup
ชื่อแอปกับวิธีทำงานต้องแยกให้ชัด เอกสาร OpenAI ปัจจุบันอธิบาย ChatGPT และ Codex ใน desktop app แต่ Codex CLI ยังเป็นการติดตั้งอีกทาง ส่วน Claude Desktop มี chat และ Code/Cowork ตามสิทธิ์ การบอกว่า “ติดตั้ง Desktop แล้ว” จึงไม่ตอบว่า terminal binary หรือ connector พร้อมใช้หรือไม่ OpenAI desktop app, Codex CLI, 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, Stitch update, Figma tools, Penpot MCP, OpenAI app, 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 ตารางนี้สรุปจาก Anthropic Design MCP, Figma setup, Figma supported clients, Stitch setup, Penpot setup
ChatGPT chat กับ Codex ในแอป: เอกสาร custom MCP apps ของ ChatGPT อธิบาย remote MCP และการเปิด developer mode ใน web workspace ตามสิทธิ์ ไม่ใช่สูตรเชื่อม localhost ในแชต ส่วน Codex ใช้ configuration ของ Codex และ Figma ที่ผู้ให้บริการระบุ ไม่ควรสรุปจากชื่อ Desktop ว่าทุก surface รองรับเหมือนกัน ChatGPT MCP apps, Desktop quickstart
การนำ Rawinnipa เข้า design workflow
คำแนะนำ Stitch ใน lab ประกอบจาก service contract ที่ตรวจใน Google Labs SDK กับ syntax ของ Codex MCP และ Claude Code 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
Google ระบุการใช้ DESIGN.md เพื่อส่งต่อ design rules ได้ แต่อย่าคิดว่า Markdown ชื่อเดียวกันมี schema ตรงกันทุกเครื่องมือ ให้เทียบข้อมูลที่ import/export กับต้นฉบับ เช่น canvas/text/action, type scale, component states และ responsive rules แล้วเก็บ mapping Stitch design update
ข้อจำกัดและข้อมูลที่ควรตรวจซ้ำก่อนสอน
- Claude Design Desktop: help page ปัจจุบันกล่าวถึง Desktop sidebar แต่อีกหน้า admin guide ที่เก่ากว่ายังบอก web-only หลักสูตรจึงใช้
claude.ai/designเป็น entry point และไม่บังคับให้มี sidebar Getting started, Admin guide - Figma: read/write และ usage limits ขึ้นกับ client/seat/plan จึงเริ่ม read-only ก่อน และไม่สอนให้ทุกบัญชีเขียนกลับ canvas ได้เสมอ Figma MCP guide
- OpenAI installation: CLI local ที่ตรวจเป็น
0.153.4;codex doctorและcodex updateต้องตรวจ--helpตามรุ่น บทติดตั้งใช้ channel ทางการ และแยก ChatGPT subscription กับ API billing CLI, Authentication - Port บนเครื่อง shared: Figma Desktop 3845 และ Penpot local 4400/4401 เป็นพอร์ตที่ vendor ใช้ ไม่ใช่สิทธิ์ข้ามทะเบียนของเครื่อง ให้ตรวจ shared-infra ก่อนเปิด; remote ไม่มี local design-server process ที่ต้องเปิดเพิ่ม Figma local, Penpot local
หลักฐานรอบนี้เป็นการอ่านเอกสารและตรวจโครงสร้างเว็บไซต์หลักสูตร ไม่ได้ติดตั้งแอปทั้งสี่ใหม่ ไม่ได้เชื่อมบัญชี design ของผู้เรียนหรืออัปโหลด brandbook ไปบริการภายนอก ดังนั้นผลการเชื่อมแต่ละบัญชีต้องเก็บจาก lab จริง การทดสอบเว็บไซต์หลักสูตรไม่ได้แทนการทดสอบ MCP ของบริการเหล่านั้น
นำไปใช้ในตาราง 2 วัน
ให้ติดตั้ง AI tools ก่อนเรียน เลือกหนึ่ง design path ในช่วงวันแรก 120–150 นาที แล้วนำแบบไปใช้กับ company slice ในช่วงถัดไป Full lab, การลอง client ที่สอง และ Penpot เป็นเนื้อหาฝึกต่อที่เกินเวลาได้ตามโครงหลักสูตร 2 วัน วันละ 4 ชั่วโมง รวม 8 ชั่วโมงรวมพัก ดู คู่มือผู้สอน สำหรับตารางนาทีและวิธีเก็บหลักฐาน