โอเพนซอร์ส 3 วัน รับ 2 หมื่นสตาร์! Open Design เลียนแบบ Claude Design สร้าง HTML/PPT ที่ส่งมอบได้ด้วยคำสั่งเดียว

ไม่นานหลังจากที่ Anthropic เปิดตัว Claude Design ก็มีเวอร์ชันโอเพนซอร์สที่ถูกสร้างขึ้นใหม่ปรากฏบน GitHub อย่างรวดเร็ว

เมื่อวันที่ 17 เมษายน Anthropic ได้เปิดตัว Claude Design อย่างเป็นทางการ โดยใช้โมเดล Opus 4.7

เพียงแค่ป้อนข้อความหนึ่งประโยค ก็สามารถสร้างผลงานออกแบบที่พร้อมส่งมอบได้โดยตรง ไม่ใช่แบบร่าง ไม่ใช่ wireframe แต่เป็นหน้า HTML ที่สมบูรณ์ งานนำเสนอ PowerPoint หรือต้นแบบสำหรับมือถือ

ผลลัพธ์ที่ได้น่าทึ่งมาก และกลายเป็นประเด็นร้อนอย่างรวดเร็ว

11 วันต่อมา ทีม nexu-io ก็ได้เปิดตัวโปรเจกต์ Open Design เป็นโอเพนซอร์ส

ปัจจุบันโปรเจกต์นี้มีดาวเกือบ 20,000 ดวงแล้ว

01

ข้อมูลเบื้องต้นเกี่ยวกับโปรเจกต์โอเพนซอร์ส

Open Design เป็นทางเลือกโอเพนซอร์สของ Claude Design

แต่มันไม่ได้รวมโมเดล AI ไว้ในตัว ฟังก์ชันหลักของมันคือการเปลี่ยน Coding Agent ที่ติดตั้งไว้ในคอมพิวเตอร์ของคุณให้กลายเป็นเอนจินสำหรับการออกแบบ

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

จากนั้น Agent จะเลือกหนึ่งใน 5 ทิศทางภาพ สร้างแผน Todo แบบเรียลไทม์ และสร้างไดเรกทอรีโปรเจกต์จริงบนคอมพิวเตอร์ของคุณ

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

ผลลัพธ์ที่ได้ไม่ใช่ภาพหน้าจอหรือแบบร่าง แต่เป็นไฟล์ HTML ไฟล์เดียวที่สมบูรณ์ รองรับการส่งออกเป็นรูปแบบ HTML, PDF, PPTX หรือ ZIP

เครื่องมืออย่าง Claude Code, Codex, Cursor, OpenCode ก็สามารถใช้งานได้ โดยจะใช้เครื่องมือที่ติดตั้งไว้

มี Skill ที่สามารถประกอบกันได้ 19 รายการ และ Design System ระดับแบรนด์ 71 ชุด

สามารถมองว่ามันเป็นเลเยอร์กลางที่เชื่อมต่อ Coding Agent ที่ดีที่สุดที่คุณมีเข้ากับขั้นตอนการทำงานออกแบบ

• ที่อยู่โอเพนซอร์ส: github.com/nexu-io/open-design

02

หลักการทำงานคืออะไร

สถาปัตยกรรมของโปรเจกต์นี้แบ่งออกเป็นสองชั้น: อินเทอร์เฟซเว็บ Next.js ที่ทำงานในเบราว์เซอร์ และบริการ daemon Node ที่ทำงานบนเครื่องคอมพิวเตอร์ของคุณ

ขั้นตอนหลักมีดังนี้:

หลังจากที่คุณป้อนความต้องการ daemon จะประกอบคำอธิบายความสามารถในการออกแบบจาก SKILL.md และข้อกำหนดสไตล์แบรนด์จาก DESIGN.md ลงในสแต็ก prompt จากนั้นเรียกใช้ CLI ของ coding agent บนเครื่องของคุณผ่าน stdio เพื่อดำเนินการ

Agent มีสิทธิ์เข้าถึงระบบไฟล์จริง มันจะอ่านไฟล์เทมเพลตบนคอมพิวเตอร์ของคุณจริงๆ ใช้ grep เพื่อค้นหาค่าสีเลขฐานสิบหกใน CSS เขียน brand-spec.md และสร้าง HTML และรูปภาพ

นี่ไม่ใช่แซนด์บ็อกซ์เสมือนจริงหรือการจำลองในหน่วยความจำ

หลังจาก Agent ทำงานครบหนึ่งรอบ daemon จะนำ HTML ที่สร้างขึ้นไปไว้ใน iframe แซนด์บ็อกซ์เพื่อแสดงตัวอย่างแบบเรียลไทม์ คุณสามารถแก้ไขไฟล์ได้โดยตรงบนอินเทอร์เฟซ หรือส่งออกเป็นรูปแบบ HTML, PDF, PPTX หรือ ZIP ได้ด้วยคลิกเดียว

คุณมี Agent อะไร มันก็จะใช้ Agent นั้น

เมื่อ Daemon เริ่มทำงาน มันจะสแกน PATH โดยอัตโนมัติเพื่อตรวจสอบว่าคุณติดตั้งเครื่องมือ CLI ใดบ้าง

มันไม่ได้ผูกติดกับโมเดลเฉพาะใดๆ แต่ละชั้นใช้โหมด BYOK (นำกุญแจมาเอง)

Claude Design รองรับเฉพาะ Opus 4.7 ในขณะที่ Open Design สามารถใช้ agent ที่ดีที่สุดที่คุณมี

วิศวกรรม Prompt เพื่อลบร่องรอย AI

โปรเจกต์นี้ทำงานอย่างหนักในเลเยอร์ prompt เพื่อป้องกันไม่ให้ AI สร้างงานออกแบบที่ดูแล้วรู้ทันทีว่าเป็นฝีมือ AI

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

ใช้เวลาเพียง 30 วินาทีในการเลือก ซึ่งมีประสิทธิภาพมากกว่าการปรับเปลี่ยนความต้องการซ้ำแล้วซ้ำเล่า

ก่อนส่งออก จะมีการประเมินตนเองห้ามิติ AI จะให้คะแนนตัวเอง มิติใดที่ได้ต่ำกว่า 3 คะแนนจะต้องทำใหม่

นอกจากนี้ ยังมีบัญชีดำ slop: การไล่สีม่วงแบบรุนแรง, ไอคอน emoji ทั่วไป, ใบหน้าคนจริงแบบ SVG วาดมือ, การใช้ Inter เป็นฟอนต์ display ฯลฯ ทั้งหมดถูกห้ามอย่างชัดเจน

หากไม่มีตัวเลขจริง ให้ใช้เครื่องหมายขีดแทน ห้ามสร้างข้อมูลขึ้นมาเด็ดขาด

71 ชุด Design System + 19 Skill พร้อมใช้งานทันที

ระบบการออกแบบแบรนด์ 71 ชุด รวมถึง Apple, Stripe, Vercel, Airbnb, Tesla, Notion, Cursor, Figma เป็นต้น สามารถเลือกได้โดยตรงจากเมนูแบบเลื่อนลง เมื่อเปลี่ยนแล้ว การเรนเดอร์ครั้งถัดไปจะใช้ token ใหม่

19 Skill ครอบคลุมสถานการณ์ต่างๆ เช่น ต้นแบบเว็บ, งานนำเสนอสไตล์นิตยสาร, Dashboard, ต้นแบบมือถือ, หน้าราคา, การตลาดทางอีเมล, ภาพหมุนโซเชียลมีเดีย และอื่นๆ

03

วิธีเริ่มต้นใช้งานอย่างรวดเร็ว

ใช้เพียงสามคำสั่ง:

git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install && pnpm dev:all

วิธีที่ง่ายที่สุดคือส่งโปรเจกต์โอเพนซอร์สให้ Agent ของคุณ และให้มันติดตั้งเอง

หลังจากเริ่มต้น ให้เปิด localhost:3000 เลือก Skill หนึ่งชุด Design System หนึ่งชุด ป้อนความต้องการ แล้วกด Enter

ระบบจะแสดงฟอร์มคำถามเพื่อให้คุณระบุความต้องการก่อน จากนั้น agent จะเริ่มทำงาน

การ์ด Todo แบบเรียลไทม์จะไหลเข้าสู่ UI และสุดท้ายจะแสดงผลงานที่เสร็จสมบูรณ์ใน iframe แซนด์บ็อกซ์

รองรับการส่งออกเป็นรูปแบบ HTML, PDF, PPTX หรือ ZIP

04

คลิกการ์ดด้านล่างเพื่อติดตาม逛逛GitHub

บัญชี公众号นี้เคยเผยแพร่โปรเจกต์โอเพนซอร์สที่น่าสนใจมากมาย หากคุณขี้เกียจอ่านบทความเพื่อค้นหาทีละบทความ คุณสามารถติดตาม公众号 WeChat: 逛逛GitHub โดยตรง และพูดคุยผ่านการสนทนาหลังบ้านได้