Prompt → ผลลัพธ์ → หลักฐานตรวจรับ
หน้านี้บอกว่า prompt ใด ใช้จริงในรอบสร้างหลักสูตร, prompt ใดเป็น แบบสำหรับทำซ้ำ, และผลใดผ่านการตรวจแล้ว การมี source file หรือ screenshot ไม่ได้แปลว่าพฤติกรรมทั้งหมดผ่าน; ให้ยึด command output และ test coverage ที่ระบุเท่านั้น
เปิดแผนภาพ delivery loop แบบเต็มหน้า เพื่ออ่านความสัมพันธ์ ส่วนตารางหลักฐานด้านล่างคงไว้เพราะต้องเทียบสถานะ prompt, artifact และหลักฐานเป็นรายงานแต่ละชิ้น
แผนที่หลักฐาน
| งาน | สถานะของ prompt | Prompt / คำสั่ง | Artifact ที่เกิดขึ้น | ผลที่สังเกตได้ | หลักฐานและสถานะ |
|---|---|---|---|---|---|
| Design system บ้านสบาย | ใช้จริง | query real estate residential property Bangkok warm editorial calm trust search listings กับ --design-system --persist |
design-system/baan-sabai/MASTER.md, artifacts/ui-ux-pro-max-design-system.txt |
Marketplace/Directory, teal–blue, Exaggerated Minimalism, Cinzel/Josefin Sans | รัน query ซ้ำแล้วได้ recommendation เดิม; การนำไปใช้จริงบันทึกใน lab |
| UX search บ้านสบาย | ใช้จริง | query search filter form accessibility กับ --domain ux |
artifacts/ui-ux-pro-max-ux-search.txt |
label, useful empty state, loading/success/error feedback | raw output มี 3 results และ source ระบุ ux-guidelines.csv |
| สร้างเว็บบ้านสบาย | ใช้จริง | prompt ฉบับเต็ม | examples/real-estate/ และ หน้าเว็บ |
บ้านสมมติ 6 รายการ, filter/sort, favorites, native dialog, inquiry ผ่าน /api/contact |
source/syntax และ browser tests ผ่านครบตามรายการด้านล่าง |
| เว็บบริษัท เส้นตั้ง สตูดิโอ | prompt สำหรับทำซ้ำ | Company site prompt | examples/company/ และ หน้าเว็บ |
hero/service/case study สมมติ และ contact form | Browser suite 40 tests ผ่านรวม company desktop, 390px, axe, D1 success และ mocked server error |
| เว็บเช่า หยิบยืม | prompt สำหรับทำซ้ำ | Rental equipment prompt | examples/rental/ และ หน้าเว็บ |
catalog, availability, half-open dates, reservation demo | Browser suite ผ่าน mobile/axe/success/409/stale-response/loading; API suite 12 tests ผ่านรวม overlap, concurrency และ D1 authority |
| เว็บสินค้า HUSH | prompt สำหรับทำซ้ำ | GSAP product prompt | examples/store/ และ หน้าเว็บ |
product story 10 ช่วง, listening scenarios, GSAP, เทียบรุ่น, cart และ server-priced quote demo | รอบ HUSH 11 กันยายน: 18 browser tests ผ่าน; ดูหลักฐานรอบใหม่ด้านล่าง ส่วน API authority อ้าง suite ฐานเดิม |
| ภาพ company studio | ใช้จริงกับ Imagegen | prompt ต้นฉบับ | public/images/company-studio.png และ .webp |
ภาพสตูดิโอสถาปัตยกรรมสมมติ ไม่มีข้อความ/โลโก้ | มีต้นฉบับและ WebP; npm run assets สร้าง delivery asset ซ้ำได้ |
| ภาพ rental kit | ใช้จริงกับ Imagegen | prompt ต้นฉบับ | public/images/rental-kit.png และ .webp |
กล้อง ไฟ และไมค์ไม่มีแบรนด์บนฉากเหลือง | มีต้นฉบับและ WebP; provenance ระบุ fiction และข้อจำกัดสิทธิ์ก่อนใช้จริง |
| ภาพ headphones | ใช้จริงกับ Imagegen | prompt ต้นฉบับ | public/images/headphones.png และ .webp |
หูฟังสี lilac ไม่มีชื่อแบรนด์ | มีต้นฉบับและ WebP; dimensions ถูก reserve ในหน้าเว็บ |
| ภาพบ้านสบาย | ใช้จริงกับ Imagegen | prompt ต้นฉบับ | public/images/real-estate-home.png และ .webp |
บ้านร่วมสมัยโทนอุ่นในสวนสำหรับ listing สมมติ | มีต้นฉบับ 1536×1024 และ WebP 272,916 bytes; เครื่องมือไม่เปิดเผยชื่อรุ่น จึงไม่อ้าง model ที่ยืนยันไม่ได้ |
คำว่า “prompt สำหรับทำซ้ำ” ในสามเว็บเดิมมีความหมายสำคัญ: prompt library เขียนจาก contract และ source ที่มีอยู่เพื่อให้ผู้เรียนสร้างหรือทบทวนงานรูปแบบเดียวกัน ไม่ใช่ transcript ที่พิสูจน์ว่า prompt ข้อความนั้นถูกใช้สร้าง commit แรก prompt สำหรับสร้างทั้งสามเว็บอยู่ในบทเรียนและคลัง Prompt โดยใช้ชื่อเดียวกับหน้าเว็บ: เส้นตั้ง สตูดิโอ, หยิบยืม และ HUSH ผู้เรียนเปลี่ยนชื่อหรือภาพในสำเนาของตนได้ สิ่งที่พิสูจน์ได้คือโครง prompt สอดคล้องกับ behavior ปัจจุบันและ tests ด้านล่างครอบคลุม behavior ที่ระบุ
ผลลัพธ์จาก ui-ux-pro-max: recommendation กับ implementation
ผลจาก skill ไม่ใช่ code generator ในรอบนี้ ทีมใช้มันเป็น design intelligence แล้วบันทึกการตัดสินใจ:
| มิติ | Recommendation | ผลใน source |
|---|---|---|
| Information architecture | Marketplace/Directory, search เป็น CTA | filter bar, result count, 6 listings และ empty state |
| สี | trust teal + professional blue | token teal #0F766E, action blue #0369A1, background #F0FDFA |
| Typography | Cinzel + Josefin Sans | ปรับเป็น local IBM Plex Sans Thai เพราะ copy หลักเป็นภาษาไทย |
| Display style | oversized type ถึง 12rem/spacing ติดลบ | ใช้ clamp(58px, 7.2vw, 112px), line-height 1.15, letter-spacing ปกติ และ mobile layout เพื่อความอ่านง่าย |
| Conversion CTA | search + “List your item” | ใช้ search/interest; ไม่สร้าง upload เพราะไม่มี workflow จริง |
| Rich media | หลีกเลี่ยง listing ที่ไม่มี virtual tour | ไม่สร้าง virtual-tour control เพราะไม่มี asset/function; ระบุข้อจำกัดตรง ๆ |
| UX domain | label, no-result recovery, submit feedback | label ที่เห็น, reset action, live loading/error/success status |
page-specific decisions ฉบับเต็มอยู่ที่ design-system/baan-sabai/pages/home.md การทดสอบ UI เป็นผู้ตัดสินว่าการแปลง recommendation สำเร็จหรือไม่ ไม่ใช่ชื่อ style หรือคะแนนในฐานข้อมูล
สิ่งที่ browser และ API tests พิสูจน์แล้ว
หลักฐานฐานเดิมเมื่อ 9 กันยายน 2026 อยู่ใน artifacts/browser-tests.txt: 40 passed โดยใช้ worker เดียว ครอบคลุม course และตัวอย่าง company/rental/store/real-estate ได้แก่ desktop content, viewport 390px ไม่ล้น, axe ไม่มี serious/critical finding, form success/error, rental conflict/stale response, store focus management และ reduced motion
หลักฐาน API อยู่ใน artifacts/api-tests.txt: 12 passed บน D1 local ใหม่แยกต่อรอบ ครอบคลุม catalog จาก D1, date/capacity, concurrent request, server-side quote price, same-origin/validation, idempotency, daily limit, 404 และ body-size limit พร้อม database audit ว่า PII ใน demo ถูก redact และ HMAC/TTL ถูกใช้ตาม contract
ขอบเขตของหลักฐานต้องอ่านให้ตรง:
- 40 browser tests ครอบคลุมหน้า real-estate รวม filter/sort/favorites/dialog/contact และ retry; ไม่ครอบคลุมระบบนายหน้าหรือธุรกรรมจริงที่อยู่นอก demo
- axe test ที่ไม่มี serious/critical finding ไม่ได้พิสูจน์ WCAG ทุก success criterion
- local D1/API pass ไม่ได้พิสูจน์ production binding, DNS หรือ deployment URL
- screenshot พิสูจน์ layout ในหนึ่ง viewport/เวลา แต่ไม่พิสูจน์ keyboard, error path หรือ database behavior
อัปเดต HUSH product story — 11 กันยายน 2026
Prompt HUSH ฉบับเต็ม เป็น prompt สำหรับทำซ้ำจาก implementation รอบนี้ และฝังฉบับเดียวกันไว้ใน บทเรียน 07 หน้า HUSH มี 10 ช่วงเนื้อหา ตั้งแต่ hero, จุดเด่น, sound stage, บรรยากาศการฟัง, วัสดุ, แบตเตอรี่สมมติ, สเปก, เลือกสินค้า/เปรียบเทียบ, FAQ ถึง closing CTA ใช้หลักการจัดลำดับเรื่องจากเว็บสินค้า Apple และใช้แบรนด์/ภาพ HUSH ของคอร์ส
หลักฐานใหม่ artifacts/product-story/browser-tests.txt: 18 passed ครอบคลุม 10 store regressions เดิมและ 8 กรณีใหม่ ได้แก่ keyboard listening modes, ราคา hero/card/comparison จาก response เดียวกัน, catalog empty/error/retry, pin teardown เมื่อเปลี่ยน reduced motion, mobile natural flow, empty-cart focus loop, axe ที่ 320px และการอ่านหน้าโดยไม่ใช้ JavaScript ภาพ desktop HUSH ด้านล่างอัปเดตจากรอบนี้ โดยคงภาพอื่นเป็นหลักฐานรอบ 9 กันยายน
artifacts/product-story/visual-checks.json ตรวจ 320/390/1440px ว่าไม่มี horizontal overflow, มี 10 sections และโหลดสามสินค้า ข้อจำกัด: listening controls เปลี่ยนเฉพาะภาพ/ข้อความ ไม่มีเสียงเล่น; 40 mm และ 30 ชั่วโมงเป็นสเปกสมมติ; browser pass ไม่ใช่ผลทดสอบเครื่องเสียงหรือการชำระเงินจริง
Gallery และผลที่ผู้เรียนควรเปิดเทียบ
| ตัวอย่าง | หน้า interactive | Screenshot evidence | สิ่งที่ควรเทียบกับ prompt |
|---|---|---|---|
| Company | เปิดหน้า | ภาพ desktop | copy ที่ไม่สร้าง testimonial, contact states, focus, mobile |
| Rental | เปิดหน้า | ภาพ desktop | availability, data authority, loading/error และ date controls |
| Store | เปิดหน้า | ภาพ desktop | motion มีหน้าที่, cart focus, quote ไม่ใช่ checkout |
| Real estate | เปิดหน้า | ภาพ desktop ที่ตรวจแล้ว | recommendation ที่ใช้/ปรับ/ปฏิเสธ, filters, dialog และ inquiry |
ผลตรวจรอบ release สำหรับบ้านสบาย
ภาพหน้าเว็บที่ได้จริงจากรอบตรวจ (1440×1000):
ผลต่อไปนี้บันทึกจาก command output และ browser run วันที่ 9 กันยายน 2026:
| Gate | ผลปัจจุบัน | หลักฐานที่ต้องบันทึก |
|---|---|---|
| JavaScript syntax | ผ่าน | node --check examples/real-estate/main.js exit 0 |
| Build + local links | ผ่าน | output ของ npm run build และ npm run lint หลังรวม source |
| Desktop/390px/overflow | ผ่าน | test name, pass count และ screenshot ที่เผยแพร่ |
| Keyboard dialog/focus return | ผ่าน | automated/manual case และผลจริง |
| Filters/favorites/empty state | ผ่าน | automated/manual case และผลจริง |
| Contact success/error | ผ่าน | local D1 response + mocked/real error case |
| Accessibility scan | ผ่านในขอบเขต axe ที่ทดสอบ | axe scope/rules และจำนวน serious/critical findings |
| Production | ผ่าน | URL, version และ remote smoke |
ผลสรุป release อยู่ใน artifacts/RELEASE.md; gallery ใช้ screenshot จริงของรอบตรวจ desktop ส่วน browser output แสดง test รายกรณีให้ตรวจซ้ำได้
อ่านผลลัพธ์จากเครื่องมือได้โดยตรง: design-system output, UX search output, API tests, browser tests ไฟล์เหล่านี้บันทึกผลรอบตรวจจริง ไม่ได้ทำให้การทดสอบในเครื่องอื่นผ่านโดยอัตโนมัติ
Research → Brand kit: HUSH worked example
เพิ่ม Lab, prompt P0–P8 และ ชุดตัวอย่าง HUSH วันที่ 11 กันยายน 2026 ชุดนี้เรียบเรียงจาก source เว็บไซต์/catalog/กฎออกแบบ/ที่มาภาพในหลักสูตร ให้ trace จาก S1–S4 และ E01–E15 ไปสู่ brief, brandbook, tokens และ handoff ได้
UI icons 4 ชิ้นเป็น SVG ต้นฉบับจากโค้ด ส่วน key visual ใช้ภาพเดิม /images/headphones.webp จัดหน้า HTML/CSS ใหม่ มี reproduction prompt ให้ฝึกสร้างภาพต่อ ไม่อ้างว่าได้รัน image model ใหม่หรือทำ customer research ของแบรนด์จริง รายงานอ้างอิงทางการรองรับวิธีทำ Lab และแยกจากข้อมูลธุรกิจสมมติ
เว็บไซต์รายวิชา PSU: กระบวนการสร้างที่รันจริง
Lab สร้างเว็บไซต์หลักสูตรทีละขั้น ใช้ Codex CLI กับข้อมูลที่เตรียมไว้จริง แยก brief, HTML, CSS, JavaScript และ review เป็นคนละ prompt มี snapshot และ selected transcripts สำหรับเทียบพัฒนาการ ภาพ Terminal เป็นการเปิดบันทึก CLI กลับมาแสดงผ่าน read-only viewer โดยตัด internal reasoning/session identifiers ออกและย่อ path ไม่ใช่ภาพ Codex Desktop ภาพหน้าเว็บ capture จาก browser ที่เปิด snapshot จริง