Impeccable + Claude,Codex,Kimi: This is ONE OF THE BEST SKILLS YET!

1
00:00:00,000 --> 00:00:04,763
สวัสดีครับ ยินดีต้อนรับสู่วิดีโออีกตอนหนึ่ง คุณอาจจะสังเกตเห็นแล้วล่ะครับว่า

2
00:00:04,763 --> 00:00:07,772
ทุกครั้งที่ขอให้เครื่องมือเขียนโค้ดด้วย AI สร้าง

3
00:00:07,772 --> 00:00:11,971
front end (ส่วนติดต่อผู้ใช้ฝั่งหน้าเว็บ) ให้ คุณจะได้ผลลัพธ์แบบเดิม

4
00:00:11,971 --> 00:00:15,167
ๆ ซ้ำ ๆ เสมอ ไม่ว่าจะเป็นฟอนต์ Inter ใช้กับทุกอย่าง

5
00:00:15,167 --> 00:00:18,740
การไล่เฉดสีจากม่วงไปฟ้าตรงไหนสักแห่งบนหน้า การ์ดซ้อนการ์ด

6
00:00:18,740 --> 00:00:22,813
และไอคอนมุมโค้งเล็ก ๆ ที่วางเหนือหัวข้อทุกอัน ไม่สำคัญว่าคุณจะใช้

7
00:00:22,813 --> 00:00:27,451
Claude Code, Cursor หรือเครื่องมืออื่นใด เพราะโมเดลทุกตัวถูกฝึกด้วยเทมเพลต

8
00:00:27,451 --> 00:00:30,585
SaaS ชุดเดียวกัน ผลลัพธ์ที่ได้ก็เลยเป็นดีไซน์สไตล์

9
00:00:30,585 --> 00:00:35,286
AI แบบเดิมซ้ำไปซ้ำมา ครับ วันนี้เราจะมาดูเครื่องมือที่พยายามแก้ปัญหานี้พอดี

10
00:00:35,286 --> 00:00:40,488
มันชื่อว่า Impeccable ซึ่งโดยพื้นฐานแล้วคือสกิลด้านดีไซน์สำหรับเอเจนต์เขียนโค้ดด้วย

11
00:00:40,488 --> 00:00:43,872
AI ของคุณ มันเป็นโอเพนซอร์สเต็มรูปแบบภายใต้สัญญาอนุญาต

12
00:00:43,872 --> 00:00:47,006
Apache 2.0 ใช้ฟรี และมาแรงมากบน GitHub ด้วยดาวกว่า

13
00:00:47,006 --> 00:00:50,140
48,000 ดวง ซึ่งถือว่าเหลือเชื่อมากสำหรับสกิลออกแบบ

14
00:00:50,140 --> 00:00:53,963
ตัวสกิลสร้างโดย Paul Bacaus คนที่อยู่ในวงการพัฒนาเว็บมานานมาก

15
00:00:53,963 --> 00:00:58,099
ดังนั้นนี่ไม่ใช่ชุดพรอมต์มั่ว ๆ ที่ใครสักคนทำขึ้นในสุดสัปดาห์เดียว

16
00:00:58,099 --> 00:01:01,421
มันคือสกิลเดียวที่มี slash commands ทั้งหมด 23 คำสั่ง

17
00:01:01,421 --> 00:01:04,993
โหมดวนซ้ำบนเบราว์เซอร์แบบสด และกฎตรวจจับแบบ deterministic

18
00:01:04,993 --> 00:01:08,691
(มีผลลัพธ์ตายตัว ไม่พึ่งโมเดล) 41 ข้อ ที่จับรูปแบบดีไซน์แย่

19
00:01:08,691 --> 00:01:11,637
ๆ ได้โดยไม่ต้องเรียกใช้ LLM เลยแม้แต่ครั้งเดียว

20
00:01:11,637 --> 00:01:15,147
งั้นเราเข้าเรื่องกันเลยดีกว่า มาดูกันว่ามันทำอะไรได้บ้าง

21
00:01:15,147 --> 00:01:18,218
ก่อนอื่นมาพูดกันว่า Impeccable จริง ๆ แล้วคืออะไร

22
00:01:18,218 --> 00:01:22,291
โดยแก่นของมัน มันคือสกิลที่ติดตั้งเข้าไปในเครื่องมือเขียนโค้ดด้วย

23
00:01:22,291 --> 00:01:30,000
AI ของคุณ เมื่อติดตั้งแล้ว เอเจนต์ของคุณจะได้ศัพท์ด้านดีไซน์ที่เหมาะสมและชุดมาตรฐานคุณภาพให้ยึดถือเวลาสร้างส่วนติดต่อผู้ใช้

24
00:01:30,000 --> 00:01:33,510
แทนที่โมเดลจะมั่ว ๆ สร้าง dashboard ธรรมดา ๆ ออกมาอีกตัว

25
00:01:33,510 --> 00:01:36,957
ตอนนี้มันมีคำแนะนำจริงจังเกี่ยวกับตัวพิมพ์ (typography)

26
00:01:36,957 --> 00:01:40,028
สี ระยะห่าง การเคลื่อนไหว และอะไรทั้งหมดที่แยก UI

27
00:01:40,028 --> 00:01:45,920
ที่ดีออกจากดีไซน์สไตล์ AI แบบมั่ว ๆ และที่เจ๋งที่สุดคือมันไม่ได้จำกัดอยู่กับเครื่องมือตัวเดียว

28
00:01:45,920 --> 00:01:49,053
มันใช้ได้กับ Claude Code, Cursor, OpenCode, Gemini

29
00:01:49,053 --> 00:01:52,062
CLI, Codex CLI, GitHub Copilot ใน VS Code, Kiro,

30
00:01:52,062 --> 00:01:56,762
Trey, RovoDev, Coder และอีกสองสามตัว เพราะฉะนั้นไม่ว่าคุณจะใช้เอเจนต์ตัวไหน

31
00:01:56,762 --> 00:01:59,833
ก็มีโอกาสเสียบปลั๊กมันเข้าไปได้ ซึ่งเยี่ยมมากครับ

32
00:01:59,833 --> 00:02:03,782
ทีนี้มาติดตั้งมันและดูว่ามันทำงานยังไงกัน การติดตั้งง่ายมากครับ

33
00:02:03,782 --> 00:02:07,856
มีหลายทางเลือก แต่ทางที่แนะนำคือคำสั่งเดียว เปิดเทอร์มินัลแล้วรัน

34
00:02:07,856 --> 00:02:11,992
npx impeccable skills install เท่านี้เอง มันจะตรวจจับว่าเครื่องมือ

35
00:02:11,992 --> 00:02:16,129
AI ตัวไหนที่คุณตั้งค่าไว้ แล้วติดตั้งสกิลให้กับเครื่องมือเหล่านั้น

36
00:02:16,129 --> 00:02:19,200
ถ้าคุณทำงานเป็นทีมและอยาก vendor มันเข้าไปใน repo

37
00:02:19,200 --> 00:02:23,148
ของคุณ คุณก็เพิ่มมันเป็น Git submodule ได้ แล้วเชื่อมด้วยคำสั่ง

38
00:02:23,148 --> 00:02:26,219
skills link โดยส่งแฟล็ก --source ชี้ไปที่โฟลเดอร์

39
00:02:26,219 --> 00:02:29,290
submodule และแฟล็ก --providers ใส่ค่าเช่น Claude,

40
00:02:29,290 --> 00:02:32,487
cursor ก็มีตลาดปลั๊กอิน (plugin marketplace) สำหรับ

41
00:02:32,487 --> 00:02:36,059
Claude Code ด้วย และคุณยังดาวน์โหลด zip จากเว็บไซต์ของเขา

42
00:02:36,059 --> 00:02:39,506
impeccable.style แล้วคัดลอกไฟล์ด้วยมือได้อีก แต่เอาจริง

43
00:02:39,506 --> 00:02:43,329
ๆ คำสั่ง NPX นี่ง่ายที่สุด ผมเลยใช้วิธีนั้น เมื่อติดตั้งเสร็จ

44
00:02:43,329 --> 00:02:46,401
สิ่งแรกที่อยากทำคือรันคำสั่ง init ในเครื่องมือ AI

45
00:02:46,401 --> 00:02:50,349
ของคุณ พิมพ์ /impeccable init ซึ่งจะเป็นการตั้งค่าแบบครั้งเดียว

46
00:02:50,349 --> 00:02:53,608
โดยเอเจนต์จะถามคำถามสองสามข้อเกี่ยวกับโปรเจกต์ของคุณ

47
00:02:53,608 --> 00:02:56,804
คำถามหลักคือว่าโปรเจกต์ของคุณเป็นแบบเน้นแบรนด์ เช่น

48
00:02:56,804 --> 00:03:00,753
landing page (หน้าแลนดิ้ง) หรือพอร์ตโฟลิโอ หรือแบบเน้นผลิตภัณฑ์

49
00:03:00,753 --> 00:03:05,454
เช่น UI ของแอปหรือ dashboard จากคำตอบของคุณ มันจะสร้างไฟล์สองไฟล์ในโปรเจกต์

50
00:03:05,454 --> 00:03:09,402
ไฟล์แรกคือ product.md ซึ่งเก็บกลุ่มเป้าหมาย การวางตำแหน่งแบรนด์

51
00:03:09,402 --> 00:03:12,473
น้ำเสียงและโทนของแบรนด์ และแม้แต่ anti-references

52
00:03:12,473 --> 00:03:16,046
ซึ่งก็คือสิ่งที่คุณไม่อยากให้ดีไซน์ของคุณออกมาเป็นแบบนั้น

53
00:03:16,046 --> 00:03:20,119
ไฟล์ที่สองคือ design.md ซึ่งกลายเป็นเอกสารอ้างอิงระบบดีไซน์ของคุณ

54
00:03:20,119 --> 00:03:23,754
ประกอบด้วยชุดสี การเลือกตัวพิมพ์ และนิยามของคอมโพเนนต์ต่าง

55
00:03:23,754 --> 00:03:26,888
ๆ และนี่คือส่วนที่ฉลาด คำสั่งอื่น ๆ ของ Impeccable

56
00:03:26,888 --> 00:03:32,341
ทุกคำสั่งจะอ่านไฟล์เหล่านี้ก่อนทำอะไรเสมอ ดังนั้นเอเจนต์ไม่ได้แค่ทำตามคำแนะนำดีไซน์ทั่ว

57
00:03:32,341 --> 00:03:36,603
ๆ ไป แต่มันทำตามการตัดสินใจด้านดีไซน์ที่เฉพาะเจาะจงกับโปรเจกต์ของคุณ

58
00:03:36,603 --> 00:03:40,238
เป็นอะไรที่ดีมากที่ได้เห็น เพราะมันคือแนวคิดเดียวกับการให้

59
00:03:40,238 --> 00:03:44,750
spec (ข้อกำหนด) ที่เหมาะสมกับเอเจนต์ของคุณ แทนที่จะหวังว่ามันจะเดาเอาเอง

60
00:03:44,750 --> 00:03:48,762
ทีนี้มาพูดถึงคำสั่งกันบ้าง เพราะนี่คือจุดที่คุณค่าที่แท้จริงอยู่

61
00:03:48,762 --> 00:03:53,337
มีทั้งหมด 23 คำสั่ง และผมจะไม่ไล่ทุกคำสั่ง แต่ขอโชว์อันที่สำคัญที่สุดก่อน

62
00:03:53,337 --> 00:03:58,037
คำสั่งใหญ่คือ /impeccable craft นี่คือโฟลว์แบบครบวงจรที่เอเจนต์เริ่มจากปั้น

63
00:03:58,037 --> 00:04:02,174
UX (ประสบการณ์ผู้ใช้) วางแผนดีไซน์ แล้วก็ลงมือสร้างพร้อมวนซ้ำดูภาพ

64
00:04:02,174 --> 00:04:06,373
ถ้าคุณจะจำแค่คำสั่งเดียว ก็จำอันนี้แหละ จากนั้นก็มีคำสั่งกลุ่มรีวิว

65
00:04:06,373 --> 00:04:10,823
/impeccable critique ทำการรีวิวดีไซน์เชิง UX โดยดูที่ลำดับชั้นความสำคัญ

66
00:04:10,823 --> 00:04:14,646
(hierarchy) ความชัดเจน และว่าดีไซน์นั้นโดนใจผู้ใช้จริงหรือไม่

67
00:04:14,646 --> 00:04:17,717
/impeccable audit ตรวจในเชิงเทคนิค ทั้งการเข้าถึง

68
00:04:17,717 --> 00:04:20,914
(accessibility) ประสิทธิภาพ และความ responsive ส่วน

69
00:04:20,914 --> 00:04:24,361
/impeccable polish คือการเก็บงานรอบสุดท้ายก่อนปล่อยจริง

70
00:04:24,361 --> 00:04:27,306
แล้วก็มีชุดคำสั่งปรับแต่งที่ทำงานเหมือนปุ่มหมุน

71
00:04:27,306 --> 00:04:31,568
ถ้าดีไซน์น่าเบื่อเกินไป รัน /impeccable bolder เพื่อเพิ่มความจัดจ้าน

72
00:04:31,568 --> 00:04:34,765
ถ้าเสียงดังเกินไป /impeccable quieter ช่วยลดระดับลง

73
00:04:34,765 --> 00:04:37,773
/impeccable distill ลดทอนมันลงเหลือแค่แก่นแท้ มี

74
00:04:37,773 --> 00:04:41,659
colorize สำหรับเพิ่มสีอย่างมีกลยุทธ์ typeset สำหรับแก้ตัวพิมพ์

75
00:04:41,659 --> 00:04:46,861
layout สำหรับระยะห่างและจังหวะ และ animate สำหรับเพิ่มการเคลื่อนไหวที่มีจุดมุ่งหมาย

76
00:04:46,861 --> 00:04:52,125
แทนที่จะเป็นอนิเมชันเด้ง ๆ แบบเชย ๆ ยังมีคำสั่งที่ใช้งานได้จริงอีกหลายอันที่คนมักลืม

77
00:04:52,125 --> 00:04:55,447
/impeccable harden ไล่ตรวจ UI ของคุณและจัดการกับสถานะ

78
00:04:55,447 --> 00:04:59,396
error (ข้อผิดพลาด) ข้อความล้น (text overflow) การรองรับหลายภาษา

79
00:04:59,396 --> 00:05:03,031
(internationalization) และกรณีขอบ (edge cases) /impeccable

80
00:05:03,031 --> 00:05:06,478
onboard โฟกัสที่โฟลว์การใช้งานครั้งแรกและสถานะว่างเปล่า

81
00:05:06,478 --> 00:05:09,674
(empty states) ซึ่งเป็นสิ่งที่แทบทุกแอปที่สร้างด้วย

82
00:05:09,674 --> 00:05:16,004
AI มองข้ามไปเลย และยังมี /impeccable overdrive ที่เพิ่มเอฟเฟกต์สุดล้ำในเชิงเทคนิคเมื่อคุณอยากอวดหน่อย

83
00:05:16,004 --> 00:05:19,138
อีกหนึ่งจุดดีคือถ้าคุณใช้คำสั่งไหนบ่อย ๆ คุณสามารถ

84
00:05:19,138 --> 00:05:22,585
pin มันได้ เช่น รัน /impeccable pin audit ก็จะได้คำสั่ง

85
00:05:22,585 --> 00:05:26,220
/audit แบบสแตนด์อโลน ช่วยประหยัดการพิมพ์ให้คุณ เจ๋งมากครับ

86
00:05:26,220 --> 00:05:29,479
ทีนี้มาถึงส่วนโปรดของผม นั่นคือระบบตรวจจับ (detector

87
00:05:29,479 --> 00:05:32,738
system) Impeccable มาพร้อมกฎตรวจจับแบบ deterministic

88
00:05:32,738 --> 00:05:36,311
41 ข้อ และคำสำคัญคือคำว่า deterministic กฎเหล่านี้รันผ่าน

89
00:05:36,311 --> 00:05:41,325
CLI โดยไม่ใช้ LLM และไม่ต้องใช้ API key เลย มันเลยทำงานทันทีและไม่เสียค่าใช้จ่าย

90
00:05:41,325 --> 00:05:44,772
ซึ่งนักเรียนหลายคนที่ดูช่องผมคงชอบใจ เพราะคุณไม่ต้องเผา

91
00:05:44,772 --> 00:05:47,906
token แค่เพื่อตรวจดีไซน์ของคุณ วิธีใช้ก็แค่รัน npx

92
00:05:47,906 --> 00:05:52,105
impeccable detect แล้วชี้ไปที่สิ่งที่อยากตรวจ คุณจะส่งโฟลเดอร์ซอร์ส

93
00:05:52,105 --> 00:05:55,364
ไฟล์ HTML เดี่ยว ๆ หรือแม้แต่ URL สดก็ได้ ยังมีแฟล็ก

94
00:05:55,364 --> 00:05:58,310
--fast และ --json อีกด้วย คุณเลยเสียบมันเข้ากับ

95
00:05:58,310 --> 00:06:01,506
CI pipeline ได้ตรง ๆ และทำให้บิลด์ที่ปล่อยดีไซน์แย่

96
00:06:01,506 --> 00:06:05,204
ๆ ล้มเหลวได้ ซึ่งจริง ๆ แล้วเป็นตัวเลือกที่ดีมากทีเดียวครับ

97
00:06:05,204 --> 00:06:09,090
และกฎต่าง ๆ เองก็ตลกดี เพราะมันแทบจะเป็นบัญชีดำของมุกดีไซน์แบบ

98
00:06:09,090 --> 00:06:12,537
AI ทุกแบบ มันจับการไล่เฉดสีม่วงไปฟ้า ฟอนต์ที่ถูกใช้เกิน

99
00:06:12,537 --> 00:06:16,799
เช่น Inter และ Arial ข้อความสีเทาบนพื้นสี การใช้สีดำล้วนที่ควรไล่เฉด

100
00:06:16,799 --> 00:06:21,186
การ์ดซ้อนการ์ด ไอคอนมุมโค้งเหนือหัวข้อ การเคลื่อนไหวแบบเด้งและยืดหยุ่น

101
00:06:21,186 --> 00:06:24,507
(bounce and elastic easing) เรืองแสงเข้ม (dark glows)

102
00:06:24,507 --> 00:06:28,393
และขอบแท็บด้านข้าง (side tab borders) มันยังจับปัญหาคุณภาพทั่ว

103
00:06:28,393 --> 00:06:31,402
ๆ ไป เช่น ความยาวบรรทัดที่ยาวเกินไป ระยะ padding

104
00:06:31,402 --> 00:06:34,849
ที่อัดแน่น เป้าหมายการแตะ (touch targets) ที่เล็กเกินไป

105
00:06:34,849 --> 00:06:38,170
และลำดับชั้นหัวข้อที่ข้ามขั้น พูดง่าย ๆ คือมีคนนั่งลง

106
00:06:38,170 --> 00:06:41,179
จัดหมวดหมู่ร่องรอยทั้งหมดของดีไซน์ที่สร้างโดย AI

107
00:06:41,179 --> 00:06:44,689
แล้วเปลี่ยนมันเป็นกฎ lint (กฎตรวจสอบโค้ด) ซึ่งสุดยอดจริง

108
00:06:44,689 --> 00:06:50,455
ๆ ครับ แล้วความเห็นสุดท้ายของผมล่ะ ผมคิดว่านี่คือการใช้ระบบสกิลที่ฉลาดที่สุดเท่าที่เคยเห็นมา

109
00:06:50,455 --> 00:06:53,463
สกิลส่วนใหญ่ที่คนแชร์กันก็เป็นแค่กลุ่มพรอมต์ แต่

110
00:06:53,463 --> 00:06:56,597
Impeccable รวมสามสิ่งที่ทำงานด้วยกันจริง ๆ เข้าไว้

111
00:06:56,597 --> 00:06:59,605
นั่นคือบริบทโปรเจกต์แบบมีโครงสร้างผ่านโฟลว์ init

112
00:06:59,605 --> 00:07:02,551
ศัพท์คำสั่งร่วมสำหรับการทำงานออกแบบ และการ lint

113
00:07:02,551 --> 00:07:05,998
แบบ deterministic ที่ไม่เสีย token ให้คุณแม้แต่อันเดียว

114
00:07:05,998 --> 00:07:09,132
การผสมผสานแบบนี้แหละที่ทำให้มันเวิร์ก มันจะเปลี่ยน

115
00:07:09,132 --> 00:07:14,083
front end ที่สร้างโดย AI ทุกอันให้กลายเป็นดีไซน์ระดับรางวัลได้อย่างมหัศจรรย์ไหม

116
00:07:14,083 --> 00:07:17,843
ไม่ครับ โมเดลยังคงเป็นคนทำงานจริง ๆ และรสนิยมก็ยังเป็นรสนิยม

117
00:07:17,843 --> 00:07:20,914
ถ้าโมเดลต้นทางของคุณอ่อนด้าน front end Impeccable

118
00:07:20,914 --> 00:07:25,866
จะทำให้มันแย่น้อยลง ไม่ใช่ทำให้เก่งขึ้น และก็มีช่วงการเรียนรู้อยู่บ้างกับคำสั่ง

119
00:07:25,866 --> 00:07:28,874
23 คำสั่ง แม้ว่าในทางปฏิบัติคุณจะใช้ชีวิตอยู่กับ

120
00:07:28,874 --> 00:07:32,070
craft, critique, audit และ polish เป็นส่วนใหญ่ก็ตาม

121
00:07:32,070 --> 00:07:36,144
แต่เมื่อคิดว่ามันฟรี 100% โอเพนซอร์ส ใช้ได้กับเครื่องมือเขียนโค้ด

122
00:07:36,144 --> 00:07:40,218
AI แทบทุกตัว และแค่ระบบตรวจจับอย่างเดียวก็คุ้มค่าที่จะติดตั้งแล้ว

123
00:07:40,218 --> 00:07:43,415
ก็ไม่มีเหตุผลอะไรที่จะไม่ลอง ถ้าคุณกำลังสร้าง front

124
00:07:43,415 --> 00:07:47,175
end แบบไหนก็ตามด้วยเอเจนต์ AI แค่รันคำสั่ง NPX แล้วลองดูครับ

125
00:07:47,175 --> 00:07:51,374
มันไม่เพอร์เฟกต์ แต่ข้อดีของมันทำให้คุ้มสุด ๆ โดยรวมแล้วเจ๋งมากครับ

126
00:07:51,374 --> 00:07:54,508
เอาล่ะ แสดงความคิดเห็นของคุณในคอมเมนต์ได้เลยนะครับ

127
00:07:54,508 --> 00:07:57,454
ถ้าชอบวิดีโอนี้ ก็ช่วยพิจารณาบริจาคผ่านตัวเลือก

128
00:07:57,454 --> 00:08:01,026
super thanks หรือสมัครเป็นสมาชิกโดยกดปุ่ม join ด้วยนะครับ

129
00:08:01,026 --> 00:08:03,972
และช่วยกดไลก์วิดีโอนี้กับซับสไครบ์ช่องของผมด้วย

130
00:08:03,972 --> 00:08:06,040
แล้วเจอกันในวิดีโอหน้า สวัสดีครับ