PromptUI — แกลเลอรี UI ที่สร้างด้วย AI + Live Preview

เว็บโชว์เคส UI สวยๆ 124 ชิ้นที่ generate ด้วย AI — ดู live preview จริง + copy prompt ไปใช้ต่อ. โค้ดจริงทั้งชุด

เว็บแกลเลอรีรวม UI สวยๆ ที่ถูก 'generate' ด้วยโมเดล AI หลายตัว (Gemini/Claude/Kimi) — ผู้ใช้เข้ามาเลือกดูตามหมวดหมู่ (login/dashboard/landing/ecommerce/form/card), เปิดดู live preview ที่รันเป็นหน้าจริงในเบราว์เซอร์, ก็อป prompt ต้นฉบับ ที่ใช้สั่ง AI สร้าง UI นั้นไปใช้ต่อกับ ChatGPT/Claude ได้ทันที พร้อม badge บอกว่าสร้างจากโมเดลไหน (เทียบหลายเวอร์ชันได้) แกนแอพเป็น Clean Architecture บางแต่คม — หัวใจคือระบบ live-preview ที่ทำเอง: static component registry + dynamic route + route group แยก layout เพื่อ isolate CSS ให้แต่ละ demo คุมสไตล์ 100% + เทคนิค scaled-iframe ทำ thumbnail สด (ไม่พึ่ง sandpack) มาพร้อมคลัง demo component 130 ตัว (~51,000 บรรทัด) + prompt ครบทุกชิ้น — เอาไปเป็น starter แกลเลอรี/คลัง UI ของพี่เองได้เลย

สิ่งที่พี่จะได้สร้าง

• ระบบ live-preview ที่ทำเอง: static component registry (showcaseId → aiModel → Component) + dynamic route
• Route group แยก layout เพื่อ isolate CSS — ให้แต่ละ demo คุมสไตล์ตัวเอง 100% โดยไม่ชน global CSS
• Scaled-iframe thumbnail สด — ฝัง preview จริงย่อด้วย CSS scale (device-frame ทำเอง ไม่พึ่ง sandpack/react-live)
• แกลเลอรีกรองตามหมวดหมู่/แท็ก/โมเดล AI + pagination (Presenter pattern)
• Copy-to-clipboard prompt + animated feedback ด้วย react-spring
• Clean Architecture (ports/adapters) + Presenter + Server/Client factory (SSR + client hook)
• Theme / dark-mode switching ด้วย next-themes
• คลัง demo component 130 ตัวจาก AI หลายโมเดล (Gemini/Claude/Kimi) + prompt ต้นฉบับครบทุกชิ้น

โครงสร้างโปรเจค

ดูโค้ดตัวอย่างได้เลย — ไฟล์ที่มี 🔒 จะปลดล็อกเมื่อซื้อ

รีวิวจากผู้ซื้อ