รับการออกแบบ AI: จับ UI แบบสดและเปลี่ยนเป็นโค้ดที่ใช้งานได้
Get Design AI โดย Viktor Odainyi เชื่อมต่อเว็บอินเตอร์เฟซสดกับตัวแทนการเขียนโค้ด AI สำหรับการทำต้นแบบด้านหน้า มันดึงส่วนประกอบของอินเตอร์เฟซที่มองเห็นได้จากหน้าเว็บและเปลี่ยนเป็นโค้ดสั้นที่นักพัฒนาสามารถนำกลับมาใช้ใหม่ในโครงการและต้นแบบที่ใช้ AI ช่วยเหลือ ส่วนขยายนี้มุ่งเน้นไปที่การจับภาพอย่างรวดเร็ว การส่งออกไปยังรูปแบบโค้ดเว็บทั่วไป และการทำงานที่พร้อมสำหรับคลิปบอร์ดสำหรับเครื่องมือ AI มุ่งเป้าไปที่นักพัฒนาด้านหน้า นักออกแบบ UI และนักเขียนโค้ดที่ใช้ AI เพื่อเร่งกระบวนการสร้างอินเตอร์เฟซ.
ส่วนขยายสามารถจับข้อมูลจากหน้าเว็บสดได้อะไรบ้าง?
เครื่องมือใช้ตัวเลือก hover เพื่อให้ผู้ใช้เลือกองค์ประกอบของอินเทอร์เฟซแต่ละรายการบนเว็บไซต์สดและคัดลอกโครงสร้างและสไตล์ขององค์ประกอบไปยังคลิปบอร์ด โดยไม่ต้องเข้าถึงรหัสต้นทางของเว็บไซต์ พฤติกรรมนี้สนับสนุนการทำงานที่ตัวอย่างหน้าเว็บจริงโดยตรงในเบราว์เซอร์ ช่วยให้นักพัฒนาและนักออกแบบทดสอบส่วนที่ถูกดึงออกมาในโครงการ staging หรือ local ก่อนที่จะรวมเข้ากับแอปพลิเคชัน
มันเข้ากับกระบวนการพัฒนาที่ขับเคลื่อนด้วย AI ได้อย่างไร?
ส่วนขยายถูกสร้างขึ้นสำหรับการทำงานระหว่างเบราว์เซอร์กับ AI-agent โดยตรงและได้รับการปรับให้เหมาะสมสำหรับการวางผลลัพธ์ลงในผู้ช่วยการเขียนโค้ด แพลตฟอร์มที่เข้ากันได้ ได้แก่:
- Lovable
- v0
- Cursor
- Claude และ Gemini (ยังระบุว่าเข้ากันได้)
รูปแบบโค้ดและผลลัพธ์ของส่วนประกอบที่มันสร้างขึ้นคืออะไร?
ส่วนขยายส่งออกองค์ประกอบที่จับได้เป็น HTML, Inline CSS, Tailwind CSS หรือ React/JSX และสามารถบรรจุรูปแบบ UI ที่ซับซ้อนเป็น ส่วนประกอบ JSX ที่สามารถนำกลับมาใช้ใหม่ได้ วัสดุต้นทางอธิบายผลลัพธ์ว่าเหมาะสำหรับการใช้งานในผลิตภัณฑ์ และเครื่องมือถูกวางตำแหน่งให้ทำงานได้ดีร่วมกับเฟรมเวิร์ก utility-first เช่น Tailwind เมื่อผู้ใช้ปรับส่วนที่ถูกดึงออกมาเข้ากับฐานโค้ดที่ใหญ่กว่า
ใครและเบราว์เซอร์ใดที่มันถูกออกแบบมาเพื่อ?
ส่วนขยายมุ่งเป้าไปที่วิศวกรด้าน frontend, นักออกแบบ UI/UX และนักเขียนโค้ด vibe และทำงานบน Google Chrome และเบราว์เซอร์ที่ใช้ Chromium อื่น ๆ รวมถึง Brave, Edge และ Vivaldi นักพัฒนามีความสัมพันธ์กับการเคลื่อนไหวการเขียนโค้ด vibe และระบบนิเวศ DESIGN.md โครงการนี้ถูกอธิบายว่าเบาและตั้งใจที่จะทำงานข้ามเว็บไซต์สดใด ๆ และในปัจจุบันให้บริการฐานผู้ใช้ขนาดเล็กที่มีความเชี่ยวชาญพร้อมการให้คะแนนสาธารณะที่จำกัด
เหมาะสำหรับการสร้างต้นแบบ AI เป็นอันดับแรก แต่ยังอยู่ในระยะเริ่มต้น
Get Design AI เป็นตัวเลือกที่เหมาะสมสำหรับนักพัฒนาและนักออกแบบที่พึ่งพาตัวแทน AI เพื่อเร่งการสร้างอินเตอร์เฟซ เนื่องจากมันเชื่อมโยงการจับภาพในเบราว์เซอร์เข้ากับการทำงานของตัวแทน ข้อแลกเปลี่ยนหนึ่งคือรอยเท้าในระยะเริ่มต้น: ฐานผู้ใช้ที่เล็กและเฉพาะเจาะจงและการให้คะแนนสาธารณะที่จำกัดบ่งชี้ว่าการนำไปใช้งานยังอยู่ในระยะเริ่มต้น สำหรับการรวมที่ปลอดภัยมากขึ้น ให้ทดสอบการดึงข้อมูลในหน้าที่ไม่ใช่การผลิตและตรวจสอบสแนปช็อตที่สร้างขึ้นก่อนที่จะเพิ่มลงในฐานข้อมูลโค้ด.
