# Prompt → ผลลัพธ์ → หลักฐานตรวจรับ

หน้านี้บอกว่า prompt ใด **ใช้จริงในรอบสร้างหลักสูตร**, prompt ใดเป็น **แบบสำหรับทำซ้ำ**, และผลใดผ่านการตรวจแล้ว การมี source file หรือ screenshot ไม่ได้แปลว่าพฤติกรรมทั้งหมดผ่าน; ให้ยึด command output และ test coverage ที่ระบุเท่านั้น

![แผนภาพวงจรส่งมอบที่แยก prompt, artifact, validation evidence, preview และ release decision ออกจากกัน](/diagrams/delivery-loop.svg)

[เปิดแผนภาพ delivery loop แบบเต็มหน้า](/diagrams/delivery-loop.html) เพื่ออ่านความสัมพันธ์ ส่วนตารางหลักฐานด้านล่างคงไว้เพราะต้องเทียบสถานะ 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](../labs/real-estate-ui-ux-pro-max.md) |
| 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 ฉบับเต็ม](real-estate-build-prompt.md) | `examples/real-estate/` และ [หน้าเว็บ](/examples/real-estate/) | บ้านสมมติ 6 รายการ, filter/sort, favorites, native dialog, inquiry ผ่าน `/api/contact` | source/syntax และ browser tests ผ่านครบตามรายการด้านล่าง |
| เว็บบริษัท เส้นตั้ง สตูดิโอ | prompt สำหรับทำซ้ำ | [Company site prompt](example-prompts.md#1-company-site-prompt-เรมตนทสมบรณ) | `examples/company/` และ [หน้าเว็บ](/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](example-prompts.md#2-rental-equipment-prompt-ทบงคบ-model-ธรกจ) | `examples/rental/` และ [หน้าเว็บ](/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](example-prompts.md#3-gsap-product-showcase-prompt-ทปองกน-motion-หลอกผใช) | `examples/store/` และ [หน้าเว็บ](/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 ต้นฉบับ](../assets/image-provenance.md#company-studio) | `public/images/company-studio.png` และ `.webp` | ภาพสตูดิโอสถาปัตยกรรมสมมติ ไม่มีข้อความ/โลโก้ | มีต้นฉบับและ WebP; `npm run assets` สร้าง delivery asset ซ้ำได้ |
| ภาพ rental kit | ใช้จริงกับ Imagegen | [prompt ต้นฉบับ](../assets/image-provenance.md#rental-kit) | `public/images/rental-kit.png` และ `.webp` | กล้อง ไฟ และไมค์ไม่มีแบรนด์บนฉากเหลือง | มีต้นฉบับและ WebP; provenance ระบุ fiction และข้อจำกัดสิทธิ์ก่อนใช้จริง |
| ภาพ headphones | ใช้จริงกับ Imagegen | [prompt ต้นฉบับ](../assets/image-provenance.md#headphones) | `public/images/headphones.png` และ `.webp` | หูฟังสี lilac ไม่มีชื่อแบรนด์ | มีต้นฉบับและ WebP; dimensions ถูก reserve ในหน้าเว็บ |
| ภาพบ้านสบาย | ใช้จริงกับ Imagegen | [prompt ต้นฉบับ](../assets/image-provenance.md#real-estate-home-บานสบาย) | `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 ฉบับเต็ม](hush-product-story-prompt.md) เป็น prompt สำหรับทำซ้ำจาก implementation รอบนี้ และฝังฉบับเดียวกันไว้ใน [บทเรียน 07](../lessons/07-gsap-storefront.md) หน้า [HUSH](/examples/store/) มี 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 | [เปิดหน้า](/examples/company/) | [ภาพ desktop](/images/results/company-desktop.png) | copy ที่ไม่สร้าง testimonial, contact states, focus, mobile |
| Rental | [เปิดหน้า](/examples/rental/) | [ภาพ desktop](/images/results/rental-desktop.png) | availability, data authority, loading/error และ date controls |
| Store | [เปิดหน้า](/examples/store/) | [ภาพ desktop](/images/results/store-desktop.png) | motion มีหน้าที่, cart focus, quote ไม่ใช่ checkout |
| Real estate | [เปิดหน้า](/examples/real-estate/) | [ภาพ desktop ที่ตรวจแล้ว](/images/results/real-estate-desktop.png) | recommendation ที่ใช้/ปรับ/ปฏิเสธ, filters, dialog และ inquiry |

## ผลตรวจรอบ release สำหรับบ้านสบาย

ภาพหน้าเว็บที่ได้จริงจากรอบตรวจ (1440×1000):

![ผลลัพธ์เว็บบริษัท เส้นตั้ง สตูดิโอ](/images/results/company-desktop.png)
![ผลลัพธ์เว็บให้เช่าอุปกรณ์ หยิบยืม](/images/results/rental-desktop.png)
![ผลลัพธ์เว็บสินค้า GSAP HUSH](/images/results/store-desktop.png)
![ผลลัพธ์เว็บอสังหาริมทรัพย์ บ้านสบาย จาก ui-ux-pro-max](/images/results/real-estate-desktop.png)

ผลต่อไปนี้บันทึกจาก 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](../instructor/deployment-record.md) |

ผลสรุป release อยู่ใน `artifacts/RELEASE.md`; gallery ใช้ screenshot จริงของรอบตรวจ desktop ส่วน browser output แสดง test รายกรณีให้ตรวจซ้ำได้

อ่านผลลัพธ์จากเครื่องมือได้โดยตรง: [design-system output](/downloads/ui-ux-pro-max-design-system.txt), [UX search output](/downloads/ui-ux-pro-max-ux-search.txt), [API tests](/downloads/api-tests.txt), [browser tests](/downloads/browser-tests.txt) ไฟล์เหล่านี้บันทึกผลรอบตรวจจริง ไม่ได้ทำให้การทดสอบในเครื่องอื่นผ่านโดยอัตโนมัติ

## Research → Brand kit: HUSH worked example

เพิ่ม [Lab](../labs/research-to-brand-website.md), [prompt P0–P8](research-to-brand-prompts.md) และ [ชุดตัวอย่าง HUSH](/labs/hush-brand-kit/) วันที่ 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 สร้างเว็บไซต์หลักสูตรทีละขั้น](../labs/build-course-website-step-by-step.md) ใช้ Codex CLI กับข้อมูลที่เตรียมไว้จริง แยก brief, HTML, CSS, JavaScript และ review เป็นคนละ prompt มี [snapshot และ selected transcripts](/labs/course-website-build/) สำหรับเทียบพัฒนาการ ภาพ Terminal เป็นการเปิดบันทึก CLI กลับมาแสดงผ่าน read-only viewer โดยตัด internal reasoning/session identifiers ออกและย่อ path ไม่ใช่ภาพ Codex Desktop ภาพหน้าเว็บ capture จาก browser ที่เปิด snapshot จริง