จาก Claude Design สู่ WordPress: วิธีแปลงดีไซน์เป็นธีม

Claude Design ให้ผลลัพธ์แบบไหนกับคุณ

Claude สร้างผลลัพธ์ได้สองแบบ และแต่ละแบบใช้ทางต่างกัน ตรวจก่อนเริ่มว่าคุณมีแบบไหน เพราะเป็นตัวกำหนดว่าการแปลงจะใช้เวลานานเท่าไร

สิ่งที่ Claude ให้คุณ	คืออะไร	ทางที่ใช้
อาร์ทิแฟกต์ HTML	ไฟล์ .html ที่สมบูรณ์ในตัว โค้ด สไตล์ และสคริปต์อยู่ข้างในทั้งหมด	บทความนี้ เป็น HTML แบบแบนอยู่แล้ว ตรงกับอินพุตที่ตัวแปลงต้องการพอดี
อาร์ทิแฟกต์ React	คอมโพเนนต์ หน้าเว็บจะปรากฏหลัง JavaScript ทำงานแล้วเท่านั้น และ HTML รอบ ๆ เป็น element ว่างที่แอปเมานต์เข้าไป	คู่มือ Lovable อินพุตแบบเดียวกัน ขั้นตอนเพิ่มแบบเดียวกัน

ถ้าไม่แน่ใจ ให้เปิดไฟล์แล้วดูข้างใน <body> ถ้าเห็นหัวข้อและย่อหน้าของคุณอยู่ตรงนั้น คุณมีอาร์ทิแฟกต์ HTML และมาถูกที่แล้ว ถ้า body มีแค่ <div> ว่างหนึ่งตัวกับแท็ก script คุณมีอีกแบบหนึ่ง

ส่งออกจาก Claude Design ลงโฟลเดอร์พร้อมรูปภาพ

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

ดังนั้นให้ส่งออกดีไซน์จาก Claude (ดาวน์โหลดอาร์ทิแฟกต์) สร้างโฟลเดอร์ แล้วบันทึกไฟล์ไว้ในนั้นในชื่อ index.html ถ้าดีไซน์ลิงก์ไปยังรูปภาพที่ไม่ได้อยู่ในไฟล์ ให้วางรูปไว้ข้าง ๆ ในตำแหน่งสัมพัทธ์เดียวกับที่โค้ดคาดไว้

mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images        # ถ้าดีไซน์ใช้รูปภาพ

หน้าเดียวหรือหลายหน้า

อาร์ทิแฟกต์หนึ่งตัวคือหนึ่งหน้า และเว็บหน้าเดียวแปลงได้โดยไม่มีปัญหา หน้านั้นจะกลายเป็นหน้าแรกของธีม ถ้าคุณอยากได้เว็บที่มีหน้าเกี่ยวกับเราและหน้าติดต่อ ให้ขอหน้าเหล่านั้นจาก Claude ด้วย แล้วบันทึกแต่ละหน้าเป็นไฟล์ .html ของตัวเองในโฟลเดอร์เดียวกัน ชื่อไฟล์สำคัญ การวิเคราะห์อ่านชื่อไฟล์ และเข้าใจไฟล์ชื่อ blog.html หรือ about.html จากชื่อของมัน

ถ้าคุณมีไม่เกินห้าไฟล์ การแปลงทั้งหมดอยู่ในแพ็กเกจฟรี

คอมพิวเตอร์ต้องมีอะไรเพื่อแปลง Claude Design เป็น WordPress

ทางที่สั้นกว่าก็รันบนเครื่องของคุณ และความต้องการของระบบไม่ได้ลดลง เบราว์เซอร์และ WordPress ชั่วคราวมีไว้ตรวจผลลัพธ์ ไม่ใช่สร้างผลลัพธ์

• Node 20 ขึ้นไป และ Python 3 พร้อมแพ็กเกจ Playwright และ Pillow
• Docker พร้อมคำสั่ง docker compose ซึ่งเปิด WordPress ชั่วคราวบนคอมพิวเตอร์ของคุณ และตัวแปลงจะติดตั้งธีมที่นั่นก่อนที่คุณจะเห็น
• php-cli เพราะไฟล์ PHP ทุกไฟล์ผ่านการตรวจไวยากรณ์ก่อนเข้าไปใน ZIP
• jq, curl, bash และ tar ส่วน WordPress ปลายทางต้องเป็นเวอร์ชัน 6.6 ขึ้นไป

ขั้นตอนแรกตรวจทั้งหมดนี้ โดยแยกสิ่งที่ติดตั้งเองได้ภายในโฟลเดอร์ของคุณออกจากสิ่งที่คุณต้องตัดสินใจเอง ตัวแปลงจะไม่ติดตั้ง Docker ให้ ถ้าคุณไม่ได้ขอ

รันการแปลง Claude Design เป็น WordPress

Claude Code

/plugin marketplace add iOSDevSK/html2wp-cc-plugin
/plugin install html2wp@html2wp

python3 -m playwright install chromium

Codex

codex plugin marketplace add iOSDevSK/html2wp-codex-plugin
codex plugin add html2wp@html2wp

จากนั้นพิมพ์จากที่ไหนก็ได้

/html2wp:html2wp

convert ./my-site

พาธของโฟลเดอร์คือคำสั่งทั้งหมด คุณไม่ต้องเขียนไฟล์ config และไม่ต้องเลือกคำสั่ง build ใน Codex ให้พิมพ์ convert ./my-site with html2wp ถ้าไม่อยากทำงานในเทอร์มินัล คุณเปิดโฟลเดอร์เดียวกันได้ในแอปเดสก์ท็อป html2wp (คู่มือพร้อมภาพหน้าจอ)

Flash ใช้เวลาประมาณ 30 นาที และ Full ประมาณหนึ่งชั่วโมง ขึ้นอยู่กับจำนวนหน้าและความเร็วของคอมพิวเตอร์ อาร์ทิแฟกต์หน้าเดียวอยู่ฝั่งที่สั้นกว่า แต่การตรวจรันครบเสมอ ไม่ว่าอินพุตจะเล็กแค่ไหน

สิ่งที่ตัวแปลงตัดสินใจแทนคุณ และสิ่งที่ถาม

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

ดีไซน์ที่สร้างด้วย AI มักเจอสองเรื่องนี้

• ทุกแบบของดีไซน์ถูกเก็บไว้ ถ้าหน้าต่าง ๆ ของคุณใช้ header ไม่เหมือนกัน ตัวแปลงจะไม่เลือกแบบเดียวแล้วทำให้แบบอื่นเหมือนกันหมด แต่จะสร้าง template part สำหรับแต่ละแบบ และเชื่อมแต่ละหน้ากับแบบที่หน้านั้นใช้จริง อาร์ทิแฟกต์จากแชต Claude คนละแชตมักต่างกันมากกว่าที่คุณจำได้
• วงเล็บปีกกาในข้อความยังอยู่ครบ ขั้นตอนกลางใช้รูปแบบคล้าย JSX ถ้าไม่จัดการ ตัวอย่าง JSON หรือ CSS ในข้อความจะทำให้ build พัง หรือแสดงบนหน้าเป็น { ตัวแปลงจัดการให้ วงเล็บปีกกาจึงยังเป็นวงเล็บปีกกาบนหน้าเว็บ

กลุ่มที่ซ้ำกัน เช่น การ์ด คำรับรองจากลูกค้า หรือ FAQ ถูกบันทึกเป็นคอลเลกชันแทน markup ที่ฝังตายตัว คุณจึงแก้ไขได้จริงภายหลัง ไม่ใช่แค่ดูเหมือนแก้ไขได้

การตรวจที่ข้ามไม่ได้

ตัวแปลงวางแต่ละหน้าไว้ในภาพเดียวคู่กับต้นฉบับ และคุณอ่านทุกภาพตั้งแต่บนลงล่าง

ในการแปลงครั้งหนึ่ง ส่วนหนึ่งที่อยู่ลึกลงไปในหน้าหายไป และการเทียบพิกเซลแสดงความต่างแค่ 0.4% จึงผ่านการตรวจ การตรวจด้วยตัวเลขมองไม่เห็นข้อบกพร่องสามแบบโดยธรรมชาติ แบบแรกคือปุ่มควบคุมที่ดูสมบูรณ์แต่ไม่ทำอะไร แบบที่สองคือค่าที่ฝังตายตัวมาจากหน้าเดียวที่ใช้สร้างเทมเพลต แบบที่สามคืออะไรก็ตามที่ปรากฏหลังเลื่อนหน้า คลิก หรือส่งฟอร์มเท่านั้น

ตรวจด้วยว่าแก้ไขเนื้อหาได้หรือไม่ หน้าอาจตรงกันทุกพิกเซล แต่ไม่มีใครแก้ FAQ หรือตารางฟีเจอร์จาก wp-admin ได้ เรื่องนี้เคยเกิดขึ้นแล้ว และการตรวจนี้เป็นตัวที่จับได้ ไม่ใช่การตรวจอัตโนมัติ

การแก้ไขหลังแปลง Claude Design เป็น WordPress: ธีม, Visual Edit หรือ page builder

โฟลเดอร์ของคุณจะได้สองไฟล์ คือไฟล์ ZIP ของธีม และข้าง ๆ กันคือ CONVERSION-REPORT.md รายงานบอกว่าการแปลงครอบคลุมอะไร การตรวจพบอะไร และอะไรยังค้างอยู่ คุณติดตั้งเหมือนธีม WordPress ทั่วไป (Appearance → Themes → Add New → Upload Theme)

ธีมทำงานได้ด้วยตัวเอง หน้า บล็อก ฟอร์ม เมนู SEO และการ redirect เป็นโค้ดของธีมเองทั้งหมด ไม่ต้องใช้ปลั๊กอินในการทำงาน และไม่เคยติดต่อเซิร์ฟเวอร์ของเรา โพสต์บล็อกเขียนใน block editor ส่วนข้อความของหน้าเว็บอยู่ใน HTML ถ้าจะแก้หน้าเว็บโดยไม่แตะโค้ด มีสองทางเลือก คือ Visual Edit และ page builder

page builder เป็นตัวเลือกที่ดีเมื่อดีไซน์เป็นแค่จุดเริ่มต้น และเป็นตัวเลือกที่แย่เมื่อดีไซน์คือสิ่งที่คุณส่งมอบ ถ้าคุณแปลงเพื่อให้ดีไซน์ที่สร้างด้วย AI อยู่รอดใน WordPress การสร้างใหม่เป็นวิดเจ็ตก็ลบล้างเหตุผลที่คุณเริ่มทำ แต่ถ้าไตรมาสหน้าจะมีคนอื่นจัดเลย์เอาต์ใหม่ ประสบการณ์กับ Elementor ของเขาอาจมีค่ามากกว่าดีไซน์ที่ตรงต้นฉบับ

Lite หรือ Pro ถ้าคุณเลือก Visual Edit

แชต AI ใช้ API key ของคุณเอง เราไม่ขายโทเค็นให้คุณ และคุณจ่ายค่าโทเค็นกับผู้ให้บริการของคุณโดยตรง

ราคาการแปลง Claude Design เป็น WordPress และสิ่งที่การแปลงปฏิเสธ

ฟรีสำหรับทุกคน ไม่ต้องใช้คีย์และไม่ต้องสมัคร แปลงได้สามครั้ง ครั้งละห้าหน้า และรันซ้ำได้รวมห้าครั้ง ทั้งสองจำนวนนับต่อที่อยู่ IP ออฟฟิศที่มีที่อยู่เดียวจึงได้สิทธิ์ชุดเดียว แพ็กเกจฟรีมีไว้สำหรับลองใช้เครื่องมือ เว็บส่วนตัว และงานที่ไม่ใช่เชิงพาณิชย์

ไลเซนส์ Pro ปลดขีดจำกัดจำนวนหน้า และทำให้การแปลงและการรันซ้ำไม่จำกัด รวมถึงปลดล็อกขั้นตอนที่เปลี่ยนร้านค้าเป็น WooCommerce ขั้นตอนนี้ไม่เคยฟรี แอปจะปฏิเสธการแปลงฟรีของเว็บที่มีร้านค้าทั้งหมด แทนที่จะทำแค่ครึ่งเดียว คุณซื้อ Pro แบบรายเดือนหรือรายปีได้ในหน้าราคา และระหว่างช่วงเบต้า การชำระเงินครั้งแรกลด 30%

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

คู่มือทีละขั้นตอนของกระบวนการทั้งหมดอยู่ในเอกสารของแอป html2wp ถ้าอาร์ทิแฟกต์ของคุณเป็น React คู่มือแปลง Lovable เป็น WordPress อธิบายทางนั้นไว้