รีวิว Solid Glass — design system ลุคกระจกทึบสำหรับแอป AI ต่อยอด shadcn/ui ด้วยไฟล์ CSS เดียว
ข้อมูล Repo
deeplethe/solid-glass- ภาษา
- TypeScript
- ดาว
- 2,197
- สร้างเมื่อ
- แก้ไขล่าสุด
เปลี่ยนสถานะผ่าน API: PATCH /api/reports/a66189ba-2be8-4294-ae53-235c4d3cfb89
แคปชันสำหรับ Facebook
ทำแอป AI แล้วหน้าตาดูธรรมดาไป ลองลุคกระจกตัวนี้ครับ ✨ Solid Glass คือ design system สำหรับแอป AI ลุคกระจกแบบทึบ ดูพรีเมียมแต่ข้อความยังอ่านง่าย ✅ ไฟล์ CSS เดียว ใช้กับ component ของ shadcn/ui ได้ทันทีไม่ต้องแก้ ✅ มี component สำหรับหน้า agent ทั้งช่องพิมพ์ ขั้นตอนการทำงาน diff และวงบอก context ✅ มีหน้าจอสำเร็จรูปให้ดูและก๊อปไปใช้ ✅ ปรับความหนา สี ความโค้ง แล้วได้ CSS ออกมาเลย เหมาะกับคนทำแอปแชต AI ด้วย React และ shadcn/ui 🔗 https://github.com/deeplethe/solid-glass #DesignSystem #shadcn #React #AIApp
ภาพปกแบบ HTML สด
แสดงจาก HTML ต้นฉบับที่ใช้สร้างภาพ ดาวน์โหลดเป็น PNG 1080×1350 ได้ทันที
สไตล์ Easy AI
1080×1350แก้ไข 2026-10-25
สไตล์ easy-app
1080×1350แก้ไข 2026-10-25
สรุป
Solid Glass เป็น design system สำหรับแอป AI ที่ให้ลุคกระจกแบบทึบ อยู่กึ่งกลางระหว่าง flat design กับ liquid glass ทำให้ข้อความอ่านง่ายแม้หน้าจอมีข้อมูลไหลเข้ามาตลอด เป็น stylesheet ไฟล์เดียวที่ใช้กับ component ของ shadcn/ui ได้ทันทีโดยไม่ต้องแก้ และมี component สำหรับหน้า agent เช่น ช่องพิมพ์ ขั้นตอนการทำงาน diff และวงแสดง context (MIT)
คืออะไร
Solid Glass คือ design system ที่ออกแบบมาสำหรับแอป AI ให้ลุคกระจกที่ดูทึบและมั่นคงเมื่อมองจากไกล แต่เห็นเนื้อวัสดุละเอียดเมื่อมองใกล้ ใช้ไฮไลต์ที่ขอบ เส้นขอบบาง และเงานุ่มสร้างมิติ
แนวคิดคือมันอยู่ระหว่าง flat design กับ liquid glass: flat ทึบไม่มีผิวสัมผัส ส่วน liquid glass ใสเกือบหมดจนข้อความต้องแย่งกับพื้นหลัง Solid Glass ให้เห็นแค่โครงร่างพอรู้ว่าเป็นกระจก แต่ไม่รบกวนการอ่าน
จุดเด่น
- เหตุผลที่ทำแบบนี้: แอป AI มีข้อมูลเปลี่ยนตลอด ทั้งคำตอบที่ไหลเข้ามา agent ที่กำลังทำงาน และการตัดสินใจที่รอคน Solid Glass จึงใช้พื้นผิวสีกลาง ๆ ให้หน้าจอสงบ ใช้ความลึกบอกลำดับความสำคัญ และเก็บสีกับการเคลื่อนไหวไว้เฉพาะ feedback ที่มีความหมาย
- เป็น stylesheet ไฟล์เดียว จับแต่ละส่วนของ component shadcn/ui จาก
data-slotและ class ที่มีอยู่แล้ว component เดิมไม่ต้องแก้ - มี component ของตัวเองสำหรับหน้าที่ agent ทำงาน:
status-glyph,turn-status,composer(ช่องพิมพ์),tool-steps,diff-view,ask-card,context-ring,task-notice,reasoningและตัวเล็ก ๆ อย่างpanel,tag,dot-loader - มี blocks คือหน้าจอเต็มที่ประกอบจาก component เช่นหน้า agent workspace ที่มี session เธรด ไฟล์ และงานเบื้องหลัง ไว้ดูและก๊อปไปใช้
- มีหน้า Create ให้หมุนปรับความหนา สี ฟอนต์ ความโค้ง ขอบ และ blur แล้วได้ CSS ไม่กี่บรรทัดออกมา
- ใช้ได้ทั้งธีมมืดและสว่าง (ธีมมืดคือแบบที่ตั้งใจออกแบบ)
เหมาะกับใคร
- นักพัฒนาที่ทำแอปแชต AI หรือหน้าจอ agent ด้วย React และ shadcn/ui
- คนที่อยากได้ลุคพรีเมียมแต่ยังอ่านง่าย ไม่ใสจนลายตา
เริ่มต้นใช้งาน
เริ่มจากโปรเจกต์ shadcn/ui (React 19, Tailwind CSS 4, Base UI)
npx shadcn@latest init
npx shadcn@latest add deeplethe/solid-glass/solid-glass
import ต่อจาก Tailwind และ stylesheet ของ shadcn แล้วลบตัวแปรสี :root และ .dark ที่ shadcn init เขียนไว้ เพราะ Solid Glass ใช้ชื่อเดียวกัน
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "./solid-glass.css";
component ของ Solid Glass ติดตั้งแบบเดียวกัน เช่น npx shadcn@latest add deeplethe/solid-glass/status-glyph
ข้อควรรู้
- License: MIT ส่วน component และเอกสารที่มาจาก shadcn/ui เป็นของผู้สร้าง shadcn/ui ภายใต้ MIT เช่นกัน
- ต้องใช้กับ shadcn/ui รุ่นที่ใช้ React 19, Tailwind CSS 4 และ Base UI ถ้าโปรเจกต์ไม่ใช่ stack นี้ต้องปรับเอง
- ความสดใหม่: สร้างเมื่อ 12 ต.ค. 2026 push ล่าสุด 22 ต.ค. 2026 มี issue เปิดอยู่ 3 รายการ
🔗 https://github.com/deeplethe/solid-glass
ข้อมูลจาก GitHub ณ 25 ต.ค. 2026: ⭐ 2,197 | ภาษา TypeScript | license MIT