เครื่องมือ AI แปลงดีไซน์เป็นโค้ดที่ดีที่สุด จัดกลุ่มตามสิ่งที่คุณมีอยู่ในมือ

โพสต์หนึ่งในฟอรัมชุมชนของ Figma เล่าว่าเมื่อเลือกไลบรารีคอมโพเนนต์และตัวแปรใน Figma Make แล้วได้ผลลัพธ์เป็น “สีที่แทบไม่มีคอนทราสต์และขนาดฟอนต์ที่ไม่สมเหตุสมผลเลย” ผู้ใช้คนเดียวกันรายงานว่าผลลัพธ์ดีขึ้นราว 90% เมื่อไม่เลือกไลบรารีใดเลย นี่คือความล้มเหลวที่ควรใช้วัดทุกเครื่องมือ: เครื่องมือนั้นจะสร้างงานด้วยคอมโพเนนต์ที่ทีมคุณมีอยู่แล้ว หรือสร้าง UI คู่ขนานที่คุณต้องมาตามแก้ให้ตรงกันทีหลัง

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

เลือกตามสิ่งที่คุณมีอยู่ในมือ ไฟล์ Figma เหมาะกับตัวแปลงอย่างฟีเจอร์สร้างโค้ดในตัวของ Figma, Anima หรือ Builder.io Visual Copilot ภาพหน้าจอเหมาะกับ screenshot-to-code พรอมต์เหมาะกับ v0, Lovable หรือ Bolt ส่วนโค้ดเบสที่มีอยู่แล้วเหมาะกับเอเจนต์เขียนโค้ดที่อ่านดีไซน์ซิสเต็มของคุณผ่าน Model Context Protocol (MCP)

TL;DR (สรุปย่อ)

• ใช้ฟีเจอร์สร้างโค้ดในตัวของ Figma หากคุณจ่ายค่า Figma อยู่แล้ว ใช้ screenshot-to-code เฉพาะเมื่อไม่มีไฟล์ดีไซน์ ใช้ v0, Lovable หรือ bolt.diy ตามปลายทางที่จะดีพลอย รูปแบบการคิดเงิน และความต้องการเรื่องคีย์โมเดล และใช้ Figma MCP คู่กับการแมป Code Connect เมื่อคุณมีโค้ดเบสและดีไซน์ซิสเต็มอยู่แล้ว
• ก่อนนำเครื่องมือใดมาใช้ ให้สร้างหน้าจอหนึ่งหน้าที่คุณมีคอมโพเนนต์อยู่แล้ว แล้วตรวจผลลัพธ์ว่ามีสี hex และค่าพิกเซลที่ฮาร์ดโค้ดไว้หรือไม่ และมีคอมโพเนนต์ที่ประกาศขึ้นใหม่ในจุดที่ควร import จากไลบรารีของคุณหรือไม่
• คุณสามารถรัน bolt.diy, screenshot-to-code และ Penpot บนเซิร์ฟเวอร์ที่คุณควบคุมเองได้ แต่แต่ละตัวมีข้อควรระวัง: คอมมิตของ bolt.diy หยุดไปตั้งแต่กุมภาพันธ์ถึงตุลาคม 2026 และรีลีสที่ติดแท็กล่าสุดออกเมื่อพฤษภาคม 2025, screenshot-to-code ต้องใช้ API key ของโมเดล และ Penpot ที่โฮสต์เองจะตามหลังรีลีสบนคลาวด์
• การนำคอมโพเนนต์กลับมาใช้ซ้ำจะได้ผลดีที่สุดเมื่อเครื่องมือมีการแมปที่ชัดเจน เช่น Figma MCP คู่กับ Code Connect หรือการทำดัชนีดีไซน์ซิสเต็มของ Builder.io แต่ผลลัพธ์ที่สร้างขึ้นก็ยังต้องรีวิวอยู่ดี ดังนั้นควรเผื่อเวลาเก็บกวาดโค้ดไว้ในทุกเส้นทาง

เลือกเครื่องมือให้ตรงกับจุดเริ่มต้นของคุณ

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

ทดสอบหนึ่งหน้าจอเพื่อดูการใช้คอมโพเนนต์และโทเคนซ้ำ

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

1. เลือกหน้าจอที่ทีมคุณสร้างจากคอมโพเนนต์ที่มีอยู่แล้ว เช่น ฟอร์มตั้งค่าหรือการ์ดราคา
2. สร้างหน้าจอนั้นด้วยเครื่องมือที่คุณกำลังพิจารณา โดยใช้อินพุตประเภทเดียวกับที่คุณจะใช้กับงานใหม่
3. ค้นหาค่าที่ฮาร์ดโค้ดในผลลัพธ์: สี hex ดิบอย่าง #3B82F6 ขนาดฟอนต์เป็นพิกเซลอย่าง font-size: 14px และระยะห่างแบบตายตัว แล้วเทียบกับความถี่ที่ผลลัพธ์ใช้ชื่อโทเคน ตัวแปร CSS หรือคลาสธีมของคุณ
4. ตรวจดู import ผลลัพธ์ที่ประกาศ Button หรือ Card ขึ้นมาใหม่ แทนที่จะ import ของคุณจากไลบรารีคอมโพเนนต์ แปลว่ามันสร้าง UI คู่ขนานขึ้นมาแล้ว
5. ยืนยันว่าเฟรมเวิร์กและแนวทางการจัดสไตล์ตรงกับรีโพ HTML ธรรมดาที่ใช้สไตล์แบบ inline คือการเขียนใหม่ทั้งหมด ไม่ว่าพรีวิวจะดูดีแค่ไหน

ใน Stack Overflow Developer Survey ปี 2025 นักพัฒนา 66% ระบุว่า “โซลูชัน AI ที่เกือบถูก แต่ยังไม่ถูกเสียทีเดียว” คือสิ่งที่ทำให้หงุดหงิดที่สุดเกี่ยวกับ AI นี่เป็นข้อค้นพบเกี่ยวกับเครื่องมือเขียนโค้ดด้วย AI โดยรวม ไม่ใช่งานศึกษาเรื่องการแปลงดีไซน์เป็นโค้ด แต่หน้าจอที่ดูถูกต้องทั้งที่ฮาร์ดโค้ดทุกสีก็คือ “เกือบถูก” ในความหมายนั้นพอดี

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

การตรวจนี้อ่านจากโค้ด ส่วนคำถามว่าหน้าจอที่เรนเดอร์ออกมายังตรงกับดีไซน์หรือไม่เป็นอีกเรื่องหนึ่ง ซึ่งเป็นงานของ เครื่องมือที่โฮสต์เองได้อย่าง BackstopJS ที่ใช้ตรวจ visual regression

หากคุณมีไฟล์ Figma ที่เสร็จแล้ว

เครื่องมือ AI แปลง Figma เป็นโค้ดในกลุ่มนี้ล้วนเริ่มจากไฟล์เดียวกัน และความต่างในทางปฏิบัติคือโค้ดไปจบที่ไหน: บนแคนวาส ในโปรโตไทป์ที่โฮสต์ไว้ หรือในการ export ผ่านบริการภายนอก

ฟีเจอร์สร้างโค้ดในตัวของ Figma

คุณเลือกเฟรม คอมโพเนนต์ หรือ section ใน Figma Design เปิดเอเจนต์ แล้วสั่งให้สร้าง HTML และ CSS, คอมโพเนนต์ React หรือเฟรมเวิร์กที่ต้องการ Figma ระบุว่าคุณสามารถ ชี้เอเจนต์ไปที่ดีไซน์ซิสเต็มของคุณ เพื่อให้ผลลัพธ์อ้างอิงโทเคน ตัวแปร และโครงสร้างคอมโพเนนต์ของคุณ แทนที่จะเป็น placeholder ทั่วไป หน้าเดียวกันระบุว่าฟีเจอร์นี้ ใช้ได้ในแพ็กเกจ Figma แบบเสียเงินทุกแพ็กเกจ ณ เดือนตุลาคม 2026 ฟีเจอร์นี้ยังอยู่ในช่วงโอเพนเบต้า การใช้เครดิตและขีดจำกัดจึงอาจเปลี่ยนแปลงได้

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

Figma Make

Figma Make เป็นผลิตภัณฑ์แยกต่างหากที่ขับเคลื่อนด้วยพรอมต์ ตามข้อมูลของ Figma Make สร้าง HTML, CSS และ JavaScript สำหรับโปรโตไทป์ฝั่ง front-end พร้อมเอดิเตอร์ในตัวสำหรับแก้ไข คุณ ลองใช้ได้บนแพ็กเกจ Starter ที่ฟรี และรองรับการเชื่อมต่อกับ Supabase เพื่อจำลองข้อมูลจริง

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

Anima, Builder.io Visual Copilot และ Locofy

Visual Copilot ของ Builder.io ระบุ เอาต์พุตสำหรับ React, Qwik และ Angular รวมถึง Kotlin และ Flutter สำหรับมือถือ โดยจัดสไตล์ด้วย Tailwind CSS หรือ CSS Modules ในเรื่องการใช้ซ้ำ หน้าเดียวกันระบุถึง Custom Component Mapping ซึ่งผูกคอมโพเนนต์ใน Figma เข้ากับคอมโพเนนต์ในโค้ดเบสของคุณ ตอนนี้เอกสารของ Builder ระบุว่าการแมปคอมโพเนนต์แบบแมนนวลเลิกใช้แล้ว (deprecated) โดยให้ใช้การทำดัชนีคอมโพเนนต์ (component indexing) แทน และจัดให้เป็นฟีเจอร์ของแพ็กเกจ Enterprise จึงควรตรวจสอบเอกสารล่าสุดและแพ็กเกจของคุณก่อน

แพ็กเกจฟรีของ Anima ให้ สร้างโค้ดได้ 5 ครั้งในปลั๊กอิน Figma พร้อมข้อความแชต 5 ข้อความต่อวัน และการนำเข้าจาก Figma 5 ครั้งใน AI Playground ส่วนราคา Enterprise ณ เดือนตุลาคม 2026 เริ่มต้นที่ $500 ต่อเดือน ชำระรายปี

Anima ยังมีเซิร์ฟเวอร์ MCP ด้วย และโค้ดที่สร้างผ่านเซิร์ฟเวอร์นี้จะนับรวมในโควตาการสร้างโค้ดเดียวกัน ส่วน Locofy เป็นอีกหนึ่งตัวแปลงไฟล์ Figma ในหมวดนี้

ควรเริ่มจากตัวแปลง Figma ตัวไหน

เริ่มจากฟีเจอร์สร้างโค้ดในตัวของ Figma หากทีมของคุณจ่ายค่า Figma อยู่แล้ว: มันอ่านไลบรารีของไฟล์ได้โดยไม่ต้อง export และบนแพ็กเกจแบบเสียเงิน การทดสอบหนึ่งหน้าจอก็ไม่ต้องสมัครบริการใหม่เพิ่ม เปลี่ยนไปใช้ Builder.io Visual Copilot เมื่อคุณต้องการผลลัพธ์ที่ import คอมโพเนนต์จากโค้ดเบสของคุณ (ดูเอกสารของเครื่องมือว่าการแมปหรือการทำดัชนีคอมโพเนนต์ใช้กับแพ็กเกจของคุณอย่างไร) หรือเมื่อต้องการเอาต์พุตมือถือแบบ Kotlin หรือ Flutter ที่ระบุชื่อไว้ชัดเจน

ใช้ Figma Make สำหรับโปรโตไทป์ที่คลิกได้ซึ่งคุณจะนำไปให้คนอื่นดู ส่วนโค้ดที่ตั้งใจจะ merge ควรมาจากการสร้างโค้ดบนแคนวาสของ Figma หรือ Builder.io Visual Copilot

หากคุณมีแค่ภาพหน้าจอ

screenshot-to-code คือตัวเลือกโอเพนซอร์สหลักในกรณีนี้: ใช้สัญญาอนุญาต MIT มีดาวบน GitHub ราว 80,000 ดวง และยังมีคอมมิตเข้ามาในปี 2026 ใส่รูปภาพเข้าไปแล้วมันจะคืน HTML พร้อม Tailwind หรือ CSS, React หรือ Vue รวมถึงสแตกอื่นๆ มีเวอร์ชันโฮสต์ให้ใช้ที่ screenshottocode.com หากคุณไม่อยากรันอะไรเอง

AI แบบ screenshot-to-code ทำงานได้เฉพาะกับสิ่งที่อยู่ในภาพ ข้อจำกัดจึงอยู่ที่อินพุต ภาพหน้าจอไม่มีตัวตนของคอมโพเนนต์ ไม่มีตัวแปร ไม่มีสเตต hover หรือ focus และไม่มี responsive breakpoint สิ่งที่ได้กลับมาคือการสร้างเฟรมนิ่งเพียงเฟรมเดียวที่ความกว้างเดียวขึ้นมาใหม่ และโทเคนทุกตัวต้องเดาเอาจากสีของพิกเซล

screenshot-to-code เป็นเครื่องมือที่เหมาะเมื่อไม่มีไฟล์ดีไซน์ เช่น การทำเลย์เอาต์ให้ตรงกับต้นแบบอ้างอิง หรือการสร้างหน้าเก่าที่ไม่มีใครมีไฟล์ Figma ขึ้นมาใหม่ ถ้ามีไฟล์ Figma อยู่ ให้เริ่มจากไฟล์นั้นแทน เพราะไฟล์มีข้อมูลที่ภาพหน้าจอทิ้งไป

หากคุณมีแค่พรอมต์

เมื่อไม่มีดีไซน์ซิสเต็มให้เทียบ ข้อแลกเปลี่ยนจะย้ายไปอยู่ที่อีกสามเรื่อง: เครื่องมือคิดเงินคุณอย่างไร คุณแก้โค้ดได้มากแค่ไหน และแอปที่สร้างขึ้นเติบโตต่อได้ไกลแค่ไหน

v0

แพ็กเกจฟรีของ v0 มาพร้อม ลิมิต 7 ข้อความต่อวัน รวมถึงการดีพลอยบน Vercel การซิงก์กับ GitHub และ Design Mode แบบภาพ การใช้งานแบบเสียเงินคิดตามจำนวนโทเคน และ อัตราค่าโทเคนของโมเดล v0 ต่างกันไปในโมเดลสี่ระดับ ตั้งแต่ v0 Mini ถึง v0 Max Fast ค่าใช้จ่ายต่อเซสชันขึ้นอยู่กับระดับที่คุณเลือกและความยาวของบทสนทนา

Lovable

Lovable คิดเงินเป็นเครดิต ใน Default Mode ค่าใช้จ่ายจะแปรผันตามความซับซ้อนของงาน ขณะที่ Plan Mode ใช้ 1 เครดิตต่อข้อความ แพ็กเกจฟรีมี เครดิตบิลด์รายวัน 5 เครดิต จำกัดสูงสุด 30 เครดิตต่อเดือน

ผู้แสดงความเห็นคนหนึ่งใน เธรด Reddit ที่เปรียบเทียบ Bolt กับ Lovable เขียนว่า Bolt ให้ “การควบคุมเกือบเต็มที่” เหนือโค้ด ขณะที่ Lovable ดูเหมือนจะแสดงแค่ diff ของโค้ด “โดยไม่มีสิทธิ์แก้ไข” นี่เป็นรายงานของผู้ใช้คนเดียว จึงควรตรวจสอบเอดิเตอร์เวอร์ชันปัจจุบันก่อนจะสรุปว่ายังเป็นแบบนั้นอยู่

Bolt.new และ bolt.diy

Bolt.new คือผลิตภัณฑ์แบบโฮสต์ ส่วน bolt.diy คือเวอร์ชันโอเพนซอร์สที่ให้คุณ เลือก LLM สำหรับแต่ละพรอมต์ จากผู้ให้บริการ 21 รายขึ้นไป รวมถึงโมเดลโลคัลผ่าน Ollama ไม่บังคับว่าต้องมีฐานข้อมูล โดย Supabase เป็นการเชื่อมต่อเสริม ตรวจสอบประวัติคอมมิตและเงื่อนไขสัญญาอนุญาตก่อนจะสร้างอะไรบนมัน

Google Stitch

Google เปิดตัว Stitch ใหม่ในเดือนมีนาคม 2026 พร้อมแคนวาสไม่จำกัด การโต้ตอบด้วยเสียง และเอเจนต์ออกแบบ ตาม รายงานของ Winbuzzer เรื่องการออกแบบใหม่ รายงานเดียวกันระบุว่าดีไซน์ export เป็นฟอร์แมต Figma หรือเฟรมเวิร์กโค้ดอย่าง React ได้ และมีเซิร์ฟเวอร์ MCP ที่เชื่อม Stitch กับ Claude Code, Gemini CLI, Cursor และ Antigravity นั่นทำให้ Stitch อยู่ระหว่างเส้นทางพรอมต์กับเส้นทางโค้ดเบส: มันเริ่มจากพรอมต์ แต่ส่งต่อดีไซน์ให้เอเจนต์ที่ทำงานในรีโพของคุณได้

ควรเริ่มจากเครื่องมือพรอมต์ตัวไหน

ใน การสนทนาบน Hacker News เกี่ยวกับ Lovable และ Bolt ผู้แสดงความเห็นคนหนึ่งให้เหตุผลว่า เมื่อโยนแบ็กเอนด์ไปให้ Supabase เพดานของการสร้างซอฟต์แวร์ที่มีประโยชน์ด้วยสองเครื่องมือนี้ “ต่ำอย่างไม่น่าเชื่อ” ผู้แสดงความเห็นคนนั้นเปิดเผยว่าตนกำลังสร้างผลิตภัณฑ์คู่แข่งอยู่ จึงควรอ่านว่าเป็นความเห็นของคนที่รู้เรื่องแต่มีส่วนได้ส่วนเสีย ไม่ใช่ผลการวัด

การมีไฟล์ Figma อยู่ในมือก็ไม่ได้ตัดเส้นทางนี้ออกไปโดยอัตโนมัติ ในเธรด Reddit เดียวกันเรื่อง Bolt กับ Lovable ผู้แสดงความเห็นอีกคนบอกว่าไม่เคยดึง Figma เข้ามาใช้เลย เพราะดูเหมือน “ยากกว่าและน่ารำคาญกว่าการเขียนพรอมต์ไปเลย” สำหรับดีไซน์ที่ต้องการ

เลือก v0 เมื่อทีมของคุณดีพลอยบน Vercel และต้องการซิงก์กับ GitHub ตั้งแต่วันแรก เลือก Lovable เมื่อคุณต้องการวางแผนงานบิลด์ด้วยข้อความ Plan Mode ที่มีค่าใช้จ่ายคงที่ก่อนจะใช้เครดิตบิลด์ และตรวจดูเอดิเตอร์ก่อนหากคุณคาดว่าจะต้องแก้โค้ดด้วยมือ

เลือก bolt.diy เมื่อคุณต้องใช้คีย์โมเดลของตัวเองหรือรันโมเดลโลคัล และให้ถือว่าเป็นเครื่องมือทำโปรโตไทป์ เว้นแต่ความเคลื่อนไหวที่กลับมาใหม่จะต่อเนื่องจริง ลองใช้ Stitch เมื่อคุณต้องการดีไซน์ที่สร้างจากพรอมต์ ซึ่งภายหลังส่งต่อให้เอเจนต์เขียนโค้ดในรีโพของคุณผ่านเซิร์ฟเวอร์ MCP ของมันได้

หากคุณมีโค้ดเบสและดีไซน์ซิสเต็มอยู่แล้ว

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

Figma MCP

ตาม Help Center ของ Figma เซิร์ฟเวอร์ Figma MCP สามารถ สร้างโค้ดจากเฟรมที่เลือก หลังจากอ่านคอมโพเนนต์ ตัวแปร ข้อมูลเลย์เอาต์ เนื้อหา FigJam และทรัพยากรของ Make มันใช้ Code Connect เพื่อให้โค้ดนั้นสอดคล้องกับคอมโพเนนต์ของคุณ และเซิร์ฟเวอร์แบบรีโมตสามารถเขียนกลับลงแคนวาสได้

มีให้เลือกสองเวอร์ชัน: เซิร์ฟเวอร์แบบรีโมต ซึ่ง Figma แนะนำสำหรับผู้ใช้ส่วนใหญ่ และเซิร์ฟเวอร์บนเดสก์ท็อปสำหรับกรณีเฉพาะขององค์กรและ enterprise

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

จะใช้เอเจนต์ตัวไหนก็แล้วแต่คุณ คู่มือการตั้งค่าของ Figma เขียนไว้สำหรับ Claude Code และ เอกสาร MCP ของ OpenCode ครอบคลุมทั้งเซิร์ฟเวอร์โลคัลและรีโมต การเลือก Claude Code หรือ OpenCode ขึ้นอยู่กับว่าคุณให้น้ำหนักกับความสะดวกของบริการที่มีคนดูแลให้ หรือการควบคุมผู้ให้บริการเอง และไม่มีอะไรในการเลือกนี้ที่เฉพาะกับงานดีไซน์

Penpot MCP

Penpot คือทางเลือกโอเพนซอร์สที่เทียบเท่ากัน และเอกสารของมันอธิบาย ส่วนประกอบหลักสามส่วน: เซิร์ฟเวอร์ MCP, ปลั๊กอิน MCP ที่รันใน Penpot และเชื่อมไฟล์ที่คุณเปิดอยู่ และไคลเอนต์ MCP ที่คุณใช้เขียนพรอมต์ คุณตั้งค่าได้จากหน้า Integrations ในบัญชี Penpot ของคุณ ด้วยคีย์ MCP ส่วนตัว ผ่านช่องทางนี้ เอเจนต์สามารถอ่านและแก้ไขคอมโพเนนต์ สไตล์ โทเคน และเลเยอร์ได้

โครงสร้างของโปรเจกต์เพิ่งเปลี่ยนไปไม่นาน รีโพ penpot-mcp ที่แยกออกมาต่างหากมีประกาศว่า ถูกเก็บถาวรในเดือนกุมภาพันธ์ 2026 และเนื้อหาถูกรวมเข้าไปในรีโพหลักของ Penpot แล้ว คู่มือที่เขียนอิงรีโพเก่าอาจอธิบายการตั้งค่าที่ต่างออกไป

Claude Design

Anthropic เปิดตัว Claude Design ในเดือนเมษายน 2026 ในฐานะ research preview ของ Anthropic Labs สำหรับสมาชิก Pro, Max, Team และ Enterprise ระหว่างการเริ่มต้นใช้งาน Claude จะสร้างดีไซน์ซิสเต็มให้ทีมของคุณ โดยอ่านโค้ดเบสและไฟล์ดีไซน์ของคุณ นำไปใช้กับโปรเจกต์ถัดๆ ไป และรวบรวมดีไซน์ที่เสร็จแล้วเป็นแพ็กเกจส่งต่อสำหรับ Claude Code

UXPin ซึ่งขายเครื่องมือดีไซน์ของตัวเองด้วย เขียนไว้ในสัปดาห์เปิดตัว ว่า:

“นักออกแบบที่ทดสอบ Claude Design ในสัปดาห์นี้รายงานว่าเจอฟอนต์ผิด สีปุ่มไม่ถูกต้อง และระยะห่างที่ไม่สม่ำเสมอ ภายในไม่กี่เซสชันแรก”

ควรเริ่มจากการตั้งค่าโค้ดเบสแบบไหน

ใช้ Figma MCP คู่กับเอเจนต์เขียนโค้ดเมื่อดีไซน์ซิสเต็มของคุณอยู่ใน Figma และคุณพร้อมจะทำการแมป Code Connect เพราะการแมปนี้เองที่แยกคอมโพเนนต์ที่ import มาจริงออกจากสำเนาที่แค่จัดสไตล์ใหม่

ใช้ Penpot MCP เมื่อคุณต้องการเครื่องมือดีไซน์โอเพนซอร์สที่เอเจนต์ของคุณอ่านและแก้ไขได้ ตัว Penpot เองโฮสต์เองได้ แต่เอกสาร MCP อธิบายการตั้งค่าผ่านบัญชี Penpot ดังนั้นให้ยืนยันว่าขั้นตอนนี้ใช้ได้บนอินสแตนซ์ของคุณเองก่อนจะพึ่งพามัน

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

รันตัวเลือกโอเพนซอร์สบนเซิร์ฟเวอร์ของคุณเอง

เครื่องมือสามตัวในนี้รันบนเซิร์ฟเวอร์ที่คุณควบคุมเองได้ ซึ่งเป็นการแลกการโฮสต์ของผู้ให้บริการกับงานดูแลที่คุณต้องทำเอง และสำหรับ bolt.diy กับ screenshot-to-code ก็คือการแลกมิเตอร์เครดิตกับคีย์โมเดลของคุณ ณ เดือนตุลาคม 2026 แต่ละตัวมีข้อแลกเปลี่ยนของตัวเอง

bolt.diy. โปรเจกต์นี้ไม่มีคอมมิตเลยตั้งแต่วันที่ 7 กุมภาพันธ์ถึง 4 ตุลาคม 2026 และรีลีสที่ติดแท็กล่าสุดคือ v1.0.0 ออกเมื่อพฤษภาคม 2025 ตาม ประวัติคอมมิตของรีโพ โปรเจกต์นี้ใช้สัญญาอนุญาต MIT แต่ WebContainers API ที่โปรเจกต์พึ่งพา (รันไทม์ในเบราว์เซอร์ที่รันโค้ดที่สร้างขึ้น) ต้องมีไลเซนส์สำหรับการใช้งานในโปรดักชัน ในบริบทเชิงพาณิชย์ที่แสวงหากำไร

โปรโตไทป์และ proof of concept ไม่จำเป็นต้องมีไลเซนส์นั้น ในทางปฏิบัติ bolt.diy เหมาะพอสมควรสำหรับทำโปรโตไทป์ด้วยคีย์ของคุณเอง แต่ควรตรวจความเคลื่อนไหวของโปรเจกต์อีกครั้งก่อนจะสร้างผลิตภัณฑ์บนมัน

screenshot-to-code. การรันเอง ต้องมีคีย์ของผู้ให้บริการโมเดลอย่างน้อยหนึ่งราย จาก OpenAI, Anthropic หรือ Gemini พร้อมเซิร์ฟเวอร์ที่คุณดูแลเอง ค่าใช้จ่ายในการรันคือค่าใช้โมเดลต่อการสร้างแต่ละครั้ง ซึ่งเรียกเก็บโดยผู้ให้บริการที่คุณตั้งค่าคีย์ไว้

Penpot. Penpot โฮสต์เองได้ผ่าน Docker Compose, Helm chart อย่างเป็นทางการบน Kubernetes, OpenShift หรือ Rancher เอกสารระบุว่า Docker image สำหรับโฮสต์เองจะเผยแพร่ไม่นานหลังการอัปเดตฝั่ง SaaS ฟีเจอร์ใหม่บนคลาวด์จึงมาถึงอินสแตนซ์ของคุณช้ากว่าเล็กน้อย

จะรันที่ไหนขึ้นอยู่กับว่าใครใช้ แล็ปท็อปก็เพียงพอสำหรับลอง bolt.diy หรือ screenshot-to-code คนเดียว เซิร์ฟเวอร์จะเหมาะเมื่อทีมใช้อินสแตนซ์ Penpot ร่วมกัน หรือเมื่อเครื่องมือต้องเข้าถึงได้ตลอดแม้แล็ปท็อปของคุณปิดอยู่

bolt.diy ไม่มีสเปกขั้นต่ำอย่างเป็นทางการ ดังนั้นให้ถือว่า RAM ราว 4 GB และ 2 vCPU พร้อมสตอเรจ NVMe เป็นจุดเริ่มต้นสำหรับแอป Node ตัวเดียวแบบนี้ Help Center ของ Penpot ระบุว่า 4 CPU และ RAM 16 GB เพียงพอ สำหรับรองรับผู้ใช้หลายพันคน และคุณจัดสรรทรัพยากรแบบประหยัดได้ สำหรับอินสแตนซ์ของทีมเล็กพร้อมเอเจนต์เขียนโค้ดบนเซิร์ฟเวอร์เดียวกัน RAM ประมาณ 8 ถึง 12 GB เป็นจุดเริ่มต้นที่สมเหตุสมผล ถ้าเอเจนต์จะรันใน IDE บนเบราว์เซอร์บนเครื่องนั้นด้วย การกำหนดสเปกสำหรับ Code Server กับ Claude Code ต้องคำนวณแยกต่างหาก

การโฮสต์เองหมายความว่าคุณต้องรันเซิร์ฟเวอร์ อัปเดตเอง และเก็บคีย์โมเดลให้ปลอดภัย หากไม่อยากทำขั้นตอนติดตั้ง เรามีการดีพลอยแบบคลิกเดียวสำหรับ bolt.diy เพื่อเตรียมสภาพแวดล้อมทำโปรโตไทป์ และ Penpot สำหรับพื้นที่ทำงานดีไซน์ร่วมกัน บน Linux VPS ที่มีสิทธิ์ root เอเจนต์เขียนโค้ดอย่าง Claude Code และ OpenCode ก็ดีพลอยได้แบบเดียวกันในฐานะแอปแยก งานดูแลยังเป็นของคุณ แต่งานติดตั้งไม่ใช่

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

Figma Make หรือ v0 ตัวไหนดีกว่า

จุดเริ่มต้นของคุณเป็นตัวตัดสิน Figma Make ทำงานใน Figma รับเฟรมพร้อมพรอมต์ และสร้าง HTML, CSS และ JavaScript สำหรับโปรโตไทป์ฝั่ง front-end ส่วน v0 เริ่มจากพรอมต์อย่างเดียว ดีพลอยไปที่ Vercel และซิงก์กับ GitHub เลือก Make เมื่อดีไซน์มีอยู่ใน Figma แล้ว และเลือก v0 เมื่อคุณเริ่มจากคำอธิบาย

AI แปลงภาพหน้าจอเป็นโค้ดที่ใช้งานได้จริงได้ไหม

ได้ โปรเจกต์โอเพนซอร์ส screenshot-to-code แปลงภาพหน้าจอเป็นโค้ด HTML, React หรือ Vue โดยใช้ API key ของ OpenAI, Anthropic หรือ Gemini แต่ผลลัพธ์เป็นการสร้างเฟรมนิ่งเพียงเฟรมเดียวขึ้นมาใหม่ ไม่มีตัวตนของคอมโพเนนต์ สเตตการโต้ตอบ หรือ responsive breakpoint ดังนั้นถ้ามีไฟล์ Figma อยู่ ไฟล์นั้นจะเป็นอินพุตที่ดีกว่า

มีทางเลือกโอเพนซอร์สแทน v0, Bolt หรือ Lovable ไหม

มี bolt.diy คือเวอร์ชันโอเพนซอร์สของ Bolt.new และเป็นตัวเลือกที่โฮสต์เองได้ในบรรดาเครื่องมือพรอมต์เป็นแอปที่กล่าวถึงในบทความนี้ ใช้สัญญาอนุญาต MIT และทำงานกับคีย์โมเดลของคุณ รวมถึงโมเดลโลคัลผ่าน Ollama คอมมิตของมันหยุดไปตั้งแต่กุมภาพันธ์ถึงตุลาคม 2026 และ WebContainers ที่มันพึ่งพาต้องมีไลเซนส์เชิงพาณิชย์สำหรับการใช้งานโปรดักชันที่แสวงหากำไร ดังนั้นให้ตรวจทั้งความเคลื่อนไหวของโปรเจกต์และไลเซนส์ก่อนสร้างผลิตภัณฑ์บนมัน

ทำไมโค้ดที่ AI สร้างถึงไม่สนใจดีไซน์ซิสเต็มของฉัน

หลายเครื่องมือมองดีไซน์ของคุณเป็นพิกเซลหรือเฟรมที่ถูกแบนราบ แล้วประมาณสี ฟอนต์ และระยะห่างจากสิ่งนั้น เครื่องมือที่อ่านตัวแปรและโครงสร้างคอมโพเนนต์โดยตรง เช่น Figma MCP สามารถ import คอมโพเนนต์จริงของคุณได้เมื่อคอมโพเนนต์เหล่านั้นถูกแมปกับโค้ดผ่าน Code Connect หากไม่มีการแมป เอเจนต์จะใช้สไตล์ของคุณเป็นบริบทและเขียนคอมโพเนนต์ใหม่