ให้คะแนนโพสต์ Show HN เกี่ยวกับแพตเทิร์นการออกแบบ AI

 (adriankrebs.ch)
3 คะแนน โดย GN⁺ 2026-04-24 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • ช่วงหลังมานี้ จำนวนโพสต์ Show HN เพิ่มขึ้น และมีหน้าแลนดิ้งเพจที่ให้ความรู้สึกคล้ายกันปรากฏซ้ำ ๆ จึงมีการให้คะแนนแพตเทิร์นร่วมจาก 500 หน้า Show HN ล่าสุด
  • เกณฑ์คะแนนมี 15 รายการ ครอบคลุม ฟอนต์, สี, เลย์เอาต์ และแพตเทิร์น CSS โดยรวมถึงองค์ประกอบอย่าง hero จัดกึ่งกลาง, VibeCode Purple, เส้นขอบสีด้านซ้าย, shadcn/ui และ Glassmorphism
  • การตรวจจับทำโดยโหลดหน้าเว็บด้วย headless browser ที่ใช้ Playwright แล้วอ่าน DOM และ computed styles โดยไม่ใช้วิธีให้ LLM ตัดสินจากสกรีนช็อต
  • ผลลัพธ์แบ่งเป็น Heavy slop 21%, Mild 46%, Clean 33% และไม่ได้ตัดสินว่าเป็นเว็บไซต์ที่สร้างด้วย AI จากแพตเทิร์นเดียว แต่แบ่งช่วงตามจำนวนแพตเทิร์นที่ตรงเงื่อนไข
  • แนวโน้มนี้ใกล้เคียงกับ การขาดแรงบันดาลใจ มากกว่าจะเป็นปัญหาร้ายแรง และต่อไปอาจต้องใส่ใจงานออกแบบมากขึ้นเพื่อให้โดดเด่นท่ามกลางผลลัพธ์ที่คล้ายกัน

การเพิ่มขึ้นของ Show HN และการให้คะแนนแพตเทิร์นการออกแบบ

  • จำนวนโพสต์ Show HN เพิ่มขึ้นมาก จนทีมดูแล Hacker News ถึงกับ จำกัดการโพสต์ Show HN สำหรับบัญชีใหม่
    • ช่วงที่ลดลงในเดือนมีนาคม 2026 ก็ตรงกับช่วงที่เริ่มใช้ /showlim ตามที่ dang ชี้ไว้
  • ในโปรเจ็กต์ Show HN ช่วงหลังมี ภาพลักษณ์ที่ดูทั่วไปและปลอดบุคลิก ปรากฏซ้ำ ๆ จึงนำมาวัดเป็นคะแนนจาก 500 หน้าแทนการปล่อยไว้แค่ความรู้สึกเชิงอัตวิสัย
  • เป้าหมายของการให้คะแนนคือ 500 หน้าแลนดิ้งเพจ Show HN ล่าสุด และจัดหมวดหมู่ตามแพตเทิร์นการออกแบบ AI ที่พบร่วมกัน

เกณฑ์แพตเทิร์นการออกแบบ AI

  • แพตเทิร์นร่วมส่วนใหญ่จัดกลุ่มได้เป็น ฟอนต์, สี, ลักษณะเฉพาะของเลย์เอาต์ และแพตเทิร์น CSS
  • เส้นขอบสีด้านซ้าย ทำหน้าที่เป็นสัญญาณที่ค่อนข้างแรงของงานออกแบบที่สร้างด้วย AI และพบซ้ำจริงในหลายหน้า

  • ฟอนต์

    • โดยรวมมีการใช้ Inter อยู่มาก แต่จะเด่นเป็นพิเศษใน hero headline ที่จัดกึ่งกลาง
    • LLM ยังใช้ชุดอย่าง Space Grotesk, Instrument Serif, Geist บ่อยเช่นกัน
    • ยังรวมถึงรูปแบบ hero ที่ใช้ Inter เป็นหลักแล้วเน้นเพียงคำเดียวด้วย serif italic
    โฆษณา

  • สี

    • สีที่เรียกว่า VibeCode Purple ปรากฏซ้ำบ่อย
    • มักเห็นชุดค่าผสมของ โหมดมืดตลอดเวลา, ข้อความเนื้อหาสีเทากลาง และป้ายกำกับเซกชันแบบตัวพิมพ์ใหญ่
    • ในธีมมืด บางกรณีคอนทราสต์ของข้อความเนื้อหาผ่านเกณฑ์แบบฉิวเฉียดเท่านั้น
    • การ ใช้กราเดียนต์มากเกินไป โดยรวม รวมถึง color glow ขนาดใหญ่และ box shadow สี ก็ถูกนับเป็นแพตเทิร์นด้วย

  • ลักษณะเฉพาะของเลย์เอาต์

    • hero ที่ จัดกึ่งกลาง โดยใช้ฟอนต์ sans ทั่วไปถูกใช้ซ้ำบ่อย
    • มักพบเลย์เอาต์ที่มี badge วางอยู่เหนือ H1 ของ hero โดยตรง
    • มีแพตเทิร์นที่ใส่ เส้นขอบสี ไว้ด้านบนหรือขอบซ้ายของการ์ด
    • มีการจัดวาง feature card แบบเดียวกัน ซ้ำ ๆ พร้อมไอคอนด้านบน
    • ลำดับขั้น 1, 2, 3, แถวแบนเนอร์สถิติ, แถบด้านข้างหรือนำทางที่มีอีโมจิไอคอน, รวมถึงหัวข้อและป้ายกำกับเซกชันแบบตัวพิมพ์ใหญ่ ก็รวมอยู่ในเกณฑ์

  • แพตเทิร์น CSS

    • shadcn/ui

      • Glassmorphism
โฆษณา

วิธีตรวจจับและผลลัพธ์

  • แต่ละเว็บไซต์ถูกโหลดด้วย headless browser ที่ใช้ Playwright และมีสคริปต์ขนาดเล็กในหน้าอ่าน DOM กับ computed styles เพื่อตรวจหาแพตเทิร์น
    • ทุกแพตเทิร์นตรวจด้วย การตรวจ CSS หรือ DOM แบบกำหนดแน่นอน และไม่ได้ใช้วิธีจับสกรีนช็อตแล้วให้ LLM ตัดสินทางสายตา
  • วิธีนี้อาจทำให้เกิด ผลบวกลวง ได้ แต่จากการ QA แบบแมนนวลพบว่าอยู่ราว 5~10%
  • มีการเปิดทางไว้ให้พิจารณาเผยแพร่โค้ดให้คะแนน สำหรับผู้ที่อยากนำไปทำซ้ำ ปรับปรุง หรือใช้ให้คะแนนเว็บไซต์ของตัวเอง
  • ไม่ได้ตัดสินว่าเป็นเว็บไซต์ที่สร้างด้วย AI จากแพตเทิร์นเดียว แต่แบ่งเป็น 3 ช่วงตามว่า ตรงกับกี่ข้อจาก 15 แพตเทิร์น
    • Heavy slop: ตรง 5 แพตเทิร์นขึ้นไป, 105 เว็บไซต์, 21%
    • Mild: 2~4 แพตเทิร์น, 230 เว็บไซต์, 46%
    • Clean: 0~1 แพตเทิร์น, 165 เว็บไซต์, 33%
  • ผลลัพธ์นี้ใกล้เคียงกับ การขาดแรงบันดาลใจ มากกว่าจะเป็นปัญหาร้ายแรง
    • ในการพิสูจน์ไอเดียธุรกิจ แต่เดิมงานออกแบบฉูดฉาดก็ไม่ใช่หัวใจสำคัญอยู่แล้ว และก่อนยุค AI เว็บไซต์จำนวนมากก็ดูคล้ายกันเหมือนสมัย Bootstrap
    • มีความต่างชัดเจนระหว่างกรณีที่เจ้าของลงมือเกลางานออกแบบเอง กับกรณีที่นำผลลัพธ์ตั้งต้นจาก LLM ไปปล่อยใช้งานแทบตรง ๆ
    • ก่อนยุค LLM หากใช้เทมเพลต CSS/HTML แบบเดิม ๆ ตรง ๆ ก็เกิดปรากฏการณ์คล้ายกันได้
  • ต่อจากนี้ เพื่อให้โดดเด่นท่ามกลาง slop ลักษณะนี้ อาจจำเป็นต้องกลับมาใส่ใจกับงานออกแบบมากขึ้นอีกครั้ง
  • ในขณะเดียวกัน หากผู้ใช้งานหลักของเว็บกลายเป็น AI agent ความสำคัญของงานออกแบบจะเหลืออยู่แค่ไหนก็ยังไม่แน่ชัด

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2026-04-24
ความคิดเห็นใน Hacker News

  • ตอนนี้มองว่าโปรเจกต์ข้างเคียงส่วนใหญ่ถูกสร้างขึ้นด้วยความช่วยเหลือจาก AI
    ปกติก็มีข้อจำกัดเรื่องเวลาอยู่แล้ว ดังนั้นถ้า AI ช่วยประหยัดเวลาได้ ก็แทบไม่มีเหตุผลที่จะไม่ใช้
    แถมยังเป็นที่ที่เหมาะมากสำหรับลองเครื่องมือ AI ใหม่ ๆ ที่ยากจะทดลองในงานบริษัท
    ตอนแรกชื่อบทความนี้จับประเด็นสำคัญได้ไม่ค่อยตรง และใช้คำว่า vibe coded ผิด จนสื่อหัวข้อที่จริง ๆ น่าสนใจกว่าอย่างความเหมือนกันทางภาพของฟรอนต์เอนด์ที่ AI สร้างขึ้นได้ไม่ดีพอ
    ตอนนี้ชื่อดีขึ้นแล้ว และ "Show HN submissions tripled and now mostly have the same vibe-coded look" ก็ดูแม่นยำกว่ามาก

    • สิ่งที่น่ารำคาญที่สุดในหน้าเว็บที่มี LLM ช่วยสร้าง โดยเฉพาะที่เห็นเด่นใน Claude Code คือมันมักมองข้ามแนวทางพื้นฐานด้านการเข้าถึงเว็บมากเกินไป
      เห็นบ่อยเกินไปว่าเป็นเว็บโหมดมืด แต่ข้อความหลักกับข้อความรองกลับใช้สีน้ำตาลเข้มหรือโทนเบจจนอ่านยากมาก
      ถ้าจะเล่นแบบปลอดภัย อัตราส่วนความต่างระหว่างข้อความกับพื้นหลังควรอย่างน้อยประมาณ 4:1
      เรื่องนี้แก้ก็ไม่ยาก แค่ใส่ Web Content Accessibility Guidelines เข้าไปใน skill ก็พอ
      https://webaim.org/resources/contrastchecker
    • ไม่อยากใช้ AI กับโปรเจกต์ส่วนตัว
      ความสนุกมันอยู่ที่การขบปัญหา แก้ปัญหา ลงมือทำเอง เรียนรู้สิ่งใหม่ ๆ และจินตนาการว่ามันอาจจะดังหรือมีประโยชน์ได้ ถ้าแค่ดีดนิ้วให้ AI สร้างผลลัพธ์ออกมา ความสนุกส่วนนั้นก็หายไป
      ในงานประจำจะใช้ AI เพื่อลดงานน่าเบื่อก็ว่าไป แต่ไม่อยากทำแบบนั้นกับโปรเจกต์ข้างเคียงด้วย
      แถมการจ่าย 200 ดอลลาร์ ต่อเดือนเพื่อซื้อสิทธิ์ใช้ AI กับโปรเจกต์ส่วนตัวยังดูไร้สาระเกินไปสำหรับฉัน
    • มันขึ้นอยู่กับว่าเป้าหมายคืออะไร
      โปรเจกต์ข้างเคียงของฉันทั้งหมดเริ่มจากอยากเรียนรู้อะไรบางอย่าง ดังนั้นการกดปุ่ม ข้ามไปตอนจบ ด้วย AI จึงไม่เข้าท่าเลย
    • AI อาจช่วยประหยัดเวลาได้ แต่บ่อยครั้งก็ทำให้ข้ามการคิดอย่างเป็นต้นฉบับในโดเมนนั้นไปด้วย
      ทั้งที่ในบริบทของ "ขอโชว์โปรเจกต์ข้างเคียงของฉัน" สิ่งที่คนอยากรู้ก็คือกระบวนการคิดตรงนั้นเอง
    • ไม่ค่อยเข้าใจว่ามันมีความเร่งด่วนที่จะต้องทำให้เสร็จมากแค่ไหนสำหรับโปรเจกต์ข้างเคียง
      ปกติสิ่งที่เร่งด่วนจริง ๆ มักเป็นโปรเจกต์เชิงพาณิชย์มากกว่า

  • รายการแพตเทิร์นดีไซน์ก็ดีอยู่ แต่คิดว่าองค์ประกอบใหญ่ที่ตกหล่นไปคือ rounded rect grid
    https://correctarity.com/roundedrects
    บางทีสิ่งที่บทความเรียกว่า "Icon-topped feature card grid" อาจใกล้เคียงกับชื่ออย่างเป็นทางการของมันที่สุด

    • Card UI เป็นกระแสมาพักใหญ่แล้ว และจำแทบไม่ได้ด้วยซ้ำว่าครั้งสุดท้ายที่เห็นระบบดีไซน์ซึ่งใช้มุมเหลี่ยมจัด ๆ คือเมื่อไร
      อย่างน้อยก็เป็นกระแสที่ต่อเนื่องมาตั้งแต่ยุคที่ Apple ยื่นสิทธิบัตร rounded corners
    • อันนี้ดูได้รับอิทธิพลจากสไตล์ NextJsมากกว่า LLM

  • ควรดูอันนี้ประกอบด้วย
    https://news.ycombinator.com/showlim
    บัญชีที่มีประวัติบน HN ไม่มาก ตอนนี้มักได้เห็นหน้านี้ และมันก็ส่งผลต่อแนวโน้มขาลงทางขวาของกราฟในโพสต์ต้นทางด้วย
    Ask HN: Please restrict new accounts from posting - https://news.ycombinator.com/item?id=47300329 - March 2026 (515 comments)
    Is Show HN dead? No, but it's drowning - https://news.ycombinator.com/item?id=47045804 - Feb 2026 (425 comments)

  • ผู้คนกำลังเขียนโค้ดด้วยเครื่องมือปี 2026 แต่ก็ยังอยากถูกประเมินด้วยมาตรฐานปี 2016
    ในปี 2016 ถ้าเห็นโค้ด 10,000 บรรทัด มันมี proof-of-work อยู่ในตัวระดับหนึ่งอยู่แล้ว และย่อมหมายถึงการทดสอบ การคิด และการลองผิดลองถูกขัดเกลามาหลายเดือนตามมาโดยธรรมชาติ
    แต่โค้ด 10,000 บรรทัดในปี 2026 อาจแปลแค่ว่าเสียเงินกับโทเคนไปนิดหน่อย และถ้าเป็นงานอย่างแปลง OpenAPI spec ขนาดใหญ่ให้เป็น API ของภาษาใดภาษาหนึ่ง มันก็อาจถูกสร้างขึ้นได้เร็วมากในครั้งเดียว
    มากกว่า 90% ของโปรเจกต์อาจไม่เคยถูกรันในสถานการณ์จริงแม้แต่ครั้งเดียว และมีความเป็นไปได้มากพอว่ามันเพิ่งผ่านแค่ยูนิตเทสต์ที่ AI เขียนให้ตัวเอง
    ตัวมันเองไม่ใช่เรื่องผิดโดยเนื้อแท้ แต่เกณฑ์การประเมินต้องเปลี่ยน
    ต่อให้กำแพงของ Show HN ไม่จำเป็นต้องสูงมาก ก็ยังควรสูงกว่าแค่ "พิมพ์อะไรไม่กี่บรรทัดลงในกล่องข้อความ" อยู่บ้าง
    ไม่ใช่เพราะมันเลวร้าย แต่เพราะต้นทุนในการดึงดูดความสนใจของมนุษย์ซึ่งเป็นของมีค่ามันถูกลงเกินไป
    แม้จะขมขื่นอยู่บ้าง แต่จริง ๆ แล้วโปรเจกต์ประเภทที่สร้างได้ด้วยแค่ไอเดียกับพรอมป์ต์ไม่กี่อันก็มีอยู่เยอะแล้วตั้งแต่ก่อน AI
    เครื่องมือโค้ดดิ้งด้วย AI แค่ทำให้รายการ "โปรเจกต์ที่เห็นบ่อยเกินไป" ยาวขึ้นอีกนิด และในความเป็นจริงมันให้ความรู้สึกเหมือนโปรเจกต์ประเภทเดิมที่ล้นอยู่แล้วกำลังถาโถมเข้ามาหนักกว่าเดิม

    • อันนี้จริง ๆ แล้วใช้ได้ตรงตัวกับอุตสาหกรรม AI ทั้งหมดตอนนี้
      เห็นบ่อยว่ามีคนทำผลิตภัณฑ์ขึ้นมาชิ้นหนึ่งในช่วงสุดสัปดาห์ แล้วติดราคาเกินจริงโดยอ้างอิงจากราคาที่สินค้าประเภทนั้นเคยได้รับเมื่อไม่กี่ปีก่อน
      เหมือนจะยอมรับได้ยากว่าราคานั้นเดิมทีสะท้อนความพยายามที่ต้องใช้เพื่อไปให้ถึงจุดนั้น
      ตอนนี้สถานการณ์เปลี่ยนไปแล้ว
    • เรื่องนี้ใช้ได้กับพื้นที่ที่กว้างกว่าแค่การเขียนโค้ดด้วย
      คนทำ slide deck ที่หวือหวาเกินจริงหรือทำ branding ใหม่ แล้วก็อยากให้คนประเมินเหมือนเป็นความสำเร็จตามมาตรฐานเก่า สุดท้ายก็กลายเป็นสร้างความสำเร็จให้ตัวเองเสียเอง

  • ไม่ค่อยคล้อยตามคำพูดที่ว่าเมื่อ AI agent กลายเป็นผู้ใช้หลักของเว็บแล้ว ดีไซน์จะสำคัญแค่ไหนกันเชียว
    ถ้าโลกเบื้องล่างถูกทำลายด้วยโรคภัยและสงคราม และปนเปื้อนด้วยเช็คนวัตกรรมลม ๆ แล้ง ๆ กับเศษซากโลหะหนัก เราก็ควรสร้าง Eden แห่งใหม่
    ฉันชอบแนวคิดของ Gemini แต่ก็ยังอยากสื่อมันออกมาเป็นสื่อเชิงภาพ
    แม้อยู่ภายใต้ข้อจำกัดระดับ Dillo ก็น่าจะยังสร้างสิ่งสวยงามได้ และถ้าใช้ Wireguard mesh เป็นชั้นขนส่ง พร้อมระบบให้และถอนคำเชิญตามความไว้วางใจส่วนตัว
    ก็อาจทำให้ไอเดียกลับมามีชีวิตอีกครั้งในที่ที่แพลตฟอร์มยักษ์ไม่ได้ขยายและถัวเฉลี่ยทุกอย่างจนเรียบหมด

  • ถ้าพูดถึงดีไซน์ เว็บไซต์โปรเจกต์สายเทคตั้งแต่ solo founder SaaS ไปจนถึง บริษัทที่ YC ลงทุน 2 พันล้านดอลลาร์ ก็ดูคล้ายกันมาหลายปีแล้ว
    ตอนนี้ได้แต่หวังว่าอย่างน้อย LLM จะ hallucinate CSS ที่ต่างออกไปบ้างเป็นครั้งคราว

    • เดิมทีอุตสาหกรรมซอฟต์แวร์ก็เป็นสายวิ่งตามเทรนด์อยู่แล้ว
      มีกระแสอย่าง Bootstrap, Web 2.0, Tailwind, Material UI, Rails, NextJS วนมาเรื่อย ๆ และตอนนี้ก็แค่เป็น AI เท่านั้นเอง
      ไม่จำเป็นต้องทำเหมือนว่าเมื่อก่อนวงการนี้ไม่เคยใช้ทางลัด
      จะอวดโค้ดเชิงช่างฝีมือก็ได้ แต่ฝั่งที่ใช้ซอฟต์แวร์เพื่อธุรกิจจริง ๆ เดิมทีก็ไม่ค่อยสนใจเรื่องนั้นอยู่แล้ว
      แถมปรัชญาของวิทยาการคอมพิวเตอร์เองก็เหมือนจะไปทาง ทุกคนควรเขียนโค้ดได้ ไม่ใช่หรือ
      ที่ผ่านมาก็ต่อต้านกำแพงด้านไลเซนส์ด้วย ดังนั้นตอนนี้ที่โค้ดกลายเป็น commodity และกำแพงการเข้าถึงแทบหายไป ก็ดูเป็นส่วนต่อเนื่องของแนวคิดนั้น

  • บางโพสต์ใน Show HN ดูน่าประทับใจในตอนแรก แต่พอเข้าไปดูจริงกลับใช้ไม่ได้เลย หรือเห็นชัดมากว่าเป็น โค้ดจาก AI ที่พยายามทำเหมือนมีคนเขียนเอง
    แต่ก่อน GitHub ยังพอใช้เป็นสัญญาณในเรซูเม่ได้ระดับหนึ่ง แต่ตอนนี้ถ้า AI ทำไปซะเกือบหมด มูลค่าของสัญญาณนั้นก็แทบหายไปเลย

  • อยากให้แสดงไม่ใช่แค่สรุป แต่รวมถึงผลลัพธ์แบบละเอียดด้วย
    เช่น แสดงรายการโพสต์ที่ได้คะแนนสูงและต่ำไปพร้อมกัน เพื่อให้คนเช็ก vibe ด้วยตัวเองได้ว่าวิธีวิทยามันสมเหตุสมผลไหม
    และแทนที่จะใช้พายชาร์ตแบ่งหมวดหมู่แบบค่อนข้างตามอำเภอใจในช่วงเวลาเดียว การแสดงแนวโน้มตามเวลาน่าจะดีกว่า

  • ถ้าเป็นช่วง MVP หรือช่วงสำรวจไอเดีย UI ที่ LLM สร้างก็ถือว่ายอมรับได้
    แต่พอของเล่นเริ่มกลายเป็นผลิตภัณฑ์ และถึงจุดที่ต้องเอาจริง ก็ต้องกลับมาขัด UI ใหม่
    สำหรับอินเทอร์เฟซที่ทำเพื่อมนุษย์นั้น สัมผัสจากมือมนุษย์ ยังมีคุณค่าในตัวเอง
    ปัญหาที่ AI ทำให้ HN ล้นไปด้วยบอตนั้นเกี่ยวข้องกันก็จริง แต่เป็นอีกประเด็นหนึ่งที่คนละลักษณะ

  • ไม่คิดว่าต้นตอของปัญหาคือการสร้างด้วย AI เอง
    แต่ UI/UX ที่ AI สร้างแบบลวก ๆ นั่นแหละคือปัญหาจริง
    ความงามแบบ vibe-coded มักดูเหมือนสัญญาณว่า "ไม่ได้คิดลึกจริง ๆ ว่ามันทำงานอย่างไร" และต่อให้เทคโนโลยีข้างใต้จะแข็งแรง มันก็ยังเป็นสัญญาณอันตรายได้อยู่ดี