How to Use Cursor as a Designer

1
00:00:00,000 --> 00:00:04,912
เริ่มจากภาพรวมของอินเทอร์เฟซ Cursor ก่อน ถ้าคุณเคยใช้เครื่องมือเขียนโค้ดด้วย

2
00:00:04,912 --> 00:00:08,208
AI ตัวอื่นมาก่อน อินเทอร์เฟซนี้คงดูคุ้นตาคุณไม่น้อย

3
00:00:08,208 --> 00:00:11,569
ในแถบด้านซ้ายคุณสามารถเริ่มเซสชันใหม่ หรือที่ Cursor

4
00:00:11,569 --> 00:00:14,994
เรียกกันว่า agents ได้ คุณใช้ช่องค้นหาอัจฉริยะ (smart

5
00:00:14,994 --> 00:00:18,031
search island) นี้ค้นหาได้ทั่วทุกโปรเจกต์ของคุณ

6
00:00:18,031 --> 00:00:21,134
รวมถึงโหมดต่าง ๆ ที่ใช้ใน Cursor และอย่างอื่นอีก

7
00:00:21,134 --> 00:00:24,236
เช่น agents, files, actions และ settings จากนั้น

8
00:00:24,236 --> 00:00:28,113
หนึ่งในฟีเจอร์หลักของ Cursor คือ automations (ระบบอัตโนมัติ)

9
00:00:28,113 --> 00:00:31,409
จะเห็นว่าผมตั้งไว้ตัวหนึ่งสำหรับการทำ documentation

10
00:00:31,409 --> 00:00:35,675
ของ design system และระบบนี้หมายความว่า ทุกครั้งที่ผมสร้างดีไซน์ใน

11
00:00:35,675 --> 00:00:38,842
Cursor เอกสารใหม่จะถูกเพิ่มเข้าไปใน design system

12
00:00:38,842 --> 00:00:42,655
ของผมโดยอัตโนมัติ ตามคอมโพเนนต์ใหม่ที่ผมสร้างในโปรเจกต์ใหม่

13
00:00:42,655 --> 00:00:46,209
หรือคอมโพเนนต์เดิมที่ผมแก้ไข ขอบอกตามตรงว่า automations

14
00:00:46,209 --> 00:00:49,247
ค่อนข้างเหมาะกับนักพัฒนาเสียมากกว่า อย่างเรื่อง

15
00:00:49,247 --> 00:00:54,740
code review, security, incidents ดังนั้นถ้าคุณเป็นนักออกแบบที่ทำงานด้านเทคนิคเป็นหลัก

16
00:00:54,740 --> 00:00:57,843
ฟีเจอร์นี้อาจจะใช่สำหรับคุณ กลับมาที่แถบด้านข้าง

17
00:00:57,843 --> 00:01:00,880
เรามีแผง customize (ปรับแต่ง) อยู่ตรงนี้ ในส่วน

18
00:01:00,880 --> 00:01:06,373
customize คุณสามารถเปิดฟีเจอร์หลายอย่างได้ แต่ที่เกี่ยวข้องกับนักออกแบบมากที่สุดก็คือ

19
00:01:06,373 --> 00:01:09,476
plugins, MCPs, skills และ subagents ด้วย plugins

20
00:01:09,476 --> 00:01:14,258
คุณเชื่อมต่อ Figma plugin ได้ เช่น ซึ่งเป็นเส้นทางที่เร็วที่สุดจากดีไซน์ใน

21
00:01:14,258 --> 00:01:17,683
Figma ไปสู่โค้ดจริง ผมจะโชว์เดโม่จริงให้ดูในอีกไม่ช้า

22
00:01:17,683 --> 00:01:21,303
ส่วน MCPs คือที่ที่คุณเชื่อมต่อ Cursor กับเครื่องมืออื่น

23
00:01:21,303 --> 00:01:24,405
ๆ เช่น Mobbin และ Notion ในกรณีของผม ส่วน skills

24
00:01:24,405 --> 00:01:27,766
ก็แน่นอนว่าเกี่ยวข้องกับนักออกแบบมาก เพราะมันช่วยให้

25
00:01:27,766 --> 00:01:31,062
Cursor สร้างงานออกแบบได้ดีขึ้น ถ้าคุณลองเปิด skills

26
00:01:31,062 --> 00:01:35,521
ทั้งหมดของผมแล้วเลื่อนลงมาหน่อย จะเห็นว่าผมติดตั้งสกิลไว้ค่อนข้างเยอะ

27
00:01:35,521 --> 00:01:38,817
รวมถึง front-end design skill ซึ่งตอนนี้เป็นสกิลสาย

28
00:01:38,817 --> 00:01:43,018
UI และเว็บดีไซน์ที่ได้รับความนิยมสูงสุด ผมจะไม่ลงรายละเอียดเรื่อง

29
00:01:43,018 --> 00:01:46,379
skills มากในวิดีโอนี้ เพราะวิดีโอนี้เกี่ยวกับ Cursor

30
00:01:46,379 --> 00:01:50,450
โดยเฉพาะ แต่ผมมีวิดีโอเรื่อง skills ไว้แล้ว ถ้าอยากรู้เพิ่มเติม

31
00:01:50,450 --> 00:01:55,491
กลับมาที่หน้าจอ new agent กัน เมนู dropdown มุมซ้ายบนตรงนี้คือที่ที่คุณจะเลือก

32
00:01:55,491 --> 00:01:59,304
working directory (โฟลเดอร์ทำงาน) ผมสร้างโฟลเดอร์ใหม่ไว้ที่

33
00:01:59,304 --> 00:02:03,247
root ชื่อ cursor demo อุทิศให้โปรเจกต์ที่ผมกำลังจะโชว์ให้ดูใน

34
00:02:03,247 --> 00:02:06,284
Cursor การเลือก directory ที่เฉพาะเจาะจงช่วยให้

35
00:02:06,284 --> 00:02:09,645
Cursor ทำงานมีประสิทธิภาพและเป็นระเบียบมากขึ้น ทีนี้

36
00:02:09,645 --> 00:02:12,747
สังเกตตรงนี้ให้ดี นี่คือเมนู dropdown เลือกโมเดล

37
00:02:12,747 --> 00:02:15,849
ที่คุณเลือกได้ว่าโปรเจกต์นี้จะใช้ AI โมเดลตัวไหน

38
00:02:15,849 --> 00:02:19,016
ถ้าคุณไม่ซีเรียสกับโมเดลมากนัก ก็แค่สับไปที่ auto

39
00:02:19,016 --> 00:02:22,829
ได้เลย คุณไม่ต้องเลือกเอง มันจะตัดสินใจให้ตามโปรเจกต์ของคุณ

40
00:02:22,829 --> 00:02:26,319
ถ้าคุณทำงานกับโปรเจกต์ที่ซับซ้อนมาก ๆ ต้องใช้การคิดลึก

41
00:02:26,319 --> 00:02:29,615
คุณใช้ max mode ได้ แต่รู้ไว้ก่อนว่ามันจะกิน tokens

42
00:02:29,615 --> 00:02:32,653
เยอะมาก และคุณควรอยู่ในแพ็กเกจระดับสูงอย่าง Pro

43
00:02:32,653 --> 00:02:36,336
Plus ถ้าจะใช้โหมดนี้ ลองดูโมเดล AI ที่อยู่ในลิสต์ตรงนี้สิ

44
00:02:36,336 --> 00:02:39,439
คุณจะเห็นว่ามีโมเดลหลากหลายจากหลายค่าย ถ้าคุณใช้

45
00:02:39,439 --> 00:02:42,735
Claude Code คุณจะได้โมเดลตระกูล Claude ถ้าใช้ Codex

46
00:02:42,735 --> 00:02:46,095
คุณจะได้โมเดลตระกูล GPT แต่ใน Cursor คุณได้ทั้งโมเดล

47
00:02:46,095 --> 00:02:49,391
Grok ตัวล่าสุด โมเดลตระกูล Claude อย่าง Opus, Haiku

48
00:02:49,391 --> 00:02:52,623
และ Sonnet และโมเดลตระกูล GPT อย่าง GPT 5.6, Terra

49
00:02:52,623 --> 00:02:55,919
และ Soul นี่ทำให้ Cursor ได้เปรียบในแง่ความยืดหยุ่น

50
00:02:55,919 --> 00:02:59,667
คุณมีโมเดลให้เลือกใช้เยอะกว่า และก็ไม่ได้จำกัดแค่ที่เห็นนะ

51
00:02:59,667 --> 00:03:02,834
คุณกด add models เพื่อเปิดใช้โมเดล GPT และ Claude

52
00:03:02,834 --> 00:03:06,647
รุ่นเก่า ๆ เพิ่มได้ และถ้าเลื่อนลงมาอีกหน่อย คุณยังได้โมเดล

53
00:03:06,647 --> 00:03:10,266
Gemini รวมถึง Kimi และ GLM อีกด้วย ดังนั้นไม่ว่าคุณจะชอบ

54
00:03:10,266 --> 00:03:13,369
AI โมเดลตัวไหน ก็มีโอกาสสูงที่ Cursor จะมีให้ใช้

55
00:03:13,369 --> 00:03:16,923
สำหรับเดโม่นี้ ผมจะใช้ Grok 4.5 ตัวใหม่ เพื่อดูว่ามันทำ

56
00:03:16,923 --> 00:03:20,090
UI design ได้ดีแค่ไหน ถ้าผมกดเครื่องหมายบวกตรงนี้

57
00:03:20,090 --> 00:03:23,515
คุณจะมีโหมดให้เลือกหลายแบบ เริ่มจากวางแผนโปรเจกต์ด้วย

58
00:03:23,515 --> 00:03:29,073
implementation plan, โหมด debug สำหรับตอนที่คุณทำงานกับโปรเจกต์ซอฟต์แวร์จริงมากกว่าแค่

59
00:03:29,073 --> 00:03:33,597
UI หรือ UX design, โหมด multitask ที่ช่วยให้ทำงานหลายอย่างพร้อมกันผ่าน

60
00:03:33,597 --> 00:03:36,764
subagents ได้เยอะ ๆ และโหมด ask ที่เปลี่ยน Cursor

61
00:03:36,764 --> 00:03:39,866
ให้เป็น AI แชตสนทนาธรรมดาแบบ ChatGPT หรือ Claude

62
00:03:39,866 --> 00:03:42,968
Chat ถ้าคุณดูวิดีโออื่นของผม คุณจะรู้ว่าผมชอบให้

63
00:03:42,968 --> 00:03:47,169
AI มีภาพอ้างอิงไว้ทำงานด้วย ดังนั้นถ้าคุณมีภาพหน้าจอของดีไซน์เดิม

64
00:03:47,169 --> 00:03:51,176
ๆ ที่อยากให้ Cursor ใช้เป็นแรงบันดาลใจ คุณแนบภาพมาตรงนี้ได้เลย

65
00:03:51,176 --> 00:03:54,278
และอย่างที่บอกไปก่อนหน้า Cursor มี skills ให้ใช้

66
00:03:54,278 --> 00:03:57,510
สำหรับอันนี้ผมจะใช้ classic front-end design skill

67
00:03:57,510 --> 00:04:00,547
สุดท้ายก่อนจะเขียนพรอมป์ต์แรก คุณยังเข้าถึง MCP

68
00:04:00,547 --> 00:04:03,714
servers ได้ด้วย ผมจะพูดถึงเรื่องนี้เพิ่มตอนที่ใช้

69
00:04:03,714 --> 00:04:07,463
Mobbin MCP ในช่วงท้าย มาเริ่มเดโม่กันด้วยพรอมป์ต์แรกของเรา

70
00:04:07,463 --> 00:04:10,888
โดยที่ยังเปิด front-end design skill อยู่ พรอมป์ต์คือ

71
00:04:10,888 --> 00:04:14,055
"ออกแบบแพลตฟอร์มการเรียนรู้ดิจิทัลสำหรับนักออกแบบ

72
00:04:14,055 --> 00:04:19,871
โดยเฉพาะ UI, UX และ product designers" จากนั้นก็มีแนวทางเพิ่มเติมเกี่ยวกับดีไซน์และเนื้อหา

73
00:04:19,871 --> 00:04:23,684
"แพลตฟอร์มควรให้ความรู้สึกทันสมัย สะอาดตา และมั่นใจทางสายตา

74
00:04:23,684 --> 00:04:27,497
ไม่ใช่เว็บไซต์คอร์สแบบทั่ว ๆ ไป รวมถึงหน้าโฮมที่มีคอร์สเด่น

75
00:04:27,497 --> 00:04:32,280
หน้าคอร์สรายละเอียด และหน้าเรียนที่ผู้ใช้ติดตามความคืบหน้าผ่านหลักสูตรได้"

76
00:04:32,280 --> 00:04:35,447
ขอแทรกเคล็ดลับนิดนึง โดยเฉพาะพรอมป์ต์ยาว ๆ แบบนี้

77
00:04:35,447 --> 00:04:39,841
ผมแนะนำให้ลองใช้เครื่องมือ dictation ที่ให้คุณพูดพรอมป์ต์แทนการพิมพ์

78
00:04:39,841 --> 00:04:42,879
ตอนแรก Cursor จะมีโหมดทั้งสี่แบบให้เห็นข้างหน้า

79
00:04:42,879 --> 00:04:46,692
แต่ผมอยากข้ามไปทำงานด้าน UI และ UX design ก่อน แล้วค่อยโชว์

80
00:04:46,692 --> 00:04:50,505
design mode ซึ่งจะเข้าใช้งานได้หลังจากการสร้างครั้งแรกเสร็จ

81
00:04:50,505 --> 00:04:55,094
ทีนี้ดูตรงนี้สิ เพราะ directory ของผมว่างเปล่าและยังไม่มีบริบทการออกแบบ

82
00:04:55,094 --> 00:05:00,523
มันเลยจะถามคำถามสองสามข้อ เพื่อไม่ให้ผลงานออกมาดูเหมือนเว็บเรียนออนไลน์ทั่วไปทุกเว็บ

83
00:05:00,523 --> 00:05:04,206
อย่างแรกคือ "เว็บนี้สำหรับใครเป็นหลัก" ผมอยากให้มันสำหรับ

84
00:05:04,206 --> 00:05:07,761
product designers ที่ทำงานประจำแล้วอยากพัฒนาตัวเองเสริม

85
00:05:07,761 --> 00:05:10,928
ไม่ต้องพิมพ์หรือคัดลอกวางอะไร ผมแค่กด add to chat

86
00:05:10,928 --> 00:05:14,935
ได้เลย แล้วคำถามถัดไป "ควรให้ความรู้สึกแบบไหน" ผมว่าความมั่นใจ

87
00:05:14,935 --> 00:05:18,619
(confidence) เป็นคำตอบที่ดีตามวิสัยทัศน์การออกแบบแอปของผม

88
00:05:18,619 --> 00:05:22,238
ก็กด add to chat อีกครั้ง และผมก็ตอบคำถามที่เหลือทั้งหมด

89
00:05:22,238 --> 00:05:25,857
รวมถึงเพิ่มไปด้วยว่าอยากให้ออกแบบสำหรับเดสก์ท็อปเป็นหลัก

90
00:05:25,857 --> 00:05:28,959
ทีนี้ก็กด prompt ได้เลย จุดนี้ก็เหมาะที่จะบอกว่า

91
00:05:28,959 --> 00:05:34,905
คุณใช้ Cursor เป็น IDE ได้เหมือนกัน นี่อาจเป็นตัวเลือกที่คุณชอบกว่าถ้าคุณเป็นนักพัฒนามากกว่า

92
00:05:34,905 --> 00:05:42,790
คุณใช้ IDE ในตัวของ Cursor ได้ และมันผสมผสานการสั่งงานด้วยพรอมป์ต์ตรงมุมขวาล่างเข้ากับการแก้ไขโค้ดด้วยมือของคุณเองได้ดีมาก

93
00:05:42,790 --> 00:05:46,603
Cursor จะถามบ่อย ๆ ว่าอนุญาตให้มันรันคำสั่งที่ต้องการได้ไหม

94
00:05:46,603 --> 00:05:50,351
ถ้าคุณไว้ใจ Cursor และอยากเห็นคำขออนุญาตพวกนี้น้อยลงเรื่อย

95
00:05:50,351 --> 00:05:54,681
ๆ ก็กด always run ทุกครั้งไปเลย ตอนนี้มันสร้างดีไซน์รอบแรกเสร็จแล้ว

96
00:05:54,681 --> 00:05:59,787
ทางขวามือคุณจะเห็นว่ามีการแก้ไขไฟล์ใดบ้าง เปิดหน้าต่างเบราว์เซอร์เพื่อพรีวิวงาน

97
00:05:59,787 --> 00:06:04,505
รันคำสั่งจากเทอร์มินัล ซึ่งแน่นอนว่าไม่ค่อยเกี่ยวข้องกับนักออกแบบเท่าไหร่

98
00:06:04,505 --> 00:06:07,801
และดูไฟล์ทั้งหมดที่เป็นส่วนหนึ่งของโปรเจกต์ปัจจุบัน

99
00:06:07,801 --> 00:06:11,226
นี่คือจุดที่คุณเห็นซอร์สโค้ดที่ประกอบร่างดีไซน์ของคุณ

100
00:06:11,226 --> 00:06:14,458
และคุณสามารถแก้โค้ดได้โดยตรงถ้ามีความรู้ด้านเทคนิค

101
00:06:14,458 --> 00:06:17,754
พอผมเปิดพาเนล changes, browser, terminal หรือ files

102
00:06:17,754 --> 00:06:23,506
แล้ว สมมติว่าผมเปิดไฟล์อยู่ ผมก็กดเครื่องหมายบวกเพื่อดึงหน้าต่างอื่นขึ้นมาเพิ่มได้เช่นกัน

103
00:06:23,506 --> 00:06:27,189
ลองเปิดดีไซน์ที่ Cursor เพิ่งสร้างในหน้าต่างเบราว์เซอร์ดู

104
00:06:27,189 --> 00:06:30,227
นี่คือสิ่งที่เรากำลังทำงานด้วยตอนนี้ เรามีฟอนต์

105
00:06:30,227 --> 00:06:34,040
serif สำหรับหัวข้อ ประกบกับฟอนต์ sans-serif สำหรับเนื้อความ

106
00:06:34,040 --> 00:06:37,336
ถ้าผมกด browse featured มันจะเลื่อนลงไปที่คอร์สเด่น

107
00:06:37,336 --> 00:06:41,085
และคอร์สแต่ละตัวก็มีหน้าเฉพาะของตัวเอง ที่บอกคำอธิบายคอร์ส

108
00:06:41,085 --> 00:06:46,578
ชื่อผู้สอน แล้วก็โครงร่างหลักสูตร สิ่งที่ผมชอบในดีไซน์นี้คือมันค่อนข้างละเอียดจริงจัง

109
00:06:46,578 --> 00:06:50,197
ถ้าผมคลิกเข้าไปในรายการใดรายการหนึ่ง มันจะโชว์ให้เห็นว่า

110
00:06:50,197 --> 00:06:54,915
UI จริง ๆ ข้างในคอร์สนั้นจะเป็นแบบไหน เรามีคอมโพเนนต์วิดีโอตัวอย่างตรงนี้

111
00:06:54,915 --> 00:06:59,310
ซึ่งแทบจะเป็นหัวใจของทุกคอร์ส ผมสามารถทำเครื่องหมายว่าจบแต่ละส่วนได้

112
00:06:59,310 --> 00:07:02,541
และเห็นว่ามีการจัดการสถานะ (state management) จริง

113
00:07:02,541 --> 00:07:08,099
ๆ รวมอยู่ด้วย ช่องทำเครื่องหมายทางซ้ายแต่ละช่องจะถูกเติมเมื่อผมอัปเดตว่าจบส่วนนั้นแล้ว

114
00:07:08,099 --> 00:07:11,201
และแถบความคืบหน้ามุมขวาบนก็ขยับตามแบบไดนามิกด้วย

115
00:07:11,201 --> 00:07:16,695
กลับมาที่หน้าโฮมด้านล่างคอร์สเด่น มันปิดท้ายหน้าแลนดิ้งด้วยลิสต์แคตตาล็อกคอร์สทั้งหมด

116
00:07:16,695 --> 00:07:20,960
โดยรวมนี่เป็นจุดเริ่มต้นที่ดีมาก แต่ก็ยังมีจุดที่ปรับปรุงได้แน่นอน

117
00:07:20,960 --> 00:07:25,226
เพื่อให้รู้สึกเป็นส่วนตัวมากขึ้น เรายังเห็นคอนเทนต์ตัวอย่างหลายจุด

118
00:07:25,226 --> 00:07:28,457
อย่างกราฟิกครึ่ง ๆ กลาง ๆ ที่ดูเก้กังตรงด้านขวาของ

119
00:07:28,457 --> 00:07:31,818
hero section และคอร์สแต่ละรายการด้านล่างก็มีแค่จุดสี

120
00:07:31,818 --> 00:07:36,471
ๆ อยู่ทางขวา ทั้งที่จริง ๆ แล้วดีไซน์ของเว็บนี้ควรจะมีความเป็นภาพมากขึ้น

121
00:07:36,471 --> 00:07:40,155
เพื่อไม่ให้ผู้ชมต้องพึ่งแค่การอ่านตัวหนังสือที่ยัดใส่หน้า

122
00:07:40,155 --> 00:07:44,356
จำ design mode ที่ผมบอกไว้ตอนต้นได้ไหม ตอนนี้เรามีผลงานรอบแรกแล้ว

123
00:07:44,356 --> 00:07:47,523
ผมเข้าใช้มันได้แล้ว มันคือไอคอนเล็ก ๆ มุมขวาบนนี้

124
00:07:47,523 --> 00:07:52,241
มองข้ามง่ายมาก แต่ทุกครั้งที่คุณสร้าง UI เสร็จ ตัวเลือกนั้นจะปรากฏตรงนั้น

125
00:07:52,241 --> 00:07:57,993
ตอนนี้ผมเปิด design mode แล้ว ซึ่งหมายความว่า ทุกครั้งที่ผมเลื่อนเมาส์ไปเหนือองค์ประกอบใด

126
00:07:57,993 --> 00:08:03,163
ๆ ในหน้า ผมคลิกเพื่อเลือกมัน แล้วเขียนพรอมป์ต์ที่เจาะจงองค์ประกอบนั้นโดยเฉพาะได้

127
00:08:03,163 --> 00:08:07,234
ตัวอย่างเช่น headline ตรงนี้ตอนนี้ทำงานไม่บรรลุเป้าหมายเอาซะเลย

128
00:08:07,234 --> 00:08:10,724
มันแค่อ่านชื่อแพลตฟอร์ม ซึ่งก็แสดงอยู่แล้วที่มุมซ้ายบน

129
00:08:10,724 --> 00:08:14,150
ดังนั้นผมจะสั่งว่า "ทำให้มันสื่อถึงคุณค่าของแพลตฟอร์ม

130
00:08:14,150 --> 00:08:17,252
ไม่ใช่ชื่อของมัน" และถึงแม้จะเขียนพรอมป์ต์เจาะจง

131
00:08:17,252 --> 00:08:25,330
คุณก็ยังเลือก AI โมเดลที่อยากใช้ได้อยู่ดี พรอมป์ต์อีกสองสามอันที่ผมจะสั่งต่อไปนี้ค่อนข้างเฉพาะเจาะจงและง่ายต่อการจัดการสำหรับ

132
00:08:25,330 --> 00:08:28,885
Cursor ผมเลยจะลดลงมาใช้ Composer 2.5 ซึ่งเร็วกว่าและใช้

133
00:08:28,885 --> 00:08:32,827
tokens น้อยกว่า Grok 4.5 ทีนี้กด send แล้วดูการเปลี่ยนแปลงกัน

134
00:08:32,827 --> 00:08:37,545
เราได้ headline ใหม่แล้ว และผมว่าอันนี้ทำงานได้มากกว่าแค่บอกชื่อแพลตฟอร์ม

135
00:08:37,545 --> 00:08:40,777
อย่างที่บอก กราฟิกทางขวานี่ดูเก้กังและครึ่ง ๆ กลาง

136
00:08:40,777 --> 00:08:44,202
ๆ แต่ผมเลือกองค์ประกอบนั้นแยกไม่ได้ซะที แต่โชคดีที่ใน

137
00:08:44,202 --> 00:08:47,563
design mode ผมแค่วาดกรอบล้อมรอบมันได้ พอเลือกได้แล้ว

138
00:08:47,563 --> 00:08:51,893
ผมจะสั่งว่า "ภาพแทนสไตล์ UI ที่แสดงให้เห็นว่าแพลตฟอร์มนี้มีอะไรให้"

139
00:08:51,893 --> 00:08:55,318
และเพราะ AI โดยทั่วไปถนัดสร้างกราฟิกผ่านโค้ดมากที่สุด

140
00:08:55,318 --> 00:08:59,713
ผมเลยเสริมว่า "สร้างด้วย HTML และ CSS และได้คะแนนพิเศษถ้าแอนิเมตด้วย

141
00:08:59,713 --> 00:09:03,526
JavaScript" อันนี้ซับซ้อนขึ้นมาหน่อย ลองใช้โมเดลที่เก่งกว่า

142
00:09:03,526 --> 00:09:06,693
เช่น Opus 4.8 สำหรับอันนี้ แล้วกด send ประเด็นคือ

143
00:09:06,693 --> 00:09:11,798
ใน design mode ผมส่งพรอมป์ต์หลายอันพร้อมกันได้ ดังนั้นระหว่างที่อันนั้นกำลังรัน

144
00:09:11,798 --> 00:09:16,710
ผมจะเลือกพื้นหลังของ hero section แล้วสั่งว่า "ทำให้พื้นหลังนี้น่าดึงดูดขึ้น

145
00:09:16,710 --> 00:09:20,071
ลองใช้ mesh gradient หรือพื้นหลังสไตล์อื่น ยังคงเป็น

146
00:09:20,071 --> 00:09:23,367
light mode อยู่ แต่เพิ่มความน่าสนใจทางสายตา" แล้วกด

147
00:09:23,367 --> 00:09:26,534
send พรอมป์ต์ที่สองก็รออยู่ในคิวแล้ว แต่จำฟีเจอร์

148
00:09:26,534 --> 00:09:29,571
multitasking ที่ผมพูดถึงตอนต้นได้ไหม ผมกด start

149
00:09:29,571 --> 00:09:32,803
multitasking ตรงนี้ แล้วมันจะรันทั้งสองงานพร้อมกัน

150
00:09:32,803 --> 00:09:36,292
ตอนนี้มันกำลังมอบหมายพรอมป์ต์แต่ละอันให้เป็น subagents

151
00:09:36,292 --> 00:09:40,170
ตัวใหม่ที่ทำงานพร้อมกัน ดูสิ ผมดู subagents ของผมด้านล่างนี้

152
00:09:40,170 --> 00:09:44,953
เห็นทั้งสองตัวทำงานคู่กัน และหยุดได้ถ้าต้องการ ระหว่างที่ทั้งสองกำลังทำงาน

153
00:09:44,953 --> 00:09:48,960
ผมจะสั่งพรอมป์ต์เพิ่มอีกหนึ่งอัน ผมจะเลือกคอร์สสามรายการตรงนี้

154
00:09:48,960 --> 00:09:52,385
แล้วสั่งว่า "จัดเรียงแนวนอนเป็นการ์ด แต่ละใบมีรูปภาพ"

155
00:09:52,385 --> 00:09:56,715
ตอนนี้เราจะเห็นว่า Cursor ยังทำงานอยู่ทางซ้าย แต่เราได้กราฟิกใหม่ใน

156
00:09:56,715 --> 00:10:00,916
hero section แล้ว แอนิเมตและดูเป็นภาพมากกว่าที่เห็นก่อนหน้านี้มาก

157
00:10:00,916 --> 00:10:04,729
ตอนนี้งานทั้งสามที่รันอยู่เสร็จหมดแล้ว เรามีกราฟิกแอนิเมตใน

158
00:10:04,729 --> 00:10:09,059
hero section คอร์สเด่นแสดงเป็นการ์ดโดยมีช่องว่างด้านบนไว้แทรกรูปภาพ

159
00:10:09,059 --> 00:10:14,423
ตอนนี้มันก็ยังเป็นแค่กราฟิกตัวอย่างเท่านั้น ถ้าคุณต้องการกราฟิกพื้นฐานแบบที่เห็นนี้

160
00:10:14,423 --> 00:10:17,590
Cursor ทำได้ให้คุณ แล้วกลับขึ้นไปที่ hero section

161
00:10:17,590 --> 00:10:20,886
เรามีพื้นหลังใหม่ แต่ก็ไม่ได้ดูอย่างที่ผมคาดไว้ซะที

162
00:10:20,886 --> 00:10:24,893
ดังนั้นผมจะแนบรูปภาพที่อยากให้ Cursor ใช้เป็นภาพพื้นหลังโดยตรง

163
00:10:24,893 --> 00:10:28,771
แล้วสั่งว่า "ใช้รูปนี้เป็นพื้นหลัง hero" และเพื่อความครบถ้วน

164
00:10:28,771 --> 00:10:32,002
ผมจะสับลงมาใช้โมเดลที่เบากว่า เช่น Sonnet 5 แล้วกด

165
00:10:32,002 --> 00:10:36,009
prompt ตอนนี้รูปนั้นโผล่ขึ้นมาใน hero section อย่างถูกต้องแล้ว

166
00:10:36,009 --> 00:10:39,952
นี่เป็นตัวเลือกที่ดีถ้าคุณได้สิ่งที่ต้องการผ่านพรอมป์ต์ไม่ได้

167
00:10:39,952 --> 00:10:45,445
และอยากให้ asset แก่ Cursor ตรง ๆ แทน สมมติว่าถึงจุดนี้ผมเริ่มชอบหน้าตาเว็บของเราแล้ว

168
00:10:45,445 --> 00:10:50,874
แต่มันก็ยังรู้สึกเหมือนร่างแรกอยู่ มันยังไม่ค่อยใช้ดีไซน์แพตเทิร์นที่ถูกต้องในบางจุด

169
00:10:50,874 --> 00:10:54,558
และมีหลักการที่เรานำจากแพลตฟอร์มเรียนออนไลน์ที่มีอยู่แล้ว

170
00:10:54,558 --> 00:10:57,660
เช่น มาประยุกต์กับเว็บเราเพื่อยกระดับขึ้นอีกขั้น

171
00:10:57,660 --> 00:11:02,378
นี่คือจุดที่ Mobbin MCP จะเข้ามามีบทบาท คุณจะเห็นว่าถ้าผมกดเครื่องหมายบวก

172
00:11:02,378 --> 00:11:06,191
เปิด MCP servers ผมมี Mobbin MCP เชื่อมต่อและเปิดใช้งานอยู่

173
00:11:06,191 --> 00:11:11,296
นี่คือเหตุผลที่ผมจะใช้ Mobbin มันคือคลังภาพหน้าจอแอปจริงที่ผู้ใช้จริงใช้งานจริง

174
00:11:11,296 --> 00:11:14,722
กว่า 600,000 ภาพ และมันไม่ใช่แค่ภาพหน้าจอเรื่อยเปื่อย

175
00:11:14,722 --> 00:11:18,664
ผมเรียกดูตามหมวดหมู่ที่กำลังออกแบบได้ ตามหน้าจอหรือองค์ประกอบ

176
00:11:18,664 --> 00:11:24,287
UI ที่กำลังออกแบบ หรือตามแนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบยูเซอร์โฟลว์แต่ละประเภท

177
00:11:24,287 --> 00:11:27,389
และเพราะผมกำลังออกแบบแพลตฟอร์มการเรียนรู้ดิจิทัล

178
00:11:27,389 --> 00:11:31,331
ผมอยากแน่ใจว่าผมใช้แนวทางปฏิบัติที่ดีที่สุดสำหรับแอปประเภทนี้

179
00:11:31,331 --> 00:11:34,563
แทนที่จะปล่อยให้ AI ออกแบบมั่ว ๆ บน Mobbin ผมค้นหา

180
00:11:34,563 --> 00:11:37,923
"digital learning platform" ได้ พอกด search มันจะใช้

181
00:11:37,923 --> 00:11:42,641
AI หาผลลัพธ์ที่เกี่ยวข้องที่สุดให้ผม ตอนนี้ผมเห็นแล้วว่าบริษัทชั้นนำอย่าง

182
00:11:42,641 --> 00:11:47,747
Skillshare, Codecademy, Coursera และอีกหลายเจ้าออกแบบแพลตฟอร์มของพวกเขากันยังไง

183
00:11:47,747 --> 00:11:51,301
แต่แทนที่จะไล่ดูภาพหน้าจอพวกนี้ด้วยมือแล้วคัดลอกวางเข้า

184
00:11:51,301 --> 00:11:58,475
Cursor ผมแค่บอก Cursor ว่า "ใช้ Mobbin MCP ศึกษาแพตเทิร์นและหลักการออกแบบที่ดีที่สุดสำหรับแพลตฟอร์มเรียนออนไลน์

185
00:11:58,475 --> 00:12:03,516
สร้างรายงานสรุปสิ่งที่พบ แล้วออกแบบโปรเจกต์เราใหม่เพื่อผสานแพตเทิร์นเหล่านั้น"

186
00:12:03,516 --> 00:12:06,877
ตอนนี้ Cursor กำลังใช้ MCP server นั้นค้นหาใน Mobbin

187
00:12:06,877 --> 00:12:11,789
ด้วยตัวเอง และรวบรวมแนวปฏิบัติการออกแบบที่เกี่ยวข้องกับแพลตฟอร์มเรามากที่สุด

188
00:12:11,789 --> 00:12:16,183
ถ้าไม่ทำแบบนี้ AI ก็จะแค่เดาว่าแนวปฏิบัติการออกแบบที่ดีที่สุดคืออะไร

189
00:12:16,183 --> 00:12:19,609
และการเดาเหล่านั้นจำนวนมากจะจบลงด้วย UI และ UX ที่แย่

190
00:12:19,609 --> 00:12:22,646
ทีนี้ดูตรงนี้ Cursor ค้นหาใน Mobbin ผ่าน Mobbin

191
00:12:22,646 --> 00:12:29,174
MCP แล้วทำรายงานละเอียดสรุปสิ่งที่พบออกมา และมันยังจัดวางภาพอ้างอิงทั้งหมดที่เจอไว้เป็นภาพให้เห็นด้วย

192
00:12:29,174 --> 00:12:33,375
มันชี้ว่า Skillshare และ MasterClass เป็นแรงบันดาลใจสำหรับหน้าโฮม

193
00:12:33,375 --> 00:12:38,286
และผมคลิกที่ภาพอ้างอิงใดก็ได้ มันจะพาผมไปที่หน้านั้นในหน้าต่างเบราว์เซอร์ของ

194
00:12:38,286 --> 00:12:41,712
Cursor ทันที จากตรงนั้นผมเลื่อนดูได้ว่าแพลตฟอร์มคล้าย

195
00:12:41,712 --> 00:12:47,787
ๆ กันทำอะไรกันบ้าง หรือจะกลับมาที่รายงานก็ได้ มันยังวางแรงบันดาลใจสำหรับหน้าคอร์สรายละเอียดจาก

196
00:12:47,787 --> 00:12:50,889
Codecademy และ Uxcel ไว้ด้วย รวมถึงอีกสองสามส่วน

197
00:12:50,889 --> 00:12:56,318
และที่สำคัญที่สุด ท้ายรายงานมันมีแผนปรับดีไซน์สำหรับแพลตฟอร์มการเรียนรู้ดิจิทัลของผม

198
00:12:56,318 --> 00:13:00,325
มันตัดสินใจปรับปรุงหน้าโฮม หน้าคอร์สรายละเอียด หน้าเล่นบทเรียน

199
00:13:00,325 --> 00:13:05,172
และอีกสองสามจุดสำคัญ ขณะที่บางอย่างมันตัดสินใจเก็บไว้ตามเดิมจากสิ่งที่เจอใน

200
00:13:05,172 --> 00:13:08,403
Mobbin ลองดูดีไซน์ใหม่กันจริง ๆ เรามี hero section

201
00:13:08,403 --> 00:13:11,635
ใหม่เอี่ยมพร้อมช่องค้นหาตรงกลาง เพราะ Cursor เจอใน

202
00:13:11,635 --> 00:13:15,836
Mobbin ว่านั่นคือแพตเทิร์นที่แพลตฟอร์มการเรียนรู้ดิจิทัลมีร่วมกัน

203
00:13:15,836 --> 00:13:20,747
หรือผมจะข้ามไปหมวดคอร์สยอดนิยมได้เลย และเรามีกราฟิกใหม่ที่ปรับปรุงแล้วทางขวา

204
00:13:20,747 --> 00:13:24,625
โชว์ UI จริงของแพลตฟอร์ม จากนั้นก็มีการปรับปรุงภาพให้กับส่วน

205
00:13:24,625 --> 00:13:27,986
continue learning และคอร์สเด่นที่มีสกรอลแนวนอนตรงนี้

206
00:13:27,986 --> 00:13:31,476
แล้วมันก็แทรกส่วน testimonial ที่มีโหมดมืดสุดเท่เข้ามา

207
00:13:31,476 --> 00:13:37,292
และเรามีส่วน practitioners ที่ออกแบบใหม่สวยงาม ซึ่งโชว์ผู้สอนที่คุณเรียนด้วยบนแพลตฟอร์มได้

208
00:13:37,292 --> 00:13:41,364
และมันยังดึงภาพสต็อกจริงจาก Unsplash มาใช้ ซึ่งเป็นเคล็ดลับเล็ก

209
00:13:41,364 --> 00:13:46,922
ๆ ที่ทำใน Cursor แล้วทำให้ UI ดูมีชีวิตชีวาและสมจริงมากกว่าใช้สี่เหลี่ยมตัวอย่างธรรมดา

210
00:13:46,922 --> 00:13:51,446
และด้านล่างของหน้าโฮมก็ดูดีมากเช่นกันกับส่วนแคตตาล็อกที่ปรับดีไซน์ใหม่

211
00:13:51,446 --> 00:13:55,776
ผมชอบอวตารผู้สอนเล็ก ๆ ทางขวา ชื่อและตำแหน่งก็จัดวางได้สะอาดตาดีมาก

212
00:13:55,776 --> 00:13:59,007
การรีดีไซน์ทั้งหมดนี้เกิดขึ้นได้เพราะเราให้ Cursor

213
00:13:59,007 --> 00:14:05,858
ค้นคลังภาพกว่า 600,000 ภาพของ Mobbin และเข้าใจว่าดีไซน์ที่ดีสำหรับแพลตฟอร์มการเรียนรู้ดิจิทัลแบบนี้คืออะไร

214
00:14:05,858 --> 00:14:09,154
ถ้าอยากเริ่มใช้ Mobbin และรับส่วนลด 20% จากค่าสมัคร

215
00:14:09,154 --> 00:14:14,454
ใช้ลิงก์ด้านล่างในคำอธิบายวิดีโอได้เลย ต่อไป ผมอยากโชว์ยูสเคสที่ทรงพลังอีกอย่างของ

216
00:14:14,454 --> 00:14:17,879
Cursor ผมมี UI มือถือของแอปติดตามการเงิน และอยากทดสอบ

217
00:14:17,879 --> 00:14:21,627
Cursor ว่ามันจะแปลงดีไซน์ Figma นี้เป็นโค้ดจริงได้ดีแค่ไหน

218
00:14:21,627 --> 00:14:25,699
ซึ่งมักเรียกว่ากระบวนการ design to code เนื่องจากเฟรมเหล่านี้มี

219
00:14:25,699 --> 00:14:29,835
auto layout ใช้อย่างถูกต้องครบถ้วน และทางขวามือคุณจะเห็นว่าเรามี

220
00:14:29,835 --> 00:14:37,332
typography tokens และ color tokens จริง ๆ นี่ทำให้ดีไซน์เหล่านี้พร้อมสมบูรณ์ที่จะแปลงจากดีไซน์เป็นโค้ดด้วยเครื่องมือ

221
00:14:37,332 --> 00:14:40,564
AI วิธีทำคือ ไปที่ customize มุมซ้ายบน แล้วจากแท็บ

222
00:14:40,564 --> 00:14:43,860
plugins เราจะเพิ่มปลั๊กอินใหม่ คลิก add แล้วกด from

223
00:14:43,860 --> 00:14:47,220
marketplace คุณจะเห็น Figma plugin โผล่มาอันแรกทันที

224
00:14:47,220 --> 00:14:50,452
ที่ต้องทำก็แค่คลิก add to cursor แล้วเลือก add for

225
00:14:50,452 --> 00:14:53,748
myself ตอนนี้ผมยืนยันตัวตนบัญชี Figma เรียบร้อยแล้ว

226
00:14:53,748 --> 00:14:57,238
พร้อมใช้ได้ เปิด agent ใหม่ แล้วเช็กให้แน่ใจว่าติดตั้ง

227
00:14:57,238 --> 00:15:00,728
Figma plugin แล้ว เอาล่ะ ผมเห็น Figma ในรายการ plugins

228
00:15:00,728 --> 00:15:05,187
และมันเปิดใช้งานอยู่ ทั้งหมดที่ผมต้องทำคือ ผมอยากสร้างเฟรมนี้โดยเฉพาะ

229
00:15:05,187 --> 00:15:09,711
ดังนั้นผมจะเลือกมันแล้วกด command L เพื่อคัดลอกลิงก์เฟรมไปยังคลิปบอร์ด

230
00:15:09,711 --> 00:15:13,459
ทีนี้กลับไปที่ Cursor วางลิงก์นั้น แล้วสั่งว่า "แปลงดีไซน์

231
00:15:13,459 --> 00:15:16,562
UI นี้เป็นโค้ดจริงด้วย HTML, CSS และ JavaScript"

232
00:15:16,562 --> 00:15:19,664
นี่คือดีไซน์แอปมือถือ ดังนั้นถ้าเป็นโปรเจกต์จริง

233
00:15:19,664 --> 00:15:24,382
ผมคงใช้ SwiftUI เป็นต้น แต่สำหรับเดโม่นี้ เทคโนโลยีชุดนี้ก็ใช้ได้ดีพอแล้ว

234
00:15:24,382 --> 00:15:27,548
พรอมป์ต์นี้ตรงไปตรงมาพอสมควร ผมเลยกด prompt ไปเลย

235
00:15:27,548 --> 00:15:30,780
ทีนี้ดูตรงนี้สิ ด้านขวาคือดีไซน์ Figma ต้นฉบับ และ

236
00:15:30,780 --> 00:15:34,270
Cursor สร้างดีไซน์นี้เป็นโค้ด HTML, CSS และ JavaScript

237
00:15:34,270 --> 00:15:38,406
ทางซ้าย การสร้างนี้ใช้เวลาประมาณ 5 นาที และหน้าตาแทบเหมือนดีไซน์

238
00:15:38,406 --> 00:15:43,189
Figma เป๊ะ และถึงแม้เราจะให้แค่ลิงก์เฟรมเดียวโดยไม่มีอินเทอร์แอกทีฟอะไรเลย

239
00:15:43,189 --> 00:15:46,355
มันก็ยังเพิ่มสัมผัสของอินเทอร์แอกทีฟให้ตามจุดต่าง

240
00:15:46,355 --> 00:15:49,781
ๆ เช่น ตัวเลือกช่วงวันที่นี้ เราไม่เห็นกราฟเปลี่ยนตาม

241
00:15:49,781 --> 00:15:52,818
แต่เห็นตัวเลขหลักตรงนี้เปลี่ยนตามวันที่ที่เลือก

242
00:15:52,818 --> 00:15:57,407
ก็เจ๋งที่ผมสับไปแท็บ investment ได้ แล้วมันก็เดาเอาว่าแท็บนั้นควรมีอะไร

243
00:15:57,407 --> 00:16:02,189
แต่ดูตรงนี้สิ พอกลับไปที่แท็บ expenses คุณจะเห็นกราฟนี้แอนิเมตแบบเรียลไทม์

244
00:16:02,189 --> 00:16:05,485
ผมจะโชว์ให้ดูอีกสองสามรอบ มันดูหรูหรามาก และ Cursor

245
00:16:05,485 --> 00:16:12,271
มักจะทำแอนิเมชันแบบนั้นให้โดยไม่ต้องขอด้วยซ้ำ มาถึงตอนนี้คุณน่าจะได้ภาพที่ชัดเจนมากแล้วว่าในฐานะนักออกแบบ

246
00:16:12,271 --> 00:16:16,020
ใช้ Cursor ทำอะไรได้บ้าง คุณทำ UI และเว็บดีไซน์จากศูนย์ได้

247
00:16:16,020 --> 00:16:19,704
คุณแปลงดีไซน์ Figma ที่มีอยู่เป็นโค้ดด้วยพรอมป์ต์เดียวได้

248
00:16:19,704 --> 00:16:22,871
และผมแนะนำอย่างยิ่งให้ใช้ MCPs ใน Cursor โดยเฉพาะ

249
00:16:22,871 --> 00:16:26,037
Figma และ Mobbin จริง ๆ แล้วผมมีวิดีโอเฉพาะเรื่อง

250
00:16:26,037 --> 00:16:29,075
MCP servers อยู่ ถ้าอยากรู้เพิ่มเติม ไปดูได้เลย

251
00:16:29,075 --> 00:16:36,055
สรุปก็คือ นี่คือ Cursor สำหรับนักออกแบบ หวังว่าตอนนี้คงชัดเจนแล้วว่ามันไม่ได้เป็นแค่เครื่องมือสำหรับนักพัฒนา

252
00:16:36,055 --> 00:16:39,092
มันเป็นเครื่องมือที่ทรงพลังจริง ๆ สำหรับสาย UX,

253
00:16:39,092 --> 00:16:42,711
UI และ product designers ด้วย อย่างไรก็ตาม ถ้าคุณถนัดกับ

254
00:16:42,711 --> 00:16:45,943
Claude Code, Codex หรือแม้แต่ Antigravity อยู่แล้ว

255
00:16:45,943 --> 00:16:51,501
บางทีอาจไม่คุ้มที่จะเปลี่ยน มันขึ้นอยู่กับว่าเครื่องมือไหนที่คุณรู้สึกใช้งานถนัดที่สุด

256
00:16:51,501 --> 00:16:55,120
เพราะมันคล้ายกันหมด ถ้าจะให้สรุปวิดีโอนี้เป็นหนึ่งประโยค

257
00:16:55,120 --> 00:17:00,226
ก็คือ ช่องว่างระหว่างการออกแบบสิ่งหนึ่งกับการสร้างมันจริงกำลังปิดลงอย่างรวดเร็ว

258
00:17:00,226 --> 00:17:04,427
และนักออกแบบที่ปรับตัวเข้าหาสิ่งนั้น จะเป็นคนที่ไม่มีวันถูกแทนที่

259
00:17:04,427 --> 00:17:08,110
คุณไม่จำเป็นต้องเป็นวิศวกร คุณแค่ต้องยอมรับความจริงที่ว่า

260
00:17:08,110 --> 00:17:12,570
ตอนนี้นักออกแบบทุกคนก็เขียนโค้ดได้เหมือนกัน ต้องขอบคุณเครื่องมืออย่าง

261
00:17:12,570 --> 00:17:17,417
Cursor และเครื่องมือ AI agentic อื่น ๆ คอมเมนต์ไว้ได้ถ้าอยากได้วิดีโอเรื่อง

262
00:17:17,417 --> 00:17:20,584
Cursor เพิ่ม หรืออยากเรียนเครื่องมือออกแบบตัวอื่น

263
00:17:20,584 --> 00:17:24,720
ขอบคุณที่รับชม และอย่าลืมกดติดตามเพื่อเป็นนักออกแบบที่ดีขึ้นครับ