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

Lab นี้ใช้ เว็บไซต์บ้านสบาย เป็น source ตั้งต้น แล้วออกแบบ mobile app prototype สำหรับโจทย์เดิม ผู้เรียนจะทดลองทำ 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

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

การย่อ 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 และ บ้านสบาย mobile prototype เมื่อเปิดจาก course build ผู้เรียนดาวน์โหลด source code ทั้งชุดจาก หน้าคลังความรู้ เพื่อดูไฟล์ครบได้ ไม่ควรคัดลอกเฉพาะ HTML จาก DevTools เพราะ behavior อยู่ใน CSS/JavaScript ด้วย

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

ราคาและรายละเอียดทั้งหมดเป็นข้อมูลสมมติ ใช้สำหรับออกแบบและทดสอบเท่านั้น 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:

ปรับการออกแบบเว็บไซต์ “บ้านสบาย” ที่ /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 เป็นทางเข้าหลัก; เมนูใน Claude Desktop ขึ้นกับแผนและ rollout Getting started

แนบเฉพาะ asset ที่มีสิทธิ์ใช้: screenshot เว็บไซต์, ภาพบ้านเดโม, MASTER.md และ pages/home.md ไม่ต้องแนบ Rawinnipa brandbook เพราะงานนี้ใช้แบรนด์บ้านสบาย หากสร้าง design system ใน organization ให้ผู้รับผิดชอบตรวจสี ฟอนต์ component และ layout ก่อน publish ตาม Design system setup

สร้าง 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 แล้วตรวจ bundle ก่อนนำเข้า repository หากใช้ Claude Design MCP กับ Claude Code ให้ทำ auth ตาม Lab Design Tools และ MCP; อย่าเดาว่า 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 การเชื่อมและ auth ให้ทำตาม official Stitch MCP setup หรือรายละเอียดใน Lab Design Tools และ MCP; บทนี้ไม่ติดตั้ง connector เพิ่ม

ออกแบบ 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 วิธีเชื่อม Claude Code/Codex อยู่ใน Lab Design Tools และ MCP

Prompt สร้างโครง Figma

ช่วยวางโครง 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:

ใช้ 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

Prompt implement จาก Figma frame

นำ 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 โดยอัตโนมัติ

วิจารณ์ 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 นี้

Rubric 100 คะแนน

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, Claude Design system setup, Google Stitch MCP/design workflow, Stitch MCP setup, Figma MCP, Figma tools and prompts และ Lab Design Tools และ MCP. ตรวจแหล่งทางการของผลิตภัณฑ์เมื่อ 9 กันยายน 2026; availability, plan และ connector UI อาจเปลี่ยนก่อนวันเรียน