ออกแบบก่อน เลือกหน้าตาก่อนเริ่มสร้าง
สรุปสั้น ๆเปิดออกแบบก่อนในหน้าโปรเจกต์แล้วกดสร้างแอป ภายในหนึ่งนาทีคุณจะเห็นหน้าจอแรกที่ดูเหมือนเสร็จแล้ว 3 แบบ แต่ละแบบมีสไตล์ต่างกัน ทั้งบนเดสก์ท็อปและโทรศัพท์ โหลดแบบเพิ่ม ดูรูปแบบอื่น ปรับสี มุม และฟอนต์ หรือขอให้ปรับตามที่บอก จากนั้นกดสร้างกับแบบที่ชอบที่สุด แล้วทั้งแอปจะใช้หน้าตานั้น
งานสร้างแรกที่เดาหน้าตาเอาเอง มักเป็นงานที่คนต้องเริ่มใหม่บ่อยที่สุด ออกแบบก่อน จะแสดงหน้าจอแรกที่ดูเสร็จสมบูรณ์จากไอเดียของคุณหลายแบบ วาดพร้อมกันด้วยโมเดล AI ที่ทำงานเร็ว ก่อนจะเริ่มสร้างอะไรก็ตาม เลือกแบบที่ชอบ แล้วทั้งแอปจะสร้างด้วยหน้าตาที่คุณเลือก ทั้งสี ฟอนต์ มุม และวิธีจัดวางรูปภาพ
ใช้ออกแบบก่อนอย่างไร
หัวข้อที่มีชื่อว่า “ใช้ออกแบบก่อนอย่างไร”-
ในหน้า โปรเจกต์ อธิบายแอปในช่องคำขอ
-
เปิด ออกแบบก่อน สวิตช์จะเป็นสีส้ม ขอบของช่องและปุ่ม สร้างแอป ก็เป็นสีส้มด้วย ข้อความใต้ช่องจะเปลี่ยนเป็น Enter เพื่อออกแบบ
-
กด สร้างแอป หน้าต่าง ออกแบบก่อน จะเปิดขึ้น ตอนนี้ยังไม่มีอะไรถูกสร้าง
-
ดูหน้าจอต่าง ๆ ปรากฏขึ้น แบบแรกที่เสร็จจะแสดงขนาดใหญ่ตรงกลาง ส่วนแบบอื่น ๆ จะแสดงเป็นภาพย่อด้านล่าง คลิกภาพย่อใดก็ได้เพื่อแสดงตรงกลาง
-
เมื่อเจอแบบที่ใช่ กดปุ่ม สร้าง ที่ตามด้วยชื่อแอป โปรเจกต์จะถูกสร้างด้วยหน้าตานั้น และงานสร้างแรกจะเริ่มขึ้น
สิ่งที่เห็นบนหน้าจอคืออะไร
หัวข้อที่มีชื่อว่า “สิ่งที่เห็นบนหน้าจอคืออะไร”- ด้านบน แสดงบรีฟของคุณและนาฬิกา ระหว่างวาดหน้าจอจะนับเป็นวินาที แล้วเปลี่ยนเป็น พร้อมสร้าง
- พื้นที่ตรงกลาง แสดงหน้าจอหนึ่งแบบขนาดใหญ่ แต่ละแบบคือหน้าที่เสร็จสมบูรณ์หนึ่งหน้า ไม่ใช่โครงร่าง และใช้ถ้อยคำของคุณเอง “เว็บไซต์” (ที่ที่คนเข้ามาเพื่อค้นหา จอง หรือซื้อ) จะวาดเป็นหน้าแรก ส่วน “เครื่องมือ” (สิ่งที่เปิดขึ้นมาเพื่อทำงาน) จะวาดเป็นหน้าจอทำงานหลักที่มีเนื้อหาสมจริงเต็มหน้า
- ภาพย่อ แสดงทุกหน้าจอพร้อมชื่อผลิตภัณฑ์และสไตล์ เช่น “พาสเทลอ่อน ๆ” “หรูหราเรียบสงบ” หรือ “สวิสเรียบง่าย” และตัวนับอย่าง “3 พร้อมแล้ว · 0 ยังวาดอยู่” เลือกหน้าจอได้ทันทีที่เห็น แม้ยังวาดไม่เสร็จ
- เดสก์ท็อป / โทรศัพท์ แสดงหน้าเดียวกันในความกว้างของคอมพิวเตอร์หรือในกรอบโทรศัพท์ ทุกหน้าจอวาดให้ใช้ได้ทั้งสองขนาด
ก่อนหน้าจอแรกจะปรากฏ พื้นที่ตรงกลางจะแสดงข้อความสั้น ๆ ว่ากำลังเกิดอะไรขึ้น เช่น “กำลังอ่านบรีฟของคุณ…” และ “ยังไม่ได้สร้างอะไร นี่เป็นแค่หน้าตาของแอป” หากเว็บไซต์ต้องมีภาพถ่าย MonstarX จะวาดภาพไว้ชุดเดียว แล้วทุกหน้าจอจะใช้ภาพชุดเดียวกัน
ดูตัวเลือกเพิ่มได้ไหม
หัวข้อที่มีชื่อว่า “ดูตัวเลือกเพิ่มได้ไหม”- โหลดเพิ่มอีก 3 แบบ แสดงแนวทางเพิ่มอีกสามแบบในสไตล์อื่น (ระบบวาดไว้ระหว่างที่คุณดูชุดแรก) ดูได้สูงสุดเก้าแบบ
- ดูรูปแบบต่าง ๆ 5 แบบ เปลี่ยนสไตล์ของหน้าจอที่อยู่ตรงกลางห้าแบบ โดยใช้ผลิตภัณฑ์ ถ้อยคำ และส่วนต่าง ๆ เดิม ในสไตล์ใหม่ห้าแบบ ได้แก่ “กระจก” “หมึก” “กลางคืน” “สไตล์นิตยสาร” และ “สัญญาณ” รูปแบบเหล่านี้จะเปิดเป็นชุดใหม่ที่ภาพย่อแรกคือต้นฉบับ สลับระหว่างชุดได้ด้วยลูกศรด้านบน ขอรูปแบบได้สามครั้งต่อหนึ่งเซสชัน
เปลี่ยนหน้าจออย่างไร
หัวข้อที่มีชื่อว่า “เปลี่ยนหน้าจออย่างไร”ปรับแต่ง เปลี่ยนได้ทันทีโดยไม่ต้องใช้ AI แผงข้างพื้นที่ตรงกลางจะเปลี่ยนทั้งหน้าพร้อมกัน
- สีหลัก มีสีให้เลือกเก้าสี เริ่มจากสีของหน้าจอนั้นเอง หรือเลือกสีใดก็ได้
- มุม เลือก เหลี่ยม มนเล็กน้อย หรือ โค้งมน
- รูปแบบตัวอักษร มีคู่ฟอนต์ให้เลือกสิบคู่
ภาพย่อจะเปลี่ยนตาม และงานสร้างจะใช้สิ่งที่คุณปรับแต่ง รีเซ็ตการปรับแต่ง จะนำหน้าตาเดิมกลับมา
ปรับ อธิบายสิ่งที่อยากเปลี่ยนเป็นคำพูด เช่น “อุ่นขึ้น” “เข้มขึ้น” หรือ “ใช้สีเขียวของเรา #2F6B4F” แล้วกด ปรับ หน้าจอที่เลือกจะถูกวาดใหม่ตามที่ขอและวางไว้ข้าง ๆ พร้อมคำบรรยายว่าคุณขออะไร ปรับได้สูงสุดหกครั้งต่อหนึ่งเซสชัน
กดสร้างแล้วจะเกิดอะไรขึ้น
หัวข้อที่มีชื่อว่า “กดสร้างแล้วจะเกิดอะไรขึ้น”MonstarX จะสร้างโปรเจกต์โดยใช้ชื่อของหน้าจอที่เลือก อัปโหลดไฟล์แนบ เก็บหน้าจอนั้น (ทั้งขนาดเดสก์ท็อปและโทรศัพท์) ไว้เป็นดีไซน์ของโปรเจกต์ แล้วเริ่มงานสร้างแรก เอเจนต์ MonstarX จะสร้างตามดีไซน์นั้น
- หน้าตา ทั้งสี ฟอนต์ มุม และโหมดสว่างหรือมืด จะใช้กับทุกหน้าของแอป
- หน้าที่อยู่ในตัวอย่าง (หน้าแรกของเว็บไซต์ หรือหน้าจอหลักของเครื่องมือ) จะจัดเลย์เอาต์และลำดับตามตัวอย่าง และเอเจนต์ MonstarX จะเทียบงานกับตัวอย่างไปตลอดระหว่างสร้าง
- หน้าและฟีเจอร์ ยังมาจากคำอธิบายของคุณ ตัวอย่างแสดงแค่หน้าเดียว แต่แอปจะได้ทุกอย่างที่คุณขอ
- ภาพถ่าย ในตัวอย่างจะกลายเป็นรูปภาพของแอปเอง
ข้อความแรกของคุณในแชทจะมีป้าย ออกแบบก่อน ที่แสดงชื่อ สไตล์ และสีของแบบที่เลือก คลิกเพื่อดูหน้าจอที่เลือกในขนาดเต็ม ทั้งความกว้างแบบเดสก์ท็อปและโทรศัพท์
ข้ามหรือปิดได้ไหม
หัวข้อที่มีชื่อว่า “ข้ามหรือปิดได้ไหม”- ข้ามและสร้างตอนนี้ จะสร้างโดยไม่ใช้หน้าตาที่เลือก เหมือนปิดออกแบบก่อนไว้
- การปิด หน้าต่าง (คลิก × กด Esc หรือคลิกด้านนอก) จะถามก่อนว่า “ปิด ‘ออกแบบก่อน’ ไหม ดีไซน์ รูปแบบ และการปรับแต่งทั้งหมดในเซสชันนี้จะหายไป” คำอธิบายและไฟล์ของคุณจะยังอยู่ในช่องคำขอ
- การโหลดหน้าใหม่ ด้วยคำอธิบายเดิมจะแสดงหน้าจอชุดเดิม และวาดเฉพาะส่วนที่ยังไม่เสร็จ
แป้นพิมพ์ กด ← และ → หรือ 1–9 เพื่อเลื่อนไปมาระหว่างหน้าจอ และกด Enter เพื่อสร้าง
ออกแบบก่อนใช้เครดิตไหม
หัวข้อที่มีชื่อว่า “ออกแบบก่อนใช้เครดิตไหม”ใช้ การวาดหน้าจอเป็นงาน AI ซึ่งคิดจากโควตาของแพ็กเกจเหมือนคำขออื่น ๆ จะแสดงใน การใช้งาน เป็น “ออกแบบก่อน” ภายใต้ ไม่ได้อยู่ในแอป และไม่นับรวมในโควตาโมเดลพรีเมียม เพราะคุณไม่ได้เป็นคนเลือกโมเดลเหล่านี้ เซสชันที่ขอรูปแบบครบทุกครั้งจะใช้มากกว่าเซสชันที่เลือกจากสามแบบแรก หากโควตาของแพ็กเกจหมดแล้ว หน้าต่างจะวาดหน้าจอไม่ได้
คำถามที่พบบ่อย
หัวข้อที่มีชื่อว่า “คำถามที่พบบ่อย”ตัวอย่างเป็นตัวกำหนดว่าแอปจะมีหน้าอะไรบ้างไหม
ไม่ ตัวอย่างกำหนดหน้าตาและเลย์เอาต์ของหน้าที่แสดงอยู่หน้าเดียว ส่วนหน้าและฟีเจอร์มาจากคำอธิบายของคุณ และหากทั้งสองขัดกัน คำอธิบายของคุณจะเป็นหลัก
แนบโลโก้หรือภาพหน้าจอเว็บไซต์ที่ชอบได้ไหม
ได้ รูปภาพที่แนบไปกับบรีฟ (สูงสุดสามรูป) จะส่งให้โมเดลออกแบบดู เพื่อหยิบสีและเอกลักษณ์จากรูปเหล่านั้นมาใช้
ทำไมไม่เห็นออกแบบก่อน
ออกแบบก่อนมีเฉพาะในช่องคำขอในหน้า โปรเจกต์ หลังลงชื่อเข้าใช้แล้ว ไม่มีในหน้าแรก คำขอที่มีแค่เอกสารโดยไม่มีข้อความจะสร้างตามปกติ พิมพ์สักประโยคเพื่อใช้เป็นต้นแบบในการออกแบบ
เปลี่ยนหน้าตาหลังสร้างเสร็จได้ไหม
ได้ ขอในแชท เช่น “ทำปุ่มให้มนและสีเขียวให้เข้มขึ้น” หรือใช้ โหมดแก้ไข
เปิดหน้าจอเหล่านี้ปลอดภัยไหม
ปลอดภัย ทุกหน้าจอถูกล้างก่อนแสดง สคริปต์และเนื้อหาจากภายนอกจะถูกนำออก หน้าจอจึงทำได้แค่แสดงผลเท่านั้น