การออกแบบด้วย AI ควรสร้างโครงสร้าง
ทีมส่วนใหญ่ไม่ได้ต้องการภาพแบบเรียบๆ อีกหนึ่งภาพที่แก้ไขไม่ได้ พวกเขาต้องการจุดเริ่มต้นที่สามารถไหลไปตามเวิร์กโฟลว์จริงได้: Figma, PowerPoint, Canva, Keynote, SVG, JSON, code หรือ pipeline แบบกำหนดเอง
นี่คือแก่นของปรัชญาการออกแบบด้วย AI ของ Codia เราใช้ AI เพื่อทำความเข้าใจเนื้อหาภาพและสร้างมันกลับมาเป็นโครงสร้างที่แก้ไขได้ ภาพหน้าจอ PDF รูปภาพ สไลด์ หรือไฟล์ดีไซน์ไม่ควรถูกขังไว้เป็นเพียงพิกเซล มันควรกลายเป็นข้อความที่คุณเขียนใหม่ได้ รูปร่างที่ปรับได้ เลเยอร์ที่จัดระเบียบใหม่ได้ เลย์เอาต์ที่นำกลับมาใช้ได้ และโค้ดที่ตรวจทานได้
Codia หมายถึงอะไรเมื่อพูดว่า "เข้าใจ" ดีไซน์
ใน Codia ความเข้าใจเชิงภาพไม่ได้หมายถึงแค่การตรวจจับวัตถุบนผืนผ้าใบ ระบบจะมองหา "ความสัมพันธ์":
- ลำดับชั้นของเลย์เอาต์ กลุ่ม ส่วนการ์ด ตาราง ส่วนหัว และการนำทาง
- บล็อกข้อความ ตัวพิมพ์ ลำดับชั้น และ copy ที่แก้ไขได้
- รูปร่าง ไอคอน รูปภาพ มาสก์ และเลเยอร์ภาพ
- ระยะห่าง การจัดแนว สี และจังหวะทางภาพ
- ข้อจำกัดเฉพาะของเอาต์พุต เช่น Figma auto-layout, วัตถุ PowerPoint, โครงสร้าง SVG หรือโครงสร้างคอมโพเนนต์ฝั่ง frontend
เพราะเหตุนี้ ผลิตภัณฑ์ของ Codia จึงสร้างบนแนวคิดของการสร้างกลับใหม่ มากกว่าการแปลงแบบง่ายๆ ตัวแปลงแบบดั้งเดิมมักรักษาหน้าตาไว้ได้ แต่เสียโครงสร้างไป Codia พยายามรักษาส่วนของดีไซน์ที่ทำให้แก้ไขต่อได้
เอาต์พุตที่แก้ไขได้คือข้อกำหนดของผลิตภัณฑ์
สำหรับ Codia Design นั่นหมายถึงการแปลงภาพหน้าจอ PDF รูปภาพ และหน้าเว็บให้เป็นเลเยอร์ Figma ที่แก้ไขได้ แทนที่จะเป็นบิตแมปเดียวที่วางแปะเข้าไป
สำหรับ NoteSlide นั่นหมายถึงการสร้าง PDF และสไลด์ที่อิงภาพขึ้นมาใหม่เป็นเด็ค PowerPoint หรือ Keynote ที่แก้ไขได้ โดยที่ข้อความยังเป็นข้อความ และรูปร่างยังเป็นรูปร่าง
สำหรับ Codia Code นั่นหมายถึงการเปลี่ยนดีไซน์ให้เป็น implementation ฝั่ง frontend พร้อมโครงสร้างคอมโพเนนต์ การตั้งชื่อที่มีความหมาย เบรกพอยต์แบบ responsive แอตทริบิวต์ด้าน accessibility และตัวเลือกเอาต์พุตเฉพาะเฟรมเวิร์ก
สำหรับ Visual Struct API นั่นหมายถึงการส่งกลับเป็น tree JSON แบบมีชนิดข้อมูลที่เครื่องมือปลายทางสามารถตรวจสอบ เรนเดอร์ แปลง หรือ import เข้าไปในระบบออกแบบและโค้ดของตัวเองได้
รูปแบบเอาต์พุตอาจต่างกันไปตามผลิตภัณฑ์ แต่หลักการไม่เปลี่ยน: ผลลัพธ์ควรใช้งานได้จริงหลังการสร้าง
Codia Studio อยู่ตรงไหน
Codia Studio คือฝั่งการสร้างของแนวคิดเดียวกัน มันให้ผู้ใช้บรรยายสิ่งที่ต้องการด้วยภาษาธรรมชาติ และสร้างงานภาพที่สามารถแก้ไข ปรับปรุง และนำกลับมาใช้ใหม่ได้ หน้าเว็บปัจจุบันอธิบาย Studio ว่าเป็นพื้นที่ทำงานด้านการออกแบบที่เข้าใจ design systems รักษาความสอดคล้องของภาษาเชิงภาพ รองรับการแก้ไขข้อความแบบเป็นชั้น และมอบ editor ระดับมืออาชีพ ไม่ได้ให้แค่ภาพเดี่ยว
เรื่องนี้สำคัญเพราะงานสร้างสรรค์แทบไม่จบลงที่การสร้างครั้งแรก ทีมมักแก้พาดหัว เปลี่ยน assets ปรับสี ให้เข้ากับ brand rules และ export ไปยังเครื่องมือปลายทาง Codia Studio ถูกออกแบบมารอบวงจรนั้น
Codia Code อยู่ตรงไหน
Design-to-code คือจุดที่ "AI design" ต้องเจอกับความจริงของวิศวกรรม Codia Code รองรับเอาต์พุต React, Vue, HTML/CSS, Flutter และ SwiftUI พร้อมตัวเลือกสไตล์อย่าง Tailwind CSS, CSS Modules, inline styles และ styled components
เอกสารการสร้างโค้ดแบ่งเป็นสองโหมดที่ใช้งานได้จริง:
- Base Code สำหรับความเที่ยงตรงทางภาพที่รวดเร็ว เมื่อเป้าหมายแรกคือให้ตรงกับดีไซน์
- AI Code สำหรับเอาต์พุตที่ดูแลรักษาได้มากกว่า โดยใช้การวิเคราะห์โครงสร้าง การรับรู้ด้วย vision การตั้งชื่ออย่างชาญฉลาด การจดจำเลย์เอาต์ การตรวจจับคอมโพเนนต์ การดึง assets และค่าเริ่มต้นด้าน accessibility
ความแตกต่างนี้ตั้งใจไว้ชัดเจน บางครั้งความเร็วสำคัญที่สุด บางครั้งเอาต์พุตต้องกลายเป็น production code ที่วิศวกรดูแลต่อได้ ผลิตภัณฑ์ควรทำให้ tradeoff นี้เห็นได้ชัด
ความคิดสร้างสรรค์ของมนุษย์ยังคงเป็นชั้นตรวจทาน
Codia ไม่มอง AI ว่าเป็นตัวแทนของวิจารณญาณด้านการออกแบบ หน้า product ระบุเรื่องการตรวจทานไว้อย่างชัดเจน: เอาต์พุตที่แก้ไขได้ควรถูกตรวจเทียบกับไฟล์ต้นฉบับก่อนเข้าสู่ production และคำอ้างอิง benchmark จะขึ้นอยู่กับคุณภาพของ source, ประเภทไฟล์ และรูปแบบเอาต์พุตที่เลือก
นี่คือบทบาทเชิงปฏิบัติของ AI ใน Codia:
- ทำการสร้างโครงสร้างแรกให้อัตโนมัติ
- รักษาเจตนาที่แก้ไขได้ให้มากที่สุด
- ลดงานแปลแบบแมนนวลที่ทำซ้ำๆ
- ปล่อยให้การตัดสินใจสุดท้าย การตัดสินใจด้านแบรนด์ และความหมายของผลิตภัณฑ์อยู่กับทีมมนุษย์
AI ทำงานหนัก ส่วนดีไซเนอร์ นักพัฒนา นักการตลาด นักการศึกษา และผู้ปฏิบัติงานเป็นคนตัดสินว่าสิ่งใดควรถูกส่งมอบ