การใช้งาน Grok Bot: สร้างภาพ Photomosaic ใน Figma

คุณอาจเคยเห็นภาพโมเสกสามแผงบนไทม์ไลน์ของคุณ ต่อไปนี้คือวิธีสร้างภาพเหล่านั้นด้วย @bot ใน @figma

https://x.com/kazarov_d/status/2094470313862136145

นักออกแบบทุกคนรู้ดีว่าพวกเขาจะสร้างมันขึ้นมาได้อย่างไร มันก็แค่สร้างความปวดหัวเล็กน้อย

https://x.com/studiobakers/status/2095077637639262295

ดังนั้นเราควรถามว่า "ฉันจะใช้ AI เพื่อทำให้สิ่งนี้ปวดหัวน้อยลง 90% ได้อย่างไร เพื่อที่ฉันจะได้โฟกัสไปที่ส่วนที่เจ๋งและสร้างสรรค์ของการออกแบบ"

Grok Bot สามารถทำสิ่งนั้นได้อย่างแน่นอน

ถ้าคุณไม่สนใจ "วิธีการ" และแค่อยากได้เทมเพลต @bot คุณสามารถหาได้ที่นี่: https://x.ai/bot/dYpPe1PCZv2WJDVTYDwhc

มิฉะนั้น นี่คือวิธีที่ฉันสร้างของฉันขึ้นมา:

การสร้างภาพโมเสก

แนวทางทั่วไปของฉันกับ Grok Bot คือ: แบ่งขั้นตอนว่าคุณจะสร้างชิ้นงานด้วยตัวเองอย่างไร จากนั้นให้ @Bot ทำสิ่งเดียวกันทุกประการ

ในกรณีนี้ เวิร์กโฟลว์คือการออกแบบใน Figma

https://x.com/justinsunyt/status/2096635033603756354

นี่เป็นเพียงผืนผ้าใบที่มีชิ้นงานหลัก แบ่งเป็นส่วนประกอบและแยกออกเป็นสามแผง เราสามารถย้อนวิศวกรรมอัตราส่วนภาพโดยดูจากโพสต์ที่มีอยู่บน X

ฉันขอให้ Bot ทำสิ่งนี้ทุกประการ - นี่คือพรอมต์แรกที่ปรับแต่งแล้วของฉัน

แทนที่ Cursor Gothic, [link to image] และ [insert file] ด้วยทรัพยากรของคุณ

1Reverse engineer this posting format - it's a photomosaic of three images that stitch into one wide screenshot on a shared background.
2
3https://x.com/kazarov_d/status/2094470313862136145
4https://x.com/studiobakers/status/2095077637639262295
5
6- Pull each panel at full res and get the aspect ratios.
7
8- Crop three export panels (left / center / right)
9
10- Make it a new design in the attached file [insert file] - keep it in one section
11
12- New background across all three panels [link to image] - use this asset, not the reference post's BG
13
14- Hero: screenshot of cursor.com on a simulated 4K display (2× DPR). Zoom the page so UI/type read at distance. Confirm the capture is actually the lander (nav + headline)
15
16- Centered drop shadow + real corner rounding on the window. Webpage top corners need a clipped/masked layer or they'll look square
17
18- Arc-style chrome: dark Cursor ink shell, colored traffic lights, centered URL in Cursor Gothic. Titlebar + URL text should hug height. Equal inset L/R/B around the page
19
20- Organize in Figma with components so one paste updates every panel - Background, Hero (Arc), Master, plus three export clips of Master
21
22Your work is done when editing the BG or hero once updates the master and all three exports.

หลังจากส่งพรอมต์แล้ว ให้ตรวจสอบบอทของคุณทุกๆ สองสามนาที - ถ้าสิ่งต่างๆ ผิดพลาด ให้ถามว่าทำไม

บางทีบอทอาจไม่ได้ใช้ autolayout อย่างถูกต้อง บางทีการเว้นวรรคอาจผิดพลาด บางทีรัศมีขอบอาจต้องปรับแต่ง

ทำการเปลี่ยนแปลง จดบันทึกว่าทำไมจึงจำเป็น จากนั้นรวมสิ่งเหล่านั้นเข้ากับพรอมต์ถัดไปของคุณ

กำลังดูบอทของฉันทำงาน

ประเด็นสำคัญบางประการ:

• ฉันใช้ ภาษาที่แม่นยำ สังเกตว่าฉันเรียกมันว่า "photomosaic" ไม่ใช่ "รูปภาพในรูปภาพเป็นสามสิ่งบนสิ่งของ"
• ฉันไม่รู้ ว่า photomosaic คืออะไร แต่ฉันถาม Grok ว่า "มันเรียกว่าอะไรเมื่อภาพตัดปะสามภาพประกอบกันเป็นภาพที่ใหญ่ขึ้น"
• ทุกพรอมต์ควรเริ่มต้นจากมุมมองของผู้เริ่มต้น - ฉันจะเรียนรู้ทุกสิ่งที่จำเป็นเพื่อทำสิ่งนี้ให้ดีได้อย่างไร?
• ความพยายามครั้งแรกของฉันไม่สมบูรณ์แบบ ฉันย้อนกลับไปหาพรอมต์ด้านบนโดยถาม Grok Bot ว่า "บอกฉันว่าคุณต้องการอะไรล่วงหน้าเพื่อให้ได้สิ่งนี้ถูกต้องในครั้งแรก"
• จงถามเสมอว่า "ฉันจะทำซ้ำเวิร์กโฟลว์นี้หรือทำให้แน่ใจว่า AI สามารถทำทุกอย่างได้ใน ครั้งหน้า ได้อย่างไร" นี่คือสิ่งที่ @poteto เน้นย้ำจริงๆ
• ฉันไม่ได้ใช้บอทเฉพาะสำหรับสิ่งนี้ - แค่บอทธรรมดาที่เชื่อมต่อกับ Figma สำหรับงานครั้งเดียวก็ใช้ได้ แต่สำหรับงานที่ทำซ้ำ ฉันคงจะสร้างผู้เชี่ยวชาญเฉพาะทาง

Grok Bot เป็นมากกว่าการใช้ AI อย่างมีประสิทธิภาพ - มันเกี่ยวกับวิธีการใช้คอมพิวเตอร์อย่างมีประสิทธิภาพ

นั่นหมายถึงการคิดจากหลักการแรก การสื่อสารอย่างมีประสิทธิภาพ และการมีความอดทน การใช้ Grok Bot ส่วนใหญ่是关于การแก้ปัญหา

ชิ้นงานที่เสร็จสมบูรณ์

ยิ่งไปกว่านั้น ตอนนี้ฉันมีชิ้นงานที่ทนทานซึ่งฉันสามารถนำกลับมาใช้ใหม่ได้ - เหมือนที่ฉันทำในโพสต์นี้:

การนำชิ้นงานของฉันกลับมาใช้ใหม่สำหรับโพสต์ประกาศ iPad

หากไม่มีความเข้าใจในรูปแบบนี้ ฉันคงไม่สามารถทำโพสต์ประกาศ iPad ได้ทันเวลา

บทบาทของนักสร้างสรรค์คือการปลุกเร้าอารมณ์

Grok Bot ช่วยให้ฉันโฟกัสไปที่การเลือกทรัพยากรและภาพ ในขณะที่มันจัดการทุกอย่างอื่น

คำถามที่ฉันได้รับบ่อยที่สุดคือ "ฉันจะใช้ Grok Bot ได้อย่างไร" - นี่คือวิธีหนึ่งในการใช้มันสำหรับการออกแบบ