Lab — Claude Design, Google Stitch และ Figma MCP: จากแบบสู่เว็บ

ก่อนเปิดเครื่องมือออกแบบ เตรียม brief และ visual direction จาก Lab Research to Brand ใช้ HUSH worked kit เป็นไฟล์ตั้งต้นได้ โดยแยก facts/ข้อเสนอของตัวอย่างไว้ตามต้นฉบับ

บททดลองนี้ต่อจาก บท 04 — Design และ assets และ คู่มือติดตั้ง AI tools ใน AI Web Studio — ออกแบบและพัฒนาเว็บไซต์ด้วย AI, ส่วนหนึ่งของ 977-121 Module: Website Design and Development, มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต

ใน workshop 2 วัน × 4 ชั่วโมง ให้ผู้สอนเลือกสาธิต หนึ่งเส้นทาง ในช่วง design 30 นาที ส่วน lab เต็มใช้ประมาณ 90–120 นาทีสำหรับเรียนต่อด้วยตัวเอง ไม่ต้องสมัครหรือซื้อทุกเครื่องมือ เป้าหมายคือส่งแบบหนึ่งหน้าพร้อมข้อมูลที่ผู้พัฒนาอ่านและตรวจย้อนกลับได้

ตรวจเอกสารทางการ: 9 กันยายน 2026 ขั้นตอนเชื่อมต่อด้านล่างเป็นคู่มือจากผู้ให้บริการ ไม่ใช่คำยืนยันว่าเชื่อมบัญชีของผู้เรียนหรือของหลักสูตรแล้ว รายละเอียดสิทธิ์และหลักฐานอ้างอิงอยู่ใน รายงานวิจัย

ผลลัพธ์ที่ต้องส่ง

หากต้องการใช้เว็บที่มีอยู่มาทำ mobile app ให้ทำ Lab Website → Mobile App ต่อจากบทนี้ ใช้เว็บบ้านสบายของหลักสูตร มี prompt เฉพาะ Claude Design, Stitch, Figma MCP และ Desktop critique พร้อมตัวอย่างใช้งาน

• brief และ prompt ที่ส่งจริง รวมถึง brand source ที่ใช้
• แบบที่เลือกหนึ่งหน้า มี mobile/desktop และ component/token mapping
• หลักฐานอ่านข้อมูลผ่าน MCP หรือ รายการไฟล์ที่ส่งต่อ ระบุวิธีที่ใช้ตรงตามจริง
• หน้าเว็บหนึ่ง slice พร้อม screenshot ที่ 390px/1440px และผลตรวจ keyboard, contrast และ project checks

เปิดแผนภาพกระบวนการ assets ภาพนี้แสดงส่วนการเตรียมภาพประกอบของงาน ส่วนวิธีเชื่อม design tool เปรียบเทียบในตารางด้านล่าง

เลือกเส้นทางและเตรียมข้อมูล (10–15 นาที)

Native workflow คือใช้ฟังก์ชันภายในแอป เช่น canvas ของ Claude Design; MCP คือ client เรียก tools ของ server เพื่ออ่านหรือทำงานกับข้อมูล; file handoff คือแนบ screenshot, SVG, HTML หรือ ZIP ให้คน/agent อ่าน การติดตั้ง skill หรือส่งลิงก์เฉย ๆ ยังไม่พิสูจน์ว่า MCP เชื่อมต่อแล้ว

เตรียม brief ของหน้า AI Web Studio, สำเนา brand assets ที่อนุญาตให้ใช้, และ repository สำหรับทดลอง ในเครื่องผู้สอน brandbook อยู่ที่ /home/dev/projects/rawinnipa-brandbook; ในเครื่องผู้เรียนให้ใช้ไฟล์ที่ได้รับหรือ DESIGN.md กับ design-system/ ใน source bundle ไม่คัดลอก path ผู้สอนไปใส่เว็บแอปแล้วคาดว่าอ่านได้

ใช้ Light mode เป็นค่าเริ่มต้นและมี Dark mode ตามข้อกำหนดเว็บไซต์หลักสูตร สีเน้น Rawin Green #3EDC81, ฟอนต์ Inter + Noto Sans Thai และโลโก้ต้นฉบับยังมาจาก Rawinnipa ส่วนการกลับพื้น/ข้อความเพื่ออ่านใน Light mode เป็นข้อกำหนดของโครงการนี้

Prompt สร้างแบบฉบับเต็ม

คัดลอก block นี้ลง Claude Design หรือ Stitch พร้อมแนบ guideline/asset ที่จะใช้:

ออกแบบ landing page ภาษาไทย “AI Web Studio — ออกแบบและพัฒนาเว็บไซต์ด้วย AI”
เป็นส่วนหนึ่งของ “977-121 Module: Website Design and Development”
มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต / Prince of Songkla University, Phuket Campus

เป้าหมาย: นักศึกษามองเห็นผลลัพธ์การเรียนรู้และเริ่มเตรียมเครื่องได้จากหน้านี้
เวลา: 2 วัน วันละ 4 ชั่วโมง รวม 8 ชั่วโมง โดยรวมพักวันละ 10 นาทีแล้ว
จัดบททดลองเพิ่มเติมเป็น “เรียนต่อด้วยตัวเอง” ไม่เพิ่มชั่วโมงอบรม
เนื้อหา: ภาพรวม, ผลลัพธ์, ตาราง 2 วัน, checklist ติดตั้ง AI tools,
ตัวอย่างเว็บ, design-to-code lab และ CTA “เตรียมเครื่องก่อนเรียน”
ห้ามแต่งราคา วันอบรม ช่องทางติดต่อหรือคำรับรองจากมหาวิทยาลัย

อ่าน Rawinnipa guideline/asset ที่แนบก่อน และสรุปข้อกำหนดที่ตรวจได้
Light mode เป็นค่าเริ่มต้น: พื้น #F7F7F7, surface สีขาว, ข้อความ #0A0A0A
Dark mode: พื้น #0A0A0A, surface #1A1A1A, ข้อความ #F7F7F7
ใช้ #3EDC81 เป็นสีเน้นอย่างประหยัด ตัวอักษรบนปุ่มเขียวต้องเข้มและอ่านชัด
ใช้ Inter + Noto Sans Thai ใช้โลโก้ต้นฉบับเท่านั้น หากไม่มี asset ให้เว้นพื้นที่

ทำแบบ A เน้นผลลัพธ์การเรียนรู้ และ B เน้นเส้นทาง 2 วัน
แสดงที่ 1440px และ 390px พร้อม heading, navigation, focus และสถานะของ controls
ระบุ grid, component, token และ mobile rules ของแต่ละแบบ
เป้าหมาย contrast WCAG AA; แยกสิ่งที่ออกแบบไว้กับสิ่งที่ยังไม่ได้ทดสอบใน browser
เสนอแบบพร้อมเหตุผล ยังไม่ publish/deploy

เก็บแบบที่เลือกและเหตุผลก่อนส่งต่อ ไม่จำเป็นต้องสร้างครบทุกเครื่องมือ ดู prompt แยกแต่ละขั้นใน คลัง Design Tools prompts

เส้นทาง A — Claude Design → Claude Code

1. เปิด Claude Design ด้วยบัญชีที่มีสิทธิ์ ปัจจุบันเป็น beta สำหรับ Pro, Max, Team และ Enterprise; Enterprise ต้องเปิดโดยผู้ดูแลก่อน ใช้ web เป็นทางเข้าหลัก หากมีเมนู Design ใน Desktop จึงใช้เมนูนั้นได้ตาม rollout ของบัญชี Getting started
2. สำหรับ design system ของทีม ให้ผู้รับผิดชอบนำ brandbook, logo, typography และตัวอย่างหน้าจริงเข้า workspace ขององค์กร ตรวจสี/ฟอนต์/component ที่ระบบสกัดก่อน publish สำหรับชั้นเรียนเริ่มจาก project ทดลองและ assets ที่ได้รับอนุญาตได้ ไม่ต้องเปลี่ยนค่าเริ่มต้นของทั้งองค์กร Design system setup
3. ส่ง prompt ด้านบน เลือกแบบหนึ่ง แล้วแก้ hierarchy, ข้อความไทย, layout มือถือและ state ที่ขาด
4. เลือก Handoff to Claude Code หรือ export ZIP/standalone HTML เก็บ README, design files และ prompt ที่ระบบให้ ตรวจเนื้อหาก่อนนำเข้า repository Prototype-to-code tutorial

หากต้องการเชื่อมจาก Claude Code โดยตรง เอกสาร Anthropic ระบุ HTTP MCP นี้:

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp

เปิด Claude Code session แล้วใช้คำสั่งภายในแชต:

/design-login

ทำ sign-in ให้ครบ จากนั้นใช้ /design-sync เมื่อจะนำ design system มาใช้ตาม workflow ทางการ คำสั่งเหล่านี้เป็นขั้นตอนสำหรับ Claude Code; หากใช้ Codex ให้เลือก export/handoff ที่อ่านได้แทนการสมมติว่า slash command เดียวกันใช้ข้าม client ได้ Official Design MCP

จุดตรวจ: ให้ agent อ่านชื่อ design และ token จริงเทียบกับต้นฉบับก่อนแก้ code การเห็น server ในรายการอย่างเดียวยังไม่พอ หากไม่มี Design access ใช้ screenshot/HTML handoff ในเส้นทาง D ได้

เส้นทาง B — Figma MCP → Claude Code หรือ Codex

เริ่มจาก frame เดียวที่มีชื่อชัดและใช้ข้อมูลสมมติ เช่น Course / Overview / Desktop ตั้งชื่อ component/variables แล้วเลือก Copy link to selection ใช้ remote server เป็นเส้นทางหลักตามคำแนะนำ Figma และตรวจ seat/สิทธิ์ที่บัญชีใช้ได้ก่อนเริ่ม Figma remote setup

เชื่อม Claude Code

เลือกหนึ่งวิธี: plugin ทางการ หรือเพิ่ม MCP เอง ไม่จำเป็นต้องติดตั้งซ้ำสองทาง

# วิธี plugin ทางการ
claude plugin install figma@claude-plugins-official

# วิธีเพิ่ม remote MCP เอง
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

เปิด session ใหม่ ใช้ /mcp แล้วทำ Figma authorization ตามหน้าจอ วิธี plugin รวม settings/skills ที่ Figma จัดให้ Figma setup for Claude Code

เชื่อม Codex

ใน Codex app ใช้ Plugins → Figma → Install Figma ตามเอกสาร Figma ส่วน CLI ใช้:

codex mcp add figma --url https://mcp.figma.com/mcp

ทำ authorization ตามคำแนะนำที่ client แสดง แล้วส่งลิงก์ของ frame ที่เลือก การ sign in โปรแกรมสำเร็จยังไม่เท่ากับมีสิทธิ์ใน Figma file นั้น Figma setup for Codex

ตรวจ read ก่อน implement

ใช้ Figma MCP อ่าน frame นี้เท่านั้น: <แทนด้วย Copy link to selection>
ยังไม่แก้ไฟล์หรือ design
รายงานชื่อ tool ที่เรียก ชื่อ frame ขนาด และข้อความหัวเรื่องที่อ่านได้จริง
ดึง component, variables/tokens และ asset ที่เกี่ยวข้องถ้า tool รองรับ
แยกข้อมูลจาก tool ออกจากข้อสมมติเรื่อง responsive และ interaction
เทียบกับ DESIGN.md ของ repository แล้วรายงานข้อขัดแย้ง
ถ้าเข้าถึงไม่ได้ ให้บอก error และสิทธิ์ที่ต้องตรวจ ไม่แต่งข้อมูลแทน

เทียบชื่อ frame, สีหนึ่งค่า และ component หนึ่งชื่อกับ Figma ก่อนเริ่มเขียนหน้า ใช้ get_design_context/get_screenshot/ตัวอ่าน variables ตาม tools ที่ client เปิดให้ใช้ หากโครงการใช้ HTML/CSS ให้ระบุ stack นั้น เพราะ design context ที่ได้ไม่ได้บังคับให้ใช้ framework เดียวเสมอ Tools and prompts

Figma Desktop MCP และ Claude Desktop

กรณีต้องการอ่าน selection จาก Figma Desktop ให้เปิดไฟล์ → Dev Mode (Shift+D) → enable desktop MCP server แล้วใช้ endpoint http://127.0.0.1:3845/mcp ตัวอย่าง Claude Code:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

ต้องเปิด Figma และเลือก frame ที่ต้องการไว้ ฝั่ง remote ใช้ link ส่วน desktop ใช้ selection ได้ และบาง tools มีเฉพาะ remote Desktop setup

บนเครื่อง shared: พอร์ต 3845 เป็นของ Figma Desktop ไม่อยู่ในชุด 3320–3329 ของหลักสูตร ต้องอ่านทะเบียน shared-infra และตรวจ/จองก่อนเปิดบริการ ถ้าชนให้ใช้ remote ไม่ย้ายหรือหยุดบริการของผู้อื่น บทเรียนนี้ไม่ได้เปิด local Figma server บนเครื่องผู้สอน

Figma ระบุ Claude Desktop เป็น client ที่รองรับ ให้ใช้ Figma connector และ authorization ของ Desktop ตาม คู่มือ Figma MCP ไม่คัดลอกคำสั่ง claude mcp add ไปพิมพ์ในแชต Desktop หากไม่เห็น connector ให้ใช้การส่งไฟล์ในเส้นทาง D

เส้นทาง C — Google Stitch

Google Labs ประกาศ Stitch MCP, SDK และการใช้ DESIGN.md แล้วในเดือนมีนาคม 2026 จึงเลือกได้สองวิธี: ใช้ canvas/export หรือเชื่อม MCP เพื่อให้ coding agent อ่านและทำงานกับ design context Google Labs update

ใช้ canvas และส่งต่อแบบ

1. เปิด Google Stitch และลงชื่อเข้าใช้ ส่ง prompt สร้างแบบฉบับเต็มด้านบนพร้อม brand assets หรือ wireframe ที่มีสิทธิ์ใช้
2. เลือกแบบหนึ่งและปรับข้อความไทย, hierarchy และ mobile layout นำ DESIGN.md เข้า/ออกตามฟังก์ชันที่บัญชีแสดง แล้วเทียบ tokens กับต้นฉบับ
3. ใช้ export หรือ Figma handoff ที่มีในรุ่นนั้น ตรวจว่า frame/component/assets ที่ส่งออกมาครบจริง ไม่ถือว่าการส่งไป Figma จะได้ component library เดิมอัตโนมัติ
4. นำแบบที่เลือกมาอ่านใน coding tool ด้วย MCP หรือไฟล์ แล้วใช้ prompt implement ในคลัง

เชื่อม MCP ด้วย API key ใน environment

เปิด Stitch MCP setup หลัง sign in และทำขั้นตอนสร้างสิทธิ์/key ที่บัญชีแสดง หน้า setup เป็นส่วนของแอปที่ต้องลงชื่อเข้าใช้ จึงไม่ตรึงชื่อปุ่มหรือขั้น enrollment ที่ไม่ได้เห็นในบัญชีผู้เรียน

ค่าการเชื่อมที่ยืนยันจากซอร์ส Google Labs คือ endpoint https://stitch.googleapis.com/mcp และ header X-Goog-Api-Key สำหรับ API key ส่วน OAuth ต้องมีทั้ง Bearer token และ X-Goog-User-Project จึงไม่ใช้สูตร bearer-only แทนกัน SDK endpoint, SDK authentication, OAuth client

Codex: รวม entry นี้ใน config ของ Codex ที่ใช้อยู่ โดยไม่ทับไฟล์ทั้งฉบับ ค่าใน env_http_headers เป็น ชื่อ environment variable ไม่ใช่ key จริง Codex MCP configuration

[mcp_servers.stitch]
url = "https://stitch.googleapis.com/mcp"
env_http_headers = { "X-Goog-Api-Key" = "STITCH_API_KEY" }

Claude Code: รวม entry นี้ใน .mcp.json ที่ project root ค่า ${STITCH_API_KEY} เป็น reference ตาม syntax ของ Claude Code และต้องมี type: http Claude Code MCP

{
  "mcpServers": {
    "google-stitch": {
      "type": "http",
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "${STITCH_API_KEY}"
      }
    }
  }
}

ก่อนเปิด client ให้ส่ง STITCH_API_KEY เข้า environment ของ process ผ่าน secret manager หรือ terminal ส่วนตัว ตัวอย่างสำหรับ Bash (Linux/WSL หรือ Bash บน macOS) รับค่าแบบซ่อนและไม่เขียนค่าจริงลง command history:

read -r -s -p "Stitch API key: " STITCH_API_KEY
export STITCH_API_KEY
# เลือกเปิดเพียง client ที่ตั้งค่าไว้
codex
# หรือ claude

คำสั่ง read นี้เป็น syntax ของ Bash; shell อื่นใช้วิธี environment/credential ของระบบนั้น อย่าแทน reference ใน config ด้วย key จริงที่อาจติด Git ใน Claude Code ต้องตรวจและยอมรับ project MCP prompt ตามที่ client แสดง Claude environment variables

ตรวจ config ของ Codex ด้วย codex mcp list และ codex mcp get stitch ส่วน Claude Code ใช้ /mcp การตรวจ config ไม่ใช่หลักฐานว่า Google รับ credential แล้ว ให้ส่ง prompt ตรวจจริงต่อไปนี้:

ใช้ Stitch MCP ที่ตั้งไว้แบบอ่านอย่างเดียว
รายงาน tools ที่เรียกใช้ได้ และอ่าน project/screen สำหรับแบบฝึกหัดที่ฉันระบุ
เป้าหมาย: <ชื่อหรือ ID project/screen ของแบบที่เพิ่งสร้าง>
ยืนยันชื่อ screen, ขนาดและข้อความหัวเรื่องจาก tool result เทียบกับแบบต้นฉบับ
ไม่สร้าง แก้ ลบ แชร์ หรืออัปโหลดข้อมูล
ถ้าเชื่อมไม่ได้ ให้รายงาน error ที่ลบ key/token ออกแล้ว
ห้ามอ้างว่า connected จากการมี entry ใน config เพียงอย่างเดียว

ถ้ายังไม่มี key/สิทธิ์หรือ setup ของบัญชีไม่รองรับ ให้ทำ canvas/export route ได้จนจบ lab Google Labs มี Stitch skills เป็นเครื่องมือเสริม แต่การติดตั้ง skill ไม่แทน authentication และไม่จำเป็นต้องติดตั้งเพื่อทำขั้นตรวจข้างต้น

เส้นทาง D — ตรวจแบบผ่าน Desktop และส่งต่อไฟล์

ใช้ได้เมื่อยังไม่มี MCP หรือ design account: แนบ screenshot/HTML ที่ได้รับอนุญาตลง Claude Desktop หรือ ChatGPT Desktop แล้วส่ง prompt นี้:

ตรวจแบบ AI Web Studio จากภาพและ brief ที่แนบเท่านั้น
สรุปปัญหา hierarchy, ข้อความไทย, mobile, heading/label และ state ที่ยังขาด
แยก “เห็นจากภาพ” กับ “ต้องตรวจใน browser” ห้ามอ้างว่า keyboard หรือ contrast ผ่านแล้ว
ยึด Rawinnipa guideline ที่แนบและตาราง 2 วัน วันละ 4 ชั่วโมงรวมพัก
ให้ checklist ที่ผู้พัฒนานำไปแก้ได้ เรียงตามผลต่อการเริ่มเตรียมเครื่องของนักศึกษา
ไม่สมมติว่าเข้าถึง Figma หรือ local repository ได้ และยังไม่ publish/deploy

ใน ChatGPT ให้แยก chat/custom apps ออกจาก Codex surface ที่มีในแอปตามรุ่น เอกสาร custom MCP ของ ChatGPT เน้น remote server และการตั้งค่าผ่าน web workspace; อย่านำ localhost:3845 ไปใส่ chat แล้วถือว่าเชื่อม Figma Desktop ส่วน Codex ใช้ขั้นตอน Figma สำหรับ Codex ด้านบน OpenAI MCP apps, ChatGPT desktop app

ต่อแบบเป็นเว็บและตรวจรับ (30–45 นาที)

ใช้ prompt implement ฉบับเต็ม กับ source ที่เลือก คุม scope ให้เป็นหน้าเดียว ใช้ components/tokens และ scripts ของ repository ที่มีอยู่ ตรวจพอร์ตตาม shared-infra ก่อน preview

ส่ง design-handoff.md ตาม prompt ส่งงาน ห้ามสรุปว่าหน้าเหมือนภาพจึง production-ready

ทางเลือกต่อยอด — Penpot MCP

Penpot มี MCP ทางการ เหมาะกับการฝึกอ่าน component/style/token และตรวจ design system โดยเริ่ม read-only ไปที่ Your account → Integrations → MCP Server เปิดใช้งานและสร้าง key แล้วคัดลอก URL ที่ระบบให้ลงช่อง server ของ client ที่รองรับ เปิดไฟล์ → File → MCP Server → Connect และเลือก page ให้ถูก Penpot ใช้หน้าที่ focus อยู่และเชื่อมได้ทีละ tab Penpot MCP

URL ของ Penpot มี userToken จึงเป็น credential เก็บใน settings ส่วนตัวที่เหมาะสม ไม่ใส่ใน prompt, Git, slide หรือบันทึกหน้าจอ ฝั่ง local ต้องมี plugin/server และใช้พอร์ต 4400/4401 ตามคู่มือ จึงเป็นหัวข้อศึกษาต่อที่ต้องตรวจ shared-infra ก่อนเปิด ไม่ต้องตั้ง local server เพื่อทำ workshop นี้

แก้ปัญหาที่พบบ่อย

Figma มีแนวตรวจ client/server ซ้ำและ tools ไม่โหลดใน Troubleshooting ส่วนสิทธิ์และ quota ให้เช็กแหล่งทางการในวันเรียน ไม่คาดว่าทุกบัญชีได้ฟีเจอร์เท่ากัน

ฝึกต่อด้วย brandkit

เมื่อมี brief และทิศทางแบรนด์แล้ว ใช้ Lab brandkit สร้าง overview board 3 × 3 เพื่อฝึกส่ง prompt พร้อม reference, ตรวจผลราย panel และทำ website handoff มี ภาพ HUSH ที่สร้างจริงพร้อมไฟล์ต้นทาง สำหรับเปิดเทียบ เป็น Lab เสริม 60–90 นาที ไม่เพิ่มชั่วโมง workshop