Agent Dev Thai Academyprinciples · patterns · architecture

praneet-front

skill ให้ Claude เขียน frontend ภาษาไทยไม่พัง ทั้ง font pairing และกฎ CSS ที่ห้ามแตะ

agent-dev-thai/praneet-front บน GitHub ↗★ 10CSSอัปเดต มิถุนายน 2026Claude Code

AI เขียน CSS ภาษาอังกฤษได้ดี แต่พอเป็นภาษาไทยมักพังแบบเงียบๆ line-height ต่ำจนวรรณยุกต์ชนบรรทัดบน ใส่ letter-spacing จนสระอำแตก ใช้ word-break: break-all จนตัดกลางพยางค์ หรือ font stack ไม่มี fallback ภาษาไทย skill นี้มีกฎ 7 ข้อที่มันจะไม่ทำผิด

มีแนวทาง (direction) 10 แบบพร้อมคู่ font ไทย+ละติน และ catalog font ไทย 16 ตระกูล แยกแบบมีหัวกับไม่มีหัว ใช้คู่กับ skill frontend-design โดยให้ frontend-design คุมกระบวนการออกแบบ ส่วน praneet-front คุมตัวอักษรตรงไหนที่มีภาษาไทย font เกือบทั้งหมดเป็นงานของ Cadson Demak

เริ่มใช้

  1. เพิ่ม marketplace ใน Claude Code

    /plugin marketplace add agent-dev-thai/praneet-front

  2. ติดตั้ง plugin

    /plugin install praneet-front

  3. หรือ clone มาเอง แล้วชี้ Claude ไปที่ skills/praneet-front/SKILL.md

    git clone https://github.com/agent-dev-thai/praneet-front.git

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

  • skills/praneet-front/SKILL.md

    ตัว skill มีกฎ 7 ข้อกับวิธีเลือกแนวทาง

  • assets/starter.css

    CSS ตั้งต้นที่วางใช้ได้เลย แยก font ไทยกับละตินด้วย unicode-range

  • references/directions.md

    10 แนวทางพร้อมคู่ font และ CSS ครบ เช่น SaaS, editorial, fintech, ราชการ

  • references/font-catalog.md

    รายชื่อ font ไทยใน Google Fonts แยกมีหัว/ไม่มีหัว น้ำหนัก และอารมณ์

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