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

ก่อนเปิดเครื่องมือออกแบบ เตรียม brief และ visual direction จาก [Lab Research to Brand](research-to-brand-website.md) ใช้ [HUSH worked kit](/labs/hush-brand-kit/) เป็นไฟล์ตั้งต้นได้ โดยแยก facts/ข้อเสนอของตัวอย่างไว้ตามต้นฉบับ

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

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

**ตรวจเอกสารทางการ:** 9 กันยายน 2026 ขั้นตอนเชื่อมต่อด้านล่างเป็นคู่มือจากผู้ให้บริการ ไม่ใช่คำยืนยันว่าเชื่อมบัญชีของผู้เรียนหรือของหลักสูตรแล้ว รายละเอียดสิทธิ์และหลักฐานอ้างอิงอยู่ใน [รายงานวิจัย](../research/design-tools-and-mcp.md)

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

หากต้องการใช้เว็บที่มีอยู่มาทำ mobile app ให้ทำ [Lab Website → Mobile App](website-to-mobile-app.md) ต่อจากบทนี้ ใช้เว็บบ้านสบายของหลักสูตร มี 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

![กระบวนการเตรียมภาพจาก art direction ไปยัง prompt สร้างภาพ ต้นฉบับ การแปลงไฟล์ และตรวจบนหน้าเว็บ](/diagrams/design-assets.svg)

[เปิดแผนภาพกระบวนการ assets](/diagrams/design-assets.html) ภาพนี้แสดงส่วนการเตรียมภาพประกอบของงาน ส่วนวิธีเชื่อม design tool เปรียบเทียบในตารางด้านล่าง

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

| งานที่ต้องการ | เส้นทางที่ใช้ใน lab | หลักฐานว่าพร้อมส่งต่อ |
| --- | --- | --- |
| สำรวจ layout จาก brief/ภาพ | Google Stitch → export หรือเชื่อมตามเอกสารปัจจุบัน | แบบที่เลือกและไฟล์/ข้อมูลที่ดึงได้ |
| prototype ที่ใช้ design system ขององค์กร | Claude Design → Claude Code | brand mapping และ design handoff |
| มี Figma frame ที่ตกลงกันแล้ว | Figma remote MCP → Claude Code หรือ Codex | frame, variable และ component ตรงกับต้นฉบับ |
| ตรวจภาพโดยยังไม่มี connector | Claude Desktop หรือ ChatGPT Desktop → feedback → coding agent | ข้อสังเกตแยกจากสิ่งที่ยังไม่ทดสอบ |
| ฝึกกับเครื่องมือออกแบบ open source | Penpot MCP เป็นบทต่อยอด | page/token audit จากหน้าที่เลือก |

**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 ที่จะใช้:

```text
ออกแบบ 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](../prompts/design-tools-prompts.md)

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

1. เปิด [Claude Design](https://claude.ai/design) ด้วยบัญชีที่มีสิทธิ์ ปัจจุบันเป็น beta สำหรับ Pro, Max, Team และ Enterprise; Enterprise ต้องเปิดโดยผู้ดูแลก่อน ใช้ web เป็นทางเข้าหลัก หากมีเมนู Design ใน Desktop จึงใช้เมนูนั้นได้ตาม rollout ของบัญชี [Getting started](https://support.claude.com/en/articles/14604416-get-started-with-claude-design)
2. สำหรับ design system ของทีม ให้ผู้รับผิดชอบนำ brandbook, logo, typography และตัวอย่างหน้าจริงเข้า workspace ขององค์กร ตรวจสี/ฟอนต์/component ที่ระบบสกัดก่อน publish สำหรับชั้นเรียนเริ่มจาก project ทดลองและ assets ที่ได้รับอนุญาตได้ ไม่ต้องเปลี่ยนค่าเริ่มต้นของทั้งองค์กร [Design system setup](https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design)
3. ส่ง prompt ด้านบน เลือกแบบหนึ่ง แล้วแก้ hierarchy, ข้อความไทย, layout มือถือและ state ที่ขาด
4. เลือก **Handoff to Claude Code** หรือ export ZIP/standalone HTML เก็บ README, design files และ prompt ที่ระบบให้ ตรวจเนื้อหาก่อนนำเข้า repository [Prototype-to-code tutorial](https://academy.claude.com/tutorials/using-claude-design-for-prototypes-and-ux)

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

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

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

```text
/design-login
```

ทำ sign-in ให้ครบ จากนั้นใช้ `/design-sync` เมื่อจะนำ design system มาใช้ตาม workflow ทางการ คำสั่งเหล่านี้เป็นขั้นตอนสำหรับ **Claude Code**; หากใช้ Codex ให้เลือก export/handoff ที่อ่านได้แทนการสมมติว่า slash command เดียวกันใช้ข้าม client ได้ [Official Design MCP](https://support.claude.com/en/articles/14604416-get-started-with-claude-design)

**จุดตรวจ:** ให้ 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](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/)

### เชื่อม Claude Code

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

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

```bash
# วิธีเพิ่ม 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](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/)

### เชื่อม Codex

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

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

ทำ authorization ตามคำแนะนำที่ client แสดง แล้วส่งลิงก์ของ frame ที่เลือก การ sign in โปรแกรมสำเร็จยังไม่เท่ากับมีสิทธิ์ใน Figma file นั้น [Figma setup for Codex](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/)

### ตรวจ read ก่อน implement

```text
ใช้ 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](https://developers.figma.com/docs/figma-mcp-server/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:

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

ต้องเปิด Figma และเลือก frame ที่ต้องการไว้ ฝั่ง remote ใช้ link ส่วน desktop ใช้ selection ได้ และบาง tools มีเฉพาะ remote [Desktop setup](https://developers.figma.com/docs/figma-mcp-server/local-server-installation/)

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

Figma ระบุ Claude Desktop เป็น client ที่รองรับ ให้ใช้ Figma connector และ authorization ของ Desktop ตาม [คู่มือ Figma MCP](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server) ไม่คัดลอกคำสั่ง `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](https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/)

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

1. เปิด [Google Stitch](https://stitch.withgoogle.com/) และลงชื่อเข้าใช้ ส่ง 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](https://stitch.withgoogle.com/docs/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](https://github.com/google-labs-code/stitch-sdk/blob/575a9fb6319bd9d1ce8175e4a89e5958e024bbfd/packages/sdk/src/constants.ts), [SDK authentication](https://github.com/google-labs-code/stitch-sdk/blob/575a9fb6319bd9d1ce8175e4a89e5958e024bbfd/packages/sdk/src/auth.ts), [OAuth client](https://github.com/google-labs-code/stitch-sdk/blob/575a9fb6319bd9d1ce8175e4a89e5958e024bbfd/packages/sdk/src/spec/client.ts)

**Codex:** รวม entry นี้ใน config ของ Codex ที่ใช้อยู่ โดยไม่ทับไฟล์ทั้งฉบับ ค่าใน `env_http_headers` เป็น **ชื่อ environment variable** ไม่ใช่ key จริง [Codex MCP configuration](https://learn.chatgpt.com/docs/extend/mcp.md#streamable-http-servers)

```toml
[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](https://code.claude.com/docs/en/mcp)

```json
{
  "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:

```bash
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](https://code.claude.com/docs/en/env-vars)

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

```text
ใช้ 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](https://github.com/google-labs-code/stitch-skills) เป็นเครื่องมือเสริม แต่การติดตั้ง skill ไม่แทน authentication และไม่จำเป็นต้องติดตั้งเพื่อทำขั้นตรวจข้างต้น

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

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

```text
ตรวจแบบ 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](https://help.openai.com/en/articles/12584461-developer-mode-and-full-mcp-connectors-in-chatgpt), [ChatGPT desktop app](https://learn.chatgpt.com/docs/app.md)

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

ใช้ [prompt implement ฉบับเต็ม](../prompts/design-tools-prompts.md#3-นำแบบที่เลือกมา-implement-หนึ่งหน้า) กับ source ที่เลือก คุม scope ให้เป็นหน้าเดียว ใช้ components/tokens และ scripts ของ repository ที่มีอยู่ ตรวจพอร์ตตาม shared-infra ก่อน preview

| Gate | หลักฐานที่รับได้ | ถ้าไม่ผ่าน |
| --- | --- | --- |
| Context | ชื่อ frame/page, token และ component เทียบต้นฉบับได้ | แก้ link/selection/permission ก่อนเขียน |
| Brand | สี ฟอนต์ โลโก้ และชื่อหลักสูตรตรง source | แก้ token mapping |
| Responsive | screenshot 390px และ 1440px; ไม่มี viewport overflow | แก้ grid, wrap, minimum width |
| Interaction | ทดลอง Tab/Shift+Tab, focus, error/loading ที่มีจริง | เพิ่ม state และ semantic HTML |
| Theme | Light เป็น default, สลับ Dark ได้, contrast อ่านได้ทั้งคู่ | ตรวจ semantic color roles |
| Implementation | project checks พร้อม command/output, diff และจุดต่างจากแบบ | แก้ตามผลที่รันจริง |

ส่ง `design-handoff.md` ตาม [prompt ส่งงาน](../prompts/design-tools-prompts.md#5-ส่งต่อแบบและหลักฐานให้ผู้ตรวจ) ห้ามสรุปว่าหน้าเหมือนภาพจึง 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](https://help.penpot.app/mcp/)

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

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

| อาการ | ตรวจอะไร | ทำต่ออย่างไร |
| --- | --- | --- |
| Server มีชื่อแต่เรียก tool ไม่ได้ | authorization, scope, client support | sign in ใหม่และทดลองอ่าน frame เดียว |
| ได้คนละหน้า | remote link หรือ desktop selection | copy link to selection/เลือก frame ใหม่ |
| Claude Design ไม่ปรากฏ | plan, admin setting, rollout | ใช้ web URL หรือ file handoff |
| Figma Desktop tools หาย | app/file ปิด หรือไม่ได้ enable server | เปิดไฟล์และ server; ถ้าชนพอร์ตใช้ remote |
| โค้ดได้ framework คนละแบบ | prompt ไม่ได้บอก stack/reuse | ให้ agent อ่าน package/components แล้วแก้ scope |
| มีเพียง screenshot | ยังไม่มี token/interaction evidence | ระบุสิ่งที่ unknown และตรวจเพิ่มใน browser |

Figma มีแนวตรวจ client/server ซ้ำและ tools ไม่โหลดใน [Troubleshooting](https://developers.figma.com/docs/figma-mcp-server/tools-not-loading/) ส่วนสิทธิ์และ quota ให้เช็กแหล่งทางการในวันเรียน ไม่คาดว่าทุกบัญชีได้ฟีเจอร์เท่ากัน

## ฝึกต่อด้วย brandkit

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