Editable Design: โปสเตอร์ AI ที่แก้ได้ทุกตัวอักษร ส่งออก PowerPoint 23 ชิ้น

ต้องเตรียมอะไรบ้าง

• เอเจนต์ที่รันคำสั่งในเครื่องได้ README เขียนสำหรับ Codex เป็นหลัก แต่ตัวสกิลเป็นไฟล์ SKILL.md กับสคริปต์ธรรมดา ผมวางไว้ใน ~/.claude/skills แล้วใช้กับ Claude Code ได้
• Node.js 22.12 ขึ้นไป และ npm สำหรับสคริปต์ตรวจงานกับเรนเดอร์
• เบราว์เซอร์ตระกูล Chromium เช่น Google Chrome สกิลหาเองได้ ถ้าหาไม่เจอให้ตั้ง EDITABLE_DESIGN_BROWSER
• Python 3.10 ขึ้นไป เฉพาะถ้าจะใช้ html-to-pptx ตัวสกิลสร้าง venv แยกของมันเอง
• ตัวสร้างภาพ (ไม่บังคับ) ถ้าเอเจนต์ของเราสร้างภาพได้ สกิลจะใช้ทำภาพประกอบ ถ้าไม่ได้ สกิลจะออกแบบด้วยตัวอักษรกับรูปทรงแทน ซึ่งเหมาะกับอินโฟกราฟิกอยู่แล้ว

เรื่องค่าใช้จ่าย ตัวสกิลใช้ license Apache-2.0 ฟรี ขั้นตรวจ เรนเดอร์ และแปลง PPTX รันในเครื่องทั้งหมด สิ่งที่เสียเงินคือ token ของเอเจนต์ และค่าสร้างภาพถ้าใช้ตัวสร้างภาพที่คิดเครดิต

ติดตั้งใน 4 ขั้น

วิธีที่ง่ายที่สุดคือวางพรอมต์ในการ์ดด้านบนให้เอเจนต์ติดตั้งให้ ส่วนใครอยากรู้ว่ามันทำอะไรบ้าง ทำตามนี้ได้

ขั้นที่ 1: ติดตั้งสกิล

npx skills add https://github.com/yejy53/editable-design --skill editable-design
npx skills add https://github.com/yejy53/editable-design --skill html-to-pptx

ถ้าไม่ใช้ skills.sh README มีวิธี clone แบบ sparse ที่ดึงเฉพาะโฟลเดอร์ skills/editable-design ไม่ต้องโหลดแกลเลอรีภาพทั้ง repo จากนั้นก็อปโฟลเดอร์ไปไว้ในโฟลเดอร์สกิลของเอเจนต์

ขั้นที่ 2: รัน doctor ดูว่าขาดอะไร

bash ~/.claude/skills/editable-design/scripts/doctor.sh

รอบแรกของผมขึ้น MISSING 2 รายการ คือ puppeteer-core (ตัวคุมเบราว์เซอร์สำหรับตรวจงาน) กับชุดฟอนต์ ส่วน Node.js กับ Chrome มีอยู่แล้ว

ขั้นที่ 3: ลง dependency ของสกิล

cd ~/.claude/skills/editable-design
npm ci --prefix scripts
scripts/install-font-kit.sh
scripts/doctor.sh

ทั้งสองคำสั่งติดตั้งไว้ในโฟลเดอร์ของสกิลเอง ไม่ได้ลงทั้งเครื่อง พอรัน doctor ซ้ำจะขึ้น Core workflow ready. ตอนทดสอบผมก็อปโฟลเดอร์สกิลไปไว้ในดิสก์เครื่องก่อนแล้วค่อยลง dependency เพราะโฟลเดอร์สกิลตัวจริงของผมอยู่บน SSD ภายนอกที่เป็น exFAT

ทริกสำหรับคนเก็บโฟลเดอร์สกิลไว้ใน external SSD ที่เป็น exFAT อย่างผม: html-to-pptx จะสร้าง venv ของ Python ไว้ในโฟลเดอร์สกิลโดยปริยาย ซึ่งบน exFAT จะมีไฟล์ ._ งอกเต็มไปหมดและเจอปัญหาได้ ให้ย้าย venv ไปไว้ในดิสก์เครื่องด้วยตัวแปร HTML_TO_PPTX_VENV เช่น

export HTML_TO_PPTX_VENV="$HOME/.cache/html-to-pptx-venv"

ขั้นที่ 4: เตรียม html-to-pptx

สกิลนี้ไม่ต้องลงอะไรเอง ครั้งแรกที่สั่งแปลง สคริปต์ run.sh จะหา Python 3.10 ขึ้นไป สร้าง venv ลง playwright, python-pptx, Pillow, numpy แล้วโหลด Chromium ของ Playwright ให้ ข้อควรรู้คือขั้นนี้โหลดไฟล์รวมหลายร้อย MB ถ้าเน็ตช้าจะรอนาน และมีเรื่องที่ผมเจอเอง: Mac ของผมเป็น macOS 13 ซึ่ง Playwright เวอร์ชันล่าสุดไม่รองรับ Chromium แล้ว ขั้นโหลดเบราว์เซอร์เลยล้ม (รายละเอียดอยู่ในหัวข้อส่งออกด้านล่าง) ถ้าเครื่องใครเป็น macOS 14 ขึ้นไปน่าจะไม่เจอปัญหานี้ แต่ผมไม่ได้ลองบนเครื่องนั้น

ลองทำโปสเตอร์ใบแรก

ผมตั้งโจทย์ง่าย ๆ เป็นอินโฟกราฟิกภาษาไทยขนาด 1080×1350 สำหรับโพสต์ฟีด อธิบาย 3 ขั้นของสกิลนี้เอง และสั่งว่าไม่ใช้ภาพจาก AI ใช้ตัวอักษรกับรูปทรงล้วน เพื่อไม่ให้เสียเครดิตสร้างภาพ ในการใช้งานจริงเราแค่พิมพ์บอกเอเจนต์ประมาณนี้

ใช้ editable-design ทำโปสเตอร์อินโฟกราฟิก 1080x1350 หัวข้อ "โปสเตอร์ AI ที่ยังแก้ต่อได้"
อธิบาย 3 ขั้น ไม่ใช้ภาพจาก AI ใช้ตัวอักษรกับรูปทรงล้วน

เบื้องหลัง สกิลจะเดินตามขั้นตอนที่เขียนไว้ใน SKILL.md คือสร้างโปรเจกต์ด้วย init-poster.sh บันทึกโจทย์ลง brief.md ตั้งขนาดใน poster.json เขียน index.html แล้วตรวจก่อนเรนเดอร์ 3 ด่าน

1. check-fonts.sh เช็กว่าฟอนต์ที่เรียกมีอยู่จริงในเครื่อง ผมใช้ Sukhumvit Set กับ Thonburi ที่มากับ macOS ผ่านทั้งคู่
2. check-poster.sh เช็กสัญญาพื้นฐาน เช่น ขนาดผืนภาพตรงกับที่ประกาศ ไม่มีไฟล์ภายนอก
3. check-contract.mjs เปิดเบราว์เซอร์วัดจริง ว่าเลเยอร์ไม่ซ้อนกันผิดแบบ ข้อความทุกกล่องคลิกแก้ได้ และตำแหน่งไม่เปลี่ยนตามขนาดจอ

ผ่านแล้วจึงเรนเดอร์เป็น PNG ที่ความละเอียด 2 เท่า ได้ไฟล์ 2160×2700 สคริปต์อ่านขนาดจริงของไฟล์กลับมาเทียบกับ poster.json ด้วย ถ้าไม่ตรงจะฟ้องทันที

ต่อจากนั้นสกิลสร้าง editor.html ด้วย wire-editor.mjs โดยไม่แตะ index.html แล้วรัน verify.mjs ที่เปิดเบราว์เซอร์ลองลาก ย่อขยาย แก้ข้อความ เปลี่ยนฟอนต์ ลบเลเยอร์ และกด undo ให้อัตโนมัติ รอบสุดท้ายของผมผ่าน 69 ข้อ ไม่มีข้อไหนตก และได้ layers.html ออกมาในรอบเดียวกัน

รอบแรกผมไม่ได้ผ่านทันที ตกอยู่ 1 ข้อ คือกด Esc ระหว่างลากแล้วเลเยอร์ไม่เด้งกลับ ไล่ดูแล้วพบว่ากล่องข้อความบรรทัดเล็กด้านบนสูงแค่ 33px พอ editor ย่อจอเหลือ 80% ปุ่มจับย่อขยายด้านบนกับด้านล่างซ้อนทับกลางกล่องพอดี เมาส์เลยไปจับปุ่มแทนตัวกล่อง ผมแก้ด้วยการเพิ่มความสูงกล่องเป็น 52px ก็ผ่านหมด ข้อนี้บอกได้ว่าชุดทดสอบของมันละเอียดจริง และบอกด้วยว่าข้อความตัวเล็กมาก ๆ จะจับลากยากใน editor

แก้งานใน editor ด้วยเมาส์

เปิด editor.html ในเบราว์เซอร์ได้เลย ไม่ต้องรันเซิร์ฟเวอร์ คลิกเลือกเลเยอร์แล้วลากย้าย ใช้ปุ่มสีเขียวย่อขยาย ดับเบิลคลิกเพื่อแก้ข้อความ ด้านขวามีรายการเลเยอร์พร้อมพิกัด ปุ่มปรับขนาดตัวอักษร และตัวเลือกฟอนต์ที่ประกาศไว้ใน :root แก้เสร็จกดดาวน์โหลด HTML ที่แก้แล้วออกมาได้ งานที่ค้างไว้จะถูกเก็บเป็นฉบับร่างในเบราว์เซอร์

ปุ่มแยกเลเยอร์ในแถบบนจะเล่นแอนิเมชันกระจายชิ้นส่วนออกมาให้เห็นว่าโปสเตอร์ประกอบจากอะไรบ้าง ส่วนไฟล์ layers.html คือหน้าเดียวกันที่แยกออกมาเป็นไฟล์เดี่ยว เอาไปโชว์ลูกค้าหรือใช้ในสไลด์ได้

ส่งออกเป็น PowerPoint

ส่วนนี้ใช้สกิล html-to-pptx ตามคู่มือคำสั่งมีคำสั่งเดียว ใส่ไฟล์ HTML แล้วสกิลจะดูเองว่าเป็นหน้าโปสเตอร์ธรรมดา หน้า editor หรือหน้าแยกเลเยอร์

bash ~/.claude/skills/html-to-pptx/scripts/run.sh index.html -o poster.pptx

บนเครื่องผม คำสั่งนี้สร้าง venv และลงไลบรารี Python ครบ แต่พอถึงขั้นโหลด Chromium ของ Playwright ก็ล้มด้วยข้อความ Playwright does not support chromium on mac13-arm64 ผมเลยแก้ในสำเนาทดสอบ (ไม่ได้แก้สกิลตัวจริง) ให้ Playwright ใช้ Google Chrome ที่ลงไว้ในเครื่องแทน ด้วยการเพิ่ม channel="chrome" ตรงบรรทัดที่เปิดเบราว์เซอร์ แล้วเรียก to_pptx.py ตรง ๆ ผ่าน Python ใน venv หลังจากนั้นก็แปลงได้ทั้งหน้าโปสเตอร์และหน้าแยกเลเยอร์

ไฟล์ poster.pptx มี 1 สไลด์ขนาดเท่าสัดส่วนโปสเตอร์ (10.67×13.33 นิ้ว) ข้างในมีวัตถุ 23 ชิ้น เป็นกล่องข้อความ 14 ชิ้น รูปทรง 8 ชิ้น (การ์ด วงกลม เส้น) และภาพพื้นหลังสำรอง 1 ชิ้นที่สกิลใส่ไว้กันพิกเซลหาย กล่องข้อความทุกกล่องเก็บชื่อฟอนต์จริงไว้ (Sukhumvit Set กับ Thonburi) และแปลงขนาดจาก px เป็น pt ให้ ส่วน layers.pptx ที่แปลงจากหน้าแยกเลเยอร์ได้วัตถุ 52 ชิ้น

สกิลมีสคริปต์ render_check.py สำหรับเทียบภาพต้นฉบับกับ PPTX แต่ต้องใช้ LibreOffice ซึ่งเครื่องผมไม่มี ผมเลยใช้ Quick Look ของ macOS เรนเดอร์ไฟล์ PPTX กลับเป็นภาพแทน ผลออกมาใกล้ต้นฉบับมาก ตัวอักษรไทยครบ ตำแหน่งตรง จุดที่ต่างชัดคือวงกลมตัวเลขกลายเป็นสี่เหลี่ยมมุมมน และสีส้มอ่อนลงเล็กน้อย ผมยังไม่ได้เปิดไฟล์ใน PowerPoint จริง จึงบอกไม่ได้ว่าความต่างนี้มาจากตัวไฟล์หรือจาก Quick Look

Editable Design คืออะไร

Editable Design เป็นโปรเจกต์ของ Junyan Ye และทีม (มีเปเปอร์บน arXiv 2609.04034) ปล่อยครั้งแรกเมื่อ 4 ก.ย. 2569 ใน repo มี 3 สกิล คือ editable-design สำหรับโปสเตอร์และอินโฟกราฟิก html-to-pptx สำหรับแปลงเป็น PowerPoint และ paper-fig สำหรับแผนภาพในเปเปอร์วิชาการ ทั้งหมดใช้ license Apache-2.0 และ README บอกไว้เองว่าไม่ใช่โปรเจกต์ทางการของ OpenAI แม้จะเขียนให้ Codex เป็นหลัก

แนวคิดหลักคือแยก "ภาพ" ออกจาก "ตัวอักษร" ภาพประกอบที่ต้องใช้ AI สร้างจะถูกสร้างเป็นชิ้น ๆ แบบไม่มีตัวอักษร ส่วนหัวข้อ ราคา วันที่ ทุกอย่างจะถูกเขียนเป็น HTML ทับลงไป แต่ละชิ้นมี data-layer-id ของตัวเอง นี่คือเหตุผลที่ทั้ง editor และตัวแปลง PPTX แยกชิ้นได้

ขั้นตอนที่สกิลเดิน

1. ภาพอ้างอิง ถ้าสร้างภาพได้ จะให้ AI วาดโปสเตอร์ตัวอย่าง 1 ภาพเพื่ออ่านการจัดวาง ภาพนี้ไม่ถูกนำไปใช้จริง
2. แผนดีไซน์ ตัดสินใจลำดับความสำคัญ สี ฟอนต์ และว่าจะใช้ภาพแบบไหน เช่น ภาพพื้นหลังเต็ม ภาพเป็นช่อง หรือตัวอักษรกับรูปทรงล้วน
3. สร้างภาพประกอบ ทีละชิ้น ห้ามมีตัวอักษรในภาพ
4. เขียน HTML แล้วตรวจ ฟอนต์ สัญญาโปสเตอร์ และการคลิกแก้ได้
5. เรนเดอร์และอ่านภาพ SKILL.md สั่งให้เอเจนต์อ่านทุกบรรทัดบนภาพจริง เพราะการตรวจ DOM มองไม่เห็นตัวหนังสือที่ถูกตัดหรือโดนบัง
6. editor, layers และ Design Replay Replay เป็นหน้าเว็บที่เล่าย้อนว่าโจทย์คืออะไร ใช้พรอมต์อะไร ผ่านการตรวจอะไรมาบ้าง

กติกาที่ผมชอบที่สุดคือเรื่องข้อเท็จจริง SKILL.md สั่งว่าสิ่งเดียวที่ต้องถามผู้ใช้คือข้อเท็จจริง เช่น ราคา วันที่ สถานที่ ชื่อแบรนด์ ถ้าไม่รู้ให้เว้นไว้ ห้ามแต่งเอง ส่วนเรื่องดีไซน์ให้เอเจนต์ตัดสินใจเองในฐานะนักออกแบบ ไม่ต้องทำมาให้เลือกหลายแบบ

จุดเด่น

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

ข้อจำกัดที่ควรรู้ก่อนใช้

• ไม่มีฟอนต์ไทยในชุดฟอนต์ของสกิล ชุดฟอนต์ 10 ตระกูลที่มากับสกิลเน้นละตินกับจีน งานภาษาไทยต้องใช้ฟอนต์ในเครื่อง ถ้าจะแปลงเป็น PPTX แล้วส่งให้คนอื่น เครื่องปลายทางต้องมีฟอนต์เดียวกัน ไม่งั้น PowerPoint จะเปลี่ยนฟอนต์ให้
• หน้า editor และข้อความตรวจเป็นภาษาจีน ใช้งานได้แต่ต้องเดาจากไอคอนหรือแปลเอา
• ภาพประกอบต้องมีตัวสร้างภาพ ถ้าเอเจนต์สร้างภาพไม่ได้ จะเหลือแต่ดีไซน์แบบตัวอักษรกับรูปทรง ซึ่งพองานอินโฟกราฟิกได้ แต่งานที่ต้องมีภาพสินค้าหรือภาพบรรยากาศทำไม่ได้ ในบทความนี้ผมไม่ได้ทดสอบขั้นสร้างภาพ
• PowerPoint ไม่ได้ตรง 100% SKILL.md ของ html-to-pptx บอกไว้เองว่าน้ำหนักฟอนต์เหลือแค่ปกติกับตัวหนา เส้นฐานตัวอักษรคลาดเล็กน้อย และ gradient บางแบบกลายเป็นรูปภาพแทนสีพื้น
• ข้อความตัวเล็กจับลากยาก อย่างที่ผมเจอ กล่องที่สูงไม่ถึงราว 50px ปุ่มย่อขยายจะบังตัวกล่อง
• ตั้งค่าครั้งแรกโหลดของเยอะ ทั้ง puppeteer, ชุดฟอนต์, Python venv และ Chromium ของ Playwright ถ้าเน็ตช้าจะใช้เวลานาน
• โปรเจกต์ยังใหม่มาก ปล่อยได้ไม่ถึงเดือน มี release เดียว และ skills.sh ยังขึ้น Socket เป็น WARN ควรอ่านโค้ดก่อนใช้กับงานลูกค้า

คำถามที่พบบ่อย

Editable Design ใช้ฟรีไหม

ตัวสกิลฟรี license Apache-2.0 ค่าใช้จ่ายมีแค่ token ของเอเจนต์ที่เราใช้ และค่าสร้างภาพถ้าให้ AI สร้างภาพประกอบ ถ้าทำอินโฟกราฟิกที่ใช้ตัวอักษรกับรูปทรงล้วนแบบที่ผมทดสอบ ไม่มีค่าสร้างภาพเลย

ใช้กับ Claude Code ได้ไหม ในเมื่อ README เขียนให้ Codex

ได้ ผมวางทั้งสองสกิลไว้ใน ~/.claude/skills และรันสคริปต์ทุกตัวได้ตามปกติ ส่วนที่ขึ้นกับเอเจนต์คือขั้นสร้างภาพ ซึ่งแต่ละเอเจนต์มีเครื่องมือไม่เหมือนกัน

ทำโปสเตอร์ภาษาไทยได้ไหม

ได้ และเป็นจุดที่ได้ประโยชน์ที่สุด เพราะตัวอักษรเป็นข้อความจริง ผมใช้ Sukhumvit Set กับ Thonburi ที่มากับ macOS ผ่านการตรวจฟอนต์ของสกิลทั้งคู่ ถ้าใช้ฟอนต์อื่น ต้องมีในเครื่องหรือแนบไฟล์ฟอนต์ไว้ในโปรเจกต์

ไฟล์ PowerPoint ที่ได้แก้ได้แค่ไหน

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

เหมาะกับงานแบบไหน

งานที่ต้องแก้ข้อความบ่อยหรือต้องส่งต่อให้คนอื่นแก้ เช่น อินโฟกราฟิก โพสต์โปรโมชัน เมนู ปก และแบนเนอร์ ไม่เหมาะกับงานเว็บไซต์ สไลด์หลายหน้า หรือวิดีโอ ซึ่ง SKILL.md ระบุไว้เองว่าไม่ใช่ขอบเขตของสกิลนี้