HTML to React & Figma - ส่วนขยาย Chrome สำหรับแปลงเว็บไซต์เป็นคอมโพเนนต์ React

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

[charychary]

รีวิว
คัดลอกทั้งเว็บไซต์ในครั้งเดียวได้ค่อนข้างยาก
ยิ่งคอมโพเนนต์ที่คัดลอกมีขนาดใหญ่ โอกาสเกิดข้อผิดพลาดก็ยิ่งมาก จึงต้องคัดลอกคอมโพเนนต์หลักอย่าง header, main, article, side, footer แยกกัน และให้ผู้พัฒนาเขียน container layout เอง

ฟีเจอร์ด้านสไตลิง
ค่าเริ่มต้นแบบ inline คือสร้างแท็ก style ให้แต่ละคอมโพเนนต์ หรือใส่พร็อพเพอร์ตี style ให้แต่ละ html ซึ่งในมุมมองของนักพัฒนา รู้สึกว่าดูแลรักษายาก เพราะโค้ดแยกจาก js ได้ไม่ดีและค่อนข้างรก
ฟีเจอร์แปลงเป็น Tailwindcss นั้นดีมากจริงๆ

ฟีเจอร์แยกคอมโพเนนต์
มีอยู่ก็จริง แต่แทบจะนับว่าไม่มี แถมยังมี css ปริมาณมหาศาลชวนปวดหัว และคอมโพเนนต์จำนวนมากที่น่าจะนำกลับมาใช้ซ้ำได้ก็ยังถูกใช้เป็น html ตรงๆ
ดังนั้นจึงได้โค้ด jsx ระดับหลายพันบรรทัดออกมา

อัปเดต AI
สามารถเปลี่ยนคอนเซปต์ดีไซน์ผ่าน AI chat ได้ แต่ไม่ได้มีอะไรใหม่ล้ำอย่างที่คิด แม้ว่าประมาณหนึ่งในสามครั้งจะได้ดีไซน์ที่สดใหม่
แต่เพราะเป็นแบบเสียเงิน จึงได้ลองใช้ไม่กี่ครั้ง

การสร้างไฟล์แบบสแตติก
ชอบตรงที่รวมไอคอนด้วยเทคนิค image sprite ที่รวมไฟล์อย่าง Svg หรือ png หลายไฟล์เข้าด้วยกันเป็นไฟล์เดียว

สรุป
เหมือนกับเวลาใช้ generative AI ที่มีอยู่เดิม
มันสร้าง "โค้ดที่โดยรวมโอเค แต่ในรายละเอียดก็ยังขาดอยู่ จนผู้พัฒนาต้องมาปรับแก้ต่อ"
โดยเฉพาะฟีเจอร์แยกคอมโพเนนต์ที่ยังไม่ดีพอ ตอนนี้จึงดูมีประโยชน์ได้ประมาณแค่ "ตัวดึง layout และไฟล์สแตติก"
ก่อนหน้านี้ AI อย่าง gpt ค่อนข้างจัดการปัญหาเรื่อง layout ของดีไซน์ css ได้ยาก หากไม่ใช่ business logic แต่ตัวนี้อาจช่วยเสริมในด้านนั้นได้ คงต้องลองใช้อีกสักหน่อย

[iolothebard]

ทำไมเราถึงต้องแปลง HTML เป็น React (?) ล่ะ?

[yangeok]

ขโมยไอเดีย UI..

[bobross0]

สุดยอดมาก...

[roxie]

ใช้ได้ดีมากเลย..

[kws730]

ดีมากเลย

[GN⁺]

ความคิดเห็นบน Hacker News

• ตัวผลิตภัณฑ์จริงน่าสนใจมาก แค่ทดสอบพื้นฐานก็เห็นได้ว่าสร้างดีไซน์ที่ประณีตกว่าโมเดล LLM ทั่วไปอย่างมาก วางแผนจะใช้ทำต้นแบบในสัปดาห์นี้

  • สงสัยว่าได้ปรับอะไรจาก LLM มาตรฐานบ้าง นึกภาพได้ว่าอาจตั้ง guardrails, จัดเตรียมคอมโพเนนต์ไว้ให้ หรือทำการ fine-tune บนคอร์ปัสของเว็บไซต์ที่ดี

• เครื่องมือนี้เป็นวิธีที่ดีในการดึงส่วนต่าง ๆ ของหน้าออกมาเป็น HTML ที่สะอาดและพร้อมพิมพ์ ตัวอย่างเช่น Claude เว็บ UI ไม่สามารถพิมพ์ประวัติแชตทั้งหมดได้ และพิมพ์ได้เฉพาะสิ่งที่มองเห็นบนหน้าจอ

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

• สงสัยว่าลิขสิทธิ์ของผลลัพธ์จากเครื่องมือแบบนี้จะเป็นอย่างไร เพราะไม่ใช่ทุกเว็บไซต์ที่จะมีไลเซนส์กำกับไว้ จึงอาจคลุมเครือยิ่งกว่า LLM ทั่วไป

• เป็นส่วนขยายเบราว์เซอร์ที่มีประโยชน์มาก ชอบมากที่สามารถแปลงสไตล์เป็น TailwindCSS ได้ ฉลาดมาก

• เครื่องมือนี้ยอดเยี่ยมจริง ๆ ลองกับเว็บไซต์ประมาณ 10 แห่งแล้ว และทำงานได้ดีกับองค์ประกอบของเว็บไซต์ราว 80%

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

• เป็นเครื่องมือที่เจ๋งมาก น่าเสียดายที่ทุกวันนี้การพัฒนาฟรอนต์เอนด์ซับซ้อนจนต้องมีเครื่องมือแบบนี้ คิดถึงสมัย view-source กับ style.css ไฟล์เดียว

• ตรวจดูฟอนต์ของโลโก้ Hacker News แล้ว พบว่าไม่เหมือนกัน

  • ของเดิมคือ: Verdana, Geneva, sans-serif
  • ของคุณคือ: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
  • ดูดีนะ แต่ไม่เข้าใจว่าทำไมถึงเป็นแบบนี้

• ทำได้ดีมาก สงสัยว่ามีแผนจะทำให้รองรับ Firefox หรือไม่

• สงสัยว่าจะใช้กับหน้า Framer ของตัวเองและโฮสต์เองได้ไหม

• เป็นวิธีที่มีประโยชน์มากในการดึง HTML และ CSS ของเว็บไซต์