# RW Web — จากข้อมูลธุรกิจสู่เว็บไซต์ที่เผยแพร่ได้

ชุด skill สำหรับ Codex จำนวน 4 ตัว ใช้แยกขั้นตอนหรือสั่ง `$rw-web` ให้ทำต่อกันได้ ตั้งแต่ค้นข้อมูลและอ่านเอกสาร สร้าง brandkit คิดเนื้อหา/หน้าเว็บ พัฒนาและตรวจเว็บไซต์ จนถึง deploy Cloudflare และผูกโดเมนที่ระบุ

| Skill | ผลลัพธ์ |
| --- | --- |
| `$rw-research-brandkit` | source inventory, evidence, brief, brandkit, design tokens, asset/ภาพและ prompt |
| `$rw-build-website` | sitemap, เนื้อหาจริง, เว็บไซต์ที่ใช้งานได้, build, screenshots และ QA |
| `$rw-deploy-cloudflare` | config/dry-run, deployment, domain mapping, HTTPS verification และวิธีกู้คืน |
| `$rw-web` | ทำทั้ง 3 ขั้นต่อกัน พร้อมบันทึกงานค้างและกลับมาทำต่อ |

รองรับเว็บไซต์ส่วนตัว บริษัท บริการ และสินค้า จำนวนหน้ากำหนดจากข้อมูลและงานของผู้ใช้ ไม่บังคับทุกเว็บให้หน้าตา/โครงสร้างเหมือนกัน ร้านค้าที่ต้องรับเงินจริงต้องมีระบบรับคำสั่งซื้อ/ชำระเงินที่ได้รับอนุญาต ไม่ใช้ปุ่ม checkout จำลองแทนงานที่ร้องขอ

## ติดตั้ง

ต้องมี Codex และ Python 3.10 ขึ้นไป (`python3` บน macOS/Linux หรือ `py -3` บน Windows) ส่วน Node/npm, browser tools และ Wrangler ใช้ตาม stack/ขั้นตอนที่ทำ

แตก ZIP แล้วรันจากโฟลเดอร์ชุด skill:

```bash
# ดูปลายทางและตรวจ conflict ก่อน โดยยังไม่เขียนไฟล์
python3 install.py --dry-run

# ติดตั้งทั้ง 4 skill ใน user scope ของ Codex
python3 install.py
```

ค่า default คือ `$CODEX_HOME/skills` หากตั้ง CODEX_HOME หรือ `~/.codex/skills` ใน host ที่ตรวจรอบนี้ หากต้องการเก็บกับ repository เพื่อส่งต่อทั้งทีม ให้ระบุปลายทางของเว็บไซต์นั้น:

```bash
python3 install.py --dest /path/to/my-website/.agents/skills
```

บน Windows ใช้ `py -3 install.py --dest C:/projects/my-website/.agents/skills` ตำแหน่ง `.agents/skills` เป็น project scope ที่ Codex รองรับ ตรวจ [หลักฐาน discovery/setup](skills/rw-web/references/dependency-setup.md) เมื่อใช้ host เวอร์ชันอื่น

ตัวติดตั้งทำงานในเครื่องและติดตั้งเฉพาะ 4 โฟลเดอร์ RW ไม่ดาวน์โหลด package ไม่ล็อกอิน ไม่อ่าน secret ไม่ deploy และไม่แก้ DNS หากมีชื่อ skill เดิมที่เนื้อหาต่างกัน จะหยุดก่อนเขียนไฟล์ใด ๆ; หากเหมือนกันจะข้ามโดยปลอดภัย ตรวจ diff หรือเลือก scope ใหม่สำหรับการอัปเกรด ไม่ต้องลบ skill เดิมเพื่อทดลองชุดนี้

เปิด Codex session ใหม่ แล้วใช้ `/skills` ตรวจชื่อทั้ง 4 หาก host ยังไม่ refresh สามารถให้ agent อ่าน SKILL.md จากตำแหน่งที่ติดตั้งจริงได้ คำสั่ง `$rw-web` เป็นการเรียก skill ใน Codex ไม่ใช่คำสั่ง shell

## Skills ที่ใช้เพิ่มคุณภาพ

ขั้นสร้างเว็บต้องพบ **`frontend-design` และ `ui-ux-pro-max`** ซึ่งเป็นชื่อที่ถูกต้องของ skill ที่บางครั้งเขียนสลับเป็น `ux-ui-pro-max` เครื่องของผู้จัดทำมีอยู่แล้ว แต่ไม่ได้คัดลอกเวอร์ชันที่ปรับแต่งในเครื่องมาปนใน ZIP นี้

สำหรับผู้ใช้ใหม่ ให้ติดตั้งจาก [คู่มือ dependency ที่ตรวจแหล่ง upstream และ license แล้ว](skills/rw-web/references/dependency-setup.md) หรือให้ Codex อ่านคู่มือนี้แล้วช่วยตั้งค่า แหล่งหลักคือ Anthropic `frontend-design` (Apache-2.0) และ Nextlevelbuilder `ui-ux-pro-max` (MIT) จากนั้นยืนยันชื่อ/path ใน `/skills`

Skill จะเลือก helper ที่มีอยู่และเหมาะกับงาน เช่น `brand`, `design-system`, `edit-article`, `web-design-guidelines`, `web-perf`, `animation-vocabulary`, `diagram-design`, `brandkit` และ `imagegen` เพื่อปรับสารของแบรนด์ เนื้อหา ระบบภาพ การใช้งาน ความเร็ว หรือภาพประกอบ ไม่อ้างว่าได้ใช้ตัวที่ไม่ได้ติดตั้ง

## สั่งครั้งเดียว

### ภาพเว็บไซต์ด้วย GPT Image

`rw-build-website` และ `rw-web` สามารถใช้ **GPT Image ผ่าน Codex** เพื่อสร้าง hero, key visual, ภาพประกอบ หรือ concept สินค้าให้เข้ากับ brandkit ได้เมื่อภาพช่วยให้งานสวยและเข้าใจง่าย เลือก `gpt-image-2` เมื่อเครื่องมือเปิดให้เลือก model; หากเครื่องมือจัดการ model เอง จะบันทึกเฉพาะสิ่งที่รายงานจริง การใช้เครื่องมือในตัว Codex ไม่ต้องใส่ API key ใน prompt

Skill จะเก็บ prompt เต็ม ภาพอ้างอิง ไฟล์ต้นฉบับ และไฟล์ที่ปรับขนาดสำหรับเว็บไว้ในโปรเจกต์ พร้อม alt text และบันทึกที่มา แล้วตรวจภาพบนมือถือ/desktop ข้อความและปุ่มยังเป็น HTML ที่ใช้งานได้ ภาพจำลองที่สร้างด้วย AI แยกจาก screenshot ของเว็บจริง

```text
$rw-build-website สร้างเว็บจาก brandkit นี้ ใช้ GPT Image ผ่าน Codex
สร้าง hero และภาพประกอบที่เหมาะกับแบรนด์ เก็บ prompt และที่มาของภาพ
ใช้ gpt-image-2 หากเลือกได้ ตรวจ crop บนมือถือ และทำปุ่ม/ข้อความเป็น HTML จริง
```

### ตัวอย่างคำสั่งครบ workflow

```text
$rw-web ช่วยสร้างเว็บไซต์สำหรับบริษัท technical water จำกัดให้หน่อย และใช้ domain เป็น tw.rawinlab.com
```

นี่เป็น **ตัวอย่างคำสั่ง** ไม่มีการสร้างเว็บไซต์บริษัทนี้หรือเปลี่ยนโดเมนระหว่างการติดตั้ง skill หากชื่อบริษัทตรงได้หลายแห่ง agent จะขอเว็บไซต์ทางการ/ข้อมูลแยกแยะก่อนใช้ข้อเท็จจริงของบริษัทนั้น

ข้อมูลที่ช่วยให้ทำจบได้เร็วและตรงขึ้น:

```text
$rw-web ช่วยสร้างเว็บไซต์บริษัทจาก company-profile.pdf, assets/logo.svg
และเว็บไซต์ทางการที่แนบ เป้าหมายให้ลูกค้าเข้าใจบริการและติดต่อทางอีเมลที่อยู่ในเอกสาร
ใช้ภาษาไทย ออกแบบให้อ่านง่ายบนมือถือ มี light/dark mode
สร้างและ deploy ไปยังโดเมนของบริษัทที่ระบุ โดยใช้บัญชี Cloudflare ที่ล็อกอินไว้
```

ทำเว็บไซต์ส่วนตัวโดยยังไม่เผยแพร่:

```text
$rw-web สร้างเว็บไซต์ส่วนตัวจาก resume.pdf และผลงานในโฟลเดอร์นี้
ขอภาษาไทยกับอังกฤษ ใช้ชื่อและข้อมูลจริงจากเอกสาร ยังไม่ deploy
```

ใช้ทีละขั้น:

```text
$rw-research-brandkit อ่านเอกสารและเว็บไซต์ที่ให้ แล้วสร้าง brief และ brandkit สำหรับเว็บบริษัท

$rw-build-website นำ brandkit ใน web-plan/ มาคิดหน้าเว็บและเนื้อหา แล้วสร้างเว็บไซต์ที่ใช้งานได้จริง

$rw-deploy-cloudflare ตรวจเว็บไซต์ที่ทำเสร็จแล้วและ deploy ไปยังโดเมนที่ระบุในคำสั่งนี้
```

ทำต่อจากงานค้าง:

```text
$rw-web ทำต่อจาก web-plan/ เดิม ตรวจไฟล์และผลทดสอบล่าสุดก่อน แล้วทำขั้นที่ยังไม่สำเร็จให้ครบ
```

## สิ่งที่ต้องพร้อมสำหรับ Cloudflare

ต้องมีบัญชีที่ได้รับสิทธิ์และสามารถ deploy Worker ได้ หากผูกโดเมน ต้องมี active zone ที่เกี่ยวข้องและสิทธิ์ตรวจ DNS/Worker mapping ด้วย เลือก Wrangler OAuth หรือ API token ผ่าน environment/ตัวจัดการ secret ตาม [คู่มือ authentication](skills/rw-deploy-cloudflare/references/authentication.md); ไม่ส่ง token ลงใน prompt

คำสั่งที่ระบุให้สร้างและ deploy ไปยังโดเมนชัดเจนจะทำต่อเองเมื่อ preflight ผ่าน ไม่ถามยืนยันซ้ำทุกขั้น แต่การเขียนทับโดเมนของเว็บอื่น ซื้อโดเมน เปลี่ยน nameserver หรือการขาดสิทธิ์บัญชีเป็นคนละเงื่อนไขที่ต้องแก้ก่อน

Skill ใช้ Workers Custom Domain เมื่อตัว Worker ให้บริการเว็บไซต์เอง โดย Cloudflare จัดการ DNS/TLS ตามกลไกนั้น จึงไม่สร้าง CNAME ซ้ำ หากเป็น SSR/API หรือมี adapter อยู่แล้ว จะรักษา runtime และ bindings ไม่แปลงเป็น static อย่างเงียบ ๆ เมื่อ certificate ยัง pending จะรายงานตามจริง ไม่อ้างว่าโดเมนพร้อมแล้ว

## ไฟล์ที่ได้จากแต่ละโปรเจกต์

`web-plan/` เก็บ project/evidence/brief, brandkit/tokens/assets/prompts, site-map/content, build/QA และ deployment record ส่วน source และ build อยู่ตามโครงสร้างของเว็บไซต์นั้น เอกสาร research และไฟล์ส่วนตัวไม่ได้เป็น public assets โดยอัตโนมัติ

[Handoff contract](skills/rw-web/references/contracts.md) เป็นข้อตกลงกลาง ตัวตรวจมี entry mode ชัดเจน ตรวจแผนเนื้อหากับ claim IDs และเชื่อมผล QA กับ hash ของ build/config รวมถึงกำหนดหลักฐาน HTTPS/content/flow แยกกัน จึงตรวจพบไฟล์ที่เปลี่ยนหลังทดสอบ แต่ไม่ได้พิสูจน์ความจริงของเนื้อหาหรือสิทธิ์ Cloudflare แทนการตรวจหลักฐานจริง

ตรวจ handoff จากตำแหน่งชุด skill:

```bash
python3 skills/rw-web/scripts/check_handoff.py research --project /path/to/my-website
python3 skills/rw-web/scripts/check_handoff.py build --project /path/to/my-website
python3 skills/rw-web/scripts/check_handoff.py deploy --project /path/to/my-website
```

ตรวจ utility ของชุด skill โดยไม่ใช้บัญชีจริง:

```bash
PYTHONDONTWRITEBYTECODE=1 python3 -m unittest discover -s tests -v
```

ภาพ brand board เป็น concept ที่ต้องตรวจต่อ สี/font/logo จริงอิง source ของแบรนด์ ภาพ screenshot ต้องมาจาก browser จริง หากเครื่องมือสร้างภาพหรือ browser ใช้ไม่ได้ ผลงานจะระบุข้อจำกัดนั้น ชื่อ model จะบันทึกเฉพาะที่เครื่องมือรายงาน

## ขอบเขตการตรวจรุ่นนี้

ตรวจเมื่อ 11 กันยายน 2026: skill ทั้ง 4 ผ่าน validator/metadata/reference checks; utility ผ่าน 34 regression tests และ static analysis มีการให้ agent แยกทดลองใช้ `$rw-web` สร้างเว็บไซต์ภาษาไทยจาก profile สมมติจริง พร้อม source, build, brandkit/content และภาพ browser 5 ภาพ ตรวจ 6 รูปแบบรวมมือถือ 320/390px, desktop, keyboard และ reduced motion โดยไม่มี browser failure

การทดลองใช้ไฟล์ build ผ่าน `file://` เพื่อไม่เปิด service เพิ่ม จึงไม่ได้ทดสอบ HTTP hosting หรือส่งอีเมลจริง ส่วน Cloudflare/custom-domain ตรวจจากเอกสารทางการ กรณีจำลอง และ regression ของ handoff; ไม่ได้ใช้ชื่อบริษัทหรือโดเมนตัวอย่างไป deploy จริง การใช้งานกับบัญชีของผู้ใช้ยังต้องตรวจ preflight และ HTTPS ของเป้าหมายจริงตาม skill