scrollcraft คือปลั๊กอินสำหรับ Claude Code เครื่องมือสั่ง AI เขียนโค้ดผ่าน Terminal ที่สร้างขึ้นมาเพื่อแก้ปัญหาหน้าเว็บจาก AI ที่มักออกมาหน้าตาซ้ำซากจำเจ ตัวสกิลมาพร้อมกับ "รายการสิ่งที่ห้ามสร้างเด็ดขาด" ไว้อย่างชัดเจน เช่น การ์ดฟีเจอร์ที่เรียงเป็นตารางเท่ากันเป๊ะ, ตัวเลขวิ่งนับยอด, ลูกศรชี้ชวนให้เลื่อนลง, ตัวอักษรไล่เฉดสี, ตัวเลขสถิติหรือหน้าแดชบอร์ดปลอมที่กุขึ้นมาเอง, โทนสีกราเดียนต์ม่วงที่เว็บ AI ชอบใช้ ไปจนถึงคู่สีครีมทองเหลืองแบบงานคราฟต์ที่ใช้กันจนเกร่อ หรือแม้แต่การใส่ขีดคั่นประโยคยาวๆ อย่าง em dash ในข้อความ ก็ห้ามไว้เช่นกัน

สาเหตุที่ต้องตั้งกฎห้ามรัดกุมขนาดนี้ เพราะปัญหาของเว็บที่ AI สร้างไม่ได้อยู่ที่โค้ดทำงานไม่ได้ แต่อยู่ที่สร้างเสร็จแล้วหน้าตาเหมือนกันไปหมด scrollcraft จึงเลือกแก้ปัญหาอย่างตรงไปตรงมา ด้วยการบังคับให้งานชิ้นใหม่ต้องมีดีไซน์ต่างจากงานเก่าที่เคยทำ กำหนดมาตรฐานการออกแบบเป็นตัวเลขที่ต่อรองไม่ได้ และปิดท้ายด้วยการเปิดเบราว์เซอร์จำลองขึ้นมาตรวจเช็กหน้าเว็บจริงในทุกระยะการเลื่อนหน้าจอ

ปัญหาของเว็บที่สร้างด้วย AI มักพังใน 2 รูปแบบ

รูปแบบแรกคือ เรียบร้อยแต่ลืมง่าย ทุกอย่างถูกต้องตามโครงสร้างมาตรฐาน แต่เลื่อนดูจนจบแล้วกลับไม่มีจุดเด่นอะไรให้จดจำได้เลย

รูปแบบที่สองคือ หวือหวาแต่อ่านไม่ออก ใส่เอฟเฟกต์ภาพเคลื่อนไหวตอนเลื่อนหน้าจอมาเต็มที่ แต่ค่าคอนทราสต์หรือความต่างของสีระหว่างตัวหนังสือกับพื้นหลังกลับต่ำเพียง 2.1:1 จนกลืนกันและอ่านยาก หัวข้อใหญ่เปิดบนมือถือแล้วตัดตกยาวถึง 6 บรรทัด และโครงสร้างเนื้อหาก็ยังแบ่งเป็น 6 ส่วนเดิมๆ เหมือนหน้าเว็บ AI ทั่วไป

สิ่งที่ทำให้ scrollcraft แตกต่างออกไป คือไม่ได้มองว่า "ลูกเล่นตอนเลื่อนหน้าจอ" กับ "งานออกแบบ UI" เป็นงานสองชิ้นที่แยกกัน แต่ถือเป็นงานชิ้นเดียวกัน หน้าเว็บที่เคลื่อนไหวสวยแต่อ่านยากจึงถือว่าไม่ผ่าน พอๆ กับหน้าที่อ่านง่ายแต่จืดชืดไร้เอกลักษณ์ ประเด็นเรื่องเว็บที่ดูปุ๊บก็รู้ว่า AI ทำ เราเคยพูดถึงไว้แล้วในบทความ Hallmark สกิลออกแบบที่ตรวจ 57 ข้อไม่ให้เว็บดูเหมือนงาน AI เพียงแต่ Hallmark จะเน้นตรวจเช็กหลังจากสร้างเว็บเสร็จแล้ว ส่วน scrollcraft จะคุมเข้มตั้งแต่ก่อนเริ่มเขียนโค้ด

เปลี่ยนการ Scroll ให้เป็น Timeline สำหรับเล่าเรื่อง

คำว่า Scroll-driven หรือเทคนิคที่ให้การเลื่อนหน้าจอเป็นตัวขับเคลื่อนเนื้อหา ไม่ได้หมายถึงแค่การใส่แอนิเมชันดุ๊กดิ๊กเวลาเลื่อนหน้าจอ แต่หมายถึงการใช้ระยะเลื่อนหน้าจอเป็นเสมือนเส้นเวลา (Timeline) คอยควบคุมการแสดงผลของหน้าเว็บทั้งหน้า คล้ายกับแถบเลื่อนเวลาในโปรแกรมตัดต่อวิดีโอ โดยให้ผู้ใช้ควบคุมจังหวะความเร็วด้วยตัวเองผ่านการเลื่อนเมาส์หรือปัดหน้าจอ

สิ่งที่เกิดขึ้นบน Timeline นี้จะต่อเนื่องและสอดคล้องกัน เช่น:

• วิดีโอจะเล่นทีละเฟรมตามจังหวะที่ผู้ใช้เลื่อนหน้าจอ แทนที่จะเล่นอัตโนมัติ
• บางช่วง หน้าจอจะตรึงอยู่กับที่ เพื่อให้เนื้อหาและภาพเคลื่อนไหวของช่วงนั้นแสดงจนจบก่อนเลื่อนต่อ
• เนื้อหาบางส่วนจัดวางเป็นแนวนอน ให้เลื่อนสไลด์ไปด้านข้างแทนที่จะเลื่อนลง
• หัวข้อใหญ่จะค่อยๆ เรียงตัวเป็นข้อความทีละบรรทัดตามระยะการเลื่อน
• สีพื้นหลังทั้งหน้าจะค่อยๆ เปลี่ยนไปตามระยะที่เราเลื่อนลงมา
• องค์ประกอบบางชิ้นสามารถขยับตามตำแหน่งเมาส์ได้ แม้ผู้ใช้จะไม่ได้เลื่อนหน้าจอก็ตาม

เมื่อการเลื่อนหน้าจอกลายเป็นเครื่องมือเล่าเรื่องที่มีลำดับชัดเจนเหมือนหนังสั้น จังหวะการนำเสนอจึงสำคัญมาก เพราะถ้าทุกเว็บเล่าเรื่องด้วยจังหวะซ้ำๆ เหมือนกันหมด คนดูก็จะจำผลงานชิ้นไหนไม่ได้เลย

กฎเหล็กที่ป้องกันไม่ให้หน้าเว็บออกมาซ้ำกัน

หัวใจสำคัญของสกิลนี้คือ Page Grammar 8 รูปแบบ ซึ่งเป็นกฎกำหนดโครงสร้างหน้าเว็บที่ห้ามใช้ปะปนกัน แต่ละรูปแบบกำหนดว่าหน้านั้นจะเล่าเรื่องอย่างไร ดังนี้:

1. การเล่าเรื่องแบบช็อตเดียวยาวจนจบ หรือ One continuous shot
2. หน้าสไตล์นิตยสารที่แบ่งเนื้อหาเป็นบทๆ หรือ Magazine
3. พื้นผิวที่เคลื่อนไหวตลอดเวลา หรือ Kinetic surface
4. โลกใบเดียวที่เดินทางต่อเนื่องทั้งหน้า หรือ Continuous single-world
5. โปสเตอร์ที่เน้นตัวอักษรขนาดใหญ่เป็นหลัก หรือ Typographic poster
6. แกลเลอรีโชว์ผลงาน หรือ Gallery
7. เวทีแบ่งครึ่งหน้าจอ หรือ Split-screen stage
8. การตัดสลับภาพเป็นจังหวะ หรือ Rhythmic montage

สิ่งที่ทำให้ระบบนี้ได้ผลจริงไม่ใช่แค่จำนวนรูปแบบ แต่เพราะแต่ละแบบมี "กฎที่ขัดแย้งกันอย่างสิ้นเชิง" เช่น รูปแบบโลกใบเดียวจะห้ามมีเส้นแบ่งส่วนเนื้อหาเด็ดขาด ขณะที่รูปแบบนิตยสารจะเน้นการใช้เส้นแบ่งบทเป็นหลัก เมื่อกติกาตั้งต้นล็อกไว้ไม่เหมือนกัน งานแต่ละชิ้นจึงไม่มีทางค่อยๆ กลายมาหน้าตาคล้ายกันได้เลย

ภาพตัวอย่าง 3 ชิ้นด้านล่างนี้ มาจากผลงานจริงที่สร้างด้วยสกิลและชุดโค้ดแกนหลักอย่าง Engine ตัวเดียวกันทั้งหมด แต่ได้ผลลัพธ์แตกต่างกันชัดเจน:

นอกจากโครงสร้างหน้าเว็บแล้ว scrollcraft ยังมีกฎเหล็กอีก 2 ข้อ:

1. ต้องมีลูกเล่นเฉพาะตัวอย่าง Signature Move: ทุกเว็บจะต้องคิดลูกเล่นประจำตัวที่ไม่ซ้ำกับเว็บอื่นขึ้นมา 1 อย่าง โดยผู้พัฒนาเน้นย้ำไว้ชัดเจนว่า การเอาเอฟเฟกต์ไฟสปอตไลต์อันเดิมมาเปลี่ยนสี ไม่ถือเป็นลูกเล่นใหม่
2. กฎความต่าง 4 ใน 6 ด้าน: งานใหม่ที่สร้างขึ้นจะต้องแตกต่างจากงานเก่าทุกชิ้นที่เคยทำมาอย่างน้อย 4 ด้าน จากทั้งหมด 6 ด้าน ได้แก่:
   • โครงสร้างหน้าเว็บ Page Grammar
   • ระบบนำทาง
   • ส่วนหัวเปิดหน้าเว็บ Hero Section
   • โครงสร้างการเล่าเรื่องในแต่ละองก์
   • ส่วนปิดท้ายหน้าเว็บ
   • ลูกเล่นเฉพาะตัว

หากงานใหม่ที่วางแผนไว้สอบไม่ผ่านเกณฑ์ 4 ใน 6 ข้อนี้ สิ่งที่ต้องปรับแก้คือแนวคิดของงานใหม่ ไม่ใช่การไปแอบแก้ประวัติงานเก่า โดยระบบจะบันทึกข้อมูลดีไซน์ของงานที่เคยทำไว้ในไฟล์ FINGERPRINTS.md ในโฟลเดอร์โปรเจกต์ ซึ่งจะเริ่มต้นจากไฟล์ว่างเปล่าในงานชิ้นแรก แล้วจะบันทึกประวัติสะสมไปเรื่อยๆ เมื่อสร้างงานชิ้นถัดไป เราสามารถดูตัวอย่างได้ในไฟล์ EXAMPLES.md บน GitHub ซึ่งรวบรวมตัวอย่างงาน 12 แบบเพื่อแสดงให้เห็นว่ารูปแบบไหนมีโอกาสซ้ำกันได้ง่าย

มาตรฐานงานดีไซน์ที่กำหนดเป็นตัวเลขชัดเจน

การทำเว็บให้ไม่ซ้ำเดิมเพียงอย่างเดียวยังไม่พอ เพราะถ้าแตกต่างอย่างไร้หลักการ งานก็จะออกมาเละ scrollcraft จึงล็อกมาตรฐานการออกแบบพื้นฐานไว้เป็นตัวเลขที่ชัดเจน:

• งานจัดวางตัวอักษร Typography: ใช้ฟอนต์ได้ไม่เกิน 2 ตระกูล ยิ่งตัวอักษรมีขนาดใหญ่ ระยะช่องไฟระหว่างตัวอักษรยิ่งต้องบีบให้กระชับขึ้น ความยาวของข้อความต่อบรรทัดต้องอยู่ระหว่าง 45–75 ตัวอักษร หากบรรทัดยาวขึ้น ระยะห่างระหว่างบรรทัดต้องปรับให้สมดุล และหากเป็นข้อความสีสว่างบนพื้นหลังสีมืด ต้องปรับชดเชยการแสดงผลถึง 3 ด้าน
• ระยะห่างและช่องไฟ: ใช้ 4px Grid เป็นระบบตารางจัดวางที่ยึดระยะ 4 พิกเซลเป็นฐาน กฎสำคัญคือช่องว่างเหนือหัวข้อต้องกว้างกว่าช่องว่างใต้หัวข้อเสมอ เพื่อให้หัวข้ออยู่ใกล้กับเนื้อหาที่ตามมามากกว่าส่วนก่อนหน้า ส่วนระยะห่างของแต่ละส่วนต้องยืดหดตามขนาดหน้าจอแบบ Responsive เพื่อไม่ให้หน้าจอมือถือมีช่องว่างกว้างเกินไปเหมือนบนจอคอมพิวเตอร์
• การใช้สีและมิติความลึก: กำหนดบทบาทสีหลัก 6 สี บวกกับสีเน้น Accent อีก 1 สี โดยข้อความรองต้องผสมโทนสีของธีมเว็บลงไปด้วย ไม่ใช่แค่สีเทาล้วน และห้ามใช้สีดำสนิท (#000000) ส่วนการสร้างมิติความลึกไม่ได้พึ่งพาแค่เงาทอด Drop Shadow เท่านั้น แต่มี 5 เทคนิคให้เลือกใช้ ได้แก่ เงาเยื้องข้าง Offset Shadow, แสงสะท้อนขอบ Rim Light, การย่อขนาดและเบลอองค์ประกอบที่อยู่ไกล, การวางเลเยอร์ซ้อนทับกัน และการใส่พื้นผิวเกรนบางๆ

นอกจากกฎเชิงเทคนิคแล้ว ยังมีกฎด้านอารมณ์ความรู้สึกอีก 2 ข้อ:

1. กำหนดเส้นทางอารมณ์ Emotional Arc: ก่อนจะเริ่มทำเนื้อหาในแต่ละองก์ ต้องเขียนไว้อย่างน้อย 1 บรรทัดว่า ส่วนนี้ต้องการให้ผู้ใช้รู้สึกอย่างไร และใช้องค์ประกอบอะไรบนหน้าจอเพื่อสร้างความรู้สึกนั้น หากมี 2 องก์ที่อยู่ติดกันให้ความรู้สึกแบบเดียวกัน แสดงว่ามีองก์หนึ่งที่ซ้ำซ้อนและไม่จำเป็น
2. ทั้งหน้ามีจุดพีคสูงสุดได้เพียงจุดเดียว: เพื่อไม่ให้หน้าเว็บดูเยอะจนคนดูจำอะไรไม่ได้ จุดพีคเพียงจุดเดียวของหน้าเว็บจะได้ทั้งงบทำงานดีไซน์ไปเต็มๆ ช่วงเว้นจังหวะที่เงียบสงบก่อนหน้าเพื่อให้คนดูตั้งตัว และระยะการเลื่อนหน้าจอที่ยาวที่สุดของหน้า

เปิด Headless Browser ตรวจหน้าเว็บจริงตลอดการ Scroll

ฟีเจอร์ที่น่าสนใจที่สุดของ scrollcraft คือขั้นตอนสุดท้ายหลังสร้างหน้าเว็บเสร็จ โดยระบบจะเปิดเบราว์เซอร์ไร้หน้าต่างอย่าง Headless Browser แล้วสั่งจำลองการเลื่อนหน้าจอไปทีละตำแหน่งอย่างละเอียด พร้อมรอให้หัวอ่านวิดีโอเข้าที่ก่อนจับภาพหน้าจอ จากนั้นจะตรวจสอบและรายงานผล 4 เรื่องสำคัญ:

1. ช่วงที่เลื่อนแล้วไม่มีอะไรเปลี่ยน หรือ Dead Scroll: ตรวจหาช่วงที่ผู้ใช้เลื่อนหน้าจอแล้วไม่มีการเปลี่ยนแปลงใดๆ เกิดขึ้นบนจอ
2. ข้อความจางค้าง หรือ Incomplete Fade: ตรวจหาข้อความที่แอนิเมชันค้างอยู่ในสภาพจางๆ และไม่เคยชัดเต็มที่ จนผู้ใช้อ่านไม่ได้
3. ค่าคอนทราสต์ หรือ Contrast: ตรวจสอบอย่างละเอียดจากภาพที่เรนเดอร์ออกมาจริง ไม่ใช่แค่วัดจากโค้ดสี CSS โดยจะตรวจทีละบรรทัด แล้วเทียบกับเฟรมวิดีโอที่สว่างที่สุดขณะอยู่ด้านหลังข้อความนั้น เพื่อให้แน่ใจว่าตัวหนังสือสีสว่างบนพื้นมืด หรือตัวหนังสือสีมืดบนพื้นสว่าง อ่านได้ชัดเจนจริง
4. วิดีโอค้างอยู่ที่ภาพปก หรือ Stuck Poster Frame: ตรวจหาวิดีโอที่ค้างอยู่แค่ภาพนิ่งหน้าปกโปสเตอร์ โดยตัววิดีโอจริงยังไม่โหลดหรือเล่นตามการเลื่อนหน้าจอ ภาพที่เห็นจึงเหมือนวิดีโอหยุดอยู่พอดีจนคนทั่วไปมองไม่ออก

เมื่อตรวจสอบเสร็จ ระบบจะสร้างแผ่นรวมภาพตัวอย่าง Contact Sheet ที่รวมภาพบันทึกหน้าจอทุกจุดของการเลื่อน เพื่อให้เราเปิดไล่ตรวจดูความเรียบร้อยได้ด้วยตัวเอง โดยผู้พัฒนาโปรเจกต์ระบุข้อจำกัดของการตรวจงานอัตโนมัตินี้ไว้ว่า:

วิธีติดตั้งและเตรียมความพร้อมก่อนเริ่มใช้งาน

ติดตั้งสกิลผ่าน Claude Code ได้ด้วยคำสั่ง 2 บรรทัดดังนี้:

/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design

คำสั่งแรกคือเพิ่ม Repository เข้าไปในรายการปลั๊กอิน ส่วนคำสั่งที่สองคือติดตั้งปลั๊กอิน nateherk-design ลงเครื่อง หากติดตั้งเสร็จแล้วระบบแจ้งเตือนให้รัน /reload-plugins ก็พิมพ์รันคำสั่งตามที่แจ้งได้เลย จากนั้นสามารถเรียกใช้งานได้โดยพิมพ์คำสั่ง /nateherk-design:scrollcraft ตรงๆ หรือจะพิมพ์บอกความต้องการว่าอยากได้หน้าเว็บแบบไหนก็ได้ทันที ส่วนใครที่ต้องการแก้ไขตัวสกิลเองโดยตรงโดยไม่ต้องติดตั้ง สามารถเปิด Claude Code พร้อมใส่พารามิเตอร์ claude --plugin-dir ./plugins/nateherk-design ได้เลย

ก่อนจะเริ่มสั่งให้สร้างหน้าเว็บจริง มีสคริปต์ 2 ตัวที่ต้องรันตามลำดับเสมอ:

node scripts/doctor.mjs
node scripts/workspace.mjs --ensure

• node scripts/doctor.mjs: ใช้ตรวจเช็กความพร้อมของระบบและ Dependencies ในเครื่องว่าขาดอะไรบ้าง
• node scripts/workspace.mjs --ensure: ใช้สร้างโฟลเดอร์สำหรับทำงานและเตรียมไฟล์ประวัติ FINGERPRINTS.md เปล่าไว้ให้พร้อมใช้งาน

สิ่งที่เครื่องต้องมี ได้แก่:

• Node.js สำหรับรันโค้ด: เวอร์ชัน 18 ขึ้นไป
• โปรแกรมจัดการวิดีโอ FFmpeg เวอร์ชันเต็ม: จำเป็นสำหรับแปลงไฟล์วิดีโอเป็นรูปแบบที่ควบคุมการเล่นทีละเฟรมตามการเลื่อนหน้าจอได้
• playwright-core และ Chrome สำหรับควบคุมเบราว์เซอร์อัตโนมัติ: ใช้รันเบราว์เซอร์เพื่อตรวจสอบหน้าเว็บ โดยติดตั้งได้ด้วยคำสั่ง npm i playwright-core ในโฟลเดอร์โปรเจกต์

ส่วน API Key ชื่อ KIE_AI_API_KEY เป็นตัวเลือกเสริมที่ต้องใส่เฉพาะตอนที่ต้องการให้ AI ช่วยสร้างภาพและวิดีโอใหม่เท่านั้น หากให้ AI สร้างวิดีโอก็จะมีค่าใช้จ่าย โดยผู้พัฒนาระบุว่าการสร้างภาพเคลื่อนไหวแบบโลกใบเดียวต่อเนื่องกัน 10 ช่วง อาจมีค่าใช้จ่ายพอสมควร แต่ถ้าเตรียมไฟล์รูปภาพและคลิปวิดีโอไว้อยู่แล้ว ก็นำไฟล์มาใส่ได้ทันทีโดยไม่ต้องใช้ API Key และไม่มีค่าใช้จ่ายเพิ่มเติม ซึ่งตัวโปรเจกต์ก็รองรับวิธีนี้เต็มรูปแบบเช่นกัน

ข้อควรระวัง: ห้ามข้ามขั้นตอนการรัน doctor.mjs เด็ดขาด เพราะหากโปรแกรมเสริมในเครื่องไม่พร้อม ระบบมักไม่แจ้งตรงๆ ว่าขาดโปรแกรมอะไร แต่กลับแสดงข้อผิดพลาดที่ดูเหมือนเกิดจากสาเหตุอื่นระหว่างสร้างเว็บ

ข้อควรรู้และข้อจำกัดก่อนใช้งานจริง

1. พัฒนาและทดสอบระบบหลักบน Windows เป็นหลัก: แม้สคริปต์จะรองรับ Path ของ FFmpeg และ Chrome สำหรับ macOS และ Linux ไว้แล้ว แต่การพัฒนาและทดสอบจริงทำบน Windows เป็นหลัก หากระบบค้นหาตำแหน่งโปรแกรมในเครื่องไม่พบ สามารถกำหนด Path ได้เองผ่าน SCROLLCRAFT_FFMPEG และ SCROLLCRAFT_CHROME
2. AI มีจุดยืนและหลักการดีไซน์ของตัวเองอย่างชัดเจน: scrollcraft ปฏิเสธแพทเทิร์นและชุดสีสไตล์เว็บ AI ทั่วไปอย่างเด็ดขาด รวมถึงจะโต้แย้งหากพบว่าหน้าเว็บมีจุดเด่นหลายจุดจนเกินไป ดังนั้น หากใครต้องการสร้างเว็บทรงมาตรฐานทั่วไป scrollcraft อาจไม่ใช่เครื่องมือที่เหมาะกับงานนั้น
3. ห้ามแก้ไขไฟล์ Engine หลัก: ระบบทำงานผ่านไฟล์ scrollcraft.js และ CSS ประจำตัว ผู้พัฒนาห้ามแก้ไขไฟล์เหล่านี้ในแต่ละโปรเจกต์ ผู้ใช้ปรับแต่งได้เฉพาะชุดสีหลัก 6 สี, ฟอนต์ 2 ตระกูล, โครงสร้าง HTML และการผูกลูกเล่นเฉพาะตัวเข้ากับตัวแปรกำหนดสไตล์ CSS Variable --sc-p ที่ Engine กำหนดไว้ ที่ต้องล็อกไว้แบบนี้เพราะการปล่อยให้ปรับแต่งหน้าเว็บได้อย่างอิสระจากไฟล์ตั้งค่า Config ก้อนเดียว มักเป็นจุดเริ่มต้นที่ทำให้ทุกเว็บกลับมาหน้าตาเหมือนกันหมด
4. CHANGELOG ที่รวบรวมบทเรียนจากงานจริง: ไฟล์ที่น่าอ่านที่สุดในโปรเจกต์คือ CHANGELOG.md เพราะไม่ได้บันทึกแค่ว่าอัปเดตเวอร์ชันอะไร แต่บันทึกว่าแต่ละงานเคยพังตรงจุดไหน และกลายมาเป็นกฎข้อบังคับข้อใดในสกิลปัจจุบัน เพราะกฎการออกแบบที่ใช้ได้จริงมักไม่ได้เกิดจากการคิดทฤษฎีขึ้นมาลอยๆ แต่เกิดจากการแก้ปัญหาที่เคยเกิดขึ้นหน้างานจริง

ที่มา: บทความ scrollcraft — a Claude Code skill for premium scroll-driven websites จาก nateherkai บน GitHub