tcher-design

คำศัพท์ที่คุณไม่รู้ว่าต้องการ — 1 skill, 23 คำสั่ง, และชุด anti-pattern สำหรับออกแบบ frontend ให้แม่นยำ

เริ่มต้นเร็ว: รัน npx tcher-design skills install ในโปรเจกต์ของคุณ

ทำไมต้องใช้ tcher-design?

AI ทุกตัวเรียนรู้จาก template เดิมๆ ถ้าไม่มีคำแนะนำ จะได้ผลลัพธ์ที่คาดเดาได้: Inter font, gradient สีม่วง, card ซ้อน card, ตัวอักษรสีเทาบนพื้นหลังสี

tcher-design แก้ปัญหานี้ด้วย:

• Skill ที่ครอบคลุม พร้อม reference file 7 ไฟล์เฉพาะด้าน
• 23 คำสั่ง สำหรับ audit, review, polish, distill, animate และอื่นๆ
• Anti-pattern ที่คัดสรรมา บอก AI ตรงๆ ว่าอะไรที่ไม่ควรทำ

สิ่งที่รวมอยู่

Skill: /tcher

| Reference | ครอบคลุม | |-----------|---------| | typography | ระบบตัวอักษร, การจับคู่ฟอนต์, modular scale | | color-and-contrast | OKLCH, tinted neutrals, dark mode, accessibility | | spatial-design | ระบบ spacing, grid, visual hierarchy | | motion-design | Easing curves, staggering, reduced motion | | interaction-design | Forms, focus states, loading patterns | | responsive-design | Mobile-first, fluid design, container queries | | ux-writing | Button labels, error messages, empty states |

23 คำสั่ง

| คำสั่ง | ทำอะไร | |-------|--------| | /tcher craft | วางแผนแล้ว build feature แบบครบวงจร | | /tcher teach | ตั้งค่าครั้งแรก: เก็บ context เขียน PRODUCT.md และ DESIGN.md | | /tcher document | สร้าง DESIGN.md จาก code ที่มีอยู่ | | /tcher extract | ดึง component และ token เข้า design system | | /tcher shape | วางแผน UX/UI ก่อนเขียน code | | /tcher critique | รีวิว UX design: hierarchy, ความชัดเจน | | /tcher audit | ตรวจสอบคุณภาพ (a11y, performance, responsive) | | /tcher polish | ขัดเกลาครั้งสุดท้ายก่อน ship | | /tcher bolder | ขยาย design ที่ดูจืดชืด | | /tcher quieter | ลดความเข้มของ design ที่ดูรุนแรงเกินไป | | /tcher distill | ลดให้เหลือแก่น ตัดความซับซ้อนออก | | /tcher harden | Error handling, i18n, edge cases | | /tcher onboard | First-run flow, empty states | | /tcher animate | เพิ่ม motion ที่มีความหมาย | | /tcher colorize | เพิ่มสีอย่างมีกลยุทธ์ | | /tcher typeset | แก้ font, hierarchy, ขนาด | | /tcher layout | แก้ layout, spacing, visual rhythm | | /tcher delight | เพิ่ม personality และความน่าจดจำ | | /tcher overdrive | ผลักดันเกินขีดจำกัดปกติ | | /tcher clarify | ปรับปรุง UX copy ที่ไม่ชัดเจน | | /tcher adapt | ปรับสำหรับอุปกรณ์และขนาดหน้าจอต่างๆ | | /tcher optimize | แก้ปัญหา UI performance | | /tcher live | Visual variant mode: iterate บน element ใน browser |

ใช้ /tcher pin <command> เพื่อสร้าง shortcut แบบ standalone เช่น /audit

ตัวอย่างการใช้งาน

/tcher audit blog           # ตรวจสอบ blog
/tcher critique landing     # รีวิว UX design
/tcher polish settings      # ขัดเกลาก่อน ship
/tcher harden checkout      # เพิ่ม error handling

การติดตั้ง

วิธีที่ 1: ผ่าน npx (แนะนำ)

npx tcher-design skills install

วิธีที่ 2: Copy จาก repository

Claude Code:

cp -r dist/claude-code/.claude your-project/

Cursor:

cp -r dist/cursor/.cursor your-project/

Gemini CLI:

cp -r dist/gemini/.gemini your-project/

CLI

ตรวจจับ anti-pattern โดยไม่ต้องใช้ AI harness:

npx tcher-design detect src/
npx tcher-design detect index.html
npx tcher-design detect https://example.com
npx tcher-design detect --fast --json .

License

Apache 2.0