TUI Studio – เครื่องมือออกแบบ UI สำหรับเทอร์มินัล

 (tui.studio)
33 คะแนน โดย GN⁺ 2026-03-14 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เครื่องมือในรูปแบบตัวแก้ไขคล้าย Figma ที่สามารถออกแบบ UI ของแอปพลิเคชันบนเทอร์มินัลได้ด้วยภาพ พร้อมอินเทอร์เฟซแบบลากและวาง
  • รองรับคอมโพเนนต์ TUI มากกว่า 20 รายการและเอนจินเลย์เอาต์คล้าย CSS ทำให้สามารถจัดวางองค์ประกอบอย่าง Box, Button, Table และอื่น ๆ พร้อมพรีวิว ANSI แบบเรียลไทม์
  • มีธีมสี 8 แบบและฟังก์ชันบันทึก·โหลดโปรเจกต์ โดยสามารถแชร์ระหว่างทีมผ่านไฟล์ .tui JSON ได้
  • ในอนาคตมีแผนรองรับฟังก์ชันส่งออกโค้ดไปยัง 6 เฟรมเวิร์ก เช่น Ink, BubbleTea, Blessed, Textual, OpenTUI, Tview (ขณะนี้ยังอยู่ในขั้นอัลฟาและยังใช้งานไม่ได้)
  • สามารถรันได้บน macOS, Windows และ Docker และเปิดซอร์สเป็นโอเพนซอร์ส

ภาพรวม

  • TUIStudio เป็นเครื่องมือสำหรับออกแบบส่วนติดต่อผู้ใช้แบบข้อความ (TUI) สำหรับแอปพลิเคชันบนเทอร์มินัลด้วยภาพ
    • ผู้ใช้สามารถจัดวางคอมโพเนนต์บนแคนวาสแบบภาพและปรับคุณสมบัติได้แบบเรียลไทม์โดยไม่ต้องเขียนโค้ด
    • มอบสภาพแวดล้อมการแก้ไขที่คล้าย Figma

ฟีเจอร์หลัก

  • Visual Canvas: จัดวางองค์ประกอบด้วยการลากและวาง และตรวจสอบผลลัพธ์ผ่านพรีวิว ANSI แบบเรียลไทม์
  • คอมโพเนนต์มากกว่า 20 รายการ: รวมถึง Screen, Box, Button, TextInput, Table, List, Tree, Tabs, Modal, Spinner, ProgressBar เป็นต้น
  • เอนจินเลย์เอาต์: รองรับโหมด Absolute, Flexbox, Grid และสามารถควบคุมคุณสมบัติได้คล้าย CSS
  • ธีมสี 8 แบบ: มี Dracula, Nord, Solarized, Monokai, Gruvbox, Tokyo Night, Nightfox, Sonokai เป็นต้น
  • บันทึก/โหลดโปรเจกต์: บันทึกในรูปแบบไฟล์ .tui JSON เพื่อรองรับการพกพาและการทำงานร่วมกัน

การส่งออกโค้ด (Export)

  • มีแผนรองรับ 6 เฟรมเวิร์ก: Ink(TypeScript), BubbleTea(Go), Blessed(JavaScript), Textual(Python), OpenTUI(TypeScript), Tview(Go)
  • สามารถแปลง UI ที่ออกแบบครั้งเดียวให้เป็นโค้ดสำหรับหลายเฟรมเวิร์กได้
  • ขณะนี้ยังอยู่ในขั้นอัลฟา ดังนั้นฟังก์ชันส่งออกโค้ดยังใช้งานไม่ได้

แพลตฟอร์มที่รองรับ

  • สามารถรันได้บน macOS, Windows, Docker
  • สำหรับ macOS หากถูกบล็อกการรันจากคำเตือนด้านความปลอดภัยของ Gatekeeper ต้องทำตามขั้นตอน “คลิกขวา → เปิด → Open Anyway”
  • บน Windows จะมีคำเตือน SmartScreen แสดงขึ้น และสามารถรันได้ด้วย “More info → Run anyway”
  • บน Linux สามารถติดตั้งได้โดยไม่มีข้อจำกัดพิเศษ (dpkg -i หรือดับเบิลคลิกไฟล์)

ไลเซนส์และการเข้าถึง

  • ขณะนี้อยู่ในช่วง early access และฟีเจอร์แก้ไขหลักเปิดให้ใช้ฟรี
  • ในอนาคตมีแผนเพิ่มฟีเจอร์แบบเสียเงินใน Pro เวอร์ชัน เช่น ฟีเจอร์ทีม การซิงก์คลาวด์ และการซัพพอร์ตแบบลำดับความสำคัญ
  • สามารถบันทึกในเครื่องและแชร์ผ่าน Git commit ได้โดยไม่ต้องมีบัญชีหรือเชื่อมต่อคลาวด์

เริ่มต้นใช้งาน

  • มีแอปเนทีฟสำหรับ macOS ที่ใช้ Apple Silicon (M1~M4)
  • ดาวน์โหลดแล้วรันได้ทันทีโดยไม่ต้องติดตั้ง
  • มีเวอร์ชันสำหรับ Windows และ Docker ให้ใช้งานด้วย

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2026-03-14
ความคิดเห็นจาก Hacker News

  • อยากให้วิดีโอเดโมบนหน้าแรกมี ปุ่มเล่น/หยุดชั่วคราวและแถบควบคุม
    เพื่อจะได้เลื่อนไปยังส่วนที่ต้องการได้ทันที
    วิดีโอจริงอยู่ที่นี่
    อีกอย่างคือสงสัยว่าตอนปรับขนาดเทอร์มินัล มีตัวเลือกให้ยึดองค์ประกอบไว้ทางซ้าย/ขวาหรือไม่ หรือถ้าทำหน้าต่างให้แคบลง ข้อความจะตัดบรรทัดหรือถูกดันออกนอกจอ

    • ใน Firefox สามารถคลิกขวาแล้วเลือก “Show controls” เพื่อแสดงแถบควบคุมได้

  • คิดว่า UI พวกนี้ไม่ใช่แบบข้อความล้วน
    แค่เพราะแสดงแนวคิดแบบ 1:1 ภายในช่องอักขระ ไม่ได้แปลว่าไม่ใช่ GUI
    แก่นของ UX สำคัญกว่า โดย TUI ถูกสร้างมาเพื่อประสิทธิภาพและพลังในการใช้งาน (เช่น lazygit)
    แต่ถ้าเพิ่มแท็บ ปุ่ม เช็กบ็อกซ์ที่คลิกด้วยเมาส์ได้ ก็เท่ากับนำ UX แบบ GUI มาใช้จริง ๆ และมันก็เป็นแค่ TUI ที่ดูเหมือน GUI

    • ไม่เห็นด้วยอย่างมาก Borland TurboVision เป็นหนึ่งในทูลคิท TUI ที่ดีที่สุดในยุค DOS และมีการรองรับเมาส์ในตัว ทั้งเช็กบ็อกซ์ ปุ่มตัวเลือก เมนู ฯลฯ
      ดู บทความวิกิของ Turbo Vision
    • ถ้าใช้องค์ประกอบที่ประกอบด้วยข้อความ มันก็คือ TUI
      อินเทอร์เฟซแบบไหนก็อาจมีประสิทธิภาพหรือไม่มีประสิทธิภาพได้ทั้งนั้น
      เหตุผลที่คนชอบ TUI คือ การเข้าถึงผ่าน SSH และความกระชับเรียบง่าย
    • TUI สร้างจากข้อความและทำงานภายใต้ข้อจำกัดของเทอร์มินัล
      GUI เป็นแบบกราฟิกที่ควบคุมในระดับพิกเซล
      เมาส์กับ TUI เกิดก่อน GUI เสียอีก และตอนนี้ก็กำลังกลับมาอีกครั้งด้วยเหตุผลเชิงปฏิบัติ
    • UI เหล่านี้ประกอบด้วยข้อความล้วน จึงชัดเจนว่าเป็น TUI
      การที่ส่งออกไปยังหลายเฟรมเวิร์ก TUI ได้ก็เป็นหลักฐานของเรื่องนี้
    • ถ้าดูตัวอย่างอย่าง Zellij จะเห็นว่าทำทุกอย่างด้วยคีย์บอร์ดได้ แต่บางครั้งจะคลิกแท็บด้วยเมาส์ก็ไม่ได้ทำให้ความสามารถลดลง
      ไม่คิดว่าจำเป็นต้องยึดติดกับการแบ่งแยกเชิงปรัชญาหรือเชิงภาษามากเกินไป

  • สิ่งที่น่าสนใจคือ รูปแบบที่เครื่องมือมักพัฒนาตามปัญหาช้ากว่า 5–10 ปี
    ความซับซ้อนด้านการปฏิบัติการมีอยู่แล้ว แต่กระจายอยู่ตามผู้เล่นรายย่อยหลายราย จึงทำให้ตลาดของโซลูชันที่เป็นระบบก่อตัวช้า
    นี่ไม่ใช่ทางตัน แต่เป็นสัญญาณ — ถ้ามีเครื่องมือตัวแรกที่เข้ากับเวิร์กโฟลว์จริงได้ ก็จะมี แรงทดอย่างมาก

  • ฉันไม่อยากให้ TUI ดูเหมือน GUI ความละเอียดต่ำ
    เสน่ห์ของ TUI คือการทิ้งความซับซ้อนแล้วมุ่งไปที่ การออกแบบเรียบง่ายที่เน้นข้อความเป็นศูนย์กลาง

    • แต่ TUI ในยุค 1980–1990 ก็หน้าตาเหมือน GUI ความละเอียดต่ำจริง ๆ
      ถ้ามีเมาส์ ก็ควรใช้มันเพื่อเพิ่ม ความค้นพบได้ (discoverability)
    • นั่นจึงเป็นเหตุผลที่ฉันไม่ชอบ TUI
      มันแสดงข้อมูลหรือปฏิสัมพันธ์ที่ซับซ้อนได้ยาก และก็ยากที่จะหาวิธีผสมผสานสิ่งต่าง ๆ เข้าด้วยกัน

  • ไอเดียน่าสนใจ แต่ตอนนี้ “ฟังก์ชันส่งออกโค้ดยังใช้งานไม่ได้”
    กล่าวคือยังอยู่ในสภาพที่สร้าง TUI ใช้งานจริงไม่ได้

    • ถึงอย่างนั้นก็ยังใช้ ออกแบบเลย์เอาต์ ได้
      เพียงแต่ยังไปไม่ถึงระดับที่พวกเขาตั้งเป้าไว้

  • ต่อให้ไม่สนใจคำวิจารณ์ นี่ก็ยังเป็นไอเดียที่ยอดเยี่ยม
    ให้ความรู้สึก คิดถึงยุค Borland และน่าตื่นเต้นที่จะได้เห็นพัฒนาการต่อจากนี้

    • แต่ก็ไม่ควรละเลยคำวิจารณ์ที่มีเหตุผล
      “ท่าทีที่เน้นแต่ด้านบวก” อาจกลับกลายเป็นผลเสียได้

  • อย่างที่เขียนไว้ใน Readme มันดูเหมือน ‘vibe-coded trash’
    ไม่เข้าใจว่าทำไมสิ่งนี้ถึงขึ้นมาหน้าแรกได้

    • จากนี้ไปซอฟต์แวร์แทบทั้งหมดคงจะใช้ AI ช่วยพัฒนา
      จะสร้างของที่ยอดเยี่ยมหรือของที่แย่ก็ได้ทั้งนั้นด้วย AI
      ความรู้สึกต่อต้าน AI ในเชิงอุดมการณ์เป็นความเห็นส่วนน้อยกว่าที่คิด

  • แค่ดูความประทับใจแรกของเว็บไซต์ก็พอจะรู้แล้วว่าโปรเจกต์นี้เป็น ‘vibe-coded’
    ช่วงนี้เว็บไซต์แนวนี้มี สไตล์ภาพลักษณ์ คล้าย ๆ กันหมด

    • พอเปิดหน้าเว็บ พัดลมเครื่องก็เริ่มหมุนทันที
      แอนิเมชันเยอะเกินไป และโดยเฉพาะ เว็บไซต์ genAI มักเป็นหนักกว่าปกติ

  • การสร้างโค้ดยังใช้ไม่ได้ แล้วจะใช้สิ่งนี้ไปทำไม
    ฟีเจอร์นั้นไม่ใช่แกนหลักของแอปนี้หรอกหรือ

    • ช่วงนี้กำลังมี กระแส TUI
      เป็นปรากฏการณ์ที่ผสมกันระหว่างสุนทรียะแนวย้อนยุคกับวัฒนธรรมแบบ ‘ผู้เชี่ยวชาญ’ ของคนที่เชี่ยวชาญคอมมานด์ไลน์
    • ดูเหมือนมีไว้เพื่อ โชว์เว็บไซต์ที่สร้างด้วย AI เท่านั้น

  • อยากให้หน้าแรกมี ภาพหน้าจอ ของผลลัพธ์ให้ดูมากกว่านี้มาก