หลาย ๆ คนที่เข้ามาอ่านบทความนี้น่าจะพอคุ้นเคยกับการ vibe coding มาบ้างแล้ว หรือบางคนอาจจะแค่เคยเห็นผ่าน ๆ ตา แต่คาดว่าทุกคนน่าจะคุ้นกับภาพแนวนี้ใช่ไหมครับ
ภาพที่เห็นนี้เป็นหน้าเว็บที่ถูกสร้างขึ้นโดย google antigravity ครับ โดยแอดได้ทำการ prompt ไปว่า
“สร้างเว็บ react e-commerce มีหน้า login register หน้าหลักรวมสินค้า สามารถกดดูรายละเอียดได้”
แล้วก็ได้ออกมาเป็นหน้าเว็บอย่างที่เห็นในภาพครับ
มองเผิน ๆ แล้วมันก็ดูเป็นหน้าเว็บปกติใช่ไหมครับ ออกมาสวยงามเลย แต่ถ้าเราลองดูดี ๆ ทำไมถึงรู้สึกว่าหน้าเว็บนี้มัน “ดูเป็น AI” จังเลย…
ถ้าคนที่เคยเห็นหน้าเว็บทั่วไปมาบ้าง และเคยเห็นหน้าเว็บที่ Gen ด้วย AI มาบ้าง ก็จะพอรู้ว่าสไตล์หน้าเว็บที่เป็น AI มันจะชอบใช้ขอบที่มน ๆ มีกล่องมีปุ่มที่จะเป็นขอบโค้ง ๆ จนดูกลม ตัวอย่างจากภาพนี้ครับ
จากภาพเป็นตัวอย่างรายการสินค้าในระบบ ซึ่งในภาพแอดได้เอาเมาส์ hover ตัวหูฟังเอาไว้ จะเห็นว่ามีขอบจะมีแสงสีฟ้า ๆ ออกมาจากพื้นหลังเล็กน้อย ปุ่ม Details ตั้งเป็นสี และขอบส่วนใหญ่เป็นขอบแบบโค้งมน ทำให้มันดูเป็น AI มากเกินไป และเราสามารถปรับปรุงส่วนนี้ให้ดู modern ขึ้นได้ครับ
แต่คำถามสำคัญคือ? แล้วเราจะรู้เรื่องเหล่านี้ได้อย่างไร สำหรับบางคนก็มองว่ามันสวยมันโอเคแล้ว แต่ก็ไม่แน่ใจว่ามันดีพอมั้ย ตรงจุดไหนที่ต้องปรับแก้ หรือสามารถทำให้ดีได้ขึ้นอย่างไรบ้าง นี่แหละครับจึงเป็นที่มาของเครื่องมือที่ชื่อว่า Impeccable
Impeccable คืออะไร ?
เจ้าเครื่องมือนี้เป็นตัวช่วยในการปรับหน้า UI ของเราให้ดีขึ้นด้วยการ Prompt ผ่านตัว AI ให้วิเคราะห์ code และช่วยแนะนำให้เรา เหมือนกับมี Designer มือโปรมาคอยช่วยติชมหน้าเว็บของเรานั่นเอง
จุดเด่นคือ
- ควบคุมคุณภาพ UI ทั้งเรื่อง Spacing การใช้สี font ของข้อความบนหน้าเว็บ
- ลดความเป็น AI ของหน้าเว็บ เลือกใช้ style ให้เหมาะกับสถานการณ์มากขึ้น
- มี Workflow การทำงาน เราสสามารถช้คำสั่งต่อกันจนเป็นระบบเหมือนกับ Designer มือโปร
ติดตั้ง Impeccable
การติดตั้งสามารถทำได้ง่ายมาก ๆ ซึ่งทางเว็บ official ก็สอนวิธีการติดตั้งให้เราแล้วเรียบร้อย เพียงแค่เราเลื่อนหน้าเว็บลงมา หรือสามารถเข้าไปที่ https://impeccable.style/#downloads
จากนั้นให้เราเลือกการติดตั้งตามการใช้งานได้เลย โดยเบื้องต้นถ้าเราไม่ได้ใช้เป็น Claude Code ก็สามารถเลือกคำสั่งในหัวข้อ All tools ได้เลยครับ
เปิดเครื่องมือที่หรือโปรเจกต์ที่เราพัฒนาขึ้นมา แล้ววางคำสั่งใน terminal ในที่นี้แอดจะใช้เป็น google antigravity ครับ
จากนั้นให้เราลองรันคำสั่งดูได้เลย ตัวคำสั่งจะทำการโหลดสักพัก และจะแสดงผลดังภาพตัวอย่างด้านล่าง
ตัวเลือกที่ขึ้นมาเยอะ ๆ นี้คือความสามารถต่าง ๆ ของเจ้า Impeccable ที่เราต้องการจะติดตั้งลงไปครับ ซึ่งในเบื้องต้นจะแนะนำให้ติดตั้งทั้งหมดได้เลย
วิธีการเลือกให้ใช้ปุ่มเว้นวรรค (space) ตัวกล่องสี่เหลี่ยมจะเป็นสีเขียวก็จะนับว่าเลือกแล้วเรียบร้อย จากนั้นให้เราใช้ปุ่มลูกศรเลื่อนลงและเลือกไปเรื่อย ๆ จนครบครับผม
จากนั้นให้เราเลือก Agent ที่ต้องการจะติดตั้ง และพื้นที่ที่เราต้องการจะติดตั้ง หากใครที่ไม่อยากติดตั้งซ้ำซ้อนก็เลือกเป็น Global ได้เลย แต่หากใครกลัวปวดหัวกับการใช้งาน หรืออยากติดตั้งเฉพาะจุดก็สามารถเลือกเป็น Project Scope ก็ได้
ในที่นี้แอดจะเลือกเป็น Project ครับผม
เมื่อเราติดตั้งเสร็จเรียบร้อย เราจะเห็นได้ว่ามี folder ./agents/skills ที่จะมีข้อมูล foldre หลาย ๆ อัน หากใครจำได้ชื่อ folder เหล่านี้ก็คือชื่อ function ที่เราได้ติดตั้งมาก่อนหน้านี้นั่นเองครับ เท่านี้ก็จะเสร็จสิ้นการติดตั้งเจ้า Impeccable เรียบร้อยครับผม
การใช้งาน Impeccable
วิธีการใช้งานนั้นไม่ยากเลยครับ ให้เราเปิด terminal หรือ chat ที่คุยกับ AI ปกติได้เลย จากนั้นสามารถพิมพ์ / ก็จะมีรายชื่อคำสั่งที่เราติดตั้งขึ้นมาครับผม
แล้วแต่ละคำสั่งทำอะไรได้บ้าง?
ในบทความนี้แอดจะแนะนำให้คร่าว ๆ สำหรับการใช้งานเบื้องต้น สำหรับใครที่ต้องการอ่านอย่างละเอียด ใน document ก็มีการช่วยไกด์ให้เราเรียบร้อบ สามารถไปอ่านได้ที่ https://impeccable.style/#commands-section
ซึ่งคำสั่งแรกที่แอดแนะนำที่สุดเลยก็คือ /teach-impeccable จะเป็นคำสั่งที่จะให้ AI เรียนรู้ code และโครงสร้างต่าง ๆ ภายใน project และนำไปปรับปรุงใน AI config file ทำให้เมื่อเรา prompt หรือใช้คำสั่งอื่น ๆ AI ก็จะเข้าใจ project เราได้มากขึ้นโดยไม่ต้องสั่งนั่นเองครับ
จะเห็นว่า AI ก็จะทำการ analyze code เราไปเรื่อย ๆ ซึ่งหลังจากพอ setup ทุกอย่างเรียบร้อยก็ลองตรวจ code ด้วยคำสั่ง /audit ดูครับ
หลังจากเราใช้ AI ตรวจ code แล้วก็จะเห็นว่ามีข้อสรุปมาให้ว่าเว็บของเราควรแก้อะไรที่ส่วนไหนบ้าง และที่สำคัญ AI บอกมาด้วยว่าจะใช้คำสั่งอะไรบ้างในการแก้ไข ทำให้เราไม่ต้องไปหาโค้ดหรือสั่ง AI เอง และ AI ยังสรุปให้เรามาอ่านแบบละเอียดเป็นไฟล์ที่ชื่อ Audit Report อีกด้วยครับผม
เดี๋ยวแอดจะลองแก้ตามที่ AI แนะนำสัก 1 อัน เอาที่เห็นภาพง่ายจะเป็นตัว card สินค้าที่ดูเรืองแสงเกินจำเป็น เราก็สามารถแก้ไขประเด็นนี้ด้วยการพิมพ์แค่ /quiter แล้วก็รอ AI ทำงานได้เลย
มาดูผลลัพธ์กัน…
ภาพจากหน้าเว็บเดิม
ภาพจากหน้าเว็บหลังจากแก้ไขด้วย /quiter
จะเห็นว่าโครงสร้างหรือ theme ยังคงเหมือนเดิม แต่ style เปลี่ยนไปอย่างเห็นได้ชัด ใช้สีที่ดูสะอาดตาขึ้น อ่านง่าย และมีความเป็น modern สูงมากขึ้นด้วยเช่นกัน
ในตัวอย่างที่แอดยกมาเป็นแค่การใช้งานแบบคร่าว ๆ เท่านั้น สำหรับเพื่อน ๆ ที่ต้องการนำไปใช้งานต่อนั้น ตัว document ก็มีการแอบใบ้ไว้ด้วยเช่นกัน
เราจะเห็นว่านอกจากจะมีการแสดงตัวอย่างให้ดูแล้วว่าหลังใช้คำสั่งจะเป็นอย่างไร ตัว document ได้มีการเขียนไว้เล็ก ๆ ใต้คำอธิบายด้วยว่า คำสั่งนี้เหมาะใช้คู่กับคำสั่งอะไร หรือคำสั่งนี้ควรใช้กับคำสั่งอะไรต่อไปบ้าง บอกเลยว่าเพื่อน ๆ ที่ลองนำไปใช้ ต้องติดใจเจ้า Impeccable นี้แน่นอนครับ
