Agent Dev Thai Academyprinciples · patterns · architecture

design-starter

ชุดเริ่มต้นที่ตัดสินเรื่องดีไซน์ไว้ให้แล้ว แอปที่ทำกับ agent จะไม่ออกมาหน้าตาแบบ AI

agent-dev-thai/design-starter บน GitHub ↗★ 4HTMLอัปเดต กรกฎาคม 2026Claude Code

ส่วนที่แพงของการทำแอปกับ agent มักไม่ใช่โค้ด แต่เป็นการสั่งแก้ดีไซน์ไปมา design-starter ตัดสินเรื่องพวกนั้นไว้ครั้งเดียวใน tokens.css ที่มีแค่ 6 role (bg, ink, accent, surface, line, muted) พื้นสีอุ่นไม่ใช่ดำสนิท และ accent สีเดียว ส่วน CLAUDE.md บอก agent ให้ใช้ token เหล่านี้ และห้ามของที่ฟ้องว่าเป็นงาน AI เช่น gradient text, glassmorphism, ใช้ Inter อย่างเดียว

ภาษาไทยจัดการไว้แล้ว ใช้ Trirong เป็นหัวข้อ IBM Plex Sans Thai Looped เป็นเนื้อความ โหลดเฉพาะช่วง unicode ภาษาไทย ใน examples/ มีแอปที่ทำเสร็จแล้ว 13 ตัวบน token ชุดเดียวกัน fork ไปเปลี่ยนเรื่องได้เลย โค้ดเป็น CC0 ส่วน font ใช้ SIL OFL

เริ่มใช้

  1. แบบ HTML ธรรมดา เปิด app.html ใน browser แล้วแก้ต่อจากตรงนั้น

  2. ใช้กับ agent ให้ copy tokens.css กับ CLAUDE.md เข้าโปรเจกต์ แล้วสั่งงานตามปกติ

  3. แบบ React / Vite

    cd react && npm install && npm run dev

  4. จะเปลี่ยนแบรนด์ แก้ --accent (และอาจ --bg) ใน :root ที่เดียว

ข้างในมีอะไร 6

  • tokens.css

    6 role ของสีและ font เป็น CSS custom properties รวมกฎภาษาไทย

  • CLAUDE.md

    วางในโปรเจกต์ให้ agent ใช้ token และไม่ย้อนไปใช้ค่า default แบบ AI

  • app.html

    โครงหน้าเริ่มต้นแบบ HTML ล้วน มี nav, card, button, form

  • react/

    token ชุดเดียวกันเป็น component สำหรับ Vite + React

  • examples/

    แอปตัวอย่าง 13 ตัว แต่ละตัวมี README บอกวิธีรัน

  • fonts/

    font ไทย 43 KB เฉพาะช่วงตัวอักษรไทย

ช่วยเรื่องไหนบนกระดาน 1

บทความที่พูดถึง 1