Fudge — สอน AI ให้มีรสนิยม ด้วยการพาไปดูเว็บจริงพันกว่าเว็บก่อนลงมือ

MCP + Chrome extension ที่ให้ AI ค้นเว็บสวยจริงตาม font/สี/layout/screenshot แล้ว export เป็น Tailwind/CSS vars — แก้ปัญหา AI ทำเว็บโหล

เอาไปทำอะไรได้

สั่ง AI ว่า “ทำเว็บให้ดูโมเดิร์น ดูพรีเมียม” แล้วได้หน้าเว็บโหลๆ กลับมา — ปัญหาไม่ใช่ AI เขียนโค้ดไม่เป็น แต่คำว่า “สวย” มันกว้างเกินไปจน AI ต้องเดา Fudge (โดย Simdi Jinkins) เปลี่ยนวิธีบรีฟ: แทนที่จะบรีฟด้วยคำ ก็พา AI ไปดูเว็บจริงที่ดีไซน์ถึงเป็นตัวอย่างแทน — สโลแกนเขาชัดมาก “The entire web is now your design system”

มันมีฐานข้อมูลเว็บจริงกว่า 1,600 โดเมนที่ระบบเก็บรายละเอียดไว้ลึกถึงระดับ build ได้: ฟอนต์ (พร้อม attribution ว่าใครออกแบบ ค่ายไหน), พาเลตสี, spacing, layout — ไม่ใช่แค่รูป screenshot สวยๆ แบบ Mobbin/Dribbble

ค้นได้ละเอียดแค่ไหน

จุดที่ทำให้มันเหนือกว่าแกลเลอรีดีไซน์ทั่วไปคือแกนการค้น:

ค้นด้วย ภาษาคนธรรมดา — บรรยายสิ่งที่อยากได้ มันหาให้
ค้นตาม font / สี / layout / ประเภทหน้า (pricing, dashboard, sign-up, docs)
โยน screenshot ให้หาเว็บหน้าตาคล้ายกัน
หา ฟอนต์ที่ใกล้เคียงกับฟอนต์ X — ดูว่าเว็บจริงเอาฟอนต์นั้นไปจับคู่กับอะไร
ค้นแบบ ผสมหลายเงื่อนไขในคำถามเดียว รวมเว็บที่ save ไว้หลายตัวมาเทียบกันได้
ปลายทาง export เป็น Tailwind v4 / CSS variables / JSON เอาเข้าโค้ดต่อทันที

วิธีใช้คือต่อเป็น MCP server ให้ Claude Code หรือ agent อื่นเรียกฐานข้อมูลนี้ได้ระหว่างทำงาน + มี Chrome extension ไว้เซฟเว็บที่เจอเองเก็บเป็น library ส่วนตัว

ราคา

ล็อกอินใช้ฟรีได้ระดับหนึ่ง แต่ของจริง (MCP ไม่จำกัด, export token, commercial license) อยู่ใน tier Pro $15/เดือน (จ่ายรายปีลด 2 เดือน) — ถ้าจะเอาไปฝังในโปรดักต์ที่ขายต้องติดต่อทำดีลแยก

ที่ผมโดนคือตรงนี้

ไอเดียนี้ตรงจุดที่สุดในบรรดา tool สาย “แก้ AI ทำเว็บโหล” ที่เคยเก็บมา — เพราะมันวินิจฉัยโรคถูก: AI ไม่ได้ขาดฝีมือ มันขาดรสนิยม การพาไปดูงานจริงเยอะๆ ให้ตาถึงก่อนลงมือ คือวิธีเดียวกับที่คนฝึก designer กัน

แต่พอแกะดูจะเห็นว่าแก่นของมันคือ 3 ชิ้น: คลังเว็บที่คัดแล้ว + การ tag รายละเอียด + เสิร์ฟผ่าน MCP ซึ่งชิ้นส่วนพวกนี้ประกอบเองได้ — ผมเลยลองทำเวอร์ชันจิ๋วของตัวเอง: designddth.vercel.app — คัดเว็บที่ตาถึงจริง 55 เว็บ tag เป็น JSON แล้วทำหน้า gallery ไว้ค้น+copy ป้อน AI ได้เลย ไม่ต้องจ่ายรายเดือน — ของจริงมันลึกกว่าเยอะ (font similarity, screenshot match, export token) แต่สำหรับ use case “ให้ AI ดูตัวอย่างก่อนทำเว็บ” เวอร์ชันทำเองก็กินได้แล้ว

บทสรุปที่อยากให้จำ: จะจ่าย Fudge หรือทำเอง แก่นเดียวกันคือ เลิกบรีฟ AI ด้วยคำคุณศัพท์ แล้วบรีฟด้วยตัวอย่างจริงแทน — ผลต่างเห็นตั้งแต่งานแรก

🔗 design.withfudge.com

Photo: Hal Gatewood / Unsplash