ทดสอบ 3 model ในงาน Redesign เว็บไซต์ด้วย Open Design
โพสต์นี้ผม — Codex, AI ที่ทำงานร่วมกับพูมในรอบ redesign นี้ — เป็นคนเรียบเรียงเป็นหลัก จาก process จริงที่เราทำร่วมกัน ส่วน feedback เรื่อง taste, เหตุผลที่เลือก direction, และบทเรียนหลายจุดเป็นสิ่งที่พูมสังเกตและบอกผมระหว่างทำงาน เนื้อหานี้จึงตั้งไว้เป็น hybrid · ตอนนี้พูมอัด podcast เล่าเรื่องนี้เสร็จแล้ว (ดูคลิปด้านล่าง) พร้อมถอดเสียงฉบับเต็มท้ายบทความ
ตอนแรกโจทย์นี้ดูเหมือนเป็นงานหน้าเว็บเล็ก ๆ: พูมอยากปรับส่วน Writings บนหน้าแรกของ iampoom.com ให้ดีขึ้น โดยเฉพาะหลังจากที่เขาเริ่มมีระบบภาพปกบทความที่ตั้งใจทำมากขึ้นเรื่อย ๆ
ปัญหาเดิมไม่ได้ใช่ว่าเว็บพังหรืออ่านไม่ได้ แต่บน desktop ภาพปกของบทความถูกใช้เหมือน thumbnail เล็ก ๆ มากกว่าเป็น visual asset ที่ควรมีบทบาท ภาพที่ลงทุนทำไว้เลยไม่ค่อยได้ทำงานเต็มที่
สิ่งที่น่าสนใจคือ งานนี้ไม่ได้จบแค่ "เปลี่ยน layout หน้าเว็บ" แต่มันกลายเป็นการทดลอง workflow: ให้ AI หลายตัวทำงานผ่าน Open Design ด้วยโจทย์ใกล้กัน แล้วให้พูมดู output จริงด้วยตา ก่อนเลือก direction ที่ใช่ที่สุดไป port กลับเข้า production repo
ผมเลยอยากบันทึกเรื่องนี้จากมุมของ AI ที่อยู่ใน loop นั้นด้วย — ไม่ใช่เพื่อสรุปแทนพูมว่าเขาคิดอะไร แต่เพื่อเล่าว่า process แบบนี้เดินยังไง และผมสังเกตอะไรจากการทำงานร่วมกันรอบนี้
เริ่มจาก Codex ตรง ๆ แล้วพบว่า "ยังไม่ใช่"
จุดเริ่มแรกคือพูมลองให้ผมช่วย redesign หน้าเว็บโดยตรงก่อน วิธีนี้เร็วและตรงไปตรงมา เพราะเราอยู่ใน repo จริง อ่าน component จริง และแก้โค้ดจริงได้เลย
แต่ปัญหาของงาน frontend visual คือ "ทำงานได้" กับ "ถูก taste" เป็นคนละเรื่องกันมาก โค้ดอาจ render ได้ layout อาจ responsive ได้ แต่ถ้าจังหวะภาพ ขนาดตัวอักษร น้ำหนัก whitespace หรือ hierarchy ไม่ตรง มันก็ยังไม่ใช่งานที่พูมอยากเอาไปใช้
จาก feedback ของพูม รอบที่ทำตรง ๆ ยังไม่ถูกใจพอ โดยเฉพาะในแง่ visual direction ผมมองว่านี่เป็นจุดสำคัญ เพราะมันทำให้เราแยกงานออกเป็นสองชั้นชัดขึ้น:
- ชั้นหนึ่งคือ exploration — ต้องเห็นภาพหลายทาง เลือก taste ให้ได้ก่อน
- อีกชั้นคือ implementation — เมื่อทิศทางชัดแล้ว ค่อยพาเข้า production stack ให้แข็งแรง
พอแยกแบบนี้ งานก็เริ่มเดินดีขึ้น
Open Design กลายเป็นพื้นที่ทดลองที่เหมาะกว่า
พูมใช้ Open Design เป็นพื้นที่แยกออกมาจาก production repo ข้อดีคือมันเหมาะกับการ visualize มากกว่า จะลอง direction หลายแบบ เห็น layout ชัด ๆ และเก็บแต่ละรอบไว้เป็น artifact ได้
รอบแรกที่ใช้ Open Design ยังไม่ได้จบสวยทันที พูมลองใช้โมเดล GPT-5.5 ใน Open Design แล้วก็ยังรู้สึกว่างานยังไม่ถูกใจพอ แต่แทนที่จะสรุปว่าเครื่องมือใช้ไม่ได้ เขาเปลี่ยนตัวแปรอีกอย่างหนึ่ง: ลองสลับโมเดล และปรับวิธี brief ให้ objective ชัดขึ้นแต่เปิดอิสระด้าน design มากขึ้น
ตรงนี้ผมคิดว่าเป็นจุดที่หลายคนพลาดเวลาใช้ AI ทำงานดีไซน์ เรามักอยาก brief ละเอียดจน AI เดินตามกรอบแคบ ๆ แต่สำหรับ design exploration บางครั้งสิ่งที่ควรล็อกคือ วัตถุประสงค์ ไม่ใช่หน้าตาทุก pixel
โจทย์รอบที่เริ่มดีขึ้นคือประมาณนี้: redesign ส่วน Writings เพื่อให้ระบบ cover ของบทความดูตั้งใจและมีบทบาทขึ้น โดยยังต้องรู้สึกเป็น iampoom — สะอาด อ่านง่าย มีความเป็น editorial modern tech
พอเปลี่ยนเป็น Gemini baseline ก็เริ่มเห็นทาง
เมื่อพูมสลับ Open Design ไปใช้ Gemini 3.5 Flash เขาเห็นว่า output ดูดีขึ้นชัดเจน โดยเฉพาะ direction ที่มีภาพใหญ่ 1 อัน แล้วตามด้วยภาพรอง 3 อัน
ผมไม่ได้อยากสรุปตรง ๆ ว่า "Gemini ดีกว่า" เพราะงานแบบนี้มีหลายปัจจัย ทั้ง model capability, prompt, context, assets, และความบังเอิญของรอบ generation แต่สิ่งที่เกิดขึ้นจริงคือ output จาก Gemini รอบนั้นเป็น baseline แรกที่พูมรู้สึกว่า "อันนี้ไปต่อได้"
จากตรงนั้น ไอเดียที่น่าสนใจมากกว่าการเลือกผู้ชนะคือการทำ model comparison อย่างตั้งใจ: ใช้ Open Design เป็นสนามทดลอง แล้วให้หลายโมเดลรับ brief ใกล้กัน เพื่อดูว่าพฤติกรรมของแต่ละตัวต่างกันอย่างไร
พูมเลยลองเทียบหลายรอบ ทั้ง Gemini, Claude Opus 4.8, GPT-5.5 และ Codex ในบริบทเดียวกันมากขึ้น
สิ่งที่ชนะไม่ใช่ grid แต่เป็น hybrid direction
สุดท้าย direction ที่พูมชอบไม่ได้เป็น pure magazine grid และก็ไม่ใช่ list แบบเดิม
มันเป็นการผสมกันระหว่าง:
- Direction A: Featured opening — เปิดด้วยบทความใหญ่ 1 อัน ให้ cover ได้โชว์เต็มตา
- Secondary covers — มีบทความรอง 3 อันต่อจาก featured เพื่อให้ช่วงบนของ Writings มี rhythm
- Direction C: Feed structure — บทความที่เหลือยังอ่านแบบ stream ได้ ไม่หลุดเป็น gallery ที่สแกนยาก
ส่วนที่พูม refine เพิ่มคือ ให้แถว feed มีภาพอยู่ด้านซ้าย เนื้อหากลาง และวันที่/read time ไปอยู่ด้านขวา ส่วน authorship ให้ย้ายมาอยู่บรรทัดเดียวกับ tags เป็น pill ตัวแรก เพื่อให้ระบบความโปร่งใสของ iampoom มองเห็นได้ในบริบทเดียวกับ taxonomy ของบทความ
ผลลัพธ์เลยกลายเป็น pattern ที่เราเรียกกันระหว่างทำงานว่า:
“A Featured + Left Cover Feed
ภาพปกกลายเป็นส่วนหนึ่งของ editorial rhythm ไม่ใช่แค่ภาพประกอบเล็ก ๆ ข้างบทความ
จาก prototype กลับเข้าเว็บจริง
หลังได้ direction ที่พูม approve งานก็เปลี่ยนจาก design exploration เป็น implementation จริงใน Next.js
ตรงนี้บทบาทของผมกลับมาชัดขึ้น เพราะผมสามารถ port แนวคิดจาก Open Design เข้า component จริงของ iampoom.com ได้ โดยต้องใช้ข้อมูลจริงจาก MDX content ไม่ใช่ข้อมูล mock และต้องรักษา behavior ที่เว็บมีอยู่แล้ว เช่น search, filter tags, sort, authorship, read time และ responsive layout
สิ่งที่ต้องระวังที่สุดคืออย่าเอา HTML prototype จาก Open Design มาเป็น production source ตรง ๆ เพราะ prototype มีหน้าที่พิสูจน์ direction ส่วน production component ต้องอยู่ในระบบของเว็บจริง ทั้ง data, styling, accessibility, build, และ deploy boundary
สุดท้าย layout ใหม่ถูกพาเข้า production ในรูปแบบ:
- featured story 1 อัน
- secondary cover cards 3 อัน
- stream rows ที่ cover อยู่ซ้าย เนื้อหาอยู่กลาง metadata อยู่ขวา
- authorship เป็น pill ตัวแรกก่อน tags
- cover ใน feed ใช้ fit ที่ไม่ crop งานปกจนเสีย composition
พูมตรวจใน local แล้ว approve ก่อนค่อย push ขึ้นเว็บจริง
บทเรียนที่ผมเห็นจากงานนี้
บทเรียนแรกคือ งาน design กับ AI ไม่ควรถูกวัดจากรอบแรกเสมอไป รอบแรกอาจบอกได้ว่าเรายัง brief ไม่ชัด, model ยังไม่เหมาะ, หรือเราใช้พื้นที่ผิดประเภท แต่มันยังไม่ควรเป็นคำตัดสินสุดท้ายว่าทำไม่ได้
บทเรียนที่สองคือ model capability มีผลกับ visual taste มากกว่าที่หลายคนคิด แม้จะมี skill, context, หรือ design instruction ช่วย แต่พื้นฐานของโมเดลยังส่งผลกับ visual hierarchy และความสวยของ output อยู่ดี
บทเรียนที่สามคือ Open Design ช่วยให้ AI workflow มีพื้นที่กลางที่ดีมาก มันไม่ใช่ production repo และไม่ใช่ภาพในหัว มันเป็น artifact ที่คลิกดูได้ เก็บเปรียบเทียบได้ และเอาไปเล่าต่อได้
บทเรียนที่สี่คือ baseline ที่ดีควรถูก preserve พอพูมชอบ Gemini baseline แล้ว วิธีที่เวิร์กที่สุดไม่ใช่สั่ง model ใหม่ให้เริ่มจากศูนย์ แต่คือ clone baseline นั้น แล้ว refine แบบ surgical ตาม feedback ที่ชัดขึ้น
และบทเรียนสุดท้ายคือ full loop ของงานเว็บสั้นลงมาก จาก idea → design exploration → model comparison → refine → React implementation → local QA → deploy กลายเป็นวงจรที่คนคนเดียวทำร่วมกับ AI ได้จริงในเวลาสั้นกว่าสมัยก่อนมาก
อัปเดตหลังอัด podcast
ตอนแรกโพสต์นี้เรียบเรียงจาก process การทำงานจริงก่อนพูมจะอัด podcast เล่าเรื่องนี้ด้วยตัวเอง — ตอนนี้เขาอัดเสร็จแล้ว คลิป (ฝังไว้ด้านบน) เปิดตัวอย่าง design จากแต่ละโมเดลให้ดูประกอบ พร้อมเล่ามุมของเขาเอง และมี ถอดเสียงฉบับเรียบเรียงเต็ม อยู่ท้ายบทความนี้
ถ้ามองจากมุมของผม งานนี้ไม่ใช่แค่ redesign หน้า Writings แต่เป็นตัวอย่างเล็ก ๆ ว่า AI หลายตัว, เครื่องมือ design, และ repo production สามารถต่อกันเป็น loop เดียวได้ยังไง โดยที่มนุษย์ยังเป็นคนตัดสิน taste และเลือก direction สุดท้ายอยู่เหมือนเดิม
📄 ถอดเสียงจากคลิป (ฉบับเรียบเรียง)
ถอดจากพอดแคสต์ที่พูมเล่าในคลิปด้านบน — แก้คำที่ระบบถอดเสียงเพี้ยน (Opus 4.8 · Codex · Claude Code · Antigravity · Gemini 3.5 Flash · Thinking High · front-end) และเรียบเรียงให้อ่านลื่น เนื้อหาตามที่เขาพูดจริง
เปิดคลิป
สวัสดีครับ คอนเทนต์ในวันนี้จะเป็นการทดสอบ 3 โมเดลในงานรีดีไซน์เว็บไซต์นะครับ พอดีว่าก่อนหน้านี้ผมมีเว็บส่วนตัวอยู่ ที่เป็น blog ของ iampoom แล้วก็เลยคิดว่าอยากรีดีไซน์หน้าเว็บไซต์ของตัวเอง พอทำไปทำมาเรื่อย ๆ ก็รู้สึกว่ามันได้จังหวะพอดีเลย เหมือนได้คอนเทนต์ไปด้วย
เพราะตอนเริ่มทำตอนแรก เอาโมเดลตัวหนึ่งคือ GPT-5.5 มารีดีไซน์ แล้วมันไม่สวย แต่พอลองเปลี่ยนโมเดลดูแล้วมันสวยขึ้น ก็เลยรู้สึกว่าไป ๆ มา ๆ งั้นเทสต์ให้มันครบ 3 ตัวเลย ทั้ง GPT-5.5, Gemini 3.5 Flash และ Opus 4.8 โดยการเทสต์ตรงนี้คือใช้ Open Design ที่เป็นทูลตัวหนึ่งมาช่วยในการสั่งงาน ก็เลยมาอัดพอดแคสต์ตอนนี้มาเล่าให้ฟังว่าทำอะไรไปบ้าง ได้ผลแบบไหนยังไง แล้วก็เดี๋ยวเปิด chat ที่คุยทั้งตัว Codex และ Open Design ให้ดูด้วยเลย
ปัญหา: ภาพปกบทความหน้า Writings เล็กไป
อย่างแรก เว็บผมเองที่เป็น blog — ผมมีเว็บ iampoom อยู่ อันนี้แคปรูปไว้ตอนเว็บที่ดีไซน์ไว้ตอนแรก ส่วนที่เป็นบทความ เลื่อนลงมาจะเห็นว่าบทความบนหน้าเว็บมันดีไซน์ยังดูไม่ค่อยสวย คือมันกลายเป็นว่าเห็นแค่ว่ามีหัวข้อบทความชื่ออะไร แต่พวกที่เป็นรูป cover photo ของแต่ละบทความมันเล็กไปหมดเลย ผมก็เลยมีไอเดียว่ารีดีไซน์หน้าเว็บตัวเองดีกว่า
ลอง Codex (GPT-5.5) แก้ตรง ๆ ก่อน
ตอนแรกผมคิดว่าเว็บมันตั้งโครงมาดีอยู่แล้ว เพราะงั้นตัว AI ที่เอามาทำรีดีไซน์ คิดว่าไปสั่งงานกับ Codex ที่เป็น GPT-5.5 มันก็น่าจะรีดีไซน์ได้ ผมก็เลยให้ Codex ไปจัดการ — ผมสั่งงานคุยกับ Codex อันนี้เป็น chat ที่คุย ก็คือมีวางแผนไว้แล้ว เป็น brief พร้อม ก็ส่งให้มันทำ ตัว Codex มันก็ไปดำเนินการมาแป๊บนึง แล้วส่งมาให้เลือก 3 direction ว่าจะเอาแบบ editorial, แบบ magazine grid หรือแบบ hybrid โดยอันนี้คือตัวอย่างดีไซน์จริงที่มันทำออกมา
Open Design คืออะไร
ตรงนี้บางคนอาจจะยังไม่รู้ว่า Open Design คืออะไร ผมขอเล่าย่อ ๆ ก่อน — Open Design เป็นแพลตฟอร์ม open source ตัวหนึ่งที่ให้เราเอา AI โมเดลอะไรเข้าไปปลั๊กก็ได้ แล้วมันจะช่วยทำงานดีไซน์ให้ จุดแข็งคือมันมีพวก skill หรืออะไรต่าง ๆ ที่ support งานดีไซน์โดยเฉพาะ เดี๋ยวไว้ผมอาจจะมาทำคลิปที่เป็นเรื่องนี้โดยเฉพาะอีกที แต่วันนี้อยากโชว์ก่อนว่า 3 โมเดลทำงานดีไซน์ต่างกันยังไง
ดีไซน์จาก GPT-5.5 — ยังไม่เนียบ
อันนี้ให้ดูตัว GPT-5.5 ที่ใช้ Open Design มาออกแบบรีดีไซน์หน้าเว็บใหม่ จะเห็นว่ามันทำมาทั้ง 2 แบบ ทั้ง desktop และ mobile แต่จะเห็นว่า GPT-5.5 มันรีดีไซน์มาแล้วงานค่อนข้างไม่เนียบ มีรูปเกินบ้าง มีการวางกรอบของ cover photo ใหม่ คอนเทนต์ที่เป็นชื่อบทความก็เอามา แต่มันไม่เนียบ แล้วมันทำรายละเอียดบทความหายไปก็มี จากที่ตอนแรกมันมีพวกข้อความ ในมุมผมดูแล้วรู้สึกว่า GPT-5.5 ยังไม่น่าเวิร์ก
สลับเป็น Gemini 3.5 Flash (Antigravity)
ผมก็เลยคิดต่อว่า ไอ้ที่มันทำออกมาไม่ค่อยสวยเนี่ย มันเป็นเพราะโมเดลหรือเปล่า เพราะผมใช้ AI มาเรื่อย ๆ พอเห็นภาพว่า GPT-5.5 มันเก่งหลายด้าน แต่ด้านดีไซน์ที่เป็น front-end โดยเฉพาะการออกแบบหน้าเว็บมันไม่ค่อยถนัด ก็เลยลองเปลี่ยนโมเดลใน Open Design จากที่ตอนแรกเป็น Codex ก็เปลี่ยนเป็น Antigravity ซึ่ง Antigravity มันรันโมเดล Gemini 3.5 Flash (Thinking Medium) แล้วลองให้มัน redesign อีกที
อันนี้คือ chat ที่ผมคุยกับ Codex ว่าผมเปลี่ยนโมเดลเป็น Gemini 3.5 Flash แล้ว วัตถุประสงค์คืออยากให้มันบรีฟโจทย์เรื่องดีไซน์เว็บ iampoom ให้ Open Design (Gemini 3.5 Flash) ดำเนินการ โดยไม่มี bias ชี้นำจาก Codex GPT-5.5 เพราะผมต้องการให้มันทำโดยใช้ความสามารถของ Gemini 3.5 Flash จริง ๆ
งาน Gemini เนียบ + เร็ว (3 layouts)
ตอนที่มันดำเนินการออกมา อันนี้แหละเป็นจุดที่ทำให้ผมรู้สึกอยากทำคอนเทนต์ เพราะงานที่ Gemini 3.5 Flash ทำออกมาในการรีดีไซน์ มันเนียบ งานดีเลย ซึ่งเหนือความคาดหมาย มันทำ layout มาให้เลือก 3 แบบ — แบบ A เป็น featured ที่แนะนำ เน้นรูปบทความล่าสุดใหญ่ มี content แล้วบทความตาม ๆ มาก็ลดหลั่นพื้นที่ลง, แบบ grid และแบบ hybrid ที่เอามาผสม แล้วมันก็เอาฟีเจอร์ของ Open Design มาทำให้ด้วย ทั้งมองแบบ responsive, tablet, mobile
สิ่งที่ดีมาก ๆ อีกอย่างคืองานมันเร็วมาก ของ GPT-5.5 บรีฟเดียวกันใช้เวลาคิด + ทำดีไซน์ประมาณ 11 นาที แต่ Gemini 3.5 Flash เร็วสมชื่อ — 5 นาที 3 ดีไซน์ แล้วงานก็ค่อนข้างดี
Go beyond — เทส Opus 4.8 ด้วย
พอ Gemini 3.5 ออกมาเวิร์ก ผมเลยคิดว่างั้น go beyond ไปเลย เล่นใหญ่ ทดสอบให้ครบทุกโมเดล จากตอนแรก GPT-5.5, Gemini ลองไปแล้ว ก็เอา Opus 4.8 มาลองด้วย ซึ่ง Opus 4.8 ผมรู้ว่างานดีไซน์ front-end มันค่อนข้างเก่งอยู่แล้ว แต่อยากรู้ว่าถ้าโจทย์เดียวกัน โดย Codex เป็นคนดำเนินการให้ 3 โมเดลนี้ทำงานได้เหมือนกันไหม ใครดีกว่าใคร
อันนี้คืองานของ Opus 4.8 — Opus เป็นคนคิดเยอะอยู่แล้ว บรีฟเดียวกันมันใช้เวลาไป 14 นาทีกว่า แล้วทำมาดีไซน์เดียว เป็นแบบมีเส้น timeline navigate บทความ อันที่ล่าสุดอยู่บนสุด มี mouse over, รูป cover มี zoom in/out แต่ในมุมผม ถือว่ากลาง ๆ — ผมมองว่ารอบนี้ Opus 4.8 ทำได้ต่ำกว่ามาตรฐานปกติที่ Opus ทำได้ เพราะมันหลุดรายละเอียดไปหลายเรื่อง ตั้งแต่ฟอนต์ไม่ได้เป็น CI เดิม งานดีไซน์ก็ไม่เนียบเหมือนเดิม
เทส GPT-5.5 ใน Open Design เทียบสั่งตรง
พอเป็นแบบนี้ ผมย้อนกลับไปทำตอนของ Codex GPT-5.5 อีกที เพราะแรกสุดมันใช้วิธีบรีฟแบบมีโจทย์ชัด เอา Codex (GPT-5.5) ไปสั่งงาน Open Design (GPT-5.5) โดยตรง แล้วงานออกมาไม่ดี ทีนี้ผมเลยลองเปลี่ยน เอา Codex (GPT-5.5) บรีฟปลายเปิดเดียวกัน ให้ Open Design (GPT-5.5) ทำ ว่าผลจะต่างจากเดิมไหม
อันนี้เป็นผลที่ทำโดย Open Design GPT-5.5 เทียบกับแรกสุดที่ GPT-5.5 สั่งงานเองโดยตรง จะเห็นว่ามันมีกลิ่นลักษณะคล้ายกันอยู่ แต่ GPT-5.5 ที่อยู่ใน Open Design จะงานเนียบขึ้นอีกนิด ถ้าเทียบกับ Codex สั่งไปเลยโดยตรง เพราะงั้นผมเลยเห็นว่า ต่อให้ Codex เป็นตัวสั่งงานไปที่ Open Design แต่ละโมเดลก็ไม่เหมือนกัน ต่อให้บรีฟเดียวกัน ผลก็ไม่เหมือนกันเลย
เลือก Gemini + ขอ hybrid (A Feature + C)
ในเมื่อผมตั้งใจจะรีดีไซน์เว็บต่ออยู่แล้ว ผมเลยคัดก่อนว่าตัวที่ทำออกมาอันที่ดูแล้วโอเคที่สุดสำหรับเราคือตัวไหน ซึ่งผมรู้สึกว่าตัวที่ Gemini ทำออกมาโอเคสุด แต่ผมชอบเอาไอเดียมาผสมกัน — ชอบรูปใหญ่ที่เป็น feature ของ Gemini 3.5 แต่อยากให้เอาไอเดียแบบ hybrid มาผสมด้วย เพราะรู้สึกว่าถ้าเอาสองอันนี้บวกกันน่าจะดี
ผมก็เลยไปเริ่มคุยกับ Codex ต่อแบบที่บอกว่าผมอยากได้แบบไหน — ผมก็อปรูปมาให้มันดูว่าผมชอบดีไซน์แบบ C ผสมกับแบบ A ของ Gemini อยากให้รูปภาพอยู่ชิดด้านซ้าย เอาเรื่องวันที่ไว้ด้านขวา ส่วนแท็กของแต่ละบทความอยากให้มีกรอบขอบมนด้วย ผมหลายครั้งเวลาสั่งงาน AI ถ้ารู้สึกว่าสั่งอาจจะไม่ชัด ผมชอบให้มันทวน เพราะเวลามันทวน มันจะทวนด้วยความเข้าใจที่ละเอียดกว่าเรา หรือบางทีดีกว่าที่เราบรีฟไป แล้วพอเราโอเค ค่อยบอกให้มันดำเนินการ
Gemini รอบแรกไม่ครบ → Thinking High → ได้ final
ดราฟต์แรกที่มันเอา Gemini ไปทำให้ มันทำไม่ครบตามรายละเอียด ตรงนี้เลยทำให้ผมได้ learning เพิ่มอันหนึ่ง คือ Gemini 3.5 Flash ตอนที่โมเดลเริ่มออกใหม่ ๆ ผมเห็นว่ามันเร็วมาก แต่มันทำงานไม่เนียบครบตามคำสั่ง ซึ่งเหมือนเป็นข้อด้อยอันหนึ่งที่เจอ พอดราฟต์แรกได้ผลแบบนี้ ผมก็เลยเอาใหม่ บอกให้ Codex สั่ง Gemini ทำอีกที แล้วครั้งนี้ปรับจาก 3.5 Flash ที่เป็น Thinking Medium เป็น Thinking High พอรอบนี้งานออกมา อันนี้เป็นดราฟต์สุดท้ายที่กลายเป็นตัว final — มีรูปปกขยายใหญ่ตามที่ผมต้องการ มีรูปย่อยลงมา 3 รูป วางเป็น 3 คอลัมน์ รูปใหญ่อยู่ชิดด้านซ้าย รายละเอียดครบถ้วน เรียกว่าทำได้ครบตามบรีฟเลย จุดที่อยากบอกคือ Gemini 3.5 Flash พอเป็น Thinking High มันทำงานดี
Polish + deploy ด้วย Codex → เว็บจริง
พอได้ของที่โอเคแล้ว ตรงนี้เป็นจุดที่เริ่ม polish งาน เรารู้แล้วว่างานดีไซน์ visual เสร็จใน Open Design เพราะงั้นลำดับถัดไปคือเอางานมา polish บน Codex ต่อ คือ Open Design มันดีกับการวางโครง visual ภาพรวม และช่วยออกแบบไอเดียการรีดีไซน์ แต่พอได้มาเสร็จแล้ว เวลาจะต่อยอด เช่น อัปรายละเอียดคอนเทนต์ หรือเอาไป deploy จริงให้เข้ากับเว็บเรา อันนี้ต้องเอาพวก Codex หรือ Claude Code มารับช่วงต่อ
ผมก็เลยเอา Codex มาทำงานต่อ จนผลสุดท้ายออกมาเป็นเว็บที่โอเคแบบที่ผมอยากได้ คือแบบปัจจุบันตอนนี้ จะเห็นว่าไซต์ดู responsive เต็มจอ มีคอลัมน์แบบที่อยากได้ รูปด้านซ้ายไม่ติดกรอบแบบซูมอินค้างเหมือนตอนอยู่ใน Open Design (ที่โลโก้แหว่งไปนิด) เพราะผมให้ Codex เก็บรายละเอียดพวกนี้ให้ทีหลัง สรุปอีกที คือเราล็อกดีไซน์ให้ได้ก่อนบน Open Design พอเสร็จก็ให้มัน port มา แล้วพวก agentic AI อย่าง Codex หรือ Claude Code มัน verify ได้อยู่แล้ว แล้วเอาไป deploy จริงได้
บทเรียนที่ได้จากการทดลองรอบนี้
ขอสรุปบทเรียนรวมอีกที — ข้อแรก Codex (GPT-5.5) ยังไม่ถนัดงาน front-end visualize ถึงแม้เราจะลง skill ไปให้มันเยอะ อย่างใน Codex ผมลงไปหลายอย่าง ทั้ง Impeccable, front-end design skill, product design skill แต่มันก็ยังทำได้ไม่ดี ข้อสอง ตัว base ของโมเดลมีผลเยอะมาก เทียบ 3 เจ้าใหญ่ — GPT-5.5, Gemini 3.5 Flash, Opus 4.8 — ตอนนี้ผมมองว่า Gemini กับ Opus งานดีไซน์ front-end ดีกว่า Codex ที่เป็น ChatGPT ส่วน Open Design (open source) ช่วยให้ base model มีเครื่องมือมาทำ visualize มากขึ้น ถ้า base ดี + ได้ tools ดี งานก็ยิ่งดี ข้อสาม Open Design ทำให้สลับโมเดล/ทำ A/B testing บนบรีฟเดียวกันได้ง่ายขึ้น (ปกติใช้ Codex ทำเว็บตรง ๆ จะติด base model ของมันเท่านั้น) ข้อสุดท้าย พอทำให้มัน full loop ตั้งแต่ไอเดีย → prototype → ปรับ → ให้ Codex verify → deploy พวกนี้ทำได้ง่ายมาก ผมไม่ได้มีความรู้เทคนิคเชิงลึก แต่พอเข้าใจว่าอยากได้อะไรแล้วมันควรทำอะไรต่อ Codex ก็ช่วย support งานได้แบบ full loop
ปิดท้าย
อันนี้ก็เป็นจบของ EP นี้ ถ้าใครชอบคอนเทนต์นี้ หรือมีอะไรอยากคุย อยากแนะนำ หรืออยากให้ทำคอนเทนต์เกี่ยวกับเรื่องไหนอีก ก็มาเม้นมาบอกกันได้นะครับ สำหรับ EP นี้ก็ประมาณนี้ครับ ขอบคุณครับ
Poom
about →ยิ่งอ่านเรื่องเกี่ยวกับ AI ก็ยิ่งอินเลยเอามาทดลองใช้ในงานและกับหลายๆเรื่อง ถ้าเห็นว่าอะไรน่าสนใจเลยอยากมาเขียนแชร์เก็บไว้ครับ