# Full lab เรียนต่อด้วยตัวเอง 90–120 นาที — จากเว็บไซต์บ้านสบายสู่ mobile app prototype

Lab นี้ใช้ [เว็บไซต์บ้านสบาย](/examples/real-estate/) เป็น source ตั้งต้น แล้วออกแบบ [mobile app prototype](/examples/real-estate-mobile/) สำหรับโจทย์เดิม ผู้เรียนจะทดลองทำ design handoff ผ่าน Claude Design, Google Stitch, Figma MCP หรือการวิจารณ์ screenshot บน Claude Desktop/ChatGPT Desktop โดยเลือกลงมือหนึ่งเส้นทางและอ่านอีกสามเส้นทางเป็นตัวอย่าง

เนื้อหานี้เป็นส่วนขยายของ **AI Web Studio — ออกแบบและพัฒนาเว็บไซต์ด้วย AI** ใน **977-121 Module: Website Design and Development**, มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต และอยู่นอก workshop **2 วัน × วันละ 4 ชั่วโมง รวม 8 ชั่วโมง** การทำทุกเครื่องมือครบอาจเกิน 120 นาทีได้

กรณีศึกษานี้เป็น **browser prototype** ที่หน้าตาคล้าย mobile app เพื่อฝึก information architecture, responsive states และ design-to-code handoff ไม่ใช่แอป iOS/Android ที่ติดตั้งได้ ไม่มี native package, app-store build, push notification, offline guarantee, payment, geolocation, นายหน้า หรือธุรกรรมอสังหาริมทรัพย์จริง

Prompt ด้านล่างเป็นสื่อการสอนที่เขียนจาก source และเอกสารทางการ ไม่ใช่ transcript ที่อ้างว่าได้รัน Claude Design, Stitch หรือ Figma MCP แล้ว ผู้เรียนต้องเก็บ prompt/output และบอกสถานะการเชื่อมต่อของรอบตนเองตามจริง

## สิ่งที่จะได้จาก lab

- แยก responsive website, app-style browser prototype และ executable native app ได้
- รักษาข้อมูล บ้าน และ business brand เดิมขณะเปลี่ยน navigation กับลำดับหน้าจอ
- สร้าง prompt ฉบับเต็มสำหรับเว็บไซต์, Claude Design, Stitch, Figma MCP และ Desktop critique
- ตรวจเส้นทาง `ค้นหา/กรอง → รายละเอียด → ย้อนกลับ → บันทึกรายการโปรด` พร้อม bottom navigation และ empty state
- ส่งหลักฐานที่ 360, 390 และ 430px สำหรับ mobile และ 1440px สำหรับ comparison review

## แยกสิ่งที่กำลังออกแบบให้ชัด

| สิ่งส่งมอบ | Navigation และ layout | สิ่งที่รันได้ | สิ่งที่ยังพิสูจน์ไม่ได้ |
| --- | --- | --- | --- |
| **Mobile responsive website** | เนื้อหาและ navigation ของเว็บเดิม reflow ตาม viewport; URL/หน้าเดิมยังเป็นหลัก | HTML/CSS/JavaScript ใน browser | ไม่ได้กลายเป็น native app เพราะหน้าตาแคบลง |
| **App-style browser prototype** | ใช้ screen hierarchy, back behavior และ bottom navigation แบบงานบนมือถือ | Prototype หรือเว็บที่เปิดใน browser | ไม่มี native install, OS integration, push, offline หรือ store release โดยอัตโนมัติ |
| **Executable native app** | ใช้ navigation/runtime ของ iOS/Android และ lifecycle ของอุปกรณ์ | native binary หรือ framework build ที่ผ่าน toolchain จริง | อย่าอ้างว่ามีจนกว่าจะมี source, build, install และ device test หลักฐานชัดเจน |

การย่อ desktop nav ลงแถบเล็กไม่ได้ทำให้เกิด app information architecture ใน lab นี้ desktop website ยังคงมี navigation “ค้นหาบ้าน / ติดต่อ / รายการโปรด” ส่วน mobile prototype ใช้ bottom navigation ที่เข้าถึง **ค้นหา**, **รายการโปรด** และ **เกี่ยวกับเดโม** พร้อม back action เมื่ออยู่หน้ารายละเอียด

## Source of truth ก่อนออกแบบ

อ่านไฟล์ต่อไปนี้จาก source bundle:

- `examples/real-estate/index.html` — semantic structure, filters, inquiry และ dialog ของเว็บไซต์
- `examples/real-estate/main.js` — fixtures, filter/sort, favorite persistence และ interaction จริง
- `examples/real-estate/style.css` — responsive website ที่มีอยู่
- `design-system/baan-sabai/MASTER.md` — recommendation เริ่มต้นของ design system
- `design-system/baan-sabai/pages/home.md` — override ที่อนุมัติให้ใช้ teal `#0F766E`, blue `#0369A1` และ IBM Plex Sans Thai
- `examples/real-estate-mobile/` — implementation เป้าหมายสำหรับเปรียบเทียบหลังออกแบบ

หน้าเว็บที่รันได้คือ [บ้านสบาย desktop/responsive](/examples/real-estate/) และ [บ้านสบาย mobile prototype](/examples/real-estate-mobile/) เมื่อเปิดจาก course build ผู้เรียนดาวน์โหลด source code ทั้งชุดจาก [หน้าคลังความรู้](/resources/) เพื่อดูไฟล์ครบได้ ไม่ควรคัดลอกเฉพาะ HTML จาก DevTools เพราะ behavior อยู่ใน CSS/JavaScript ด้วย

### Fixtures ที่ต้องคงเดิม

| ID | ชื่อ | ทำเล | ประเภท | ราคา |
| --- | --- | --- | --- | ---: |
| `garden-house` | บ้านริมสวน | บางนา · สมุทรปราการ | บ้านเดี่ยว | 8,900,000 บาท |
| `canal-townhome` | เรือนริมคลอง | ปากเกร็ด · นนทบุรี | ทาวน์โฮม | 4,290,000 บาท |
| `city-courtyard` | คอร์ตกลางเมือง | ลาดพร้าว · กรุงเทพฯ | บ้านเดี่ยว | 9,800,000 บาท |
| `sky-room` | ห้องเหนือสวน | จตุจักร · กรุงเทพฯ | คอนโด | 3,250,000 บาท |
| `weekend-home` | บ้านวันสบาย | บางใหญ่ · นนทบุรี | บ้านเดี่ยว | 5,750,000 บาท |
| `first-nest` | รังแรก | เทพารักษ์ · สมุทรปราการ | ทาวน์โฮม | 2,890,000 บาท |

ราคาและรายละเอียดทั้งหมดเป็นข้อมูลสมมติ ใช้สำหรับออกแบบและทดสอบเท่านั้น Mobile prototype ต้องใช้ ID/ชื่อ/ราคาเดียวกันเพื่อให้เปรียบเทียบ behavior กับเว็บไซต์ได้ ห้ามเพิ่มบ้าน “ตัวอย่าง” รายการที่เจ็ดโดยไม่มี fixture ใหม่ใน source

### ขอบเขตแบรนด์

**บ้านสบาย** เป็น business brand ของตัวอย่าง: teal `#0F766E` เป็นสีโครง, blue `#0369A1` เป็น action, ใช้ IBM Plex Sans Thai ที่มีในโครงการ และภาพบ้านสมมติเดิม ส่วน **Rawinnipa** เป็น brand ของ course shell และเอกสารหลักสูตร อย่านำ Rawin Green, โลโก้ Rawinnipa หรือ Inter/Noto Sans Thai ไปแทน design system บ้านสบายเพียงเพราะ lab นี้อยู่ในเว็บไซต์หลักสูตร

## Contract ของ mobile prototype

ออกแบบอย่างน้อย 6 states โดยใช้ข้อมูลชุดเดิม:

1. **ค้นหา** — หัวเรื่อง, จำนวนผลลัพธ์, ช่องค้นหาชื่อ/ทำเล, ตัวกรองประเภท และ card บ้าน
2. **ผลหลังค้นหา/กรอง** — รายการและจำนวนผลต้องเปลี่ยนตามข้อความหรือประเภทที่เลือก
3. **รายละเอียด** — รูป ชื่อ ทำเล ราคา ห้อง/พื้นที่ คำอธิบาย favorite และ back action
4. **รายการโปรด** — แสดงเฉพาะ ID ที่ผู้ใช้บันทึกและจำนวนที่ถูกต้อง
5. **Empty state** — ทั้งค้นหา/กรองประเภทไม่พบและยังไม่มีรายการโปรดต้องบอกเหตุผลและมีทางไปต่อ
6. **เกี่ยวกับเดโม** — อธิบายว่าเป็น browser prototype และไม่มีธุรกรรมจริง

Bottom navigation ใช้ label **ค้นหา / บันทึกแล้ว / เกี่ยวกับ** และไปได้จาก list/favorites/about แต่ไม่แทน back action ของรายละเอียด การบันทึกรายการโปรดต้องเปลี่ยน label หรือ `aria-pressed` ที่สื่อความหมาย ไม่ใช้สีหัวใจอย่างเดียว Touch target เป้าหมายอย่างน้อย 44×44 CSS px และทุก control ต้องใช้ keyboard พร้อม visible focus ได้แม้ prototype ออกแบบเพื่อมือถือ

ตรวจ 360, 390 และ 430px เพื่อจับข้อความไทยยาว/ปุ่มชนกัน และเปิด 1440px เพื่อดูว่าตัว prototype ถูกจัดวางอย่างตั้งใจ ไม่ยืด card เป็น desktop website แบบเดิม การตรวจ 1440px เป็น review frame ไม่ได้แปลว่าต้องสร้าง desktop app navigation เพิ่ม

## เส้นทาง 1 — Prompt ออกแบบเว็บไซต์เดิมใหม่ โดยคง fixtures

ใช้ prompt นี้กับ coding/design agent เมื่อต้องการปรับ **responsive website** ก่อนเปรียบเทียบกับ app prototype:

```text
ปรับการออกแบบเว็บไซต์ “บ้านสบาย” ที่ /examples/real-estate/ โดยใช้ source จริงใน
examples/real-estate/{index.html,style.css,main.js} และอ่าน
design-system/baan-sabai/{MASTER.md,pages/home.md} ก่อนเสนอการเปลี่ยนแปลง

นี่เป็น responsive website ไม่ใช่ native app และไม่ต้องเปลี่ยน desktop navigation เป็น bottom nav
คง fixtures ทั้ง 6 รายการและ ID เดิมทุกตัว:
- garden-house / บ้านริมสวน / 8,900,000 บาท
- canal-townhome / เรือนริมคลอง / 4,290,000 บาท
- city-courtyard / คอร์ตกลางเมือง / 9,800,000 บาท
- sky-room / ห้องเหนือสวน / 3,250,000 บาท
- weekend-home / บ้านวันสบาย / 5,750,000 บาท
- first-nest / รังแรก / 2,890,000 บาท

รักษา business brand บ้านสบาย: teal #0F766E, action blue #0369A1 และ IBM Plex Sans Thai
อย่าใช้ Rawinnipa logo หรือ Rawin Green เพราะเป็นแบรนด์ของ course shell ไม่ใช่ธุรกิจนี้
รักษา filter ทำเล/ประเภท/งบ/การเรียง, จำนวนผลลัพธ์, empty state,
favorite ที่เก็บในเครื่อง, dialog รายละเอียด, การคืน focus และ inquiry demo เดิม
ห้ามเพิ่ม payment, listing upload, แผนที่/geolocation, นัดชม หรือข้อมูลบ้านจริง

ก่อนแก้ ให้รายงาน content hierarchy, ไฟล์ที่จะเปลี่ยน และ behavior ที่ต้องรักษา
ปรับ mobile responsive ที่ 360/390/430px และ desktop ที่ 1440px
ห้ามล้นแนวนอน ข้อความไทยต้องไม่ถูกตัดแบบเสียความหมาย
ทุก control ใช้ keyboard ได้ มี visible focus, label, status และ touch target อย่างน้อย 44×44 CSS px
รองรับ prefers-reduced-motion และอย่าอ้างว่า contrast ผ่านจนกว่าจะคำนวณจากสีจริง

หลังแก้ รัน project checks ที่เกี่ยวข้อง ทดลอง filter จน empty แล้ว reset,
เปิด/ปิด dialog ด้วย keyboard, เพิ่ม/ลบ favorite และ reload
สรุปผลที่รันจริง จุดต่างที่ตั้งใจ และสิ่งที่ยังไม่ได้ทดสอบ ห้าม deploy
```

**ผลที่คาดหวัง:** เว็บไซต์ยังมี content/interaction contract เดิมบน desktop และ reflow ได้ที่สาม viewport มือถือ การเปลี่ยน style ไม่ทำให้ fixture, form/API หรือ favorite behavior หาย

## เส้นทาง 2 — Claude Design: mobile prototype และ handoff

Claude Design เป็นผลิตภัณฑ์ beta สำหรับสร้าง visual design/prototype มี design system และ handoff ไป Claude Code ตามสิทธิ์บัญชี เปิดผ่าน [claude.ai/design](https://claude.ai/design) เป็นทางเข้าหลัก; เมนูใน Claude Desktop ขึ้นกับแผนและ rollout [Getting started](https://support.claude.com/en/articles/14604416-get-started-with-claude-design)

แนบเฉพาะ asset ที่มีสิทธิ์ใช้: screenshot เว็บไซต์, ภาพบ้านเดโม, `MASTER.md` และ `pages/home.md` ไม่ต้องแนบ Rawinnipa brandbook เพราะงานนี้ใช้แบรนด์บ้านสบาย หากสร้าง design system ใน organization ให้ผู้รับผิดชอบตรวจสี ฟอนต์ component และ layout ก่อน publish ตาม [Design system setup](https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design)

```text
สร้าง interactive mobile app prototype สำหรับธุรกิจสมมติ “บ้านสบาย”
โดยใช้ screenshot เว็บไซต์และไฟล์ design-system/baan-sabai ที่แนบเป็น source of truth
นี่เป็นกรณีศึกษาของ AI Web Studio แต่ visual brand ของงานต้องเป็นบ้านสบาย:
teal #0F766E, action blue #0369A1, IBM Plex Sans Thai และภาพบ้านเดิม
ห้ามใช้ Rawinnipa logo, Rawin Green หรือ typography ของ course shell

เป้าหมายผู้ใช้: ค้นหาบ้านสมมติ กรอง เปิดรายละเอียด ย้อนกลับ และบันทึกรายการโปรด
สร้าง frames/states สำหรับ 390px อย่างน้อย:
1. Search/List พร้อมจำนวนผลและ filter entry
2. Search/Filtered: ค้นจากชื่อ/ทำเลและกรองประเภท บ้านเดี่ยว/ทาวน์โฮม/คอนโด
3. Property Detail พร้อม back, favorite, ราคา ห้อง พื้นที่และคำอธิบาย
4. Favorites พร้อมจำนวนรายการ
5. Empty: ไม่มีผลจากคำค้นหาหรือตัวกรองประเภท
6. Empty: ยังไม่มี favorite
7. About Demo ที่บอกชัดว่าไม่มีประกาศ นัดชม payment หรือธุรกรรมจริง

ใช้ bottom navigation: “ค้นหา / บันทึกแล้ว / เกี่ยวกับ”
อย่าย่อ desktop nav มาใส่ทั้งชุด และอย่าใช้ bottom nav แทนปุ่มย้อนกลับจากรายละเอียด
ใช้ fixtures จริงเท่านั้น:
garden-house บ้านริมสวน 8,900,000;
canal-townhome เรือนริมคลอง 4,290,000;
city-courtyard คอร์ตกลางเมือง 9,800,000;
sky-room ห้องเหนือสวน 3,250,000;
weekend-home บ้านวันสบาย 5,750,000;
first-nest รังแรก 2,890,000 บาท

กำหนด component names, variants และ token mapping ที่อ่านย้อนกลับได้
แสดง loading/error เฉพาะจุดที่ prototype เสนอว่ามีการโหลด อย่าอ้าง offline support
ระบุ focus order, visible focus, label, touch target >=44×44 CSS px,
ข้อความสำหรับ screen reader และ reduced-motion intent
ตรวจแนววางที่ 360/390/430px และทำ presentation frame 1440px ที่ไม่ยืด UI มือถือ

สร้างสองทิศทางที่ต่างกันด้าน hierarchy แล้วให้เหตุผล เลือกหนึ่งแบบหลังฉันตอบเท่านั้น
จากนั้นจัด handoff ที่มี design files, chat/README, component inventory,
responsive rules, state map, fixture mapping และคำถามค้าง ยังไม่แก้ repository และไม่ publish
```

หลังเลือกแบบ ใช้ **Handoff to Claude Code** หรือ export ZIP/standalone HTML ตาม [Prototype-to-code tutorial](https://academy.claude.com/tutorials/using-claude-design-for-prototypes-and-ux) แล้วตรวจ bundle ก่อนนำเข้า repository หากใช้ Claude Design MCP กับ Claude Code ให้ทำ auth ตาม [Lab Design Tools และ MCP](design-tools-and-mcp.md); อย่าเดาว่า slash commands เดียวกันทำงานใน client อื่น

**ผลที่คาดหวัง:** design มี frame/state ครบ, fixture ไม่เปลี่ยน, brand mapping ชัด และ handoff ระบุ interaction intent โดยไม่อ้างว่าได้ native app หรือผ่าน browser test แล้ว

## เส้นทาง 3 — Google Stitch: mobile design, DESIGN.md และ export/MCP

Google Stitch รับ prompt, ภาพ, text/code context สร้าง prototype และแลกเปลี่ยน `DESIGN.md` ได้ ปัจจุบันมี native canvas/export และ official MCP/SDK/skills ให้ใช้เป็นคนละเส้นทาง [Google Labs announcement](https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/) การเชื่อมและ auth ให้ทำตาม [official Stitch MCP setup](https://stitch.withgoogle.com/docs/mcp/setup/) หรือรายละเอียดใน [Lab Design Tools และ MCP](design-tools-and-mcp.md); บทนี้ไม่ติดตั้ง connector เพิ่ม

```text
ออกแบบ mobile browser prototype “บ้านสบาย” จาก website screenshot และข้อมูลที่แนบ
เป้าหมายคือเปรียบเทียบ web information architecture กับ app-style navigation
ไม่ใช่การสร้าง native iOS/Android app

Brand source:
- primary teal #0F766E
- action blue #0369A1
- IBM Plex Sans Thai
- ภาพและข้อความบ้านจากเว็บไซต์เดิม
Rawinnipa เป็นแบรนด์ของหน้าหลักสูตร ห้ามนำโลโก้หรือ #3EDC81 มาใช้ในบ้านสบาย

ใช้ข้อมูลหกหลังและราคาเดิม:
บ้านริมสวน 8,900,000; เรือนริมคลอง 4,290,000;
คอร์ตกลางเมือง 9,800,000; ห้องเหนือสวน 3,250,000;
บ้านวันสบาย 5,750,000; รังแรก 2,890,000 บาท
เก็บ IDs ไว้ใน handoff ตามลำดับ:
garden-house, canal-townhome, city-courtyard, sky-room, weekend-home, first-nest

สร้าง mobile screens 390px สำหรับ search/list, search+type-filter, detail,
favorites, filter-empty, favorites-empty และ about-demo
เส้นทางหลักคือ search/filter → detail → back → save favorite
bottom navigation มี ค้นหา/บันทึกแล้ว/เกี่ยวกับ และไม่แทน detail back action
อย่าเพิ่ม map/geolocation, login, payment, push, offline claim หรือ listing upload

สร้าง reusable components และ states: PropertyCard, FavoriteButton, SearchField, FilterChip,
BottomNav, BackButton, ResultCount, EmptyState และ DemoNotice
รองรับข้อความไทยยาว, 360/390/430px, touch target >=44×44 CSS px,
visible focus, semantic labels, reduced motion และเป้าหมาย WCAG AA
ทำ review presentation ที่ 1440px โดยวาง mobile frames ข้าง state notes

ส่งสอง visual directions ก่อนเลือก เมื่อเลือกแล้วให้ส่งออก:
1. prototype/screen ที่แชร์ตามสิทธิ์เดิม
2. DESIGN.md ที่บันทึก color/type/spacing/component/state rules
3. HTML/code export หรือ screenshot สำหรับ comparison เท่านั้น
4. รายงานสิ่งที่ export รักษาไว้ สิ่งที่หาย และ assumptions
อย่าอ้างว่า generated code พร้อม production และอย่า publish/deploy
```

ถ้าใช้ Stitch MCP ให้ prompt read-only เพื่ออ่าน project/screen ก่อน แล้วเปรียบเทียบชื่อ screen กับ canvas; การมี MCP server ใน config ยังไม่พิสูจน์ว่า auth หรือ project access สำเร็จ ห้ามเก็บ API key/OAuth token ใน `DESIGN.md`, prompt, Git หรือ screenshot

**ผลที่คาดหวัง:** ได้ prototype กับ `DESIGN.md` ที่บอก rules จริง และ export หนึ่งชนิดสำหรับเปรียบเทียบ ผู้เรียนต้องบันทึกสิ่งที่หายระหว่าง export แทนการถือว่า Stitch output คือ component system ของ repository

## เส้นทาง 4 — Figma: frame architecture, variables และ MCP

ใช้ Figma เป็น inspectable handoff โดยตั้งชื่อ frames/components/variables ก่อนเรียก agent Remote MCP เป็นเส้นทางหลัก ใช้ link to selection และ endpoint/authorization ตาม [Figma remote setup](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/) วิธีเชื่อม Claude Code/Codex อยู่ใน [Lab Design Tools และ MCP](design-tools-and-mcp.md)

### Prompt สร้างโครง Figma

```text
ช่วยวางโครง Figma file สำหรับ mobile prototype “บ้านสบาย” โดยยังไม่เขียน code
ใช้ Page “Baan Sabai Mobile” และตั้งชื่อ frames:
Mobile/Search/Default, Mobile/Search/Filtered,
Mobile/Detail/Default, Mobile/Favorites/Default,
Mobile/Empty/Filters, Mobile/Empty/Favorites และ Review/All-States/1440

สร้าง component architecture:
PropertyCard, PropertyMeta, Price, FavoriteButton, SearchField, FilterChip,
BottomNavItem, BottomNav, TopBarBack, ResultCount, EmptyState และ DemoNotice
สร้าง variants ที่จำเป็น เช่น favorite on/off, nav current/default,
filter selected/default และ empty filters/favorites

สร้าง semantic variables โดย map จาก business brand บ้านสบาย:
color/brand/primary = #0F766E
color/action/primary = #0369A1
type/family/thai = IBM Plex Sans Thai
เพิ่ม semantic text/surface/border/focus variables จาก source ที่แนบเท่านั้น
ถ้าค่าใดไม่มี source ให้ทำรายการ unresolved ห้ามดูด Rawinnipa tokens จาก course shell

ใช้ fixtures 6 รายการและ IDs เดิมจาก source ห้ามเปลี่ยนชื่อหรือราคา
กำหนด Auto Layout, constraints และ responsive notes สำหรับ 360/390/430px
touch target อย่างน้อย 44×44 CSS px พร้อม focus, keyboard และ screen-reader notes
ทำ bottom nav ค้นหา/บันทึกแล้ว/เกี่ยวกับ และ detail back action แยกกัน
เพิ่ม filter-empty, favorites-empty และ demo limitation ที่ไม่มี native/offline/payment/geolocation

ก่อนจบ ส่ง frame inventory, component/variant inventory, variable table,
state transition list, asset list และ unresolved decisions
ยังไม่ share public, ไม่เรียก MCP และไม่สร้าง production code
```

### Prompt อ่าน Figma MCP แบบ read-only

คัดลอก **link to selection** ของ frame เดียวสำหรับ remote server:

```text
ใช้ official Figma MCP อ่าน frame นี้เท่านั้น: <PASTE-LINK-TO-SELECTION>
งานรอบนี้เป็น read-only ห้ามแก้ Figma และห้ามเขียน repository

รายงานชื่อ tool ที่เรียก, file/page/frame, dimensions และข้อความที่อ่านได้จริง
ดึง component/variant names, variable definitions, assets และ layout constraints ที่ tool ให้ได้
ตรวจ fixture anchors: ชื่อบ้านหนึ่งรายการ, ราคาเดียวกัน และ ID ใน annotation/handoff ถ้ามี
แยกทุกข้อเป็น “อ่านจาก Figma MCP” “อ่านจาก screenshot” หรือ “ยังไม่ทราบ”
อย่าเดา interaction, breakpoint, focus, reduced motion หรือ native capability จากภาพ

เทียบกับ design-system/baan-sabai/MASTER.md และ pages/home.md เมื่อ repository เปิดให้อ่าน
รายงาน conflict โดยยังไม่แก้ source ถ้า auth/file permission ไม่ผ่าน ให้ตัด credential
ออกจาก error แล้วบอกขั้นตรวจถัดไป ห้ามแต่ง design context แทน
```

**Read gate:** เทียบชื่อ frame, primary/action variable, component หนึ่งชื่อ และ fixture หนึ่งรายการกับ Figma Dev Mode ก่อนเขียน code Figma อธิบาย tools เช่น design context, variable definitions และ screenshot ที่ [Tools and prompts](https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/)

### Prompt implement จาก Figma frame

```text
นำ mobile prototype “บ้านสบาย” จาก Figma frame นี้มา implement:
<PASTE-APPROVED-FIGMA-FRAME-LINK>
เป้าหมาย source: examples/real-estate-mobile/

ก่อนแก้ อ่านกฎ repository/shared-infra, package.json, examples/real-estate/,
design-system/baan-sabai/MASTER.md และ pages/home.md
ใช้ Figma MCP อ่าน frame/variables/components จริง แล้วสรุปไฟล์ที่จะเปลี่ยน
ถ้า context ไม่ครบให้หยุดที่รายการ unknown ห้ามเดาจาก screenshot เพียงอย่างเดียว

สร้าง browser prototype ด้วย stack และ pattern ที่ repository ใช้อยู่ ไม่เพิ่ม dependency
ใช้ fixture IDs/ชื่อ/ราคาเดียวกับ examples/real-estate/main.js
รักษา brand บ้านสบาย #0F766E/#0369A1/IBM Plex Sans Thai แยกจาก Rawinnipa shell
ทำ search และกรองประเภท → detail → back → save favorite, bottom ค้นหา/บันทึกแล้ว/เกี่ยวกับ,
filter-empty และ favorites-empty โดย state/label ใช้ keyboard และ screen reader ได้

รองรับ 360/390/430px และ review ที่ 1440px, ไม่มี overflow,
touch target >=44×44 CSS px, visible focus และ reduced motion
ห้ามอ้างหรือเพิ่ม native install, offline, push, payment, geolocation, login หรือธุรกรรมจริง
ไม่แก้ API/database/deployment และไม่เปิด port นอกกฎ shared-infra

รัน checks ที่เกี่ยวข้อง ทดลองเส้นทางหลักทั้ง keyboard และ pointer
เปรียบเทียบกับ frame แล้วรายงาน intentional differences, command/output และสิ่งที่ยังไม่ทดสอบ
ส่ง prompt นี้กับรายการไฟล์เปลี่ยน ห้าม deploy
```

**ผลที่คาดหวัง:** implementation trace กลับไปยัง frame/component/variables ได้ แต่ยังให้ source, browser behavior และ tests เป็นหลักฐานสุดท้าย ไม่ถือว่า Figma context บังคับ framework หรือพิสูจน์ accessibility

## เส้นทาง 5 — วิจารณ์ screenshot ผ่าน Claude Desktop หรือ ChatGPT Desktop

ใช้เมื่อไม่มี design connector หรืออยากได้ critique รอบเร็ว แนบ screenshot เว็บไซต์ที่ 390 และ 1440px กับ screenshot mobile prototype ที่ 360/390/430px โดยตัดข้อมูลส่วนตัวออก Desktop chat เห็นเฉพาะสิ่งที่แนบ ไม่ได้เข้าถึง local repository/Figma โดยอัตโนมัติ

```text
วิจารณ์ screenshot ที่แนบของกรณีศึกษา “บ้านสบาย”
ภาพชุด A คือ responsive website; ภาพชุด B คือ app-style browser prototype
ใช้เฉพาะภาพและ brief ในแชตนี้ อย่าสมมติว่าเปิด local source, Figma หรือ URL ได้

ตรวจว่า brand บ้านสบายยังคง teal #0F766E, blue #0369A1 และ IBM Plex Sans Thai
อย่านำ Rawinnipa course-shell brand มาปน ตรวจความสม่ำเสมอของชื่อ/ราคา 6 fixtures
และแจ้งถ้าอ่านข้อความจากภาพไม่ได้แทนการเดา

เปรียบเทียบ:
- website nav/reflow กับ app bottom navigation
- search/filter → detail → back → favorite
- filter-empty และ favorites-empty
- hierarchy และข้อความไทยที่ 360/390/430px
- การจัดวาง mobile prototype ใน review frame 1440px
- touch-target risk, label/focus/state ที่มองเห็นจากภาพ

รายงาน 3 ส่วน:
1. สิ่งที่เห็นจาก screenshot พร้อมระบุภาพ
2. ความเสี่ยงหรือความไม่สอดคล้อง เรียงตามผลต่อผู้ใช้
3. สิ่งที่ต้องตรวจใน browser/source เช่น keyboard, screen reader, contrast calculation,
   persistence, reduced motion และ network state

ห้ามสรุปว่า accessibility, offline หรือ native behavior ผ่านจาก screenshot
เสนอการแก้ที่ระบุ component/state ได้ ไม่เขียน code ไม่แก้ไฟล์ และไม่ publish
```

**ผลที่คาดหวัง:** critique แยก observation ออกจากข้อที่ต้องทดสอบจริง ไม่มีคะแนน contrast ที่แต่งจากสายตา และไม่บอกว่า mobile responsive website กับ app prototype เป็นสิ่งเดียวกัน

## ลงมือและตรวจรับ

เลือกหนึ่ง design route แล้วใช้ implementation prompt ที่ตรงกับ handoff ก่อน preview ให้อ่านกฎ infra ของ workspace และใช้ port ที่โครงการจองไว้เท่านั้น ไม่ต้องเปิด local Figma/Stitch server เพื่อทำ lab นี้

| Gate | หลักฐานที่ต้องส่ง | ผ่านเมื่อ |
| --- | --- | --- |
| Source | fixture table เทียบ `examples/real-estate/main.js` | ID/ชื่อ/ราคา 6 รายการตรงกัน |
| Brand | token mapping และภาพ comparison | ใช้บ้านสบาย teal/blue/IBM Plex Thai โดยไม่ปน Rawinnipa shell |
| Flow | screen/state map หรือวิดีโอสั้น | Search/filter → detail → back → favorite ไปต่อได้ |
| Navigation | pointer + keyboard walkthrough | Bottom nav มี ค้นหา/บันทึกแล้ว/เกี่ยวกับ และ detail มี back แยก |
| Empty states | test filter ไม่พบ และ favorites ว่าง | มีข้อความเหตุผลและ action ไปต่อที่ focus ได้ |
| Responsive | screenshots 360/390/430 และ review 1440px | ไม่มี overflow/ข้อความหรือ control ชนกัน |
| Accessibility | focus order, visible focus, labels, touch-target measurement | keyboard ใช้ได้และ target สำคัญอย่างน้อย 44×44 CSS px |
| Scope | README/handoff limitations | ระบุว่าเป็น browser prototype ไม่มี native/offline/push/payment/geolocation |
| Evidence | prompt ฉบับเต็ม, design source, diff และ check output | ผู้ตรวจทำซ้ำและแยกสิ่งที่ยังไม่ทดสอบได้ |

## Rubric 100 คะแนน

| หมวด | คะแนน | เกณฑ์เต็ม |
| --- | ---: | --- |
| Product/source truth | 20 | fixtures และข้อจำกัดธุรกิจตรง source ไม่มี capability สมมติ |
| Information architecture | 20 | website กับ app navigation ต่างกันอย่างมีเหตุผล เส้นทางหลักและ back ชัด |
| Design system/brand | 15 | mapping บ้านสบายถูกต้อง component/token ใช้สม่ำเสมอ ไม่ปน course brand |
| States และ interaction | 15 | filter, detail, favorite และ empty states ทำงานและสื่อความหมาย |
| Responsive/accessibility | 20 | ตรวจครบ 4 viewport, keyboard/focus/labels/touch targets และ reduced-motion intent |
| Handoff/evidence | 10 | prompt, source link, design artifact, checks, differences และ unknowns ครบ |

**Score cap 60:** fixture/name/price ไม่ตรง source, ใช้ Rawinnipa เป็นแบรนด์บ้านสบาย, หรือมีเพียงภาพนิ่งแต่รายงานว่า interaction ผ่าน

**ไม่ผ่าน lab:** เพิ่มธุรกรรม/คำรับรองจริง, เปิดเผย credential/private design URL หรืออ้างว่าเป็น native/offline app โดยไม่มี implementation และ test

## สิ่งที่ส่งท้าย lab

ส่ง design source ที่ผู้ตรวจมีสิทธิ์เปิด, prompt ฉบับเต็มที่ใช้จริง, `DESIGN.md` หรือ component/token inventory, screenshots 360/390/430/1440, state/flow checklist, รายการไฟล์เปลี่ยน, output ของ checks และ retrospective สั้น ๆ ว่าแนวคิดใดจาก desktop website ไม่ควรถูกย่อมาใช้ใน mobile app ตรง ๆ

**แหล่งอ้างอิงเครื่องมือ:** [Claude Design getting started](https://support.claude.com/en/articles/14604416-get-started-with-claude-design), [Claude Design system setup](https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design), [Google Stitch MCP/design workflow](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 MCP](https://developers.figma.com/docs/figma-mcp-server/), [Figma tools and prompts](https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/) และ [Lab Design Tools และ MCP](design-tools-and-mcp.md). ตรวจแหล่งทางการของผลิตภัณฑ์เมื่อ 9 กันยายน 2026; availability, plan และ connector UI อาจเปลี่ยนก่อนวันเรียน