Ecsight UI
ชุดคอมโพเนนต์สำหรับสร้างเว็บแอปของทีม Ecsight — พื้นฐานจาก shadcn/ui เคลื่อนไหวด้วย spring ที่กระชับ ใช้ไอคอน Solar และรองรับภาษาไทยตั้งแต่ต้น
เริ่มต้นใช้งาน
วาง setup prompt แล้วบอกสิ่งที่อยากได้ — agent อ่านกติกา ติดตั้ง และสร้างหน้าให้ตามมาตรฐานของ Ecsight
Setup prompt
คัดลอกไปใช้กับ agent ของคุณได้เลย
ใช้ได้กับ AI agent ทุกตัวที่อ่านไฟล์และรันคำสั่งได้
- Claude Code
- Cursor
- GitHub Copilot
- Gemini CLI
- Windsurf
- v0
- และตัวอื่น ๆ
วาง setup prompt
ใน agent ที่เปิดอยู่ในโปรเจกต์ของคุณ — ใช้ได้ทั้งโปรเจกต์ใหม่และโปรเจกต์เดิม
Set up Ecsight UI in this project.
1. Read https://ui.1ecsight.com/design.md and follow it for all UI work in this project.
2. If components.json doesn't exist, run `npx shadcn@latest init` first.
3. Add the registry to components.json:
"registries": { "@ecsight": "https://ui.1ecsight.com/r/{name}.json" }
4. Install the foundation: `npx shadcn@latest add @ecsight/foundation`
5. In the root layout, set <html lang="th" suppressHydrationWarning> and wrap the app in <Providers> from "@/components/providers".
6. Add this rule to the project's agent rules file (CLAUDE.md, AGENTS.md or .cursor/rules):
For all UI work, follow https://ui.1ecsight.com/design.md. Install components only from the @ecsight registry (`npx shadcn@latest add @ecsight/<name>`) — never hand-roll components, other icon sets, or native browser controls.
7. Run the app, confirm it builds, then tell me what you changed.ให้ agent จำกติกาไว้ใช้ทุกครั้ง
setup prompt จะเพิ่มบรรทัดนี้ให้เอง — หรือวางเองใน CLAUDE.md, AGENTS.md หรือ .cursor/rules
For all UI work, follow https://ui.1ecsight.com/design.md. Install components only from the @ecsight registry (`npx shadcn@latest add @ecsight/<name>`) — never hand-roll components, other icon sets, or native browser controls.
สี
Token เชิงความหมาย (semantic) ทั้งหมดอิงจาก --brand-h ตัวเดียว เปลี่ยนสีแบรนด์ได้ในที่เดียว
ตัวอักษร
IBM Plex Sans + IBM Plex Sans Thai Looped (มีหัว อ่านง่ายในตารางข้อมูล) · Plex Mono สำหรับรหัสและตัวเลข
ภาพรวมยอดขาย Revenue overview
หัวข้อส่วน Section heading
เนื้อหาหลักขนาด 16px สำหรับย่อหน้า ระยะบรรทัด 1.65 เพื่อไม่ให้สระบน-ล่างชนกัน เช่น “ปิ่น ญาติ ฎีกา ฐาน ฤๅษี”
ข้อความรอง 14px — ใช้ใน UI ส่วนใหญ่ (label, cell, description)
ORD-24081 · ฿1,284,500.00 · 2026-09-30
Motion
Snappy spring 150–320ms · motion ต้องอธิบายการเปลี่ยนสถานะเสมอ ไม่ใช่เพื่อความสวยอย่างเดียว · เคารพ prefers-reduced-motion
spring.snappydefault · press, toggle, pop-inspring.gentlelarge surfaces, layoutspring.bouncyicon swaps, checkmarksease.out · slowedge panels, progress, countersไอคอน Solar
Linear เป็นค่าเริ่มต้น สลับเป็น Bold เมื่อ active ผ่าน <Icon> · Bold Duotone เฉพาะ empty state
Components
46 คอมโพเนนต์ พร้อม motion — ติดตั้งทีละตัวผ่าน registry