Wireframes
ยินดีต้อนรับ
พื้นที่ Wireframes ช่วยให้คุณออกแบบและสร้างต้นแบบเลย์เอาต์อินเทอร์เฟซของคุณได้อย่างเป็นภาพ สร้าง wireframe เพื่อวางแผนโครงสร้างแอปพลิเคชันของคุณก่อนเริ่มเขียนโค้ด เมื่อคุณเปิด Wireframes เป็นครั้งแรก คุณจะเห็นหน้าจอต้อนรับพร้อมการ์ด สร้าง Wireframe เพื่อเริ่มต้น หรือใช้ปุ่ม + Wireframe ใหม่ ที่มุมบนขวา
ฟีเจอร์หลัก
ออกแบบด้วยตนเอง
สร้างไวร์เฟรมด้วยมือโดยใช้ตัวแก้ไขแคนวาสแบบภาพ — ลากและวางคอมโพเนนต์เพื่อออกแบบหน้าจอ
การสร้างด้วย AI
อธิบายสิ่งที่คุณต้องการและให้ AI สร้างเอกสารไวร์เฟรมและเฟรมให้โดยอัตโนมัติ
การป้อนข้อมูลเสียง
ใช้ปุ่มไมโครโฟนในตัวหรือคลิกกลางเพื่อบอกคำอธิบายไวร์เฟรมด้วยเสียง
ไวร์เฟรมเป็นโค้ด
เมื่อไวร์เฟรมพร้อมแล้ว ส่งไปยังการสร้างโค้ดโดยตรง — จากการออกแบบไปสู่โค้ดที่ใช้งานได้ในเวิร์กโฟลว์เดียว
การสร้างไวร์เฟรม
คลิก สร้าง Wireframe หรือ + Wireframe ใหม่ เพื่อเปิดกล่องโต้ตอบการสร้าง คุณจะต้องป้อนชื่อเรื่อง เลือกแพลตฟอร์มเป้าหมาย (มือถือ เดสก์ท็อป หรือเว็บ) เขียนคำอธิบาย wireframe ของคุณ และเลือกระหว่างโหมด ด้วยตนเอง หรือ ขับเคลื่อนด้วย AI
ฟิลด์ตั้งค่าโปรเจกต์
ชื่อ
ตั้งชื่อโปรเจกต์ไวร์เฟรมเพื่อให้ระบุได้ในรายการไวร์เฟรมภายหลัง
แพลตฟอร์ม
เลือกแพลตฟอร์มเป้าหมาย — Mobile, Desktop หรือ Web — เพื่อปรับแต่งเลย์เอาต์และข้อจำกัดของไวร์เฟรม
คำอธิบาย
อธิบายสิ่งที่คุณต้องการสร้าง ใช้โดยโหมด AI-Powered เพื่อสร้างเอกสารและเฟรม รองรับการป้อนข้อมูลเสียงผ่านปุ่มไมโครโฟน
โหมด
เลือก Manual เพื่อเข้าสู่ตัวแก้ไขแคนวาสทันที หรือ AI-Powered เพื่อให้ AI สร้างเอกสารและเฟรมให้
โหมด Manual
เมื่อคุณเลือกแท็บ ด้วยตนเอง และคลิก สร้าง คุณจะถูกนำไปยังตัวแก้ไขแคนวาส wireframe โดยตรง ซึ่งคุณสามารถเริ่มสร้างหน้าจอได้ทันที นี่คือตัวเลือกที่ดีที่สุดเมื่อคุณมีแนวคิดชัดเจนเกี่ยวกับการออกแบบและต้องการควบคุมอย่างเต็มที่ตั้งแต่เริ่มต้น
เมื่อใดควรใช้ Manual
คุณมีการออกแบบเฉพาะในใจและต้องการสร้างมันเอง
คุณต้องการร่างเลย์เอาต์คร่าวๆ อย่างรวดเร็วก่อนจะปรับแต่ง
คุณต้องการควบคุมทุกองค์ประกอบอย่างเต็มที่ตั้งแต่เริ่มต้น
โหมด AI-Powered
เมื่อคุณเลือกแท็บ ขับเคลื่อนด้วย AI ตัวเลือกเพิ่มเติมจะปรากฏขึ้น คุณสามารถพิมพ์หรือบอกคำอธิบายของคุณ กำหนดเฟรมแต่ละเฟรมตามต้องการ เลือกโมเดล AI ที่คุณต้องการจากเมนูดรอปดาวน์ด้านบน แล้วคลิก สร้าง เพื่อให้ AI สร้างเอกสาร wireframe ให้คุณ
วิธีการทำงาน
ป้อนรายละเอียด
กรอกชื่อ เลือกแพลตฟอร์ม และเขียนคำอธิบายโปรเจกต์ของคุณ
กำหนดเฟรม (ไม่บังคับ)
สลับไปยังแท็บกำหนดเฟรมเพื่อระบุหน้าจอหรือมุมมองแต่ละรายการที่คุณต้องการให้ AI สร้าง
เลือกโมเดล AI
เลือกโมเดล AI ที่คุณต้องการจาก dropdown (เช่น Claude Code, Opus 4.6)
สร้าง
คลิกสร้างเพื่อเริ่มการสร้างเอกสาร AI โปรเจกต์ไวร์เฟรมจะปรากฏในรายการขณะสร้างเอกสาร
สร้างเฟรม
เมื่อเอกสารเสร็จสมบูรณ์ คุณสามารถเริ่มสร้างเฟรมแต่ละรายการจากตัวแก้ไขไวร์เฟรม
ปรับปรุงด้วย AI
ในโหมดขับเคลื่อนด้วย AI การคลิกปุ่ม ปรับปรุงด้วย AI จะเปิดกล่องโต้ตอบที่ช่วยให้คุณปรับปรุงคำอธิบายโดยใช้ AI ซึ่งจะนำสิ่งที่คุณเขียนในช่องคำอธิบายมาปรับปรุงตามคำแนะนำของคุณ — ทำให้มีรายละเอียดมากขึ้น มีโครงสร้างมากขึ้น หรือครอบคลุมมากขึ้นก่อนสร้าง wireframe
ตัวเลือกการปรับปรุง
โมเดล AI
เลือกโมเดล AI ที่จะใช้ปรับปรุงคำอธิบาย (เช่น Claude Code, Opus 4.6)
คำแนะนำการปรับปรุง
ให้คำแนะนำเฉพาะเพื่อบอก AI ว่าควรปรับปรุงคำอธิบายอย่างไร (ไม่บังคับ) รองรับการป้อนข้อมูลเสียง
ปรับปรุงคำอธิบาย
คลิกเพื่อเรียกใช้การปรับปรุง AI จะเขียนใหม่และปรับปรุงคำอธิบายตามข้อมูลและคำแนะนำของคุณ
การสร้างเอกสาร
หลังจากคลิก สร้าง ในโหมดขับเคลื่อนด้วย AI โปรเจกต์ wireframe ของคุณจะปรากฏในรายการ wireframe พร้อมสถานะ กำลังสร้างเอกสาร... AI กำลังสร้างเอกสารที่มีโครงสร้างสำหรับโปรเจกต์ของคุณตามชื่อเรื่อง แพลตฟอร์ม คำอธิบาย และเฟรมที่คุณกำหนด
จะเกิดอะไรขึ้นต่อไป
การสร้างเอกสาร
AI สร้างเอกสารที่มีโครงสร้างกำหนดแต่ละหน้าจอ คอมโพเนนต์ และเลย์เอาต์ตามคำอธิบายของคุณ
การสร้างเฟรม
เมื่อเอกสารเสร็จสมบูรณ์ คุณสามารถเปิดไวร์เฟรมและเริ่มสร้างเฟรมแต่ละรายการจากตัวแก้ไข
การปรับแต่ง
หลังจากสร้างเฟรมแล้ว คุณสามารถปรับ เพิ่ม หรือลบคอมโพเนนต์ในตัวแก้ไขแคนวาสด้วยตนเองเพื่อปรับแต่งการออกแบบ